jQuery学习

jQuery学习

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中的属性方法

1
2
3
4
5
6
7

$(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选择器即可,但是记得加引号!!!

常用选择器

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

jQuery的层级选择器

jQuery的隐式迭代

1

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

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

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

1

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

jQuery筛选选择器

jQuery筛选方法

• $('选择器').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轻松实现排他思想

1
2
3
4
5
6

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

jQuery链式编程

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

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

1
2
3
4

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

jQuery修改css样式的方法

1. 利用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"});

2. 利用类名修改

   $("目标对象").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') 检查目标对象是否有某个类名,返回布尔值

   1 2 3 4 5 6 7

   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("显示速度",回调函数) 参数可写可不写

  1 2 3 4 5 6 7

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

• 隐藏效果

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

  1 2 3 4 5

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

• 切换显示/隐藏效果(有则消失,无则切换)

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

  1 2 3

  $("button").eq(2).click(function() { $("div").toggle(1000); })

  注意: 一般情况下不加参数,直接显示隐藏

滑动效果

• 上拉效果

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

  1 2 3 4 5

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

• 下拉效果

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

  1 2 3 4 5

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

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

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

  1 2 3 4 5

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

事件切换

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

1
2
3
4
5

$(".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("显示速度",回调函数) 参数可写可不写

  1 2 3 4

  $("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

  1 2 3 4 5 6 7

  <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元素的操作

遍历

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

   1 2 3 4 5 6 7 8

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

   注意: 也可以遍历数组

   1 2 3 4 5

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

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

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

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

   1 2 3 4 5 6 7 8 9 10 11 12

   $.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添加删除元素

1. 创建元素

   var 变量 = $("添加的元素")

   1	var li = $("<li>new</li>");

2. 添加元素

   • 内部添加(添加完为父子关系)

     $("父元素").append(添加的元素): 添加到父元素最后面 相当于appendChild

     1	$("ul").append(li);

     $("父元素").prepend(添加的元素): 添加到父元素最前面

     1	$("ul").prepend(li);

   • 外部添加(添加完为兄弟关系)

     $("元素").after(添加的元素) 添加到元素后面

     1	$(".test").after(div);

     $("元素").before(添加的元素): 添加到元素前面

     1	$(".test").before(div);

3. 删除元素

   $("元素").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: 获取元素距离文档顶部/左边的值

1
2
3
4
5

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事件注册

1. 单个事件注册

   $("元素").xxxx(function() {}): 与原生js差不多

   1 2 3

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

   缺点: 一次只能绑定一个事件,而且无法给动态创建的元素绑定事件(不会动态更改元素指向)

2. 多个事件注册

   $("元素").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}...)

     1 2 3 4 5 6 7 8

     $("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()

1. 解绑全部事件

   $("元素").off()

   1	$("div").off();

2. 解绑指定事件

   $("元素").off(事件类型)

   1	$("div").off("click");

3. 解绑事件委托

   $("元素").off(事件类型,触发对象)

   1	$("ul").off("click","li");

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

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

1
2
3

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

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

自动触发事件

1. $("元素").click()

   1	$("div").click();

2. $("元素").trigger("事件类型")

   1	$("div").trigger('click');

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

   1	$("div").triggerHandler('click');

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

1
2
3
4

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

jQuery其他方法

元素拷贝

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

• 浅拷贝

  1 2 3 4 5 6 7 8 9

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

• 深拷贝

  1 2 3 4 5 6 7 8 9

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

多库共存

1. 如果$符号冲突 则用jquery关键字代替

2. 或者用定义一个变量,替换$

1
2
3
4

var xx = $.noConflict();

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

关于数据储存

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

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

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