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'); // 找所有的子孙节点 $('ul').find('li').css('border-bottom', '3px solid green');
5、其他属性操作
5.1、文本及值的操作
// html----innerHTML // 获取：jQuery对象.html() // 设置：jQuery对象.html(值) console.log($('#box1').html()); $('#box1').html('东风吹，<em>战鼓</em>擂'); // ------------------------- // text----innerText // 获取：jQuery对象.text() // 设置：jQuery对象.text(值) console.log($('#box2').text()); $('#box2').text('东风吹，<em>战鼓</em>擂'); // ----------------------------- // val----value // 设置：jQuery对象.val(值); // 获取：jQuery对象.val(); $('input').val('平头哥'); console.log($('input').val());
5.2、遍历
// jQuery对象.each(function (index, item) {}); // index下标 item即每一项 $('li').each(function (index, item) { // console.log(index, item); // console.log(this == item); // this和item都是原生的 $(item).html(index); });
5.3、属性操作
5.3.1、attr
// attr方法 // 它可以操作自定义属性 原码用attribute实现 // 获取：jQuery元素.attr('属性名') // 设置：jQuery元素.attr('属性名', '值') // 删除：jQuery元素.removeAttr('属性名') console.log($('#box').attr('title')); $('#box').attr('title', '小张在飞'); console.log($('#box').attr('abc')); $('#box').attr('abc', '小王'); $('#box').removeAttr('title'); $('#box').removeAttr('abc');
5.3.2、prop
// prop方法 // 1、在操作固有属性时，应该使用 prop // 2、只存在 true/false 属性，应该使用 prop // 获取：jQuery元素.prop('属性名') // 设置：jQuery元素.prop('属性名', '值') console.log($(':checkbox').prop('checked')); // 获取 true/false $(':checkbox').prop('checked', true); // 设置
