jquery 常用选择器和方法以及遍历（超详细）
jQuery 常用选择器和和方法
- 学习总结
- * 一、JQuery 介绍
- 总结
学习总结
参考博文：
https://blog.csdn.net/h13783313210/article/details/79832318
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 压缩之后的文件；正常项目中使用。
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>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）类。
注意：如果没有规定参数，则该方法将从被选元素中删除所有类。
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的三种遍历方法
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节点的使用（常用方法+代码）
例题一：JS实现列表移动（通过document操作select标签）
例题二：用 JS（JavaScript ）实现增删改查
例题三：用 JS（JavaScript ）实现多选框的全选、反选、多选
例题四：jQuery 实现全选、多选、反选
例题五：JS 实现下拉框回显
例题六：JS 实现列表移动
例题七：JS 实现下拉框去重
总结
以上就是对 JavaScript 入门的总结了，代码仅供参考，欢迎讨论交流。
DOM节点的应用请看这篇博客：DOM节点的使用（常用方法+代码）
手机扫一扫
移动阅读更方便
你可能感兴趣的文章