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

常用选择器

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

以及结构伪类选择器都可以使用 如 $('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筛选方法

语法用法说明
parent()$("li").parent();查找父级
children(selector)$("ul").chilren("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开始
  • $('选择器').parent() 获取最近的父级元素

    1
    console.log($(".son").parent()); //寻找son的父级元素
  • $('选择器').parents("查找的元素") 获取指定的祖父级元素

    1
    console.log($(".four").parents(".one"));
  • $("选择器").children("查找的元素") 获取最近一级的子元素 相当于 选择器>查找的元素

    1
    $(".nav").children("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('current');
    })

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

    1
    2
    3
    $("div").dblclick(function(){ 
    $(this).removeClass('current');
    })

    $("目标对象").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).children("ul").slideDown(300);
}, function() {
$(this).children("ul").slideUp(300);
});

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

1
2
3
$(".fatheropi>li").hover(function(){ 
$(this).children("ul").stop().slideToggle(300);
})

停止正在进行中的动画

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

1
2
3
$(".fatheropi>li").hover(function(){ 
$(this).children("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('current');
      })
    • 多个事件分别触发不同函数 (以对象形式书写)

      $("元素").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(): 把本地存储的数据转为对象格式,以便修改本地存储的视距