一.jQuery基本介绍
(其实jQuery就是基于JS的一个类库，很多JS手写的方法，jQuery都已经封装好了只需调用就行，点击下方官网下载，然后导入jQuery库就可以啦~)
jQuery是一个快速，简介的JavaScript库，其设计的宗旨是“Write Less,Do More”
,即倡导写的更少的代码，做更多的事情,且使用jQuery的网站超过了90%，是中大型WEB项目开发首选
jQuery官网：http://jQquery.com/
1.1JavaScript库
即library，是一个封装好的特定的集合（方法和函数），这样就可以快速高效的使用这些封装好的功能
常见的JavaScript库
Prototype：是最早成型的JS库之一，碎玉JS的内置对象做了大量扩展。
Do jo:提供了很多奇特JS库没有提供的功能。例如:离线存储的API，生成图标的组件等等。
YUI：是由Yahoo公司开发的一套完整的，扩展性良好的富交互网页程序工作集。
Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。 Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。
jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。
1.2 jQuery的作用
- 轻量级。核心文件几十KB，不会影响页面加载速度
- 跨浏览器兼容。
- HTML 元素选取（选择器）
- HTML 元素操作
- CSS 操作
- HTML 事件处理
- JS 动画效果
- 链式调用 a().b().c()...
- 读写合一
- 浏览器兼容
- 易扩展插件
- ajax 封装
二.基本使用
2.1 jQuery版本
- jQuery版本分为1.x,2.x,3.x
- 1.x版本：能够兼容IE6，7，8浏览器
- 2.x版本：不兼容IE6，7，8浏览器
- 3.x：不兼容IE6，7，8浏览器
目前只更新3.x版本，其他两种不再更新
2.2jQuery的两把利器
// jQuery核心代码
(function(window){
var jQuery = function(){
return new jQuery.fn.init();
}
window.$ = window.jQuery = jQuery
})(window)
jQuery核心函数
简称：jQuery函数，jQuery库向外直接暴露的就是$ / jQuery
引入jQuery库后，直接使用即可
- 当前函数：$(xxx)
- 当对象用：$.xxx( )
jQuery核心对象
简称：jQuery对象
得到jQuery对象：执行jQuery函数返回的就是jQuery对象
使用jQuery对象：$obj.xxx()
2.2.1jQuery函数的使用
作为一般函数调用：$(param)
- 参数为函数：当 DOM 加载完成后，执行此回调函数
- 参数为选择器字符：查找所有匹配的标签并将它们封装成
jQuery对象 - 参数为 DOM 对象：将 dom 对象封装成
jQuery对象 - 参数为 html 标签字符串（用得少）：创建标签对象并封装成
jQuery对象
作为对象使用：$.xxx()
$.each()：隐式遍历数组$.trim()：去除两端的空格
// 需求1.点击按钮：显示按钮的文本，显示一个新的输入框 // 1、参数为函数：当 DOM 加载完成后，执行此回调函数 $(function () { // 绑定文档加藏完成的监听 // 2、参数为选择器字符：查找所有匹配的标签并将它们封装成`jQuery`对象 $("#btn").click(function () { // alert(this.innerHTML); // this是什么？发生事件的dom元素（<button>） // 3、参数为 DOM 对象：将 dom 对象封装成`jQuery`对象 alert($(this).html()); // 4、参数为 html 标签字符串（用得少）：创建标签对象并封装成`jQuery`对象 $('<input type="text" name="msg3"><br/>').appendTo("div"); }); // 需求2.遍历输出数组中所有元素值 var arr = [3, 7, 4]; $.each(arr, function (index, item) { console.log(index, item); // 0 3 1 7 2 4 }); })
2.2.2jQuery对象的使用
即执行jQuery核心函数返回的对象
jQuery对象内部包含的是 dom 元素对象的伪数组（可能只有一个元素）
jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作 dom
三.选择器
jQuery 选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素
3.1基本选择器
| 名称 | 用法 | 描述 |
| ID选择器 | $（“#id”） | 获取指定ID的元素 |
| 类选择器 | $（“.class”） | 获取同一类class的元素 |
| 标签选择器 | $（“div”） | 获取同一类标签的所有元素 |
| 并集选择器 | $（“div，p，li”） | 使用逗号分开，只要符合条件之一就可 |
| 交集选择器 | $（“div，redClass”） | 获取class为redClass的div元素 |
| 属性选择器 | $（“input【name=username】”） | 获取input标签中name属性为username的元素 |
注：jQquery选择器返回的是jQuery对象
<script type="text/javascript"> //常用选择器 //根据id获取元素 获取到的结果：类数组对象 console.log( $('#div0') ); console.log( $('#div0')[0] ); //根据class获取元素 console.log( $('.div_1') ); //根据标签名称来获取元素 console.log( $('div') ); //根据属性获取元素 console.log( $('input[name=username]') ); //根据表单元素属性获取元素 console.log( $(':checked') ); </script>
3.2层级选择器
| 名称 | 用法 | 描述 |
| 子代选择器 | $（“ul>li”） | 使用>号，获取儿子层级的元素，注意并不会获取孙子层级的元素 |
| 后代选择器 | $（“ul li ”） | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
3.3 过滤选择器
这类选择器都带冒号:
| 名称 | 用法 | 描述 |
| :eq（index） | $('li:eq(2)').css('color', 'red'); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $('li:odd').css('color', 'red'); | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $('li:even').css('color', 'red'); | 获取到的li元素中，选择索引号为偶数的元素 |
3.4筛选方法
- 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
| 名称 | 用法 | 描述 |
| children(selector) | $('ul').children('li') | 相当于$('ul>li')，子类选择器 |
| find(selector) | $('ul').find('li'); | 相当于$('ul li'),后代选择器 |
| siblings(selector) | $('#first').siblings('li'); | 查找兄弟节点，不包括自己本身。 |
| parent() | $('#first').parent(); | 查找父亲 |
| parents() | $('li').parents(); | 查找祖先元素 |
| eq(index) | $('li').eq(2); | 相当于$('li:eq(2)'),index从0开始 |
| next() | $('li').next() | 找下一个兄弟 |
| prev() | $('li').prev() | 找上一次兄弟 |
| closest | $('li').closest('ul') | 找最近一个祖先元素 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav > li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav > li > a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid #fecc5b; border-right: 1px solid #fecc5b; } .nav ul li { border-bottom: 1px solid #fecc5b; } .nav ul li a:hover { background-color: #fff5da; } </style> </head> <body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> </ul> </li> <li> <a href="#">微博</a> <ul> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> </ul> </li> <li> <a href="#">微博</a> <ul> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> </ul> </li> </ul> <script src="./jquery-3.6.0.js"></script> <script> $(function () { // 鼠标经过 $(".nav>li").mouseover(function () { // 显示元素（this 表示当前元素） $(this).children("ul").show(); }); // 鼠标离开 $(".nav>li").mouseout(function () { $(this).children("ul").hide(); }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <script> $(function() { // 1. 隐式迭代 给所有的按钮都绑定了点击事件 $("button").click(function() { // 2. 当前的元素变化背景颜色 $(this).css("background", "pink"); // 3. 其余的兄弟去掉背景颜色 隐式迭代 $(this).siblings("button").css("background", ""); }); }) </script> </body> </html>
