jQuery 常用选择器和和方法

学习总结
- 一、JQuery 介绍
- - 1. 什么是 jQuery
  - 1. jQuery 版本介绍
  - 1. jQuery 文件介绍
- 二、jQuery 对象
- - 1. jQuery 和 DOM 的区别
  - 1. jQuery 对象与 DOM 对象之间转换
  - 1. 自执行函数（三种）
- 三、jQuery 对象常用方法
- - 1. 常用方法
  - 1. jQuery 常用 DOM 节点操作方法（添加、删除、复制节点）
  - 1. jQuery 元素属性操作的方法
  - - 3.1 操作 class 属性
    - 3.2 操作 value 属性
    - 3.3 操作 css 属性
    - 3.4 操作 prop 属性
    - 3.5 操作 data 属性
    - 3.5 操作 attr 属性
  - 1. jQuery中each的三种遍历方法
- 四、jQuery 选择器
- - 1. 基本选择器
  - 1. 属性选择器
  - 1. 层次选择器
  - 1. 过滤选择器
  - 1. 表单元素获取
- 五、DOM节点
- 六、综合小例题
总结

学习总结

参考博文：
https://blog.csdn.net/h13783313210/article/details/79832318

一、JQuery 介绍

1. 什么是 jQuery

1）jQuery 是一个 JavaScript 函数库；
2）jQuery 是轻量级的 JS 库，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）；
3）jQuery 是免费、开源的；
4）jQuery 是一个兼容多浏览器的 Javascript 库，核心理念是 write less，do more（写得更少，做得更多）。

2. jQuery 版本介绍

1）jQuery1.x：经典版本，兼容 IE6，7，8。
2）jQuery2.0：改进版本，及后续版本将不再支持 IE6，7，8 浏览器。

3. jQuery 文件介绍

1）jQuery1.x.js：jQuery 源文件；学习 jQuery 或者 debug 的时候使用。
2）jQuery1.x.min.js：jQuery 压缩之后的文件；正常项目中使用。

二、jQuery 对象

1. jQuery 和 DOM 的区别

通过 document.getElementById() 找到的元素和通过 $() 找不到元素不一样：
1）通过 jQuery 方法获取的页面元素，都是 jQuery 对象。
2）Query 对象其实就是对 DOM 对象进行了包装，增强了相关方法，让开发者使用起来更加便利。
3）虽然 jQuery 对象包装了 DOM 对象但是两者不能混用，各位可以理解为 jQuery 对象与 DOM 对象是两个不类型的对象，但是我们调用 jQuery 对象的方法，事实上底层代码还是操作的是 DOM 对象。

2. jQuery 对象与 DOM 对象之间转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
    // 都是一个函数
    <script> console.log($ === jQuery); window.onload = function () { let btn = document.getElementById("btn"); console.log(btn); // 通过 jQuery 获取 属性值 let $btn = $('#btn'); console.log($btn); // DOM 对象转 jQuery console.log($(btn)); // jQuery 对象转成 DOM 对象，这个很少用，直接获取数组第一个值 console.log($btn.get(0)); // 以后尽量使用 jQuery 方法操作页面元素，绑定事件等 } </script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>

3. 自执行函数（三种）

表示文档结构已经加载完成（不包含图片等非文字媒体文件），onload 则指示页面包含图片等文件在内的所有元素都加载完成。

<script> $(function(){ // do something }) </script>
<script> $(document).ready(function(){ //do something }) </script>
<script> $().ready(function(){ //do something }) </script>

三、jQuery 对象常用方法

1. 常用方法

val()

作用：val() 方法返回或设置被选元素的 value 属性。

方法名	作用
$(selector).val()	用于返回值：该方法返回第一个匹配元素的 value 属性的值
$(selector).val(value)	用于设置值：该方法设置所有匹配元素的 value 属性的值\

注意：val() 方法通常与 HTML 表单元素一起使用。

text()

作用：text() 方法设置或返回被选元素的文本内容。

方法名	作用
$(selector).text()	用于返回内容：返回所有匹配元素的文本内容（会删除 HTML 标记）
$(selector).text(content)	用于设置内容：重写所有匹配元素的内容

注意：text() 方法返回内容时会删除 HTML 标签

html()

作用：html() 方法设置或返回被选元素的内容（innerHTML）。

方法名	作用
$(selector).html()	用于返回内容：返回第一个匹配元素的内容
$(selector).html(content)	用于设置内容：重写所有匹配元素的内容

注意：html() 方法返回内容时不会删除 HTML 标签

css()

作用：css() 方法设置或返回被选元素的一个或多个样式属性。

方法名	作用
css(“propertyname”)	返回指定的 CSS 属性的值（无指定则返回第一个）
css(“propertyname”, “value”)	设置指定的 CSS 属性值（无指定则设置全部）

get() 非ajax用法

作用：get() 方法获取由选择器指定的 DOM 元素。

方法名	作用
$(selector).get( index)	index 可选。规定要获取哪个匹配的元素（通过 index 编号）。

parent()

作用：parent() 方法返回被选元素的直接父元素。

方法名	作用
$(selector).parent(filter)	filter 可选。规定缩小搜索父元素范围的选择器表达式。

children()

作用：children() 方法返回被选元素的所有直接子元素。

方法名	作用
$(selector).children(filter)	filter 可选。规定缩小搜索子元素范围的选择器表达式。

parents()

作用：parents() 方法返回被选元素的所有祖先元素。

方法名	作用
$(selector).parents(filter)	filter 可选。规定缩小搜索祖先元素范围的选择器表达式。

注意：如需返回多个祖先，请使用逗号分隔每个表达式。

find()

作用：方法返回被选元素的后代元素。

方法名	作用
$(selector).find(filter)	filter 必需。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。

注意：如需返回多个后代，请使用逗号分隔每个表达式。

eq()

作用：方法返回带有被选元素的指定索引的元素（索引号从 0 开头）。

方法名	作用
$(selector).eq(index)	index 必需。规定元素的索引。可以是整数或负数。

注意：使用负数将从被选元素的结尾开始计算索引。

siblings()

作用：方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。

方法名	作用
$(selector).siblings(filter)	filter 可选。规定缩小搜索同级元素范围的选择器表达式。

index()

作用：方法返回指定元素相对于其他指定元素的 index 位置，这些元素可通过 jQuery 选择器或 DOM 元素来指定。

方法名	作用
$(selector).index()	获得第一个匹配元素相对于其同胞元素的 index 位置。
$(selector).index(element)	获得元素相对于选择器的 index 位置 element，规定要获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。

注意：如果未找到元素，index() 将返回 -1。

height()

作用：height() 方法设置或返回被选元素的高度。

方法名	作用
$(selector).height()	用于返回高度：返回第一个匹配元素的高度
$(selector).height( value)	用于设置高度：对于em, pt, etc要使用””，px为默认单位，直接写数值
$(selector).height(function (index,currentheight))	value - 当设置高度时是必需的。规定元素的高度，单位为 px、em、pt 等。 function(index,currentheight) - 可选。规定返回被选元素新高度的函数。index - 返回集合中元素的 index 位置。currentheight - 返回被选元素的当前高度。

注意：如果未找到元素，index() 将返回 -1。

trim()

作用：$.trim() 函数用于去除字符串两端的空白字符。

方法名	作用
$.trim( str )	str 必选。String 类型，需要去除两端空白字符的字符串。

注意：$.trim()函数会移除字符串开始和末尾处的所有换行符，空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。

2. jQuery 常用 DOM 节点操作方法（添加、删除、复制节点）

添加节点

方法名	作用
$(selector).append()	指定元素内部添加，在被选元素的结尾插入内容
$(selector).prepend()	指定元素内部添加，在被选元素的开头插入内容
$(selector).after()	指定元素外部添加，在被选元素之后插入内容
$(selector).before()	指定元素外部添加，在被选元素之前插入内容

删除节点

方法名	元素所绑定的事件及数据是否也被移除	作用
$(selector).empty()	是	从被选元素中删除子元素，删除的是子节点，自身不变。empty()函数的返回值为jQuery类型，返回当前jQuery对象本身(以便于进行链式风格的编程)。
$(selector).remove()	是	删除被选元素（及其子元素），这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。remove()函数的返回值为jQuery类型，返回当前jQuery对象本身。
$(selector).detach()	否	删除被选元素（及其子元素）,事件和附加数据保留。detach()函数的返回值为jQuery类型，返回当前jQuery对象本身。

复制节点

方法名	作用
$(selector).clone()	复制所匹配的元素

替换节点

方法名	作用
$(selector).replaceWith()	将所有匹配的元素用特定内容替换
$(selector).replaceAll()	作用相同,颠倒了主宾关系

3. jQuery 元素属性操作的方法

3.1 操作 class 属性

addClass()

作用：addClass() 方法向被选元素添加一个或多个类名。

方法名	作用
$(selector).addClass(classname)	classname - 必需。该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。提示：如需添加多个类，请使用空格分隔类名。
$(selector).addClass( classname,function(index,oldclass))	function() - 可选。规定返回一个或多个待添加类名的函数。 index - 返回集合中元素的 index 位置。currentclass - 返回被选元素的当前类名。

removeClass()

作用：removeClass() 方法从被选元素移除一个或多个类。

方法名	作用
$(selector).addClass(classname)	classname - 可选。规定要移除的一个或多个类名称。如需移除若干个类，请使用空格分隔类名称。注意：如果该参数为空，则将移除所有类名称。
$(selector).removeClass( classname,function(index,currentclass))	function() - 可选。规定返回一个或多个待添加类名的函数。 index - 返回集合中元素的 index 位置。currentclass - 返回被选元素的当前类名。

注意：如果没有规定参数，则该方法将从被选元素中删除所有类。

hasClass()

作用：hasClass() 方法检查被选元素是否包含指定的类名称。

方法名	作用
$(selector).hasClass(classname)	classname - 必需。规定需要在被选元素中查找的类。

注意：如果没有规定参数，则该方法将从被选元素中删除所有类。

toggleClass()

作用：toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除。这就是所谓的切换效果。然而，通过使用 “switch” 参数，您能够规定只删除或只添加类。

方法名	作用
$(selector).toggleClass(classname, function(index,currentclass),switch)	classname - 必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。 function() 可选。规定返回需要添加/删除的一个或多个类名的函数。 index - 返回集合中元素的 index 位置。 currentclass - 返回被选元素的当前类名。 switch - 可选。布尔值，规定是否仅仅添加（true）或移除（false）类。

方法名

作用

$(selector).toggleClass(classname,
function(index,currentclass),switch)

classname - 必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。
function() 可选。规定返回需要添加/删除的一个或多个类名的函数。
index - 返回集合中元素的 index 位置。
currentclass - 返回被选元素的当前类名。
switch - 可选。布尔值，规定是否仅仅添加（true）或移除（false）类。

注意：如果没有规定参数，则该方法将从被选元素中删除所有类。

3.2 操作 value 属性

val()

作用：val() 方法返回或设置被选元素的 value 属性。

方法名	作用
$(selector).val()	用于返回值：该方法返回第一个匹配元素的 value 属性的值
$(selector).val()	用于设置值：该方法设置所有匹配元素的 value 属性的值\

注意：val() 方法通常与 HTML 表单元素一起使用。

3.3 操作 css 属性

css()

作用：css() 方法设置或返回被选元素的一个或多个样式属性。

方法名	作用
css(“propertyname”)	返回指定的 CSS 属性的值（无指定则返回第一个）
css(“propertyname”, “value”)	设置指定的 CSS 属性值（无指定则设置全部）

3.4 操作 prop 属性

prop()
作用
1）prop() 方法设置或返回被选元素的属性和值。
2）当该方法用于返回属性值时，则返回第一个匹配元素的值。
3）当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

方法名	作用	参数描述
$(selector).prop(property)	返回属性的值	property - 规定属性的名称
$(selector).prop(property,value)	设置属性和值	property - 规定属性的值
$(selector).prop(property, function(index,currentvalue))	使用函数设置属性和值	function(index,currentvalue) - 规定返回要设置的属性值的函数； index - 检索集合中元素的 index 位置； currentvalue - 检索被选元素的当前属性值
$(selector).prop({property:value, property:value,…})	设置多个属性和值	property - 规定属性的名称

注意：prop() 方法应该用于检索属性值，例如（selected、checked）

3.5 操作 data 属性

data()

作用：data 方法，针对 data- 开头的属性的获取，若值是 JSON 格式, 自动转成 JS 对象。

方法名	作用	参数描述
$(selector).data(name)	从被选元素中返回附加的数据	name - 可选，为data-后面的名称。规定要取回的数据的名称；如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。
$(selector).data(name,value)	向被选元素附加数据	name - 必需。规定要设置的数据的名称； value - 必需。规定要设置的数据的值。

代码演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script> $(document).ready(function(){ testObj=new Object(); testObj.greetingMorn="Good Morning!"; testObj.greetingEve="Good Evening!"; $("#btn1").click(function(){ $("div").data(testObj); }); $("#btn2").click(function(){ alert($("div").data("greetingEve")); }); }); </script>
</head>
<body>
<button id="btn1">将数据附加到div元素</button><br>
<button id="btn2">获取数据附加到div元素</button>
<div></div>
</body>
</html>

3.5 操作 attr 属性

attr()

作用：attr() 方法设置或返回被选元素的属性和值。

方法名	作用	参数
$(selector).attr(attribute)	name - 可选。返回第一个匹配元素的值	attribute - 规定属性的名称
$(selector).attr(attribute,value)	为匹配元素设置一个或多个属性/值对	value - 规定属性的值
$(selector).attr(attribute,function( index,currentvalue))	可选。返回第一个匹配元素的值	规定要返回属性值到集合的函数 index - 接受集合中元素的 index 位置 currentvalue - 接受被选元素的当前属性值
$(selector).attr({attribute: value,attribute: value,…}	为匹配元素设置一个或多个属性/值对

小结： 下面是每个属性对应方法的选取

<script> $(function () { // css 方法针对 style 属性 console.log($('#gender').css('color')); // val 方法针对 value 属性 console.log($('#gender').val()); // addClass 方法、removeClass 方法，针对 class 属性 $('#gender').addClass('other'); $('#gender').removeClass('other'); // prop 方法针对 checked 属性 selected 属性 console.log($('#gender').prop('checked')); $('#gender').prop('checked', false) // data 方法，针对 data- 开头的属性的获取，若值是 JSON 格式, 自动转成 JS 对象 console.log($('#gender').data('option')); // 其他情况使用 attr 方法 }); </script>

4. jQuery中each的三种遍历方法

jQuery中each的三种遍历方法：博客地址

四、jQuery 选择器

1. 基本选择器

实例	选取
$(“*”)	所有元素
$(“#lastname”)	id=“lastname” 的元素
$(“.intro”)	所有 class=“intro” 的元素
$(“p”)	所有 p 元素
$(“.intro.demo”)	所有 class=“intro” 且 class=“demo” 的元素

2. 属性选择器

实例	选取
$(“[href]”)	所有带有 href 属性的元素
$(“[href=’#’]”)	所有 href 属性的值等于 “#” 的元素
$(“[href!=’#’]”)	所有 href 属性的值不等于 “#” 的元素
$ (“[href$=’.jpg’]”)	所有 href 属性的值包含以 “.jpg” 结尾的元素
$(“th,td,.intro”)	所有带有匹配选择的元素
$(“:selected”)	:selected 选择器选取被选择的 option 元素
$(“:checked”)	:checked 选择器选取被选择的 checkbox/radio 元素

案例代码：

<script> // 定义一个数组接受复选框里面的 value 值 var ids = []; $('input[name=ids]:checked').each(function () { // 把被选中的 checkbox 中的 value 值添加到数组中 ids.push(this.value); }); // 判断 复选框是否有被选中的 if ($('input[name=ids]:checked').length > 0) { $.ajax({ url: "/Xxx", type: "POST", data_type: 'json', data: { // JSON.stringify(value[, replacer[, space]])，转成 JSON 字符串，为空则请求失败 // "ids": JSON.stringify(ids), "ids": ids, }, traditional: true,//这里设置为true success: function(data) { // 删除被选中的复选框元素 $('input[name=ids]:checked').parent().parent().remove(); } }); } </script>
<tbody>
    <#list consumptionItems as consumptionItem>
        <tr>
            <td><input type="checkbox" name="ids" value="${consumptionItem.id}"></td>
            <td>${consumptionItem.name}</td>
            <td>${consumptionItem.createDate}</td>
        </tr>
    </#list>
</tbody>

3. 层次选择器

实例	选取
$(“#myid a”)	获取所有子孙后代元素列表
$(“#myid>a”)	获取一级子元素列表（不包含孙元素）
$(“#myid+a”)	获取紧接在之后的同辈元素列表，等价于$(“#myid>a”).next(“a”)
$(“#myid~a”)	获取之后的所有同辈元素列表，等价于$(“#myid”).nextAll(“a”)
$(“#myid”).siblings(“a”)	获取所有同辈元素列表，无论前后
$(“#myid”).prev(“a”)	获取紧接在之后的同辈元素列表
$(“#myid”).find(“a”)	获取后代元素中所有的a(包含子孙后代)

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery 层次选择器</title>
    <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js"> </script>
    <style type="text/css"> .selected{ background-color: gray;}</style>
    <script> $(function () { // 问题 1：获取所有 ul 下的所有 li 元素，并打印分析结果 console.log($('ul li')); // 输出了 8 个 li，中间空格表示获取所有子孙后代 li 元素 // 问题 2：获取 id 为 myul 下的所有一级 li 子元素，并打印分析结果 console.log($('#myul > li')); // 输出了 4 个 li，中间 > 表示获取一级子元素 // 问题 3：获取所有 label 元素后的 input 元素，并打印分析结果 console.log($('label ~ input')); // 输出结果为（text1、text2、text3、text4） // 问题 4：获取紧跟着 label 元素后的 input 元素，并打印分析结果 console.log($('label + input')); // 输出结果为（text1、text3） }); </script>
</head>
<body>
<ul id="myul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ul>
    </li>
</ul>
<label>LABEL1</label>
<input type="text" value="text1"/>
<input type="text" value="text2"/>
<br/>
<label>LABEL2</label>
<input type="text" value="text3"/>
<input type="text" value="text4"/>
<br/>
<label>
    LABEL3
    <input type="text" value="text5"/>
    <input type="text" value="text6"/>
</label>
</body>
</html>

4. 过滤选择器

实例	选取
$(“p:first”)	第一个 p 元素
$(“p:last”)	最后一个 p 元素
$(“tr:even”)	所有偶数 tr 元素
$(“tr:odd”)	所有奇数 tr 元素
$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
$(“ul li:gt(3)”)	列出 index 大于 3 的元素
$(“ul li:lt(3)”)	列出 index 小于 3 的元素
$(“input:not(:empty)”)	所有不为空的 input 元素
$(“:header”)	所有标题元素 h1 - h6
$(“:contains(‘W3School’)”)	包含指定字符串的所有元素
$(“p:hidden”)	所有隐藏的元素

5. 表单元素获取

实例	选取
$(“:input”)	所有元素
$(“:text”)	所有 type=“text” 的元素
$(“:password”)	所有 type=“password” 的元素
$(“:radio”)	所有 type=“radio” 的元素

五、DOM节点

博客地址：DOM节点的使用（常用方法+代码）

六、综合小例题

例题一：JS实现列表移动（通过document操作select标签）
例题二：用 JS（JavaScript ）实现增删改查
例题三：用 JS（JavaScript ）实现多选框的全选、反选、多选
例题四：jQuery 实现全选、多选、反选
例题五：JS 实现下拉框回显
例题六：JS 实现列表移动
例题七：JS 实现下拉框去重