2020年JQuery课堂笔记

JQuery

JQuery简介

概念：一个JavaScript框架，简化js开发

JavaScript框架：本质上就是一些js文件，封装了js的原生代码

使用步骤：

1. 下载JQuery
2. 导入JQuery的js文件：导入min.js文件
3. 使用

JQuery对象和JS对象区别？

1. JQuery对象在操作时，更加方便
2. JQuery对象和js对象方法不通用

JQuery对象和JS对象相互转换：

• jq --> js：jq对象[索引]或者jq对象.get(索引)
• js --> jp：$(js对象)

选择器

选择器作用：筛选具有相似特征的元素

基本操作学习

1. 事件绑定

   例子：
   //1.获取b1按钮
   $("#b1").click(function(){
       alert("abc");
   });
   

2. 入口函数

   例子：
   $(function(){
       
   });
   

   window.onload 和$(function)区别？

   • window.onload只能定义一次，如果定义多次，后边的会将前边的覆盖掉
   • $(function)可以定义多次

3. 样式控制：css方法

   例子：$("#div1").css("background-color","red");
   

分类：

1. 基本选择器
2. 层级选择器
3. 属性选择器
4. 过滤选择器
5. 表单过滤选择器

基本选择器

选择器类型	语法	功能
标签选择器	$("html标签名")	获取所有匹配标签名称的元素
id选择器	${"#id属性值"}	获取与指定id属性值匹配的元素
类选择器	$(".class属性值")	获取与指定class属性值匹配的元素
并集选择器	$("选择器1,选择器2...")	获取多个选择器选中的所有元素

层级选择器

选择器类型	语法	功能
后代选择器	$("A B")	选择A元素内部的所有B元素
子选择器	$("A > B")	选择A元素内部的所有B子元素

属性选择器

选择器类型	语法	功能
属性名称选择器	$("A[属性值]")	包含指定属性的选择器
属性选择器	$("A[属性名='值']")	包含指定属性等于指定值的选择器
复合属性选择器	$("A[属性名1='值'][]...")	包含多个属性条件的选择器

过滤选择器

选择器类型	语法	功能
首元素选择器	:first	获得选择的元素中的第一个元素
尾元素选择器	:last	获得选择的元素中的最后一个元素
非元素选择器	:not(selector)	不包括指定内容的元素
偶数选择器	:even	从0开始，选取偶数位元素
奇数选择器	:odd	从0开始，选取奇数位元素
等于索引选择器	:eq(index)	选取等于指定索引的元素
大于索引选择器	:gt(index)	选取大于指定索引的元素
小于索引选择器	:lt(index)	选取小于指定索引的元素
标题选择器	:header	选取标题元素（h1~h2）

表单过滤选择器

选择器类型	语法	功能
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
选中选择器（1）	:checked	获取单选/复选框选中的元素
选中选择器（2）	:selected	获得下拉框选中的元素

DOM操作

内容操作

方法	功能
html()	获取/设置元素的标签体内容
text()	获取/设置元素的标签体纯文本内容
val()	获取/设置元素的value属性值

属性操作

1. 通用属性操作

方法	功能
attr()	获取/设置元素的属性
removeAttr()	删除属性
prop()	获取/设置元素的属性
removeProp()	删除属性

attr()和prop()区别：

1. 如果操作的是元素的固有元素，则使用prop()

2. 如果操作的是元素自定义元素，则使用attr()

3. 对class属性操作

方法	功能
addClass()	添加class属性值
removeClass()	删除class属性值
toggleClass()	切换class属性值，如果不存在就添加
css()	执行css

CRUD操作

方法	功能
对象1.append(对象2)	将对象2添加到对象1元素内部的末尾
对象1.prepend(对象2)	将对象2添加到对象1元素内部的开头
对象1.appendTo(对象2)	将对象1添加到对象2元素内部的末尾
对象1.prependTo(对象2)	将对象1添加到对象2元素内部的开头
对象1.after(对象2)	将对象2添加到对象1后边
对象1.before(对象2)	将对象2添加到对象1前边
对象1.insertAfter(对象2)	将对象2添加到对象1后边
对象1.insertBefore(对象2)	将对象2添加到对象1前边
对象.remove()	将对象删除掉
对象.empty()	将对象的后代元素清空，但保留当前对象及其属性

动画

默认显示和隐藏方式

方法	功能
show([speed],[easing],[fn])	显示
hide([speed],[easing],[fn])	隐藏
toggle([speed],[easing],[fn])	切换（显示和隐藏）

参数列表：

1. speed：动画的速度
   • slow
   • normal
   • fast
   • 表示动画时长的毫秒数值
2. easing：用来切换效果
   • swing（默认）：动画执行时效果是先慢，中间快，最后又慢
   • linear：动画执行速度是匀速的
3. fn：在动画完成执行的函数，每个元素执行一个

滑动显示和隐藏方式

方法	功能
slideDown([speed],[easing],[fn])	滑动向下显示
slideUp([speed],[easing],[fn])	滑动向上隐藏
slideToggle([speed],[easing],[fn])	滑动切换

淡入淡出显示和隐藏方式

方法	功能
fadeIn([speed],[easing],[fn])	淡入淡出显示
fadeOut([speed],[easing],[fn])	淡入淡出隐藏
fadeToggle([speed],[easing],[fn])	淡入淡出切换

JQuery的3种遍历方式

JS的遍历方式：for(初始值;循环结束条件;步长)

1. $.each(function(index,element){})

   • index：元素在集合中的索引
   • element：集合中的每一个元素对象
   • 填this：集合中的每一个元素对象

   function中如果有判断语句？

   • return false：结束循环（break）
   • return true：结束本次循环，继续下次循环（continue）

2. $.each(object,[callback])

3. for(元素对象 of 容器对象)

事件绑定

JQuery标准的绑定方式

语法：jq对象.事件方法(回调方法)

注意：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为

on绑定事件/off解除绑定

语法：

1. jq对象.on("事件名称",回调函数)
2. jq对象.off("事件名称")

注意：如果off方法不传递任何参数，则将组件上的所有事件全部解绑

事件切换：toggle

语法：jq对象.toggle(fn1,fn2...)

注意：

1. 当单击jq对象对应的组件，会执行fn1，第二次点击会执行fn2…
2. 1.9版本，toggle()删除，jQuery Migrate插件可以实行其功能

插件机制

作用：增强JQuery的功能

实现方式

1. $.fn.extend(object)（对象级别插件）
   • 增强通过JQuery获取的对象的功能
2. $.extend(object)（全局级别插件）
   • 增强JQuery对象自身的功能