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

Posted Yan Yang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 类选择器和单击事件,我错过了啥吗?