jquery常⽤选择器和⽅法以及遍历（超详细）
jQuery 常⽤选择器和和⽅法
学习总结
⼀、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）js：jQuery 源⽂件；学习 jQuery 或者 debug 的时候使⽤。
2）in.js：jQuery 压缩之后的⽂件；正常项⽬中使⽤。
⼆、jQuery 对象
1. jQuery 和 DOM 的区别
通过 ElementById() 到的元素和通过 $() 不到元素不⼀样：
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);
let btn = ElementById("btn");
console.log(btn);
// 通过 jQuery 获取属性值
let $btn =$('#btn');
console.log($btn);
// DOM 对象转 jQuery
console.log($(btn));
// jQuery 对象转成 DOM 对象，这个很少⽤，直接获取数组第⼀个值
console.log($(0));
// 以后尽量使⽤ jQuery ⽅法操作页⾯元素，绑定事件等
}
</script>jquery学习在线教程
</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 表单元素⼀起使⽤。
2. text()
作⽤：text() ⽅法设置或返回被选元素的⽂本内容。
⽅法名作⽤
$(selector).text()⽤于返回内容：返回所有匹配元素的⽂本内容（会删除 HTML 标记）$(selector).text(content)⽤于设置内容：重写所有匹配元素的内容
注意：text() ⽅法返回内容时会删除 HTML 标签
3. html()
作⽤：html() ⽅法设置或返回被选元素的内容（innerHTML）。
⽅法名作⽤
$(selector).html()⽤于返回内容：返回第⼀个匹配元素的内容$(selector).html(content)⽤于设置内容：重写所有匹配元素的内容
注意：html() ⽅法返回内容时不会删除 HTML 标签
4. css()
作⽤：css() ⽅法设置或返回被选元素的⼀个或多个样式属性。
⽅法名作⽤
css(“propertyname”)返回指定的 CSS 属性的值（⽆指定则返回第⼀个）css(“propertyname”, “value”)设置指定的 CSS 属性值（⽆指定则设置全部）
5. get() ⾮ajax⽤法
作⽤：get() ⽅法获取由选择器指定的 DOM 元素。
⽅法名作⽤
$(selector).get( index)index 可选。规定要获取哪个匹配的元素（通过 index 编号）。
6. parent()
作⽤：parent() ⽅法返回被选元素的直接⽗元素。
⽅法名作⽤
$(selector).parent(filter)filter 可选。规定缩⼩搜索⽗元素范围的选择器表达式。
7. children()
作⽤：children() ⽅法返回被选元素的所有直接⼦元素。
⽅法名作⽤
$(selector).children(filter)filter 可选。规定缩⼩搜索⼦元素范围的选择器表达式。
8. parents()
作⽤：parents() ⽅法返回被选元素的所有祖先元素。
⽅法名作⽤
$(selector).parents(filter)filter 可选。规定缩⼩搜索祖先元素范围的选择器表达式。注意：如需返回多个祖先，请使⽤逗号分隔每个表达式。
9. find()
作⽤：⽅法返回被选元素的后代元素。
⽅法名作⽤
$(selector).find(filter)filter 必需。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。注意：如需返回多个后代，请使⽤逗号分隔每个表达式。
10. eq()
作⽤：⽅法返回带有被选元素的指定索引的元素（索引号从 0 开头）。
⽅法名作⽤
$(selector).eq(index)index 必需。规定元素的索引。可以是整数或负数。
注意：使⽤负数将从被选元素的结尾开始计算索引。
11. siblings()
作⽤：⽅法返回被选元素的所有同级元素。同级元素是共享相同⽗元素的元素。
⽅法名作⽤
$(selector).siblings(filter)filter 可选。规定缩⼩搜索同级元素范围的选择器表达式。
12. index()
作⽤：⽅法返回指定元素相对于其他指定元素的 index 位置，这些元素可通过 jQuery 选择器或 DOM 元素来指定。
⽅法名作⽤
$(selector).index()获得第⼀个匹配元素相对于其同胞元素的 index 位置。
$(selector).index(element)获得元素相对于选择器的 index 位置
element，规定要获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。
注意：如果未到元素，index() 将返回 -1。
13. 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。
14. trim()
作⽤：$.trim() 函数⽤于去除字符串两端的空⽩字符。
⽅法名作⽤
$.trim( str )str 必选。String 类型，需要去除两端空⽩字符的字符串。
注意：$.trim()函数会移除字符串开始和末尾处的所有换⾏符，空格(包括连续的空格)和制表符。如果这些空⽩字符在字符串中间时，它们将被保留，不会被移除。
2. jQuery 常⽤ DOM 节点操作⽅法（添加、删除、复制节点）
1. 添加节点
⽅法名作⽤
$(selector).append()指定元素内部添加，在被选元素的结尾插⼊内容
$(selector).prepend()指定元素内部添加，在被选元素的开头插⼊内容
$(selector).after()指定元素外部添加，在被选元素之后插⼊内容
$(selector).before()指定元素外部添加，在被选元素之前插⼊内容
2. 删除节点
⽅法名元素所绑定的
事件及数据是
否也被移除
作⽤
$(selector).empty()是从被选元素中删除⼦元素，删除的是⼦节点，⾃⾝不变。empty()函数的返回值为jQuery类型，返回当前jQuery 对象本⾝(以便于进⾏链式风格的编程)。
$(selector).remove()是删除被选元素（及其⼦元素），这个⽅法不会把匹配的元素从jQuery对象中删除，因⽽可以在将来再使⽤这些匹配的元素。但除了这个元素本⾝得以保留之外，其他的⽐如绑定的事件，附加的数据等都会被移除。remove()函数的返回值为jQuery类型，返回当前jQuery对象本⾝。
删除被选元素（及其⼦元素），事件和附加数据保留。detach()函数的返回值为jQuery类型，返回当前jQuery对

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。