jQuery知识回顾三（详细版）——2020.07.12

一、jQuery_CSS DOM操作（样式操作）

1、获取class和设置class：class是元素的一个属性，所有获取class和设置class都可以使用attr()方法来完成。

2、追加样式：addClass()。

3、移除样式：removeClass()—从匹配的元素中删除全部或指定的class。

4、切换样式：toggleClass()—控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。

5、判断是否含有某个样式：hasClass()—判断元素中是否含有某个class，如果有，则返回true，没有则返回false。

二、jQuery中的事件—加载DOM（事件处理）

在页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件，在常规的JavaScript代码中，通常使用window.onload方法，在jQuery中使用$(document).read()方法。 

方法	window.onload	$(document).read()
执行时机	必须等待网页中的所有内容加载完毕后（包括图片）才能执行	网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完毕
编写个数	不能同时编写多个	能同时编写多个
简化写法	无	$()

 1、事件绑定

对匹配的元素进行特定的事件绑定：bind()

提示：使用jQuery的is()方法判断元素是否可见。

2、合成事件

hover()：模拟光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数，当光标移出这个元素时，会触发指定的第二个函数。

toggle()：用于模拟鼠标连续单击事件，第一次单击元素，触发指定的第一个函数，当再一次单击同一个元素时，则触发指定的第二个函数，如果有更多个函数，则依次触发，直到最后一个。

toggle()的另一个作用：切换元素的可见状态。

3、事件冒泡

事件会按照DOM层次结构像水泡一样不断向上直至顶端。

解决：在事件处理函数中返回false，会对事件停止冒泡，还可以停止元素的默认行为。

4、事件对象的属性

事件对象：当触发事件时，事件对象就被创建了，在程序中使用事件只需要为函数添加一个参数，该事件对象只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁了。

event.pageX，event.pageY：获取到光标相对于页面的X，Y坐标。

三、jQuery中的动画：隐藏和显示

1、动画（1）

hide()：在HTML文档中，为一个元素调用hide()方法会将该元素的display样式改为none，代码功能同css("display","none")

show()：将元素的display样式改为先前的显示状态

以上两种方法在不带任何参数的情况下，作用是立即隐藏或者显示匹配的元素，不会有任何动画，可以通过制定速度参数使元素动起来。

以上两种方法会同时减少（增大）内容的高度、宽度和不透明度。

2、动画（2）

fadeln()，fadeOut()：只改变元素的透明度，fadeOut()会在指定的一段时间内降低元素的不透明度，直到元素完全消失，fadeIn()则相反。

slideDown()，slideUp()：只会改变元素的高度，如果一个元素的display属性为none，当调用slideDown()方法时，这个元素将由上至下延伸显示，slideUp()方法正好相反，元素由上至下缩短隐藏。

3、动画（3）

toggle()：切换元素的可见状态，如果元素时可见的，则可以切换为隐藏；如果元素是隐藏的，则切换为可见的。

slideToggle()：通过高度变化来切换匹配元素的可见性。

fadeTo()：把不透明度以渐近的方式调整到指定的值（0-1之间）。