Jquery基础入门

概念&现状

• 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部分（下面共用）
汽车
城市风景
极地风光
 

• 用原生的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版本
  

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

---

下面开始进入我们的正题，开始来认识这个牛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($("
123
"));document.body.append($("
123
")[0]) 

选择器

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

list item 1
list item 2
list item 3
list item 4
list item 5

$('li:first');//结果：
list item 1
 

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

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

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

//例子1
Name:
Newsletter:
 


$("form > input")//结果：[  ]
--------------注意区分↓----------------------------------------
$("form imput")//结果：[ ,  ]
/*$("祖先 后代")给定的祖先元素下匹配所有的后代元素*/ 

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

//例子1
$("label + input")//结果： 

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

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

#id匹配指定ID的元素

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

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

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

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

$("input:not(:checked)")//结果：[  ] 

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

lin 1
lin 2
lin 3

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

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

lin 1
lin 2
lin 3

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

操作css样式

 
星期一
星期二
星期三
星期四
星期五
 

语法：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 );//结果：
Hello
left: 不带px的值, top: 不带px的值
 

操作效果（过渡效果）

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

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

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

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

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

$("p").slideDown("slow");//slow 用600毫秒，以滑下方式显示隐藏的 
 元素（fast 200毫秒）
$("p").slideUp("slow");//slow 用600毫秒，以滑上方式显示隐藏的 
 元素（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部分
 添加
1
2
3
4
 

 //js实现事件委托 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部分
你猜猜看


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

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

最后

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

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