简介
-
认知
一个快速简介的js框架,倡导用更少的代码做更多的事情,优化了HTML文档操作、事件处理、动画设计和ajax交互
-
引入
需要导入相关的jQuery文件,官网的地址:https://jquery.com/
-
核心对象:
jQuery的核心对象就是
$
,等价于jQuery
,但是在实际开发中建议使用$
来代表核心对象,因为简单明了,如果使用jQuery
作为核心对象,那么大小写字母不能出错,核心对象就是万能方法,支持传递各种类型的选择器,来获取到对应的jQuery
对象 -
jQuery与js文档加载的区别
-
jQuery中文档加载的方法有两种,而js只有一种
//js中的文档加载方法 window.onload = function() { var div = document.getElementsByTagName("div")[0]; div.style.color = "red"; } //jQuery的第一种文档加载的方法 $(function() { $("div").css("color", "red"); }) //jQuery的第二种文档加载的方法 $(document).ready(function() { $("div").css("font-size", "30px"); })
-
js中
window.onload
只能执行一次,书写多遍,覆盖执行;但是jQuery中文档加载方法可以执行多次 -
window.onload
必须等到页面内所有元素都加载完毕后才能执行;jQuery中,只需要等到HTML的DOM结构加载完毕时就可以执行,所以jQuery加载的时间点要比js中加载的时间点要早
-
-
js对象与jQuery对象的转换
- jQuery对象,通过
$(“选择器”)
的方式来获取,它本身是一个集合,不管传递什么数据类型的选择器,该选择器可以找到几个对应标签对象,得到的都是集合 - jQuery对象==>js对象:
jQuery对象[下标]
或者jQuery对象.get(下标)
- js对象==>jQuery对象:
$(js对象)
- jQuery对象虽然是个集合,但可以直接操作,不需要遍历拿到里面的每一个对象,可以操作这个整体
- 因为操作jQuery对象这个集合时,内置了隐式循环,其实本质上还是在操作单个元素,只不过这个过程给我们自动封装完毕了,简化了我们的操作步骤
- jQuery对象,通过
-
最常用的五大选择器
- 基本选择器
- id选择器
- 类class选择器[数组]
- 标签选择器[数组]
- *通配选择器[数组]
- 层级选择器
- 后代选择器
选择器1 选择器2
:要求选择器1只要包含选择器2就行[数组] - 子代选择器
选择器1>选择器2
:仅匹配选择器1下边的子标签符合选择器2的标签[数组] - 相邻兄弟选择器
选择器1+选择器2
:仅匹配选择器1后边紧邻的符合选择器2的同级标签[数组] - 一般兄弟选择器
选择器1~选择器2
:仅匹配选择器1后边的符合选择器2的同级标签[数组]
- 后代选择器
- 过滤选择器
:first
:第一个标签:last
:最后一个标签:eq(下标)
:匹配等于该下标的标签:gt(下标)
:匹配大于该下标的标签[数组]:lt(下标)
:匹配小于该下标的标签[数组]:odd
:获取下标为奇数的标签[数组]:even
:获取下标为偶数的标签[数组]:not(选择器)
:匹配处理该选择器的标签以外的其他所有标签[数组]
- 属性选择器
[属性名]
找到所有添加了此属性的标签[属性名=值]
找到所有添加此属性并且上这个值的标签[属性名!=值]
找到所有添加了此属性并且不是这个值的标签[属性名^=值]
找到所有添加了此属性并且以这个值开头的标签[属性名$=值]
找到所有添加了此属性并且以这个值结尾的标签[属性名*=值]
找到所有添加了此属性并且包含这个值的标签
- 表单选择器
- 基本表单选择器
:input
所有的input元素:text
所有类型为text的input元素:password
所有类型为password的input元素:radio
所有类型为radio的input元素:checkbox
所有类型为checkbox的input元素:submit
所有类型为submit的input元素:image
所有类型为image的input元素:reset
所有类型为reset的input元素:button
所有类型为button的input元素:file
所有类型为file的input元素:hidden
所有类型为hidden的input元素
- 表单过滤选择器
:enabled
匹配所有可用标签:disabled
匹配所有不可用标签(只读状态):checked
匹配所有选中的标签(单选和复选):selected
匹配所有选中的标签(下拉选)
- 基本表单选择器
- this选择器
this
是js中的关键字,表示自身对象;在jQuery中自身对象的表示形式为$(this)
this
存在于方法中,代表此方法的拥有者
- 基本选择器
-
jQuery对象如何绑定事件:
jQuery对象.事件名称(function(){ 动作; })
jQuery的事件名称就是js事件名称去掉前面的on
-
jQuery中的动画效果:
以下九个动画效果参数都是通用的,参数1(必备参数)是动画的执行时间,这个必须设置,如果不设置没有动画效果,值有
normal
慢,fast
快,直接写具体值(单位毫秒);参数2(可选参数)函数的回调函数第一组:通过同时改变
width
宽度、height
高度和opacity
不透明度来改变动画效果show
显示hide
隐藏toggle
切换
第二组:通过改变
opacity
不透明度来改变动画效果fadeIn
淡入显示fadeOut
淡出消失fadeToggle
淡入淡出效果的切换
第三组:通过改变
height
高度来实现动画效果slideUp
下拉显示slideDown
上卷隐藏slideToggle
下拉上卷效果切换
-
jQuery如何改变css样式
-
改变单个css样式:
对象.css(“css属性名”,“值”);
-
改变多个css样式:
对象.css({ “css属性名1”:“值1”, “css属性名2”:“值2”, “css属性名3”:“值3”, ... });
最后一个键值对后面不要加逗号
-
addClass(“类名1 类名2 ...”)
为标签添加类名,多个类型使用空格分开 -
removeClass(类名1 类名2 ...”)
为标签移出类名,多个类型使用空格分开 -
toggleClass(类名1 类名2 ...”)
切换类名,有则删除,无则添加
-
-
jQuery如何操作标签的行间属性
prop(key)
和attr(key)
都是获取标签属性(key是属性名)prop(key,value)
和attr(key,value)
都是修改标签属性(key是属性名,value是属性值)- 当修改或者获取自定义属性的时候建议使用
attr
,当修改或者获取标签固有属性的时候建议使用prop
,其中attr
方法已经不在维护了,现在都是使用prop
进行行间属性值的获取与修改
-
jQuery中的DOM操作
- 添加操作:
- 创建添加的jQuery对象:
$(“HTML结构”);
- 将创建好的jQuery对象添加到
document
文档内到某个位置A.append(B)
=B.appendTo(A)
:将B添加到A内部的最后面A.prepend(B)
=B.perpendTo(A)
:将B添加到A内部的最后前面A.after(B)
=B.insertAfter(A)
:将B添加到A的同级以下紧挨着的位置A.before(B)
=B.insertBefore(A)
:将B添加到A的同级以上紧挨着的位置
- 创建添加的jQuery对象:
- 删除操作:
empty()
清空:删除匹配元素集合中所有的子节点,节点包含空节点、注释节点和标签节点remove()
移出:删除匹配元素以及该元素内部的所有元素,并且支持传递筛选的选择器,选择性的删除内容
- 查询操作:
$(“选择器”)
==>jQuery对象
- 修改操作:
- css样式:
- js:
js对象.style.css样式名称 = “值”;
- jQuery:
css()
、addClass()
、removeClass
、toggleClass
- js:
- 行间属性
- js:
js对象.行间属性
或者js对象.setAttribute(“属性名”, “值”)
- jQuery:
prop()
- js:
- 内容
- js:普通标签
innerText
、innerHtml
,表单标签value
- jQuery:普通标签
text()
、html()
,表单标签val()
- 区别:jQuery操作内容的方法的使用方式为如果不传递参数,则为获取内容,如果传递了一个字符串类型的参数,则为修改内容
- js:普通标签
- css样式:
- 添加操作:
-
jQuery中的遍历操作
//第一种遍历方式 jQuery对象集合.each(function(index , ele){ 遍历的代码; }) //第二种遍历方式 $.each(jQuery对象集合 , function(index , ele){ 遍历的代码; })
如果遍历的方法中传递了两个参数,那么第一个是下标,第二个是js对象
如果遍历的方法中只有一个参数,那么此参数代表下标,而如果想获取里面的元素,可以用
this
来表示 遍历的方法也可以没有参数,获取里面的元素时,仍可以使用
this
来获取 -
jQuery表单校验插件
-
表单校验主要去进行数据合理性的校验:非空、内容组成、一致等…
-
手动书写的表单校验的优劣势
优势:灵活可控,因为代码是自己手动书写
劣势:代码量繁琐,降低开发效率
-
插件
validation
:下载插件,将插件中的 validate.js 和 messages_zh.js 文件和jQuery的js文件一并放入js文件夹中-
导入顺序:jQuery框架—>validate插件—>massage中文
-
校验的第一种形式:将校验规则直接写在标签行间,在js代码中使用
jQuery对象.validate()调用//不建议使用
弊端:不能根据内容显示不同的提示信息,代码的可读性太差了
-
校验的第二种形式:将校验规则写在js代码中,与html结构完成分离,这样既可以自定义文本,同时又增强了代码的可读性。
jQuery对象.validate({ rules : { “name属性值1” : { 校验属性名1 : 值1 , 校验属性名2 : 值2 , 校验属性名3 : 值3 , ... } , “name属性值2” : { 校验属性名1 : 值1 , 校验属性名2 : 值2 , 校验属性名3 : 值3 , ... } , ...} , messages : { “name属性值1” : { 校验属性名1 : 提示信息1 , 校验属性名2 : 提示信息2 , 校验属性名3 : 提示信息3 , ... } , “name属性值2” : { 校验属性名1 : 提示信息1 , 校验属性名2 : 提示信息2 , 校验属性名3 : 提示信息3 , ... } , ... } });
注:其中每一个大括号内的最后一个元素与大括号之间都不可以写逗号
校验属性名 对应的含义 取值 required 必填字段 true|false email 邮件地址 @或email url 路径 date 日期 数字 dateISO 日期(YYYY-MM-DD或YYYY/MM/DD) 字符串 number 数字(负数、小数) digits 整数 minlength 最小长度 数字 maxlength 最大长度 数字 rangelength 长度范围 [minL , maxL] min 最小值 max 最大值 range 值范围 [min , max] equalTo 两个值相等 jQuery表达式 remote ajax校验 url路径
-
-