jQuery个人学习笔记

---

前言

这几天在B站学完pink老师的jQuery系列教程，想着根据评论推荐的方法试着对学过的知识做一些整理。 [教程视频是这个](https://www.bilibili.com/video/BV1oT4y1u7FS?p=1)

---

一、jQuery的基本使用

1.引入

官网下载jQuery文件

//引入压缩版jquery文件
<script src="jquery.min.js"></script>

2.jQuery的入口函数

<script>
        // 方法1.等文档加载完毕再执行代码
        // $(document).ready(function(){
        //     $('div').hide();//实例代码
        // })
        // 方法2.等着页面DOM加载完毕再去执行js代码(建议使用)
        $(function(){
            $('div').hide();//实例代码
        })
    </script>

• 以上的两个方法都是等待DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完毕，因为jQuery帮我们完成了封装。
• 相当于原生js中的DOMContentLoaded事件
• 不同于原生js中的load事件，load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码

3.jQuery的顶级对象$

1. $是jQuery的别称，在代码中可以使用jQuery代替$,但一般为了方便，通常都直接使用$.
如：$('div')等价于jQuery('div')
2. $是jQuery的顶级对象，相当于原生JavaScript中的window。
用$把元素包装成jQuery对象，就可以调用jQuery的方法。

4.jQuery对象和DOM对象

<script>
         // 1.用原生JS获取来的对象就是DOM对象
         var div = document.querySelector("div");
        // 2.jQuery方法获取的元素就是jQuery对象
        $("div");
</script>

1. jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法。
2. jQuery对象与DOM对象之间是可以相互转换的。
   因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

    <script>
        //1.DOM对象转换为jQuery对象
        // （1）直接获取元素，得到的就是jQuery对象
        $('video');
        // （2）使用原生js获取过来是DOM对象
        var myvideo = document.querySelector('video');
        $(myvideo);//dom对象转换为jQuery对象
        // 2.jQuery对象转换为DOM对象
        // $('video')[index].play();
        // $('video').get(index).play();
        // 如：
        $('video')[0].play();
        $('video').get(0).play();
    </script>

二、jQuery选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。
$(“选择器”)//里面选择器直接写css选择器即可，但是要加引号，单引号双引号都可以。

1.基础选择器

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

2.层级选择器

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

3.筛选选择器

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

4.jQuery筛选方法（重点）

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

三、jQuery常用API

1.隐式迭代

• 遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。
• 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

示例如下：

    <script>
        //给ul中的所有li设置字体颜色为pink色
        //原生js需要借助for循环，jQuery只需要一句代码
        $("ul li").css("color","pink");
    </script>

2.链式编程

<script>
//链式编程 给li添加current，同时兄弟li去除所有的类
 $("ul:eq(0)").addClass("current").siblings("li").removeClass("current");
</script>

3.操作css方法

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。

1. 参数只写属性名，则是返回属性值

$(this).css("color");

2. 参数是属性名，属性值，逗号分隔，是设置一组样式。属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("width",200);
$(this).css("width","200px");

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加括号

$(this).css({
	"color":"white",
	"font-size":"20px"
});

4.类操作与 className区别

• 原生JS中class Name会覆盖元素原先里面的类名。
• jQuery里面类操作知识对指定类进行操作，不影响原先的类名。

<script>
        $(function (){
            //1.原生js添加类
            var divs = document.querySelectorAll(".first");
            divs[0].className = "current";
            //原生js移除类
            divs[0].className='';
            //2.jQuery添加类
            $('.first').addClass('current');//类名变为"first current"    
            //jQuery移除类
            $('.first').removeClass('current');//类名变为"first"
        })
    </script>

5.jQuery尺寸

语法	用法
width()、height()	取得匹配元素宽度和高度值，只算width、height
innerWidth()、innerHeight()	取得匹配元素宽度和高度值，包含padding
outerWidth()、outerHeight()	取得匹配元素宽度和高度值，包含padding 、border
outerWidth(true)、outerHeight(true)	取得匹配元素宽度和高度值，包含padding、border、margin

6.jQuery位置

位置主要有三个：offset()、position()、scrollTop()/scrollLeft()

1. offset()设置或获取元素偏移

• offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
• 该方法有2个属性left和top。
  • offset().top用于获取距离文档顶部的距离
  • offset().left用于获取距离文档左侧的距离

2. position()获取元素偏移

• position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
• 注意：这个方法只能获取，不能设置 。

3. scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

• scrollTop()方法设置或返回被选元素被卷去的头部
• scrollLeft()方法设置或返回被选元素被卷去的左侧

四、jQuery动画效果

jQuery给我们封装了很多动画效果，最为常见的如下：

• 显示隐藏：show() hide() toggle()
• 滑动：slideDown() slideUp() slideToggle()
• 淡入淡出：fadeIn() fadeOut() fadeToggle() fadeTo()
• 自定义动画：animate()

1.显示和隐藏效果

1.1. 显示 show()

语法规范
show( [speed , [easing] , [fn] ] )

参数

• 参数都可以省略，无动画直接显示。
• speed：三种预定速度之一的字符串(“slow”，“normal” or “fast”)或表示动画时长的毫秒数值(如：1000）。
• easing:(Optional)用来指定切换效果，默认是"swing"。可用参数"linear"
• fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

1.2. 隐藏hide()

语法规范
hide( [speed , [easing] , [fn] ] )

参数同上

1.3. 切换toggle()

语法规范
toggle( [speed , [easing] , [fn] ] )

• 参数同上
• 说明：可将效果从show()到hide()之间来回切换

2.滑动效果

2.1. 下滑效果

语法规范
slideDown( [speed , [easing] , [fn] ] )

参数

• 参数都可以省略
• speed三种预定速度之一的字符串(“slow”，“normal” or “fast”)或表示动画时长的毫秒数值(如：1000）。
• easing:(Optional)用来指定切换效果，默认是"swing"。可用参数"linear"
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

2.2. 上滑效果

语法规范
slideUp( [speed , [easing] , [fn] ] )

参数同上

2.3. 滑动效果切换

语法规范
slideToggle( [speed , [easing] , [fn] ] )

• 参数同上
• 说明：可将效果从slideDown()到slideUp()之间来回切换

3.淡入淡出效果

3.1. 淡入效果

语法规范
fadeIn( [speed , [easing] , [fn] ] )

参数同上
3.2. 淡出效果

语法规范
fadeOut( [speed , [easing] , [fn] ] )

参数同上

3.3. 淡入淡出效果切换

语法规范
fadeToggle( [speed , [easing] , [fn] ] )

• 参数同上
• 说明：可将效果从fadeIn()到fadeOut()之间来回切换

3.4. fadeTo修改透明度
渐进方式调整到指定的不透明度

语法规范
fadeTo( [ [speed], opacity, [easing], [fn] ] )

参数：

• opacity:透明度，取值0~1之间，必须写。
• speed：三种预定速度之一的字符串（“slow“，”normal“，or”fast“）或表示动画时长的毫秒数值（如1000），必须写。
• esing：（Optional）用来指定切换效果。默认是”swing“，可用参数”linear“
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

4.自定义动画animate

语法规范
animate(parems,[speed],[easing],[fn])

参数：

• parems：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft，其余参数都可以省略。
• speed：三种预定速度之一的字符串（“slow“，”normal“，or”fast“）或表示动画时长的毫秒数值（如1000）。
• esing：（Optional）用来指定切换效果。默认是”swing“，可用参数”linear“
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

5.事件切换hover

语法规范
hover([over,]out)

参数：

• over:鼠标移到元素上要触发的函数（相当于mouseenter）
• out:鼠标移出元素上要触发的函数（相当于mouseleave）

6.动画队列及其停止排队方法

1.动画或效果队列
动画或者效果一旦触发就会执行，如果多此触发，就会造成多个动画或者效果排队执行。
2.停止排队stop()
（1）stop()方法用于停止动画或效果
（2）注意：stop()写到动画或者效果的前面，相当于停止\结束上一次的动画。

五、jQuery属性操作

1.固有属性操作方法prop()

所谓元素固有属性就是元素本身自带的属性，比如a标签里面的href。
prop()方法可以设置或获取元素的固有属性

1. 获取属性语法
   prop(“属性”)
2. 设置属性语法
   prop(“属性”,“属性值”)

2.自定义属性操作方法attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index=“1”.
attr()方法可以设置或获取元素的自定义属性。

1. 获取属性语法
   attr(“属性”)
   //类似原生getAttribute（）
2. 设置属性语法
   attr(“属性”,“属性值”)
   //类似原生setAttribute（）

该方法也可以获取H5自定义属性。

3.数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

1. 附加数据语法
   data（“name”，“value”）
   //向被选元素附加数据
2. 获取数据语法
   data（“name”）
   //向被选元素获取数据

同时，还可以读取HTML5自定义属性data-index，得到的是数值型

4.jQuery内容文本值

主要针对元素的内容还有表单的值操作。

1. 普通元素内容html()（相当于原生innerHTML）
   html() //获取元素的内容
   html(“内容”) //设置元素的内容
2. 普通元素文本内容text()（相当于原生innerText）
   text() //获取元素的文本内容
   text("文本内容 ") //设置元素的文本内容
3. input表单的值val()（相当于原生value）
   val() //获取表单的value属性值
   val("内容 ") //设置表单的value属性值

六、jquery元素操作

主要是遍历、创建、添加、删除元素操作

1.遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1： $(“div”).each(funciton(index,domEle){xxx;})

1. each()方法遍历匹配的每一个元素。主要用DOM处理。
2. 回调函数function有2个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jquery对象。
3. 如果需要使用jQuery方法，需要将这个dom元素转换为jquery对象$(domEle)

语法2： $.each(object,function(index,element){xxx;})

1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组、对象。
2. function函数有2个参数：index是每个元素的索引号；element遍历内容。

2.创建元素

语法： $("<元素>"+"</元素>")

可以动态创建一个<dom元素>

3.添加元素

1. 内部添加

• element.append(“内容”)
  //把内容放入匹配元素内部最后面，类似原生appendChild
• element.prepend(“内容”)
  //把内容放入匹配元素内部最前面

2. 外部添加

• element.after(“内容”)
  //把内容放入目标元素后面
• element.before(“内容”)
  //把内容放入目标元素前面

4.删除元素

• element.remove()
  //删除匹配的元素（本身）
• element.empty()
  //删除匹配的元素集合中所有的子节点
• element.html("")
  //清空匹配的元素内容

七、jQuery事件

1.事件注册

单个事件注册

语法： element.事件(function(){})

$("div").click(function(){事件处理程序})

其他事件和原生基本一致。
比如mouseover、mouseout 、blur 、focus 、change 、keydown 、keyup 、resize 、scroll等

2.事件处理

2.1. on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法： element.on(events,[selector],fn)

• events:一个或多个用空格分隔的事件类型，如"click"或“keydown”
• selector：元素的子元素选择器
• fn：回调函数 即绑定在元素身上的侦听函数

on()优势1：

• 可以绑定多个事件，多个处理事件处理程序

$("div").on({
	mouseover:function(){},
	mouseout:function(){},
	click:function(){}
})

• 如果事件处理程序相同

$("div").on("mouseover mouseout",function(){
	$(this).toggleClass("current");
});

on()优势2：

• 可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$(('ul').on('click','li',function(){
	alert('hello world!');
	//利用事件冒泡 
})

• 在此之前有bind()、live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

  on()优势3：

• 动态创建的元素，click()没有办法绑定事件，而on()可以给动态生成的元素绑定事件。

2.2. off()解绑事件

• off()方法可以移除通过on()方法添加的事件处理程序。

$("p").off();//解绑p元素所有事件处理程序
$("p").off("click");//解绑p元素上面的点击事件
$("ul").off("click","li");//解绑事件委托

特殊：one()方法,只触发事件一次

2.3.自动触发事件trigger()
有些事件希望自动触发，比如轮播图自动播放跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click()//第一种简写形式 ：元素.事件（）

element.trigger(“type”)//第二种自动触发模式
例子：$(“p”).trigger(“click”);//此时自动触发点击事件，不需要鼠标点击

element.triggerHandler(type)//第三种自动触发模式

3.事件对象

事件被触发，就会有事件对象的产生。

element.on(events,[selector],function(event){
})

event就是事件对象

• event.stopPropagation();//可以阻止事件冒泡

八、jQuery其他方法

1.jQuery对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法

语法： $.extend([deep],target,object1,[objectN])

• deep：如果设为true为深拷贝 ，默认为false浅拷贝
• traget：要拷贝的目标对象
• object1：待拷贝到target的第一个对象
• objectN：待被拷贝到target的第N个对象的对象。
• 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
• 深拷贝,前面加true,完全克隆(拷贝的是对象,而不是地址),修改目标对象不会影响被拷贝对象.
• 两种拷贝都会覆盖原来的数据,有冲突的属性时会被合并到一起.

2.jQuery多库共存

问题概述： jQuery使用 $ 作为标示符,随着jQuery的流行,其他js库也会使用$作为标识符,这样一起使用会引起冲突.

jQuery解决方案:

• 如果 $ 符号冲突：把里面的 $ 符号统一改为jQuery.
  比如jQuery(“div”)
• 让jQuery释放对$的控制权,自己决定一个符号用来替换 $
  jQuery变量规定新的名称： $.no.Conflict()

var xx = $.noConflict();

3.jQuery插件

jQuery功能比较有限,想要更复杂的特效效果,可以借助于jQuery插件完成.
注意：这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也成为jQuery插件.

jQuery插件常用的网站:

• jQuery插件库http://www.jq22.com/
• jQuery之家http://www.htmleaf.com/

jQuery插件使用步骤:

1. 引入相关文件.(jQuery文件和插件文件)
2. 复制相关html\css\js(调用插件)