Python全栈开发之路 【第十五篇】：jQuery的介绍和选择器
本节内容
什么是jQuery?
write less,do more.
jQuery是一个快速，小巧，功能丰富的JavaScript库。
它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。
通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。
关于jQuery的相关资料：
-
官网API文档：http://api.jquery.com/
-
汉化API文档：http://www.css88.com/jqapi-1.9/
学习jQuery的目的
学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的API。（什么是API呢?）
这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
下载jQuery
到官网下载：http://jquery.com/
jQuery的两大特点
1、链式编程：比如.show()和.html()可以连写成.show().html()。
2、隐式迭代：意思是在方法内部进行循环遍历，而不是我们自己在进行遍历，简化操作。
jQuery的使用步骤
1、引包
2、入口函数
3、功能实现代码 (事件处理)
注意：导包的代码一定要放在js代码的最上面。
jQuery的入口函数和$符号
入口函数
原生js的入口函数指的是：window.onload = function(){ };
window.onload = function(){ //window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 //如果不写window.onload() 代码的执行顺序 从上到下 var oDiv = document.getElementById('box'); console.log(oDiv);
jQuery的入口函数有以下几种写法：
//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(document).ready(function () {
alert(1);
})
//2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(function () {
alert(1);
});
//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
$(window).ready(function () {
alert(1);
})
jQuery的入口函数与js的入口函数的区别
区别一：书写个数不同：
-
Js 的入口函数 window.onload 不能同时编写多个，如果有多个window.onload方法，只会执行一个，覆盖。
-
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。
区别二：执行时机不同：
-
Js的入口函数 window.onload 是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
-
jQuery的入口函数 $(document).ready() ，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
文档加载的顺序：从上往下，边解析边执行。
jQuery的$符号
jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。
jQuery占用了两个变量：$ 和 jQuery。
<script src="jquery-3.3.1.js"></script> <script> console.log($); console.log(jQuery); console.log($===jQuery); </script>
打印结果：
$实际上表示一个函数名：
$(); // 调用上面我们自定义的函数$ $(document）.ready(function(){}); // 调用入口函数 $(function(){}); // 调用入口函数 $(“#btnShow”) // 获取id属性为btnShow的元素 $(“div”) // 获取所有的div标签元素
如上方所示，jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。
jQuery这个js库，除了$ 之外，还提供了另外一个函数：jQuery。jQuery函数跟 $ 函数的关系：jQuery === $。
js中的DOM对象和jQuery对象的比较
二者的区别
通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：
针对下面这样一个div结构：
<div></div> <div id="app"></div> <div class="box"></div> <div class="box"></div> <div></div>
通过原生 js 获取这些元素节点的方式是：
var myBox = document.getElementById("app"); //通过 id 获取单个元素 var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组 var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组
通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）
//获取的是数组，里面包含着原生 JS 中的DOM对象。 console.log($('#app')); console.log($('.box')); console.log($('div'));
设置当前div的样式：
$('div').css({ 'width': '200px', 'height': '200px', "background-color":'red', 'margin-top':'20px' })
由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。
总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
二者的相互转换
1、DOM对象转换为jQuery对象：
$(js对象);
2、jQuery对象转换为DOM对象：
jquery对象[index]; //方式1（推荐）
jquery对象.get(index); //方式2
jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：
$('div')[1].style.backgroundColor = 'yellow'; $('div')[3].style.backgroundColor = 'green';
总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。
jQuery的选择器
基础选择器
1、id选择器
2、标签选择器
3、类选择器
4、通配符选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*#brother{ color: red; font-size:24px; }*/ </style> </head> <body> <ul> <li id="brother">学校1</li> <li><a href="https://www.luffycity.com">学校2</a></li> <li class="li3">学校3</li> <li>学校4</li> <li>学校5</li> </ul> </body> <script src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数 $(document).ready(function(){ //基础选择器 //1.id选择器 console.log($('#brother')); $('#brother').css('color','red'); //2.标签选择器 //设置一个值 // $('a').css('color','yellow') // 设置多个值 设置多个值得时候使用对象存储 key:value $('a').css({'color':'yellow','font-size':'24px'}); //3.类选择器 $('.li3').css('background','green'); //4.通配符选择器 * 使用不是很频繁 console.log($('*')); //清空整个界面的dom元素 $('*').html(''); }) </script> </html>
层级选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*#brother{ color: red; font-size:24px; }*/ </style> </head> <body> <ul> <li id="brother">1</li> <li><a href="https://www.luffycity.com">2</a></li> <li class="li3">3</li> <li>4</li> <li>5</li> </ul> <div id="box"> <p id="father">天王盖地虎</p> <p>我是你老母</p> <p>宝塔镇河妖</p> <p>蘑菇放香蕉</p> <div id="box2"> <p>小鸡炖蘑菇</p> </div> </div> </body> <script src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数 $(document).ready(function(){ //1.后代选择器 div p $('#box p').css('color','red'); //2.子代选择器 div > p $('#box>p').css('color','yellow'); //3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 + $('#father+p').css('font-size','30px'); //4.兄弟选择器 ~ $('#father~p').css('background','blueviolet'); console.log($('li')); //5.获取第一个元素 $('li:first').css('font-size','50px'); //6.获取最后一个元素 $('li:last').css('font-size','50px'); $('li:eq(3)').css('font-size','50px'); }) </script> </html>
基本过滤选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本过滤选择器</title> </head> <body> <ul> <li>哈哈哈哈，基本过滤选择器</li> <li>嘿嘿嘿</li> <li>天王盖地虎</li> <li>小鸡炖蘑菇</li> </ul> </body> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //获取第一个 :first ,获取最后一个 :last //奇数 $('li:odd').css('color','red'); //偶数 $('li:even').css('color','yellow'); //选中索引值为1的元素 * $('li:eq(1)').css('font-size','100px'); //大于索引值1 $('li:gt(1)').css('font-size','50px'); //小于索引值1 $('li:lt(1)').css('font-size','12px'); }) </script> </html>
属性选择器
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$("li[id]").css('color','red')
//[attr=value] 匹配给定的属性是某个特定值的元素
$('li[class=what]').css('font-size','30px')
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('color','darkgreen')
//匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','red')
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','yellow')
//匹配给定的属性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF')
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> <h2 class="title">属性元素器</h2> <!--<p class="p1">我是一个段落</p>--> <ul> <li id="li1">分手应该体面</li> <li class="what" id="li2">分手应该体面</li> <li class="what">分手应该体面</li> <li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type='text' value="1" checked="checked"> <input name="username1111" type='text' value="1"> <input name="username2222" type='text' value="1"> <input name="username3333" type='text' value="1"> <button class="btn-default">按钮1</button> <button class="btn-info">按钮1</button> <button class="btn-success">按钮1</button> <button class="btn-danger">按钮1</button> </form> </div> </body> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 标签名[属性名] 查找所有含有id属性的该标签名的元素 $('li[id]').css('color','red'); //匹配给定的属性是what值得元素 $('li[class=what]').css('font-size','30px'); //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素 $('li[class!=what]').css('font-size','50px'); // 匹配给定的属性是以某些值开始的元素 $('input[name^=username]').css('background','gray'); //匹配给定的属性是以某些值结尾的元素 $('input[name$=222]').css('background','greenyellow'); //匹配给定的属性是以包含某些值的元素 $('button[class*=btn]').css('background','red') }) </script> </html>
筛选选择器
//获取第n个元素 数值从0开始
$('span').eq(0).css('font-size','30px')
//first()获取第一个元素
$('span').first().css('background','red')
//last()获取最后一个元素
//.parent() 选择父亲元素
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'})
//.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red')
//.find()
//查找所有的后代元素
$('div').find('button').css('background','#313131')
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> <p class="p1"> <span>我是第一个span标签</span> <span>我是第二个span标签</span> <span>我是第三个span标签</span> </p> <button>按钮</button> </div> <ul> <li class="list">2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> //获取第n个元素 数值从0开始 $('span').eq(1).css('color','#FF0000'); //获取第一个元素 :first :last 点语法 ：get方法 和set方法 console.log($('span').last()); $('span').last().css('color','greenyellow'); console.log($('span').parent('.p1')); $('span').parent('.p1').css({"width":'300px',height:'400px',"background":'red'}); //.siblings()选择所有的兄弟元素 $('.list').siblings('li').css('color','red'); //.find() //查找所有的后代元素 $('div').find('button').css('background','yellow') </script> </html>
