jQuery知识点总结，希望对你们有帮助

系列文章目录

一、jQuery简介

二、JS对象与jQuery对象

三、jQuery选择器

四、jQuery操作

五、jQuery动画效果

六、jQuery数组的遍历

七、validate表单插件

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

 

文章目录

• 系列文章目录

---

一、jQuery简介

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。使用jQuery没有浏览器兼容性问题

1.1 jQuery下载

目前只有1.x版本兼容性最好，1.x版本支持对ie6、ie7、ie8的支持。但是1.x官网已经不再增添新的功能了。只做bug库的维护

1.2 jQuery引入

外部引入：<script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>

1.3 jQuery基本语法

通过jQuery(选择器) 或 $(选择器)来查找元素。

1.4 jQuery页面加载

方式一：$(function(){ })

方式二：$(document).ready(function(){ })

方式三：jQuery(document).ready(function(){ })

二、JS对象与jQuery对象

 

1.1 DOM对象与jQuery对象

DOM对象：就是通过原生JavaScript方法获取到的对象就是DOM对象。

jQuery对象：就是通过jQuery包装DOM对象后产生的对象。

DOM对象和jQuery对象之间可以实现对象的转换，但是切记两个对象的属性和函数不能彼此混搭使用

转换语法

DOM对象转jQuery对象，语法：jQuery(DOM对象); 或 $(DOM对象);

jQuery对象转DOM对象，语法：jQuery对象[index]; 或 jQuery对象.get(index);

三、 选择器

3.1 基本选择器

标签选择器

• $("标签名称")

id选择器

• $("标签的id")

类选择器

• $("标签的class")

3.2 层次选择器

后代选择器

• $("外标签 内部标签(包括孙)")

子选择器

• $("外标签>内部标签(不包括孙)")

3.3 属性选择器

1、$("[属性名]")

2、$("[属性名='值']")

3、$("[属性名='值'] [属性名='值']")

3.4 过滤选择器

：first  第一个

：last  最后一个

：eq(index)  指定索引

：gt(index)  大于索引的

：lt(index)  小于索引的

：odd  奇数

：even  偶数

：not  除了

：header  匹配标题

3.5 表单属性选择器

：disablead  获取当前页面中未激活的元素

：enablead 获取当前页面中已激活的元素（不包含表单之外的元素）

：checked 获取当前页面中被选中的复选框

：selected 获取当前页面中被选中的下拉框

this用法：$(this)表示获取当前正在操作的元素对象

四、jQuery操作

4.1 jQuery操作属性

atter()

attr("属性名") 获取标签中对应的属性名的值

attr("属性名","属性值") 设置标签的属性名与对应的属性值

prop()

prop("属性名") 获取标签中对应的属性名的值

prop("属性名","属性值") 设置标签的属性名与对应的属性值 

atter与prop区别

attr()能够实现对标签中自带属性与自定义属性的操作,但是在某些使用过程中有功能失效问题

prop()实现对标签中自带属性的操作,推荐使用

4.2 jQuery类与css操作

类操作

addClass() 向被选元素添加一个类

removeClass() 从被选元素删除一个类

toggleClass() 对被选元素进行添加/删除类的切换操作

css操作

css("样式名") 获取该样式的值

css("样式名","值") 设置一个样式

css({"样式名":"值","样式名":"值",...}) 设置多个样式

4.3 jQuery文档操作

内部插入

append(); 在被选元素的结尾插入内容

prepend(); 在被选元素的开头插入内容

外部插入

after(); 在被选元素之后插入内容

before();在被选元素之前插入内容

删除

empty(); 清空里面内容

remove(); 删除整个元素

detach();  删除整个元素；与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

五、jQuery动画效果

显示与隐藏

show(speed,callback);显示元素。

hide(speed,callback);隐藏元素。

toggle(speed,callback); 在 show() 和hide() 方法之间切换，显示被隐藏的元素，并隐藏已显示的元素。

淡入与淡出

fadeIn(speed,callback);淡入已隐藏的元素。

fadeOut(speed,callback);淡出可见元素。

fadeToggle(speed,callback);在 fadeIn()与 fadeOut()方法之间进行切换。

滑入与滑出

slideDown(speed,callback);向下滑动元素，用于作显示。

slideUp(speed,callback);向上滑动元素，用于作隐藏。

slideToggle(speed,callback);在 slideDown()与 slideUp()方法之间进行切换。

自定义动画

animate(params,[speed],[fn])

• params:一组包含作为动画属性和终值的样式属性和及其值的集合{}

• speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

• fn:在动画完成时执行的函数，每个元素执行一次。

六、jQuery数组的操作

遍历

方式一：$obj.each(function(i,dom){ });

方式二：$.each(object,function(i,dom){ });

i :对象的成员或数组的索引

dom:对应变量或内容,该变量或者内容为js对象

七、validate表单插件

工具下载

下载地址： https://github.com/jquery-validation/jquery-validation/releases/download/1.17.0/jquery-validation-1.17.0.zip

帮助文档地址： https://jqueryvalidation.org/documentation/

工具导入

在解压后的dist文件夹中找到对应的jquery.validate.js文件和其子文件夹localization中找到国际化资源库messages_zh.js文件（可选），将两个文件赋值到项目的js文件夹中。 由于validation是jQuery插件，所以必须在jQuery的基础上进行使用，所以需要先导入jQuery然后再导入jquery.validate.js及国际化资源库。 先导入它 1、导入jQuery.js文件 2、validate.js校验插件

表单绑定验证方法

使用validate需要手动声明，需要对哪个表单进行校验，就给哪个表单绑定validate()方法。 $("#commentForm").validate();

指定验证规则

我们要对用户名进行非空验证和长度范围验证，此时就在用户名文本框中添加required和rangelength验证规则。如下： <input type="text" name="user" required="true" rangelength="[3,6]"/> 这样在提交表单时就可以对用户名字段进行必填项和字符串长度为3~6个字符的验证了。 默认的文本提示是英文的，因为我们导入了messages_zh.js所以提示信息已经转化为中文。 使用validate时不需要我们单独指定信息提示位置， validate会直接将提示信息提示到当前的元素之后。

​