Jquery个人学习笔记-仅供参考

简介

• 认知

  一个快速简介的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路径