query常用方法总结

query常用方法总结： $("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("") $("div #ID") //取某个控件中 控件 $("#ID #ID") // 通过控件ID取其中的控件 $("标签.class样式名") //通过class来取控件 $("#ID").val(); //取value值 $("#ID").val(""); //赋值 ### Query 常用方法总结 在Web开发中，尤其是使用JavaScript进行DOM操作时，jQuery提供了一套非常方便的方法来简化这些操作。本文将对给定的jQuery查询方法进行详细的解释，并结合实际应用场景来帮助理解。 #### 取HTML元素 ```javascript $("标签名") // 取HTML元素 document.getElementsByTagName("") ``` **解释：** - `$("标签名")`: 使用jQuery选择器选取页面中的所有指定标签名的元素。 - `document.getElementsByTagName("")`: 使用原生JavaScript获取所有指定标签名的元素集合。 **示例：** 假设我们要选取页面上所有的`<p>`标签，则可以使用以下代码： ```javascript var paragraphs = $("p"); // 使用jQuery var paragraphsNative = document.getElementsByTagName("p"); // 使用原生JavaScript ``` #### 获取单个控件 ```javascript $("#ID") // 取单个控件 document.getElementById("") ``` **解释：** - `$("#ID")`: 通过ID选择页面中的一个元素。 - `document.getElementById("")`: 使用原生JavaScript根据ID获取页面中的一个元素。 **示例：** 如果页面中有一个ID为`example`的元素，我们可以这样获取它： ```javascript var element = $("#example"); // 使用jQuery var elementNative = document.getElementById("example"); // 使用原生JavaScript ``` #### 选取特定位置的元素 ```javascript $("div #ID") // 取某个控件中的控件 $("#ID #ID") // 通过控件ID取其中的控件 $("标签.class样式名") // 通过class来取控件 ``` **解释：** - `$("div #ID")`: 在所有`<div>`元素中选取ID为`ID`的子元素。 - `$("#ID #ID")`: 在ID为`ID`的元素中选取另一个ID为`ID`的子元素。 - `$("标签.class样式名")`: 选取所有具有指定类样式的指定标签名的元素。 **示例：** 假设有如下的HTML结构： ```html <div id="container"> <p class="info">这是信息</p> <div id="inner"> <p>内部文本</p> </div> </div> ``` 我们可以这样选取元素： ```javascript var innerDiv = $("div #inner"); // 选取内部div var innerParagraph = $("#inner p"); // 选取内部div中的段落 var infoParagraph = $("p.info"); // 选取具有info类的段落 ``` #### 获取或设置属性值 ```javascript $("#ID").val(); // 取value值 $("#ID").val(""); // 赋值 ``` **解释：** - `$("#ID").val()`: 获取指定ID的元素的`value`属性值。 - `$("#ID").val("")`: 设置指定ID的元素的`value`属性值。 **示例：** 对于一个输入框： ```html <input type="text" id="inputField" value="默认值"> ``` 我们可以这样操作： ```javascript var currentValue = $("#inputField").val(); // 获取当前值 $("#inputField").val("新值"); // 设置新值 ``` #### 显示与隐藏元素 ```javascript $("#ID").hide(); // $("#ID").show(); // 显示 ``` **解释：** - `$("#ID").hide()`: 隐藏指定ID的元素。 - `$("#ID").show()`: 显示指定ID的元素。 **示例：** 隐藏与显示一个按钮： ```html <button id="button">点击我</button> ``` ```javascript $("#button").hide(); // 隐藏按钮 $("#button").show(); // 显示按钮 ``` #### 操作文本内容 ```javascript $("#ID").text(); // 相当于获取innerHTML $("#ID").text(""); // 相当于innerHTML="" ``` **解释：** - `$("#ID").text()`: 获取指定ID的元素的文本内容。 - `$("#ID").text("")`: 设置指定ID的元素的文本内容为空。 **示例：** 获取和设置文本内容： ```html <p id="para">这是段落</p> ``` ```javascript var textContent = $("#para").text(); // 获取文本内容 $("#para").text("新的文本内容"); // 设置新的文本内容 ``` #### 修改CSS样式 ```javascript $("#ID").css("属性", "值") // 修改CSS样式 ``` **解释：** - `$("#ID").css("属性", "值")`: 修改指定ID的元素的CSS样式。 **示例：** 修改元素的边框样式： ```html <div id="box"></div> ``` ```javascript $("#box").css("border", "1px solid red"); // 添加边框 ``` #### 查找与返回元素 ```javascript $("form#id").find("#子元素id").end() ``` **解释：** - `$("form#id").find("#子元素id").end()`: 从指定表单中查找具有特定ID的子元素，然后返回到最初的选择器状态。 **示例：** 查找并修改表单中的元素： ```html <form id="myForm"> <input type="text" id="input1"> <input type="text" id="input2"> </form> ``` ```javascript $("form#myForm").find("#input1").css("border", "1px solid green").end() .find("#input2").css("border", "1px solid blue").end(); ``` #### 加载外部文档 ```javascript $("#ID").load("*.html") // 加载一个文档 ``` **解释：** - `$("#ID").load("*.html")`: 将指定URL的内容加载到页面中的指定ID的元素内。 **示例：** 加载外部文档： ```html <div id="content"></div> ``` ```javascript $("#content").load("example.html"); ``` #### 使用AJAX发送请求 ```javascript $.ajax({ url: "Result.aspx", // 页面URL type: "get", // 请求类型 (get/post) dataType: "html", // 返回数据类型 ("xml", "html", "script", "json") data: "chen=h", // 发送的数据 (仅适用于GET请求) timeout: 3000, // 超时时间 success: function(msg) { // 成功时执行 $("#stats").text(msg); }, error: function(msg) { // 失败时执行 $("#stats").text(msg); } }); ``` **解释：** - `$.ajax()`: 发送异步HTTP请求。 - `url`: 请求的目标地址。 - `type`: 请求方式（GET或POST）。 - `dataType`: 期望从服务器返回的数据类型。 - `data`: 发送到服务器的数据（GET请求时附加到URL后面）。 - `timeout`: 超时时间（毫秒）。 - `success`: 成功时执行的函数。 - `error`: 错误时执行的函数。 **示例：** 发送AJAX请求： ```javascript $.ajax({ url: "data.php", type: "POST", data: { name: "John Doe", age: 30 }, success: function(response) { $("#result").html(response); }, error: function(xhr, status, error) { console.error("Error:", error); } }); ``` #### 鼠标悬停事件处理 ```javascript $(document).ready(function() { $("#description").mouseover(function() { $.get("Result.aspx", // 页面URL { chen: "", age: "25" }, // 发送的数据 function(data) { alert("Data Loaded: " + data); } // 回调函数 ); }); }); ``` **解释：** - `$(document).ready()`: 当DOM准备就绪时执行函数。 - `mouseover`: 当鼠标指针移动到元素上时触发。 - `$.get()`: 发送GET请求。 **示例：** 鼠标悬停时发送GET请求： ```javascript $(document).ready(function() { $("#description").mouseover(function() { $.get("data.php", { name: "Alice" }, function(data) { $("#info").html(data); }); }); }); ``` #### 获取下拉列表选项的值 ```javascript $("select#testSelect option:selected").text(); // 获取选中项的文本值 $("#testSelect").val(); // 获取选中项的值 ``` **解释：** - `$("select#testSelect option:selected").text()`: 获取选中的下拉列表选项的文本值。 - `$("#testSelect").val()`: 获取选中的下拉列表选项的值。 **示例：** 获取下拉列表的选中值： ```html <select id="testSelect"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> ``` ```javascript var selectedText = $("select#testSelect option:selected").text(); // 获取选中文本 var selectedValue = $("#testSelect").val(); // 获取选中值 ```