JavaScript课程——Day20（jQuery：使用选择器节点遍历操作其他属性操作）
Posted 别动我咖喱
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript课程——Day20（jQuery：使用选择器节点遍历操作其他属性操作）相关的知识，希望对你有一定的参考价值。
1、初识jQuery
1.1、什么是jQuery
jQuery是一个优秀的javascript库，是一个由John Resig创建于2006年1月的开源项目。jQuery是一个快速、小型、功能丰富的JavaScript库。其设计的宗旨是“write less，do more”，即倡导写更少的代码，做更多的事情。
1.2、jQuery的作用
jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互，学习jQuery的本质就是学习如何调用这些函数。
1.3、jQuery的优势
jQuery强调的理念是写得少，做得多，jQuery独特的选择器、链式操作、事件处理机制和封装完善的ajax都是其他库望尘莫及的。概括起来，jQuery有以下优势。
- 轻量级，核心文件才几十kb
- 简化了DOM操作、事件处理、动画设计和Ajax交互
- 强大的选择器功能
- 链式操作、隐式迭代
- 丰富的插件支持
- 免费、开源
1.4、jQuery下载
中文官网：https://www.jquery123.com/
1.5、类库说明
jQuery库的类型分为两种，分别是生产版本（最小话和压缩）和开发版（未压缩版），它们的区别是：
开发版：完整无压缩版本，主要用于测试、学习和开发
生产版：经过工具压缩或经过服务器开启Gzip压缩，主要用于产品和项目
1.6、版本介绍
jQuery 库分为 1.x 的版本和 2.x、3.x 的版本，1.x 的版本兼容 IE678，而 2.x、3.x 的版本不兼容 IE678。
1.7、引入jQuery
jQuery不需要安装，它就是一个js文件，把下载的jQuery放到一个公共的位置，想要在某个页面上使用时，只需要在相关的html文档中引入该库文件即可。
一般可以放在head标签中或者body标签结束前面，但是一定要注意，要在其他js文件前面引入jQuery库。
当我们需要使用jQuery的时候，会在HTML文档中引入jQuery.js，可以通过以下两种方式引入：
<!-- 引入本地文件 --> <script src="js/jquery.js"></script> <!-- 引入线上文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
1.8、什么是$
$是jQuery的别名，也可以使用jQuery替代，但是为了方便，会直接使用$。
$是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
2、jQuery的使用
2.1、页面加载
// 原生：是文档、css、js、图片等等相关的资源都加载完成了之后，再调用函数 window.onload = function () { console.log(\'我是原生的，我执行了\'); } // ----------------------------- // document准备好了（浏览器已经将文档加载完成了），就调用这个函数 $(document).ready(function () { console.log(\'我是JQ，我执行了\'); }); // jq简写 $(function () { console.log(\'我是JQ的简写，我也执行了\'); }) // --------------------------- // $(document).ready(function (){}) 同 window.onload = function (){}的区别： // 1、执行时机不同，window.onload 必须等待网页中文档和资源都加载完成才能执行，而$(document).ready()是等文档加载完成后调用。 // 2、window.onload 只能写一个，多个时后面的会覆盖掉前面的，而$(document).ready()可以写多个，不会覆盖。 // 3、window.onload 没有简写形式，而$(document).ready()可以简写成$(function(){})。
2.2、DOM对象和jQuery对象
<div id="box"></div> <script> // 区分清楚DOM对象和JQ对象，因为DOM对象只能使用原生的方法，而JQ只能使用JQ的方法 // 两者可以共存，不能混用 $(document).ready(function () { // 原生获取元素 var box = document.getElementById(\'box\'); console.log(box); // jq var $box = $(\'#box\'); console.log($box); }); </script>
2.3、互转
// jq转原生 var $box = $(\'#box\'); // 方式1 不是JQ提供的，是我们看出来的 // 格式：jQuery对象[下标] 得到对应下标的原生元素 console.log($box[0]); // 方式2 是JQ提供的 // 格式：jQuery对象.get(下标) 如果有下标，获取对应的元素，如果没有下标，返回一个数组 console.log($box.get(0)); console.log($box.get()); // --------------------------------- // 原生转jq // 格式：$(原生) var box = document.getElementById(\'box\'); console.log($(box));
3、选择器
选择器是 jQuery 的根基，在 jQuery 中，对事件处理、遍历 DOM 和 Ajax 操作都依赖于选择器。如果能熟练地使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。
jQuery 中的选择器完全继承了 CSS 的风格。利用 jQuery 选择器，可以非常便捷和快速地找出特定的 DOM 元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。学会使用选择器是学习 jQuery 的基础，jQuery 的行为规则都必须在获取到元素后才能生效。
3.1、基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。可以使用这些选择器来完成绝大多数的工作。
<div id="box">小张</div>
<p class="abc">小耗子</p>
<ul class="ul1">
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<ul class="ul2">
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<script>
$(function () {
$(\'#box\').css(\'background\', \'red\');
$(\'.abc\').css(\'background\', \'pink\');
$(\'li\').css(\'font-size\', \'30px\'); // jQuery帮我们循环了
$(\'#box, .abc, li\').css(\'color\', \'yellow\'); // 群组
$(\'.ul1 li\').css(\'border\', \'3px solid #ccc\');
})
</script>
3.2、层次选择器
如果想通过DOM元素之间的层级关系来获取特定的元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。
<ul> <li> <ol> <li>html</li> <li>css</li> <li>js</li> </ol> </li> <li>吃饭</li> <li class="abc">睡觉</li> <li>打豆豆</li> <li>小张</li> </ul> <script> // 如果想通过 DOM 元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。 $(\'ul li\').css(\'border-bottom\', \'3px solid #ccc\'); // 子孙元素 $(\'ul>li\').css(\'border-bottom\', \'3px solid #ccc\'); // 子元素 $(\'.abc + li\').css(\'background\', \'red\'); // 下一个兄弟元素 $(\'.abc\').next().css(\'background\', \'red\'); $(\'.abc ~ li\').css(\'background\', \'red\'); // 下面所有的兄弟元素 $(\'.abc\').nextAll().css(\'background\', \'red\'); </script>
3.3、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号开头
<ul> <li>00</li> <li>11</li> <li>22</li> <li class="abc">33</li> <li class="abc">44</li> <li>55</li> <li>66</li> <li>77</li> </ul>
$(\'li:first\').css(\'background\', \'red\'); // 第一个元素 $(\'li:last\').css(\'background\', \'red\'); // 最后一个元素 $(\'li\').first().css(\'background\', \'green\'); $(\'li\').last().css(\'background\', \'green\'); $(\'li:even\').css(\'background\', \'red\'); // 下标为偶数行的 $(\'li:odd\').css(\'background\', \'yellow\'); // 下标为奇数行的 $(\'li:eq(3)\').css(\'background\', \'red\'); // 下标为3的 $(\'li\').eq(3).css(\'background\', \'green\'); $(\'li:lt(3)\').css(\'background\', \'red\'); // 下标小于3的 $(\'li:gt(3)\').css(\'background\', \'yellow\'); // 下标大于3的 $(\'li:not(.abc)\').css(\'background\', \'red\'); // 排除class为abc的 $(\'li\').not(\'.abc\').css(\'background\', \'pink\');
3.4、表单选择器
为了使用户能够更灵活的操作表单，jQuery中专门加入了表单选择器。利用这个选择器，能极其方便的获取到表单的某个或某类型的元素。
- $(\':checked\'); 选取所有被选中的input标签
- $(\':input\'); 选取所有input、textarea、select、button元素
- $(\':text\'); 所有单行文本框，即类型为：type="text"
- $(\':password\'); 密码框
- $(\':radio\'); 单选框
- $(\':checkbox\'); 多选框
- $(\':sunmit\'); 提交按钮
- $(\':reset\'); 重置按钮
- $(\':button\'); 普通按钮
- $(\':file\'); 上传域
<form action=""> <input type="text"> <input type="password" name=""> <input type="radio" name="" checked> <input type="checkbox" name="" checked> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="普通按钮"> <input type="file" name=""> </form> <script> // console.log($(\':input\')); // input textarea select button // console.log($(\':text\')); // 单行文本框 // console.log($(\':password\')); // 密码框 // console.log($(\':radio\')); // 单选框 console.log($(\':radio:checked\')); // 单选框中的选中元素 </script>
3.5、下标
<ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ul> <script> // 元素.onclick = function(){} // 给所有的li绑定一个点击事件 $(\'li\').click(function () { // console.log(this); // 原生的 console.log($(this).index()); // 元素的下标 }) </script>
4、节点遍历操作
4.1、遍历父节点
<div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div> <script> console.log($(\'.box3\').parent()); // 父级 console.log($(\'.box3\').parents()); // 祖先级 console.log($(\'.box3\').parents(\'div\')); // 祖先级 </script>
4.2、兄弟节点
<ul> <li>11</li> <li>22</li> <li>33</li> <li class="abc">44</li> <li>55</li> <li class="bbb">66</li> </ul> <script> $(\'.abc\').next().css(\'background\', \'red\'); // 下一个兄弟 $(\'.abc\').nextAll().css(\'background\', \'red\'); // 下面所有的兄弟 $(\'.abc\').prev().css(\'background\', \'red\'); // 上一个兄弟 $(\'.abc\').prevAll().css(\'background\', \'red\'); // 上面所有的兄弟 $(\'.abc\').siblings().css(\'background\', \'red\'); // 所有的兄弟 $(\'.abc\').siblings(\'.bbb\').css(\'background\', \'red\'); // 接收一个筛选条件 $(\'li\').filter(\'.abc\').css(\'background\', \'green\'); // 过滤 $(\'li\').not(\'.abc\').css(\'background\', \'green\'); // 排除
</script>
4.3、遍历子节点
<ul> <li> <ol> <li>html</li> <li>css</li> <li>js</li> </ol> </li> <li>吃饭</li> <li class="abc">睡觉</li> <li>打豆豆</li> <li>小张</li> </ul> <script> // 找孩子 $(\'ul\').children().css(\'border-bottom\', \'3px solid #ccc\'); $(\'ul\').children(\'.abc\').css(\'border-bottom\', \'3px solid #ccc\'); // 找所有的子孙节点 $(以上是关于JavaScript课程——Day20（jQuery：使用选择器节点遍历操作其他属性操作）的主要内容，如果未能解决你的问题，请参考以下文章重修课程day56（Bootstrap之javascript组件）
JavaScript课程——Day16（扩展原型上的方法继承）
JavaScript课程——Day24（bootstrap简介全局的css样式组件）