【jQuery类库介绍】
jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（框架）。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
所以jQuery就是一个js文件，只是这个js文件里面代码比较多，有1万多行js代码，作用就是把一些js的功能代码的封装起来，这样就可以使用jQuery的简单语法代码，来实现操作执行复杂的js语法代码的目的！！！
1 1.加载速度快 2 2.选择器更多更好用 3 3.一行代码走天下 4 4.支持ajax请求(重点) 5 5.兼容多浏览器 6 ---------------------------------------------------- 7 准备工作 8 1.下载核心文件到本地引入(没有网络也可以使用) 9 <script src="jQuery3.6.js"></script> 10 ---------------------------------------------------- 11 2.CDN网络资源加载(必须有网络才可以使用) 12 https://www.bootcdn.cn/ 13 BootCDN 是 极兔云 联合 Bootstrap 中文网 共同支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、React、Vue.js 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。 14 ------------------------------------- 15 什么是CDN ？ 16 内容分发网络 17 ------------------------------------- 18 https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js # 没压缩的 19 https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js # 压缩后的 20 21 这两个网页打开后里面就是jquery的代码,可以直接复制拷贝到本地的js文件里面去。或者到jquery官网下载代码文件 22 ------------------------------------ 23 想用jquery文件，必须要导入它 24 ------------------------------------ 25 由于jquery文件里面没有针对标签的操作，所以在head标签里面引入是没有问题的！！！ 26 在html文件里面head标签里面复制粘贴一下！！！ 27 <head> 28 <meta charset="UTF-8"> 29 <title>Title</title> 30 <script src="jQuery3.6.js"></script> # 本地引入jQuery3.6.js文件,不联网也能用 31 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"> 32 # 应用网络的,只要有网的情况下,自动去该网络地址把该网页里面的jQuery3.6.js文件加载过来！！ 33 34 </script> 35 </head>
【JQuery下载步骤】
官网：jquery.com
【解决重复导入JS文件问题办法】
（方法一，缺点：需要下载到本地）
（方法二：缺点：必须要有网络）
直接引入JQuery提供的CDN服务（基于网络直接请求加载）
CDN：内容分发网络（有免费的也有收费的）
前端免费的CDN网站：bootcdn
【JQuery基本语法】
（JQ与JS的对比）
需求：将P标签内部的文本颜色改为红色
。
。
【基本选择器】
【组合选择器、分组与嵌套】
html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script src="JQ.js"></script> 8 </head> 9 <body> 10 <span>span</span> 11 <span>span</span> 12 <div id="d1">div 13 <span>div>span</span> 14 <p id="d2">div>p 15 <span>div>p>span</span> 16 </p> 17 <span>div>span</span> 18 </div> 19 <div class="c1"></div> 20 <span>span</span> 21 <span>span</span> 22 </body> 23 </html>
【基本筛选器】
html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script src="JQ.js"></script> 8 </head> 9 <body> 10 <ul> 11 <li>101</li> 12 <li>102</li> 13 <li>103</li> 14 <li>104</li> 15 <li>105</li> 16 <li>106</li> 17 <li class="c1">107</li> 18 <li>108</li> 19 <li id="d1">109</li> 20 <li>110</li> 21 </ul> 22 <div>div 23 <p></p> 24 <span></span> 25 </div> 26 <div>div 27 <a href=""></a> 28 </div> 29 </body> 30 </html>
【属性选择器】
html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script src="JQ.js"></script> 8 </head> 9 <body> 10 <input type="text" username="jason"> 11 <input type="text" username="egon"> 12 <p username="egon"></p> 13 </body> 14 </html>
【表单筛选器】
【筛选器方法】
html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script src="JQ.js"></script> 8 </head> 9 <body> 10 <span id="d1">span</span> 11 <span>span</span> 12 <div id="d2"> 13 <span>div>span</span> 14 <p>div>p 15 <span id="d3">div>p>span</span> 16 </p> 17 <span>div>span</span> 18 </div> 19 <span></span> 20 <span></span> 21 <span class="c1">span</span> 22 </body> 23 </html>
1 //拿到同级下一个 2 $('#d1').next() 3 4 //那下面所有的标签 5 $('#d1').nextAll() 6 7 //拿到直到什么为止的标签 8 $('#d1').nextUntil('.c1') 9 10 //拿到上一级标签 11 $('.c1').prev() 12 13 $('.c1').prevAll() 14 15 $('.c1').prevUntil('#d3') 16 17 //拿父标签 18 $('#d3').parent() 19 20 $('#d3').parents() 21 22 $('#d3').parentsUntil('body') 23 24 //拿到儿子标签 25 $('#d2').children() 26 27 //拿到同一级上下所有 28 $('#d2').siblings() 29 30 //找div内的p标签 31 $('div p') 32 33 $('div').find('p') 34 35 //拿到所有div下的span标签 36 $('div span') 37 38 //只拿div下的第一个span 39 $('div span:first') 40 41 $('div span').first() 42 43 $('div span:not("#d3")')
