简介

  • 认知
    一个快速简介的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对象这个集合时，内置了隐式循环，其实本质上还是在操作单个元素，只不过这个过程给我们自动封装完毕了，简化了我们的操作步骤
  • 最常用的五大选择器
  • 基本选择器
  • 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文档内到某个位置
  1. A.append(B)=B.appendTo(A)：将B添加到A内部的最后面
  2. A.prepend(B)=B.perpendTo(A)：将B添加到A内部的最后前面
  3. A.after(B)=B.insertAfter(A)：将B添加到A的同级以下紧挨着的位置
  4. A.before(B)=B.insertBefore(A)：将B添加到A的同级以上紧挨着的位置
  • 删除操作：
  • empty()清空：删除匹配元素集合中所有的子节点，节点包含空节点、注释节点和标签节点
  • remove()移出：删除匹配元素以及该元素内部的所有元素，并且支持传递筛选的选择器，选择性的删除内容
  • 查询操作：
  • $(“选择器”)==>jQuery对象
  • 修改操作：
  • css样式：
  • js：js对象.style.css样式名称 = “值”;
  • jQuery：css()、addClass()、removeClass、toggleClass
  • 行间属性
  • js：js对象.行间属性或者js对象.setAttribute(“属性名”, “值”)
  • jQuery：prop()
  • 内容
  • js：普通标签innerText、innerHtml，表单标签value
  • jQuery：普通标签text()、html()，表单标签val()
  • 区别：jQuery操作内容的方法的使用方式为如果不传递参数，则为获取内容，如果传递了一个字符串类型的参数，则为修改内容
  • 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路径