JQuery笔记

原生JS钩子函数

当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

document.addEventListener('DOMContentLoaded',function(){
    console.log('3 seconds passed');
});

入口函数

$()是JQ的入口函数

$(function (){{

})

JQ实现页面加载完毕以后方执行相应JS代码

//第一种方式
$(document).ready(function(){
		....
	}
)
//第二种方式，更简介，当html加载完后就会执行。
$(fucntion () {
	....
})

不同于原生js中的load事件，相当于原生JS的domContentLoaded事件。

JQuery对象和DOM对象

1，用原生获取来的对象就是DOM对象:document.querySelector(‘div’)
2，JQuery方法获取的元素就是JQuery对象：$(‘div’)
3，JQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）

JQuery对象和DOM对象两者之间的转换

因为原生的JS比JQuery更大，原生的一些属性和方法JQuery没有给我们封装，想要使用这些属性和方法需要把JQuery对象转换成DOM对象才能使用。
1，DOM对象转换成JQuery对象：$(DOM对象)
2，JQuery对象转换成DOM对象（两种方式）：

• $(‘div’)[index] index 是JQuery伪数组的索引号
• $(‘div’).get(index) index是JQuery伪数组的索引号

JQuery隐式迭代

例如：$(“div”).css(“background”,“pink”)会将获取到的所有div元素都添加背景颜色为粉色

JQuery的排他思想

...
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
....
//隐私迭代给所有元素绑定点击事件，当被点击的dom元素会对自己进行样式设置，同时对同级的所有兄弟节点，不包括自身进行其他设置。
$("button").click(fucntion(){
	$(this).css("background","pink")
	$(this).siblings.css("background","")
})

JQuery对象拷贝(深拷贝、浅拷贝)

语法：

$extend([deep],target,object1,[objectN])

浅拷贝：浅拷贝是把拷贝对象的复杂数据类型的引用拷贝给目标对象，修改目标对象会影响被拷贝的对象。

let target = {id:1,username:'zhangsan'}
let object1 = {age:22,message:{mis:1,content:"this is a message"}}
$extend(target,object1)

深拷贝：深拷贝是会创建一个相同内容但不同引用的复杂数据类型给目标对象。两者的引用不会指向同一个内存空间，修改不会互相影响。

let target = {id:1,username:'zhangsan'}
let object1 = {age:22,message:{mis:1,content:"this is a message"}}
$extend(true,target,object1)

解决$冲突

1，使用jQuery关键字

2，自定义一个jQuery关键字
var xxx = jQuery.noConflict()

JQ插件库

JQ插件库地址
JQ之家

JQuery事件

1，事件注册

（1）单个事件注册的写法

//其他事件和原生事件名称基本一致:
mouseover,mouseout,blur,foucs,change,keydown,keyup,resize,scroll等等
$("div").click(fucntion(){
	...
})

（2）支持多个事件注册的写法

$("div").on(
	{
		mouseennter:function(){...},
		click:function(){...},
		mouseleave:funciton(){...}
	}
)

$("div").on(
	"mouseenter mouseleave",
	fucntion(){...}
)

2，事件处理

（1）on注册事件的优势

• on可以给未来动态创建的元素绑定事件

//这种方式注册的事件，后来动态创建的元素先前注册的事件是不会生效的。
$("ul li").click(function(){...})
//对于on进行注册的事件，后来动态创建的元素依然能够生效注册过的事件
$("ul").on("click","li",function(){...})
//新创建一个元素添加到ul中
var li = $("<li>新创建的li<li>")
$("ul").append(li)

• 可以做事件委派：click事件是绑定在ul身上的，但是触发的对象是ul里面的小li

$("ul").on("click","li",fucntion(){...}
)

（2）off解绑事件

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

//不指定内容，则移除匹配元素身上的所有事件
$("div").off()
//移除指定事件
$("div").off(“click”)
//移除事件委托
$("ul").off("click","li")

（3）one实现事件只触发一次

$("div").one("click",function(){...})

（4）自动触发事件

• 通过元素.事件()方式

//绑定事件
$("div").on("click",function(){...})
//触发事件
$("div").clcik( )

• 通过元素.trigger(“事件”)

//绑定事件
$("div").on("click",function(){...})
//触发事件
$("div").trigger("click")

• 通过元素.triggerHandler(“事件”) 不会触发元素的默认行为
  例如当input元素触发了foucs事件的时候鼠标光标会默认闪烁，因此当使用这个方法时候，这个闪烁的默认行为则不会被触发。

//绑定事件
$("div").on("click",function(){...})
//触发事件
$("div").triggerHandler("click")

3，事件对象

event就是事件对象，

$("div").on("click",function(event){
	...
})

• 事件对象可以阻止默认行为：event.preventDefault()
• 事件对象可以阻止冒泡：event.stopPropagation()

JQuery常用API

1，JQuery选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此JQ给我们做了封装，使获取元素统一标准。

• ID选择器 ：$(" #id ")
• 全选选择器：$(" * ")
• 类选择器：$(" .class ")
• 标签选择器：$(" div ")
• 并集选择器：$(" div,p,li ")
• 交集选择器：$(" li,current ")
• 子代选择器：$(" ul>li ");
• 后代选择器：$（" ul li"）
• 筛选选择器：
  1，获取第一个元素: $(“li:first”)
  2，获取最后一个元素: $(“li:last”)
  3，获取指定索引号中的元素: $(“li:eq(index)”) index索引号从0开始
  4，获取第一个元素: $(“li:odd”) 获取到的li元素中，选择索引号为奇数的元素
  4，获取第一个元素: $(“li:even”) 获取到的li元素中，选择索引号为偶数的元素

2，JQuery筛选方法（重点）

• parent() 用法：$(“li”).parent(); 查找父级
• children(selector) 用法：$(“ul”).children(“li”) 相当于$("ul>li")子代选择器，最近一级（亲儿子）
• find(selector) 用法：$(“ul”).find(“li”)相当于$("ul li后代选择器")后代选择器
• siblings(selector) 用法：$(".first").siblinds(“li”);查找兄弟节点，不包括自身
• nextAll() 用法：$(".first").nextAll();查找当前元素之后的所有同辈元素
• prevAll() 用法：$(".last").prevAll();`查找当前元素之前的所有同辈元素``
• hasClass(class) 用法：$(“div”).hasClass(‘className’);检查当前元素是否含有某个特定的类，例如有则染回true
• eq(index) 用法：$(“li”).eq(index);相当于$("li:eq(index)") index 从0开始

3，属性操作

操作的是元素固有的属性值

获取属性

$(“input”).prop(“checked”)

修改属性

$(“input”).prop(“checked”,true)

4，自定义属性操作

自定义属性是用户自定义的而非原生HTML自带的属性，这种属性称之为自定义属性

获取自定义属性

$(“input”).attr(“index”) //类似原生getAttribute()

修改自定义属性

$(“input”).attr(“index”,1) //类似原生setAttribute()

5，数据缓存

data()方法买这个里面的数据是放在元素的内存里面的

//缓存
$("span").data("uname","andy")
//获取
$("span").data("uname")

另外这个方法也可以获取data-xxx(HTML5)中自定义属性

//设置HTML5自定义属性：data-index
$("div").attr("data-index",6)
//获取HTML自定义属性：
$("div").data("index")//相当于$("div").attr("data-index")

6，样式操作

JQ可以使用css()方法 修改简单元素样式;

获取样式属性值

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

$("div"),css("color");

设置样式

参数是属性名。属性值，逗号进行分割，是一组样式，属性部必须加引号，值如果是数字可以不用跟单位和引号。

$("div"),css("color","red");

参数可以是对象的形式，方便设置多组样式，属性名和属性用的逗号进行隔开，属性可以不用加引号。如果是复合属性（例如font-size）必须采取驼峰命名法，不然就加引号。

$("div"),css({color:"red","font-size":"20px"});

7，操作类属性（class）的方法

添加类

$().addClass(className)

移除类

$().removeClass(className)

切换类

$().toggleClass(className)

	类操作与原生JS中ClassName的区别：
	原生JS中className会覆盖元素原先里面的类名
	JQuery里面的类操作只是对指定类进行操作，不影响原先类名

8，JQuery效果

（1）显示隐藏

显示

show([speed],[easing],[fn])

隐藏

hide([speed],[easing],[fn])

切换

toggle([speed],[easing],[fn])

（2）滑动效果

下拉滑动

slideDown([speed],[easing],[fn])

上拉滑动

slideUp([speed],[easing],[fn])

切换滑动

slideToggle([speed],[easing],[fn])

（3）淡入淡出

淡入

fadeIn([speed],[easing],[fn])

淡出

fadeOut([speed],[easing],[fn])

渐进效果指定透明度

speed,和opacity一定要写，不可省略
fadeToggle(speed,opacity,[easing],[fn])

（4）自定义动画

（1）参数params：想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是符合属性则需要采取驼峰命名法borderLeft。其余参数可以省略

animate(params,[speed],[easing],[fn])
（2）speed：三种预定速度:slow,normal,fast 或者表示动画时长的毫秒数值如：1000
（3）easing（optional）用来指定切换效果，默认swing，可用参数"linear"。
（4）fn：回调函数，在动画完成执行的函数，每个元素执行一次。

（5）停止触发上一次的动画

当我们反复的触发动画就会将动画加入到动画队列，这样所有触发的动画都会依次运行。这样体验并不好，因此当连续触发动画的时候我们只需要执行一次就好了。实现的方式可以通过sop()方法

//这样每次都会先停止上次的动画再触发这一次的动画。
$('div').stop().slideToggle()

10，JQuery操作元素内容html

相当于原生的innerHTML()

（1）获取普通元素内容的html

$(“div”).html()

（2）设置普通元素内容的html

$(“div”).html("123 ")

11，JQuery操作元素的文本内容

相当于原生的innerText()

（1）获取普通元素文本内容

$(“div”).text( )

（2）设置普通元素文本内容

$(“div”).text("123 ")

12，JQquery操作表单元素值value

（1）获取表单元素value值

$(“input”).val( )

（2）设置表单元素文本内容

$(“input”).value("123 ")

13，元素操作

（1）遍历元素

JQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作就需要用到遍历
语法1：
index：是索引号
domEle：是每个DOM元素对象，注意不是JQuery对象所以如果想要使用JQuery方法
需要给这个dom元素转换为JQuery对象$(domEle)

$("div").each(fucntion(index,domEle){
	....
})

语法2：
这个方法可以遍历任何对象，比如：数组，对象。

$.each($("div"),fucntion(index,domEle){
	....
})

（2）操作元素

• 创建元素
  $("<li>内容</li>")

• 添加元素（内部添加）
  $(“ul”).append(“内容”) 该方法是将内容放入到匹配元素内部最后面，类似原生appendChild()
  $(“ul”).prepend(“内容”)

• 添加元素（外部添加）
  $(“div”).after(“内容”) //把内容放入到目标元素后面
  $(“div”).before(“内容”) //把内容放入到目标元素前面

• 删除元素
  $(“div”).remove() 删除匹配元素
  $(“div”).empty() 删除匹配元素的子节点

14，JQuery尺寸、位置操作

（1）尺寸操作

（2）位置操作

① 仅仅相对于文档

• offset() ，返回值是一个对象{ left: xxx, top: xxx }
  返回元素相对于文档的偏移量，跟父级没有关系。
• offset({ left: xxx, top: xxx })设置元素相对于文档的偏移量

② 与定位有关

• position() 方法返回元素带有定位的父级偏移坐标，如果腹肌都没有定位，则以文档为准。这个方法只能获取不能设置

③ 获取或操作被视口遮挡的高度和左边距

• scrollTop()/scrollLeft()
• 拓展 实现带动画效果返回顶部

//注意是对html，body元素做动画而不是文档document
$("html,body").stop().animate({
	scrollTop:0
})

15，hover方法相当于mouseover 和 mouseout 的组合

两个回调的使用，分别是悬停触发和离开触发

//第一个回调fun1是鼠标悬停的回调，第二个回调fun2是鼠标离开的回调
$("div").hover(fun1,fun2)

一个回调的使用，如果只传一个回调，那么悬停和离开都会触发这一个函数

$("div").hover(fun)

通常这种用法可以结合切换效果进行使用，非常简洁。

$(".nav>li").hover(function(){
	$(this).childeren(ul).slideToggle();
})