jQuery 常用选择器和方法以及遍历（超详细）

Posted Yan Yang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 常用选择器和方法以及遍历（超详细）相关的知识，希望对你有一定的参考价值。

jQuery 常用选择器和和方法



学习总结

参考博文：
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. 常用方法

  1. val()

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

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

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

  1. text()

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

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

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

  1. html()

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

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

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

  1. css()

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

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

  1. get() 非ajax用法

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

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

  1. parent()

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

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

  1. children()

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

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

  1. parents()

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

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

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

  1. find()

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

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

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

  1. eq()

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

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

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

  1. siblings()

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

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

  1. index()

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

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

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

  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。

  1. trim()

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

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

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

2. jQuery 常用 DOM 节点操作方法

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

  1. 删除节点
方法名元素所绑定的事件及数据是否也被移除作用
$(selector).empty()是从被选元素中删除子元素，删除的是子节点，自身不变
$(selector).remove()是删除被选元素（及其子元素）
$(selector).detach()否删除被选元素（及其子元素）,事件和附加数据保留

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

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

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

3.1 操作 class 属性

  1. addClass()

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

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

  1. removeClass()

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

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

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

  1. hasClass()

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

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

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

  1. toggleClass()

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

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

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

3.2 操作 value 属性

  1. val()

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

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

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

3.3 操作 css 属性

  1. 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”)所有带有匹配选择的元素

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=jQuery-强大的jq选择器和基本操作。


 jQuery选择器和选取方法


 jQuery选择器和选取方法


 jquery  ：eq选择器和eq（）方法的用法与比较


 jQuery选择器和选取方法.RP


 jQuery 类选择器和单击事件，我错过了啥吗？