概念&现状

• jQuery是一个快速，简洁的JavaScript库。主要内容是封装了各种dom操作。也可以认为jQuery是一个函数的库，也是一个特殊的对象；曾经用jQuery的网站超过90%，中大型web项目开发首选。现在用的比较少了。 能帮我们做什么？
• write Less，Do More，写更少的代码做更多的事情。
• Css操作、事件处理、js动画、Ajas封装(axios)、易扩展插件 如何使用？

1.本地下载Jquery文件，本地引入
2.CDN：
3.版本：

• 1.0+ 版本，兼容IE
• 2.0+版本，部分IE8以下支持执行效率高
• 3.0+版本，完全不支持IE8以下，提供了一些的API；提供了不包含Ajax/动画API的版本 说了Jquery那么多的的好，是不是担心我蒙你呢，来吧，我们先来看个例子😊
• 选项卡：当我们点击某个标签，下方显示对应的图片

//这是我们的HTML部分和css部分（下面共用）
<div id="tab"><ul><li class="active"><a href="#">汽车</a></li><li><a href="#">城市风景</a></li><li><a href="#">极地风光</a></li></ul><p class="show"><img src="../img/1.jpg" alt=""></p><p><img src="../img/2.jpg" alt=""></p><p><img src="../img/3.jpg" alt=""></p></div><style> /* 清除和定义格式 */* {padding: 0;margin: 0;}ul {list-style: none;}ul li a {text-decoration: none;color: black;}/* css样式 */#tab {width: 600px;margin: 20px auto;border: 1px solid cornflowerblue;}ul {width: 100%;overflow: hidden;}ul li {float: left;width: 33.33%;height: 50px;line-height: 50px;text-align: center;background-color: #cccccc;}p {height: 200px;text-align: center;line-height: 200px;background-color: #fff;/* 初始状态，所有图片隐藏 */display: none;}img {width: 100%;}/* 图片的响应类 */p.show {display: block;}/* 点击标签的响应类 */li.active {background-color: cornflowerblue;} </style> 

• 用原生的js实现是这样的🚗

 // 获取点击事件对应的所有标签var lis = document.querySelectorAll("li");// 获取点击事件的图片响应var allimg = document.querySelectorAll("p");// 遍历3个点击的事件，让点击事件获取下标for (var i = 0; i < lis.length; i++) {// 在点击事件中新建一个自定义的属性，并把对应标号给新的属性lis[i].dataset.numimg = [i]// 构造点击事件的方法lis[i].onclick = function () {// 点击生效前，遍历3个点击事件，目的：删除他们的active类for (var j = 0; j < lis.length; j++) {lis[j].classList.remove("active");}// 为当前点击的标签名添加active类，点击哪个this就指向哪个this.classList.add("active");// 对应点击事件的图片响应下标var numimg = this.dataset.numimg;// 图片响应前遍历3个图片，目的：删除他们的show类for (var k = 0; k < allimg.length; k++) {allimg[k].classList.remove("show");}// 为当前点击的标签名对应的图片添加show类名allimg[numimg].classList.add("show");}} 

• 用Jquery实现是这样的✈

//引入本地的Jquery库，这里我们用的是3.5.1版本
 <script src="js/jquery3.5.1.js"></script><script> $(function(){$("#tab ul li").click(function(){$(this).addClass("active").siblings().removeClass("active");$("#tab p").eq($(this).index()).addClass("active").siblings().removeClass("active");});}); </script> 

• 是不是很震惊，对的，你没有看错，屈指可数的代码就实现了选项卡 ❤

下面开始进入我们的正题，开始来认识这个牛XX的东西🐱‍🏍

Jquery核心对象和核心函数

$或jQuery 定义了全局的函数供我们调用。传入的参数不同，功能就不同。

• 1.参数为函数：当页面加载完毕后，执行。 和window.onload功能类似。 * 2.参数为选择器字符串：查找所有匹配的标签，并将他们封装成jQuery对象(伪数组)。 * 3.参数为一个DOM对象，会将该DOM对象封装为jQuery对象。 * 4.参数为html标签字符串，创建dom对象并封装成jQuery对象。 * 5.当作为函数调用时$函数名(),会将$后的内容封装为Jquery对象。 jQuery核心对象，执行核心函数之后返回的对象

 //传入参数为一个函数$.each([3, 4, 5], function (index, item) { //遍历数组。console.log("Item #" + index + ": " + item);});
 //参数为选择器字符串：查找所有匹配的标签，并将他们封装成jQuery对象(伪数组)。let res = $("div");console.log(res[0]);//参数为一个DOM对象，会将该dom对象封装为jQuery对象。const box = document.getElementById('box');console.log($(box));//参数为html标签字符串，创建dom对象并封装成jQuery对象。console.log($("<div>123</div>"));document.body.append($("<div>123</div>")[0]) 

选择器

:first 获取第一个元素，:last用法同上类似

<ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li>
</ul>
$('li:first');//结果：<li>list item 1</li> 

:odd匹配所有索引值为奇数的元素，从 0 开始计数,查找表格的2、4、6行（即索引值1、3、5…）:even匹配所有索引值为奇数的元素,用法同上类似。

<table><tr><td>lin 1</td></tr>//索引 0<tr><td>lin 2</td></tr>//索引 1<tr><td>lin 3</td></tr>//索引 2
$("tr:odd")//结果：<tr><td>lin 1</td></tr>
</table> 

parent>child在给定的父元素下匹配所有的子元素,用以匹配元素的选择器，并且它是第一个选择器的子元素

//例子1
<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
$("form > input")//结果：[ <input name="name" /> ]
--------------注意区分↓----------------------------------------
$("form imput")//结果：[ <input name="name" />, <input name="newsletter" /> ]
/*$("祖先 后代")给定的祖先元素下匹配所有的后代元素*/ 

prev + next匹配prev选择器后边紧跟的第一个next元素

//例子1
$("label + input")//结果：<input name="name" /> 

prev ~ siblings匹配prev后的所有siblings元素(同辈份)

//例子1
$("form ~ input")//注意是form的同辈，所以结果是：<input name="none" /> 

#id匹配指定ID的元素

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
$("#myDiv");//结果：[ <div id="myDiv">id="myDiv"</div> ] 

.class根据给定的css类名匹配元素,一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。

<div class="notMe">小洋葱</div>
<div class="myClassmyClass1">大土豆</div>
<span class="myClass">小豌豆</span>
$(".myClass")//结果：[<div class="myClassmyClass1">大土豆</div>,<span class="myClass">小豌豆</span>]
-------------------------------------------------------------
//举一反三
$("..myClass,.notMe")//结果我不说你也知道了😂 

:not(selector)去除所有与给定选择器匹配的元素,支持:not("div a")和not("div,a")

<input name="apple" />
<input name="flower" checked="checked" />
$("input:not(:checked)")//结果：[ <input name="apple" /> ] 

:eq(index)匹配一个给定索引值的元素

<table><tr><td>lin 1</td></tr><tr><td>lin 2</td></tr><tr><td>lin 3</td></tr>
</table>
 $("tr:eq(1)")//结果：[<tr><td>lin 2</td></tr>]也可写成$("tr").eq(1) 

:gt(index)和:lt(index)匹配所有-大于/小于-给定索引值的元素

<table><tr><td>lin 1</td></tr><tr><td>lin 2</td></tr><tr><td>lin 3</td></tr>
</table>
 $("gt:eq(0)")//结果：[ <tr><td>lin 2</td></tr>,<tr><td>lin 3</td></tr>]
 $("lt:eq(2)")//结果：[ <tr><td>lin 1</td></tr>,<tr><td>lin 2</td></tr>] 

操作css样式

 <p>星期一</p><p>星期二</p><p>星期三</p><p>星期四</p><p>星期五</p> 

语法：Jquery对象.css({样式1:值1,样式2:值2…})

 $("p").eq(0).css({height:"100px",fontSize:"20px",backgroundColor:"red"//注意：css中样式名为组合型的需要用驼峰式命名方式表示}) 

补充：offset获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计；必须是带有 top 和 left 属性的对象才行。

//我们还以上边那个星期几的例子来测试，默认以body定位了
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );//结果：<p>Hello</p><p>left: 不带px的值, top: 不带px的值</p> 

操作效果（过渡效果）

hide隐藏显示的元素(如果选择的元素是隐藏的，这个方法将不会改变任何东西)

$("p").hide("slow");//slow 用600毫秒的时间将段落缓慢的隐藏（fast 200毫秒） 

toggle如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$("p").toggle("slow");//slow 用600毫秒的时间将段落缓慢的显示或隐藏（fast 200毫秒） 

slideDown和sliderUp通过高度变化（向下增大/向上减小）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

$("p").slideDown("slow");//slow 用600毫秒，以滑下方式显示隐藏的 <p> 元素（fast 200毫秒）
$("p").slideUp("slow");//slow 用600毫秒，以滑上方式显示隐藏的 <p> 元素（fast 200毫秒） 

stop停止正在运行的动画或效果

// 开始动画
$("开始的事件源").事件类型名(function(){$("动画名字").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("结束的事件源").事件类型名(function(){$("动画名字").stop();
}); 

操作事件

绑定与解绑

//事件绑定两种方式
 1.jQuery.eventName(function(){})
 2.jquery.on(eventname eventname,function(){})
 eg：$("button").click(function(){...}) 

//事件解绑jQuery.off("eventname")； 

事件委托

//HTML部分
 <button id="btn">添加</button><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul> 

 //js实现事件委托<script src="js/jquery3.5.1.js"></script> const btn = document.getElementById('btn'); const ul = document.querySelector("ul") //点击按钮添加一行li btn.onclick = function(){const li = document.createElement("li")li.innerHTML = ul.childElementCount+1;ul.appendChild(li);}//事件委托通过ul触发li的的点击事件ul.onclick = function(even){console.log(even.target.nodeName);if (even.target.nodeName=="LI") {even.target.style.backgroundColor = "brown"}} 

//Jquery实现事件委托
$("ul").on("click","li",function(){$(this).css("backgroundColor","brown")})$("button").one("click",function(){//one只会触发一次（只能添加一次li）const li = document.createElement("li")li.innerHTML = ul.childElementCount+1;ul.appendChild(li);}) 

操作元素的属性

1. attr()

• 读：attr(“属性名”) =主要用于获取元素的属性，包含自定义属性。
• 写：attr(“属性名”,“属性值”) 设置元素的标签属性。 2. removeAttr()删除元素属性

3. attr和prop区别：

• 对于元素原生属性和自定义属性的读写，推荐使用prop 【注意】checked（单选，多选） selected（下拉）或者 disable(禁用)属性，要使用prop，否则会出现下面Q1情况

//html部分
<p title="标题" index="1" data-index="2">你猜猜看</p>
<input type="checkbox" id="deal" >
<script src="js/jquery3.5.1.js"></script>
//Jquery部分
//属性读写和删除（不包含原生的属性）
console.log($("p").attr("title"));//获取到了属性名title，值为标题
console.log($("p").attr("data-abc"));//获取到了自定义属性名data-index，值为2
$("p").removeAttr("index");//结果：<p title="标题"data-abc="2">你猜猜看</p>，属性名为index的被删除了
//获取原生的属性checked，使用attr和prop区别
 $("#deal").click(function(){console.log($(this).prop("checked")); // truefalseconsole.log($(this).attr("checked")); //Q1： undefined}) 

$("p").removeAttr("index");//结果：<p title="标题"data-abc="2">你猜猜看</p>，属性名为index的被删除了
//获取原生的属性checked，使用attr和prop区别
 $("#deal").click(function(){console.log($(this).prop("checked")); // truefalseconsole.log($(this).attr("checked")); //Q1： undefined}) 

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享