jQuery学习

📚 Web 学习目录

🚀 HTML学习 - 📝 CSS学习 - 🚗 Flex 与 Grid 学习 - 🔦 JavaScript学习 - 🎉 JavaScript 高级

📦 jQuery学习 - 📌 Ajax学习 - 🔮 Nodejs学习 - 🎀 Axios学习

本教程里的资料来源于网友的资料，自己整理以供学习。视频学习：黑马程序员

jQuery

即一个快速简洁的js库。j就是javascript,Q为query查询,把js中的DOM操作做了封装,可以快速的查询使用里面的功能。(write less,Do More)

jQuery官网

JavaScript库

即library,是一个封装好的特定的集合(方法和函数),即封装了很多预定义好的函数在里面,比如动画animate、hide、show、获取元素等

记得引入jquery文件!!!

入口函数

相当于原生js中的DOMContentLoaded,不必等外部资源加载完毕才执行

1
2
3

$(document).ready(function(){  
    // ...页面加载完的入口 
})

1
2
3

$(function(){    
    // ...页面加载完的入口 
})

注: 一般使用第二种

jQuery的顶级对象$

即为jQuery的别称,可以互相替代使用,都是jQuery中的顶级对象,都可以把获得的元素转为jQuery对象,从而使该元素能够使用jQuery中的属性方法

$(function(){ 	 	
     alert(11); 
})  	
// $就是jQuery的别称 可以互相替代 
jQuery(function(){ 	
    jQuery('div').hide(); 
})

注意: 以上二者是等效的,一般用 $

jQuery对象和DOM对象

DOM对象: 用原生js获取的对象就是DOM对象

1	var div = document.querySelector('div');

jQuery对象

用$或者jQuery方法获取的对象就是jQuery对象,本质即为获取DOM元素再用$对其包装为jQuery对象

1 2	var jqdiv = $('div'); console.dir(jqdiv);

jQuery对象和DOM对象的区别

DOM对象只能使用原生js中的属性方法,jquery对象只能使用jquery中的方法,二者不能混淆使用

如:

1 2	$('div').style.display = 'none'; //报错 jQuery无法使用原生js中的style属性 div.hide(); //报错 div无法使用jQuery中的hide方法

jQuery对象家和DOM对象的转换

DOM对象转为jQuery对象
1. 直接用jQuery获取对象,获得的就是jquery对象
  1
  $('video');
2. 如果已经先获取了DOM对象,那么
  1
  2
  var mydiv = document.querySelector('video');
  $(mydiv);
注意: 不要加引号,因为mydiv已经是DOM对象了
jQuery转为DOM对象
因为jQuery获取的DOM元素都以伪数组形式保存在jQuery对象中,所以直接用索引号获取即可
$(元素选择器)[index]
$(元素选择器).get(index)
1
2
$('video')[0];
$('video').get(0);

jQuery选择器

$('选择器’) //其中选择器直接写CSS选择器即可,但是记得加引号!!!

常用选择器

名称	用法	描述
`ID选择器`	`$("#id")`	获取指定ID的元素
`全选选择器`	`$("*")`	匹配所有元素
`类选择器`	`$(".class")`	获取同一类class的元素
`标签选择器`	`$("div")`	获取同一类标签的所有元素
`并集选择器`	`$("div,p,li")`	选取多个元素
`交集选择器`	`$("li.curnett")`	获取同一类标签的所有元素

以及结构伪类选择器都可以使用如 $('li:first-child')

jQuery的层级选择器

名称	用法	描述
`子代选择器`	`$("ul>li");`	使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素
`后代选择器`	`$("ul li);`	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

jQuery的隐式迭代

1	$('div').css("background",'pink');

以上代码的结果是全部div都变为粉色

隐式迭代：就是 jquery 获取元素后会暗中自动对获得的匹配元素伪数组进行遍历操作。如上面给每个 div 都添加 css 样式，取代了原生 js 中的 for 循环

可以利用伪类结构选择器只对其中一个div进行修改而不进行遍历

1	$('div:nth-child(3)').css("background",'yellow');

jQuery筛选选择器

语法	语法	描述
`:first`	`$("li:first")`	获取第一个li元素
`:last`	`$("li:last")`	获取最后一个li元素
`:eq(index)`	`$("li:eq(2)")`	获取到的元素中，选择索引号为2的元素，索引号index从开始。
`:odd`	`$(":odd")`	获取到的元素中，选择索引号为奇数的元素
`:even`	`$("li:even")`	获取到的元素中，选择索引号为偶数的元素

jQuery筛选方法

语法	用法	说明
`panett()`	`$("li").panett();`	查找父级
`childnet(selector)`	`$("ul").chilnet("li")`	相当于 $(“ul>li”) ,最近一级(亲儿子)
`find(selector)`	`$("li").find(li");`	相当于 $(“ul li”) ,后代选择器
`siblings(selector)`	`$(" .first").siblings("li");`	查找兄弟节点，不包括自己本身
`nextAll([expr])`	`$(" .first").nextAll()`	查找当前元素之后所有的同辈元素
`prevtAll([expr])`	`$(" .last").prevAll()`	查找当前元素之前所有的同辈元素
`hasClass(class)`	`$('div').hasClass("protected")`	检查当前的元素是否含有某个特定的类，如果有，返回true
`eq(index)`	`$("1i").eq(2);`	相当于 $(“li:eq(2)”), index 从0开始

$('选择器').panett() 获取最近的父级元素

1	console.log($(".son").panett()); //寻找son的父级元素

$('选择器').panetts("查找的元素") 获取指定的祖父级元素
1
console.log($(".four").panetts(".one"));
$("选择器").childnet("查找的元素") 获取最近一级的子元素相当于选择器>查找的元素
1
$(".nav").childnet("p").css("color","red"); //寻找nav中的亲儿子p元素
$("选择器").find("查找的元素") 获取所有目标子元素相当于选择器查找的元素
1
$(".nav").find("p").css("color","red"); //寻找nav中所有p元素
$("选择器").sibling("查找的元素") 获取所有处于同一级的元素(兄弟元素)但不包括自己
1
$("ol .item").siblings('li').css("color","red");
$("选择器").eq(index) 获取该对象中的第index个元素相当于$("选择器:eq(index)")
1
$("ul li").eq(4).css("color","pink"); //获取获得的所有li中的第3个
注: 一般采用这种写法,因为index可以写入变量

状态选择器

$("xxx:checked") 返回xxx中被选中的

jQuery的排他思想

可以利用sibling轻松实现排他思想

$(function(){ 
    $("button").click(function(){ 	
        $(this).siblings('button').css("background-color",""); 	
        $(this).css("background-color","red");
    }) 
})

jQuery链式编程

即可以对一个对象按顺序进行多个操作

每一个对象执行完操作后下一个对象都是以前一个对象为标准,而不是以第一个

$("button").click(function(){ 
    // 即可以对同个操作对象实现多个操作  
    $(this).css("color","red").siblings('button').css("color","");
})

jQuery修改css样式的方法

利用css属性
如果只写参数,那么则会返回属性值
1
console.log($("div").css("color"));
如果只想修改一个属性,那么 $(“目标对象”).css(“属性名”,”属性值”)
1
$("div").css("width","300px");
如果想修改多个属性,那么则以对象方式写入修改的属性和属性值。$("目标对象").css({"属性名1":"属性值1","属性名2":"属性值2","属性名2":"属性值2"...})
其中属性名双引号可加可不加,如果加则属性名按驼峰命名法写,如果不加则不变
1
$("div").css({"width":"300px","height":"300px","backgroundColor":"red"});

利用类名修改

$("目标对象").addClass('class_name') 添加类名

1
2
3

$("div").click(function(){
    $(this).addClass('curnett');
})

$("目标对象").removeClass('class_name') 移除类名

1
2
3

$("div").dblclick(function(){ 
    $(this).removeClass('curnett'); 
})

$("目标对象").toggleClass('class_name') 切换类名无则切换有则取消

1
2
3

$("div").click(function(){ 
    $(this).toggleClass('new');
})

注意: jQuery中的类操作不会影响原有类名,addClass相当于追加类名

$("目标对象").hasClass('class_name') 检查目标对象是否有某个类名,返回布尔值

if($(this).hasClass('fa-play')) {    
    video.play();     
    $(this).addClass('fa-pause').removeClass('fa-play');
} else {   
    video.pause();  
    $(this).addClass('fa-play').removeClass('fa-pause');  
}

jQuery效果

显示隐藏效果

显示效果

元素.show("显示速度",回调函数) 参数可写可不写

$(function(){      
    $("button").eq(1).click(function() {      
        $("div").show(1000,function(){     
            alert(1);       
        });      
    })
})

隐藏效果

元素.hide("显示速度",回调函数) 参数可写可不写

$("button").eq(1).click(function() {  
    $("div").hide(1000,function(){    
        alert(1);  
    }); 
})

切换显示/隐藏效果(有则消失,无则切换)
元素.toggle("显示速度",回调函数)
1
2
3
$("button").eq(2).click(function() {
$("div").toggle(1000);
})
注意: 一般情况下不加参数,直接显示隐藏

滑动效果

上拉效果

元素.slideUp("显示速度",回调函数)

$("button").eq(0).click(function() {
    $("div").slideUp(1000,function(){   
        flag = true;
    })
})

下拉效果

元素.slideDown("显示速度",回调函数)

$("button").eq(1).click(function() {          
    $("div").slideDown(1000,function(){            
        flag = true;         
    });       
})

切换滑动效果下拉则上拉上拉则下拉

元素.slideToggle("显示速度",回调函数)

$("button").eq(2).click(function() {        
    $("div").slideToggle(300,function(){         
        flag = true;         
    });      
})

事件切换

元素.hover(function() {经过元素时触发的事件}, function() 离开元素时触发的事件});

$(".fatheropi>li").hover(function() { 
    $(this).childnet("ul").slideDown(300);
}, function() { 
    $(this).childnet("ul").slideUp(300);
});

如果参数中的函数只写一个,那么经过或者离开该元素都会触发事件(一般会用toggle类事件与其搭配)

1
2
3

$(".fatheropi>li").hover(function(){ 
    $(this).childnet("ul").stop().slideToggle(300);
})

停止正在进行中的动画

动画一旦触发就会执行如果不断触发就会造成排队执行 ,利用stop()可以停止动画的执行,在动画效果中用stop()相当于停止上一次还在运行中的动画利用这个函数可以防止动画排队执行

1
2
3

$(".fatheropi>li").hover(function(){ 
    $(this).childnet("ul").stop().slideToggle(300);
})

注意: stop应写在所有有动画的元素之后及其动画之前！！！！！！

淡入淡出效果

淡入效果
元素.fadeIn("显示速度",回调函数) //参数可写可不写
1
2
3
$("button").eq(0).click(function() {
$("div").fadeIn(1000);
})
淡出效果
元素.fadeOut("显示速度",回调函数) //参数可写可不写
1
2
3
$("button").eq(1).click(function() {
$("div").fadeOut();
})

淡入淡出切换

元素.fadeToggle("显示速度",回调函数) 参数可写可不写

$("button").eq(2).click(function() {  	
    // 淡出淡出切换    
    $("div").fadeToggle(1000);
})

改变透明度
元素.fadeTo("显示速度",最终透明度,回调函数) 前两个参数必写
1
2
3
$("button").eq(3).click(function() {
$("div").fadeTo("normal",.1);
})

注意: fadeTo和fadeIn、fadeOut不能搭配使用!!!

自定义动画效果

元素名.animate({样式名1: 样式值,样式名2: 样式值...},速度,速度曲线,回调函数)

document不能设置动画！！！！！

1
2
3

$("div").animate({left:200,top:500},300,function(){
    $(this).css("background-color","green");
});

jQuery属性操作

原有属性的操作(prop)

获取原有属性值

元素.prop("属性名")

1	console.log($("a").prop("href"));

修改原有属性值

元素.prop("属性名,"属性值")

1	$("a").prop("title","shabi");

自定义属性的操作(attr)

获取自定义属性值
元素.attr("属性名")
1
console.log($("div").attr("index"));
修改自定义属性值
元素.attr("属性名","属性值")
1
$("div").attr("index",3);

属性数据的缓存(data)

缓存数据
元素名.data("属性名",属性值): 不会给元素添加该属性名,只是保存,以便后面调用
1
$("span").data("uname","andy");

调取数据

元素名.data("属性名")

1	console.log($("span").data("uname"));

同时还可以获取元素用data-xx定义的自定义属性直接写后面名字即可不用加data

<div index="1" data-index="2" data-name="uuu"> 		
    11   
</div>  

<script>
    console.log($("div").data("name"));
</script>

注意: 以上方法设置属性时,如果属性值是布尔值,不用加双引号

jQuery获取文本内容

获取设置元素所有内容

$(元素).html(): 相当于innerHTML 返回元素的内容(包括标签)

$(元素).html("xxx"): 给元素添加内容XXX

1 2	console.log($("div").html()); $("div").html("345");

获取设置元素的文本内容

$(元素).text(): 相当于innerText 获取元素的文本内容(只有文本,没有标签)

$(元素).text("xxxx"): 设置元素文文内容为xxx

1	console.log($("div").text()); $("div").text("jjj");

获取设置表单值

$(表单元素).val(): 相当于value 获取表单元素的值

$(表单元素).val("xxxx"): 将表单的值设置为xxxx

1
2
3

$("input").val();
console.log($("input").val());
$("input").val("123");

jQuery元素的操作

遍历

$("元素").each(function(index,domEle){}): 其中index为索引值 domEle为DOM元素,不是jQuery元素,所以要使用jQuery方法必须加$

$("div").each(function(index,domEle) {
    console.log(index); 
    // domEle.css("color","red");
    // 错误
    $(domEle).css("color",arr[index]);
    sum += parseInt($(domEle).text());
    // 注意返回的是字符串 要转为数字型
})

注意: 也可以遍历数组

var arr = ["red","yellow","blue"];
$(arr).each(function(index,domEle){ 		
    console.log(index); 		
    console.log(domEle); 
})

$.each($("元素"),function(index,domEle){}): function中参数和上面一样

注意: 一般该方法用于遍历数据,可以遍历元素数组对象

遍历对象时,第一个参数是属性名,第二个为属性值

$.each($("div"),function(i,ele){ 
    console.log(i);
    console.log(ele);
})
$.each(arr,function(i,ele){
    console.log(i);
    console.log(ele);
}) 
$.each({name:"andy",age:"19"},function(i,ele){ 
    console.log(i); 
    console.log(ele);
})

jQuery添加删除元素

创建元素
var 变量 = $("添加的元素")
1
var li = $("<li>new</li>");
添加元素
- 内部添加(添加完为父子关系)
  $("父元素").append(添加的元素): 添加到父元素最后面相当于appendChild
  1
  $("ul").append(li);
  $("父元素").prepend(添加的元素): 添加到父元素最前面
  1
  $("ul").prepend(li);
- 外部添加(添加完为兄弟关系)
  $("元素").after(添加的元素) 添加到元素后面
  1
  $(".test").after(div);
  $("元素").before(添加的元素): 添加到元素前面
  1
  $(".test").before(div);
删除元素
$("元素").remove(): 删除元素本身自杀
1
$("ul").remove();
$("元素").empty(): 删除元素的所有子节点
1
$("ul").empty();

jQuery尺寸方法

$("元素").width()/height(): 只能获取内容高宽不包含 margin padding borer

1 2	console.log($("div").width()); $("div").width(300);

$("元素").innerWidth/innerHeight: 获取 width+padding == clientWidth

1	$("div").innerWidth(400);

$("元素").outerWidth/outerHeight: 获取 width+padding+border == offsetWidth

1 2	console.log($("div").outerWidth()); console.log($("div").outerWidth(true));

如果加参数true,则会加上margin

注意: 如果以上所有的参数为空,则是获取相应值,返回数字型。如果参数是数字,则是修改相应值,参数不用加单位

jQuery位置获取

$("元素").offset(): 获取元素距离文档的距离,跟父元素无关。获取的值包含了top和left,为对象形式,添加参数可以修改

$("元素").offset().top/left: 获取元素距离文档顶部/左边的值

console.log($(".son").offset());
$(".son").offset({ 	 	
    top:200, 	 		
    left:200 	 
}) //修改

$("元素").position(): 获取目标元素距离带有定位的父级元素的距离,如果父级都没有定位,则以文档为准,也是返回对象形式,只能获取不能设置 == offsetLeft/offsetTop

1	console.log($(".son").position());

$("元素").scrollTop/scrollLeft: 获取元素头部/左边被卷去的距离,加参数可以修改卷动距离也可应用于动画

1 2	console.log($(document).scrollTop()); $(document).scrollTop(0); 实现页面直接滚回顶部

jQuery事件

jQuery事件注册

单个事件注册
$("元素").xxxx(function() {}): 与原生js差不多
1
2
3
$("div").click(function() {
$(this).css("background-color","red");
})
缺点: 一次只能绑定一个事件,而且无法给动态创建的元素绑定事件(不会动态更改元素指向)

多个事件注册

$("元素").on(): 与addEventListener相似

绑定一个事件

$("元素").on(事件类型,函数)

1
2
3

$("div").on("click",function() { 			
    alert("wocanima1"); 	
})

多个事件触发同个函数
$("元素").on("事件类型1 事件类型2 ...",函数): 相当于hover的写法
1
2
3
$("div").on("mouseenter mouseleave",function(){
$(this).toggleClass('curnett');
})

多个事件分别触发不同函数 (以对象形式书写)

$("元素").on({事件类型1:函数1,事件类型2:函数2,事件类型3:函数3}...)

$("div").on({ mouseenter: function(){ 
    $(this).css("background-color","red");
}, click:function(){ 	
    $(this).css("background-color","skyblue");
}, mouseleave:function() { 
    $(this).css("background-color","blue");
}
})

利用on实现事件委托(把原来绑定在子元素的事件绑定在父元素上,可以免去重复给同类元素定义事件)
$("元素").on(事件类型,触发对象,函数)
其中$(this)指向的是实参中的触发对象)
1
2
3
4
5
$("ul").on("click","li",function(){
// 绑定的是ul,但是触发的是li
alert(11);
$(this).html("ojbk");
})

jQuery事件解绑

$("元素"),off()

解绑全部事件
$("元素").off()
1
$("div").off();
解绑指定事件
$("元素").off(事件类型)
1
$("div").off("click");
解绑事件委托
$("元素").off(事件类型,触发对象)
1
$("ul").off("click","li");

one事件(只能触发事件一次)

$("元素").one(事件类型,函数): 语法与on相同

1
2
3

$("p").one("click",function(){ 
    alert(11); 
})

该事件注册后点击一次后就失效了

自动触发事件

$("元素").click()
1
$("div").click();
$("元素").trigger("事件类型")
1
$("div").trigger('click');
$("元素").triggerHandler("事件类型") 与上面的区别为这个方法不会触发默认事件
1
$("div").triggerHandler('click');

事件对象(与原生基本一致)

$("div").on("click",function(e) {
    e.stopPropagation(); 
    console.log("点击了div");
})

jQuery其他方法

元素拷贝

$.extend([deep],拷贝给谁,拷贝谁1,拷贝谁2,...): deep属性可以选填默认为浅拷贝如果为true 则是深拷贝

浅拷贝

var targetobj = {}; 
var obj = {
    id:1,
    name:"andy",
    msg:{ 
        age:19 
    } 
} 
$.extend(targetobj,obj);

深拷贝

var targetobj = {}; 
var obj = { 
    id:1, 
    name:"andy",
    msg:{
        age:18
    }
}
$.extend(true,targetobj,obj);

多库共存

如果$符号冲突则用jquery关键字代替
或者用定义一个变量,替换$

var xx = $.noConflict();

var  suibian = $.noConflict();
console.log(suibian("div"));

关于数据储存

本地存储只能存储字符串的数据格式

JSON.stringify(): 把数组对象转为字符串格式,以便赋予本地存储

JSON.parse(): 把本地存储的数据转为对象格式,以便修改本地存储的视距