概念&现状
- jQuery是一个快速，简洁的JavaScript库。主要内容是封装了各种dom操作。也可以认为jQuery是一个函数的库，也是一个特殊的对象；曾经用jQuery的网站超过90%，中大型web项目开发首选。现在用的比较少了。 能帮我们做什么？
- write Less，Do More，写更少的代码做更多的事情。
- Css操作、事件处理、js动画、Ajas封装(axios)、易扩展插件 如何使用？
- 本地下载Jquery文件，本地引入
- CDN：
- 版本：
- 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="myClass myClass1">大土豆</div>
<span class="myClass">小豌豆</span>
$(".myClass")//结果：[<div class="myClass myClass1">大土豆</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")); // true false
console.log($(this).attr("checked")); //Q1： undefined
})
