Skip to content

JQuery 专栏

1、JQuery简介

  • JQuery(JavaScript Query)是一个轻量级的、兼容多浏览器的JavaScript库。它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互。 JQuery的设计目标是让JavaScript编程更加简单和高效。

2、JQuery的优点:

    • 1.轻量级。核心文件才几十kb,不会影响页面加载速度
    • 2.跨浏览器兼容。基本兼容了现在主流的浏览器
    • 3.链式编程、隐士迭代
    • 4.对事件、样式、动画支持,大大简化了DOM操作
    • 5.支持插件扩展开发。有着丰富的第三方的插件,例如:
      • 树形菜单、日期控件、轮播图等
    • 6.免费、开源

3、JQuery的基本使用

    • 1.官网地址:httpss://jquery.com/
    • 2.版本:
      • 1.x版本:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了
      • 2.x版本:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。
      • 3.x版本:不兼容IE678,只支持最新的浏览器。虽然最新版本的功能最多,但是很多浏览器不支持。为了兼顾最新浏览器和旧浏览器的兼容性, 一般项目来说,使用2.x版本就可以了。
    • 3.下载
      • 官网找到mini版,复制内容,创建jquery.mini.js文件,放到项目中
    • 4.引入JQuery
      • 1.在HTML文件中引入JQuery文件
      • 2.在浏览器中打开HTML文件
      • 3.在控制台输出JQuery的版本号
    • 5.使用JQuery
      • JQuery的入口函数
        • javascript
          $(document).ready(function(){})
        • javascript
          $(function(){})
        • 1.等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,JQuery 帮我们完成了封装;
        • 2.相当于原生js中的DOMContentLoaded事件;
        • 3.不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
      • 例如:
      • html
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
           <!--    这个JS文件是复制的官网到本地使用  -->
            <script src="jquery.min.js"></script>
        </head>
        <body>
            <div>hello world</div>
        <script>
        //  1.等待页面DOM加载完毕再去执行js 代码
           $(document).ready(function(){
               $("div").hide(); // 隐藏div
           })
        //  2.等待页面DOM加载完毕再去执行js 代码 (简写)
           $(function(){
               $("div").hide(); // 隐藏div
           })
        </script> 
        </body>
        </html>
    • 6.JQuery的顶级对象$
      • 1.$是jQuery的别称,在代码中可以使用$代替jQuery,但要注意$代表的是jQuery对象,而jQuery代表的是jQuery函数;
      • 2.$是jQuery的顶级对象,相当于原生js中的window,把元素利用$包装成jQuery对象,就可以用$调用jQuery中的方法;
    • 7.jQuery对象和DOM对象
      • js
        // 1.DOM对象: 通过原生js获取过来的对象就是DOM对象
        var div = document.getElementById("div1");
        // 2.jQuery对象: 通过jQuery方式获取过来的对象是jQuery对象。本质:通过$把DOM对象包装起来,jQuery对象是伪数组形式存在的;
        $("div")
        // 3.jQuery对象只能使用jQuery方法,DOM对象则使用原生的JavaScript属性方法
        div.style.display="none"
        $("div").style.display="none" // 这个$("div")是jQuery对像不能使用原生js的属性和方法
        $("div").hide() // 正确使用jQuery对象的方法
        // 4.DOM对象和jQuery对象之间可以相互转换的
          //1.DOM对象转换为jQuery对象
           $("div") // 第一种
           var div = document.getElementById("div1"); // 第二种
           $(div)
          // 2.jQuery对象转换为DOM对象
          $("div")[0] // 第一种
          $("div").get(0) // 第二种

4、jQuery常用API

  • 1.jQuery选择器

      1. 基本选择器
      • 原生JS获取元素的方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们封装了兼容性的获取元素的方法统一语法:
      • js
        // 1.基本选择器
        $("选择器") // 里面选择器直接写CSS选择器即可,但是要加引号
        $("p") // 标签选择器
        $(".class") // 类选择器
        $("#id") // id选择器
        $("div,p,span") // 并集选择器
        $("div p") // 后代选择器
        $("div>p") // 子代选择器
        $("div+p") // 相邻兄弟选择器
        $("div~p") // 通用兄弟选择器
        // 2.层级选择器
        $("ul li") // 后代选择器
        $("ul>li") // 子代选择器
        // 3.过滤选择器
        $("li:first") // 第一个
        $("li:last") // 最后一个
        $("li:eq(index)") // 索引等于index的那个元素
        $("li:odd") // 奇数
        $("li:empty") // 选择没有子元素的li
        $("li:contains(text)") // 选择含有text文本的li
        $("li:has(selector)") // 选择含有selector元素的li
        $("li:parent") // 选择有子元素的li
        $("li:hidden") // 选择隐藏的li
        $("li:visible") // 选择可见的li
        $("li:even") // 偶数
        $("li:gt(index)") // 大于index
        $("li:lt(index)") // 小于index
        $("li:not(selector)") // 除了除了选择器以外的元素
        // 4.属性选择器
        $("li[属性名]") // 选择含有此属性的元素
        $("li[属性名=值]") // 选择含有此属性并且属性值等于值的元素
        $("li[属性名!=值]") // 选择含有此属性并且属性值不等于值的元素
        $("li[属性名^=值]") // 选择含有此属性并且属性值以值开头的元素
        $("li[属性名$=值]") // 选择含有此属性并且属性值以值结尾的元素
        $("li[属性名*=值]") // 选择含有此属性并且属性值包含值的元素
        // 5.表单选择器
        $(":input") // 表单内所有元素
        $(":text") // 文本框
        $(":password") // 密码框
        $(":radio") // 单选框
        $(":checkbox") // 复选框
        $(":submit") // 提交按钮
        $(":reset") // 重置按钮
        $(":button") // 普通按钮
        $(":image") // 图片按钮
        $(":file") // 文件按钮
        // 6.表单对象属性选择器
        $(":enabled") // 可用元素
        $(":disabled") // 不可用元素
        $(":checked") // 选中元素
        $(":selected") // 选中元素
        // 7.子元素选择器
        $("ul li:first-child") // 选择每个ul的第一个li
        $("ul li:last-child") // 选择每个ul的最后一个li
        $("ul li:nth-child(index)") // 选择每个ul的第index个li
        $("ul li:nth-child(odd)") // 选择每个ul的奇数个li
        $("ul li:nth-child(even)") // 选择每个ul的偶数个li
        $("ul li:first-of-type") // 选择每个ul的第一个li
        $("ul li:last-of-type") // 选择每个ul的最后一个li
        $("ul li:nth-of-type(index)") // 选择每个ul的第index个li
        $("ul li:nth-of-type(odd)") // 选择每个ul的奇数个li
        $("ul li:nth-of-type(even)") // 选择每个ul的偶数个li
    • 2.隐式迭代(重要)
      • 遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
      • 简单理解:给匹配到的所有元素进行循环遍历,执行相应操作。
      • js
        // 隐式迭代
        $("div").css("background", "red"); // 给所有div设置背景色为红色
    • 3.jQuery筛选方法(重点)
      •  语法                       用法                              说明
        
      • parent()                 $("li").parent();                  查找父亲元素   
        
      • parents(selector)        $("li").parents(".current");       查找祖先元素(不写 selector 默认查询全部)
        
      • parentsUntil(selector)   $("li").parentsUntil("ul");        查找祖先元素,直到ul结束
        
      • children(selector)       $("ul").children("li");            相当于$("ul>li"),最近一级(儿子元素)
        
      • find(selector)           $("ul").find("li");                相当于$("ul li"),后代选择器
        
      • siblings(selector)       $(".first").siblings("li");        查找兄弟元素,不包括自己
        
      • nextAll()                $(".first").nextAll()              查找当前元素之后所有的同辈元素
        
      • prevtAll()               $(".last").prevAll()               查找当前元素之前所有的同辈元素
        
      • hasClass(class)        $("div").hasClass("protected")       检查当前的元素是否含有某个特定的类,如果有,则返回true
        
      • eq(index)                $("li").eq(2)                      相当于$("li:eq(2)"),index从0开始
        
      • first()                  $("li").first()                    相当于$("li:first"),返回第一个元素
        
      • last()                   $("li").last()                     相当于$("li:last"),返回最后一个元素
        
      • filter(selector)         $("li").filter(":eq(2)")           筛选元素,保留被选元素集合中匹配的元素
        
    • 4.排他思想
      • js
        $(".nav li").click(function(){
          $(this).addClass("active").siblings().removeClass("active"); 
        })
  • 2.jQuery样式操作

    • 1.操作css方法
      • jQuery可以使用css()方法来修改简单样式,css()方法可以操作css样式表中的样式;也可以操作类,修改多个样式
      • 1.参数只写属性名,则返回属性值
      • js
        $("div").css("width"); //返回宽度值
      • 2.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
      • js
        $("div").css("width","300px");
        $("div").css("width",300);
      • 3.参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号
      • js
        $("div").css({
                     width:300,
                     height:200,
                     backgroundColor:"red" // 如果是复合属性则必须采用驼峰命名法,如果值不是数字,则必须加引号
        }); //设置一组样式
    • 2.设置类样式方法
      • 作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点。
      • 1.add(class) 添加类
      • js
        $("div").click(function(){
          $(this).addClass("current");
        })
      • 2.remove(class) 删除类
      • js
        $("div").removeClass("current");
      • 3.toggleClass(class) 切换类,有则删除,无则添加
      • js
        $("div").toggleClass("current");
      • 4.类操作与className区别
        • 1.原生js中的className会覆盖以前的类名
        • 2.jQuery中类操作只是对指定类进行操作,不影响原先的类名
        • js
          // 通过类名获取div元素
          var oDiv = document.querySelector(".oDiv");
          // 设置类名
          oDiv.className = "box2";  
          // 打开控制台发现div 元素上原来的类名被覆盖了
          // jQuery中类操作只是对指定类进行操作,不影响原先的类名
          $("div").addClass("box2"); //添加类
          $("div").removeClass("box2"); //删除类
          $("div").toggleClass("box2"); //切换类
          // 打开控制台发现div 元素上多了类名而没有覆盖
  • 3.jQuery效果

    • jQuery封装了很多的动画效果
      • 1.显示隐藏
        • 1.show([speed,[easing],[fn]]) 显示
        • 2.hide([speed,[easing],[fn]]) 隐藏
        • 3.toggle([speed],[easing],[fn]]) 切换
          • speed:动画的速度,默认是"normal",也可以是"slow"、"fast"或者毫秒数
          • easing:动画的节奏,默认是"swing",也可以是"linear"
          • fn:动画完成后执行的函数,每个元素执行一次
          • 一般情况下,我们都不加参数直接显示隐藏就可以了
        • js
          // 显示 
          $("button").mouseover(function() {
            $("div").show();
          }) 
          
          // 隐藏
           $("button").mouseout(function() {
            $("div").hide();
          }) 
          
          // 切换
          $("div").toggle();
          // 事件切换 hover(enter,leave)
          $("button").hover(function() {
            $("div").show();
          }, function() {
            $("div").hide();
          })
          // 事件切换 hover 如果只有一个函数,那么鼠标经过和鼠标离开都会触发这个函数
          $("button").hover(function() {
            $("div").toggle();
          })
      • 2.滑动
        • 1.slideDown([speed],[easing],[fn]) 向下展开
        • 2.slideUp([speed],[easing],[fn]) 向上卷起
        • 3.slideToggle([speed],[easing],[fn]) 上下切换
        • js
          // 向下展开
          $("div").slideDown();
          // 向上卷起
          $("div").slideUp();
          // 上下切换
          $("div").slideToggle();
      • 3.淡入淡出
        • 1.fadeIn([speed],[easing],[fn]) 淡入
        • 2.fadeOut([speed],[easing],[fn]) 淡出
        • 3.fadeToggle([speed],[easing],[fn]) 淡入淡出切换
        • 4.fadeTo([[speed],opacity,[easing],[fn]]) 渐变到
        • js
          // 淡入
          $("div").fadeIn();
          // 淡出
          $("div").fadeOut();
          // 淡入淡出切换
          $("div").fadeToggle();
          // 渐变到 这个速度和透明度必须要写
          $("div").fadeTo(1000,0.5);
      • 4.自定义动画
        • 1.animate(params,[speed],[easing],[fn])
          • 1.params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采用驼峰命名法。其余参数都可以省略
          • 2.speed:速度参数,三个可选值(slow、normal、fast)或具体的毫秒数
          • 3.easing:缓动效果,默认为swing,可用参数linear
          • 4.fn:回调函数
        • js
          // 自定义动画
          $("div").animate({width:"200px"},1000);
          $("div").animate({width:"200px",height:"200px"},1000);
          $("div").animate({width:"200px",height:"200px",opacity:"0.5"},1000);
      • 5.动画队列及其停止排队方法
        • 1.动画或效果队列功能
          • 1.动画或效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行
          • 2.停止排队方法 stop([clearQueue],[jumpToEnd])
            • clearQueue 如果设置成true,则清空元素上的队列,false,则不会清空队列
            • jumpToEnd 如果设置成true,则跳到当前动画的最终效果
          • js
            // 停止排队 stop 方法必须写到动画的前面 ,相当于停止结束上次动画
            $("div").stop().animate({width:"200px"},1000);
  • 4. jQuery属性操作

    • 1.设置获取元素固有属性值 prop("属性名")
      • 所谓固有属性就是元素本身自带的属性,比如 a 标签的 href,input 的 type。
      • js
          // 获取元素固有属性值 prop("属性名")
          console.log($("a").prop("href"));
          // 设置元素固有属性值 prop("属性名","属性值")
          $("a").prop("title","我是a的title");
    • 2.设置获取元素自定义属性值 attr("属性名")
      • 自定义属性就是程序员自己定义的属性,比如 h5的自定义属性: data-index; 自己定义的属性 index。
        • js
          // 获取元素自定义属性值 attr("属性名") 类似于原生的 getAttribute("属性名")
          console.log($("div").attr("data-index"));
          // 设置元素自定义属性值 attr("属性名","属性值") 类似于原生的 setAttribute("属性名","属性值")
          $("div").attr("data-index",2);
    • 3.数据缓存 data() 方法
      • data() 方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除。
      • js
        // 数据缓存 data() 方法 用来缓存和获取 自定义属性数据 和 H5自定义属性数据(data-xxx) (在dom元素上看不到缓存属性和值)
        // 获取元素数据缓存 data("名称")
        $("div").data("index",2);
        // 这个方法获取data-index H5自定义属性 第一个 不用写data- 而且返回的是数字类型
        console.log($("div").data("index"));
  • 5. jQuery内容文本值

    • 主要针对元素的内容还有表单的值操作
      • 1.普通元素内容 html() (相当于原生innerHTML)
        • 1.获取元素内容
        • js
          // 获取元素内容 html() (相当于原生innerHTML)
          console.log($("div").html());
        • 2.设置元素内容
        • js
          // 设置元素内容 html("内容") (相当于原生innerHTML)
          $("div").html("我是div的内容");
      • 2.普通元素文本内容 text() (相当于原生innerText)
        • 1.获取元素文本内容
        • js
          // 获取元素文本内容 text() (相当于原生innerText)
          console.log($("div").text());
        • 2.设置元素文本内容
        • js
          // 设置元素文本内容 text("内容") (相当于原生innerText)
          $("div").text("我是div的文本内容");
      • 3.表单值 val() (相当于原生value)
        • 1.获取表单值
        • js
          // 获取表单值 val() (相当于原生value) 
          console.log($("input").val());
        • 2.设置表单值
        • js
          // 设置表单值 val("内容") (相当于原生value)
          $("input").val("我是input的值");
  • 6. jQuery元素操作

      • 主要是遍历、创建、添加、删除元素操作
      • 1.遍历元素
        • jQuery隐式迭代会对同一类元素进行同样的操作,如果想要给同一类元素做不同操作,就需要用到遍历
        • js
          // 遍历元素第一种用法
          $("div").each(function (index, domEle) {});
          // index 索引号 
          // domEle 当前被遍历到的DOM元素(不是jQuery对象),想要使用jQuery方法需要将DOM对象转成jQuery对象 $(domEle)
          // 我们可以借助each()方法,遍历匹配到的所有元素
          // 注意:each()方法只能遍历jQuery对象
          // each()方法等同于原生的forEach()方法
        • js
          // 遍历元素第二种用法
          arr = ['我是第1个div', '我是第2个div', '我是第3个div'];
          obj={name:'andy',age:18};
          $.each($("div"), function (index, domEle) {});
          // index 索引号 domEle 当前被遍历到的DOM元素
          // 我们可以借助$.each()方法,遍历对象或数组 
          $.each(arr,function(index,ele){})
          // index 索引号 ele 当前被遍历到的元素
           $.each(obj,function(index,ele){})
          // index 属性名 ele 属性值
      • 2.创建元素
        • js
          // 创建元素
          $("<h3></h3>");
      • 3.添加元素
        • js
          // 创建元素
          var li = $("<li>我是后来创建的li</li>");
          var div = $("<div>我是后来创建的div</div>");
          // 1.内部添加元素(父子关系)
          $("ul").append(li); //$("ul") 内部后面添加 li , 把内容放入匹配元素内部最后面,类似于原生 appendChild 向里面追加元素
          $("ul").prepend(li); //$("ul") 内部最前面添加 li ,把内容放入匹配元素内部最前面,类似于原生 prependChild 向前面追加元素
          // 2.外部添加元素(兄弟关系)
          $("ul").after(div); //$("ul") 外部后面添加 div ,把内容放入匹配元素外部后面,类似于原生 insertAfter  
          $("ul").before(div); //$("ul") 外部前面添加 div ,把内容放入匹配元素外部前面,类似于原生 insertBefore
      • 4.删除元素
        • js
          // 删除元素
          $("ul").remove(); // 1.删除匹配的元素(将自己及子孙都删除)
          $("ul").empty(); // 2.清空匹配的元素里面的内容(将子孙删除保留自己)
          $("ul").html(""); // 3.清空匹配的元素里面的内容(将子孙删除保留自己)

7.jQuery 事件

  • 1.事件注册
    • 1.单个事件注册
      • js
          $("div").click(function(){  })
          $("div").mouseenter(function(){  })
  • 2.事件处理
    • 1.事件处理on
      • on()方法在匹配元素上绑定一个或多个事件的事件处理函数
      • js
        // element.on( events [, selector ] [, data ], handler )
        // events:一个或多个用空格分隔的事件类型,如"click"或"keydown"。
        // selector:一个选择器字符串,用于过滤被选中的元素集合,仅绑定匹配选择器的后代元素。(元素的子元素选择器)
        // data:传递给事件处理函数的额外数据,可选。
        // handler:事件处理函数。
        // 动态创建的元素绑定事件使用on()方法可以触发,使用单个事件绑定的不能触发(on可以给未来动态创建元素绑定事件) 
        $("div").on("click mouseenter", function(){  }) // 1.绑定多个事件
        $("div").on("click", "p", function(){  }) // 2.事件委托(事件代理)点击p才会触发,但是事件是在div上绑定着
        $("div").on({  click: function(){  }, mouseenter: function(){  }  }) // 3.绑定多个事件
        $("div").on("click", {  name: "andy"  }, function(event){  console.log(event.data.name);  }) // 4.传递参数
        $("div").on("click", ".test", function(event){  console.log(event.target);  }) // 5.阻止冒泡
        $("div").on("click", ".test", function(event){  event.stopPropagation();  }) // 6.阻止默认行为
    • 2.事件处理off
      • off()方法移除先前用on()方法添加的事件处理程序
      • js
        // element.off( events [, selector ] [, handler ] )
        // events:一个或多个用空格分隔的事件类型,如"click"或"keydown"。
        // selector:一个选择器字符串,用于过滤被选中的元素集合,仅移除匹配选择器的后代元素的事件处理程序。
        // handler:一个函数,用于指定要移除的事件处理程序。
        $("div").off("click mouseenter") // 1.移除多个事件
        $("div").off("click", "p") // 2.移除事件委托(事件代理)
        $("div").off({  click: function(){  }, mouseenter: function(){  }  }) // 3.移除多个事件
        $("div").off() // 4.移除所有事件
        $("div").once("click",function() {
          alert("hello");
        }) // 5.只触发一次事件
    • 3.事件处理trigger(自动触发事件)
      • 有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
      • js
        // element.trigger( type [, extraParameters ] )
        // type:要触发的事件类型,如"click"或"keydown"。
        // extraParameters:可选参数,一个数组,用于传递给事件处理程序。
        $("div").on('click',function(){  console.log("hello");  }) // 1.添加事件
        $("div").click(); // 2.手动触发事件
        $("div").trigger("click") // 3.自动触发事件
        $("div").triggerHandler("click") // 4.自动触发事件,不触发默认行为
        $("div").trigger("click", [param1, param2, param3]) // 5.自动触发事件,并传递参数
    • 4.事件对象
      • 事件被触发,就会有事件对象的产生
      • js
        element.on(events, [selector], handler)
        // events:一个或多个空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin"。
        // selector:一个选择器字符串,用于过滤冒泡上来的事件。如果为空,则表示不进行过滤。
        // handler:当匹配到的事件触发时,所执行的函数。
        $("div").on("click", function(event) {})
        // event:事件对象,包含了事件的相关信息,如事件类型、目标元素、鼠标位置等。
        // event.type:事件类型,如"click"或"keydown"。
        // event.target:事件的目标元素,即触发事件的元素。
        // event.pageX:鼠标相对于文档的X坐标。
        // event.pageY:鼠标相对于文档的Y坐标。
        // event.preventDefault():阻止事件的默认行为。
        // event.stopPropagation():阻止事件的冒泡。
        // event.stopImmediatePropagation():阻止事件的冒泡,并阻止后续的事件处理程序执行。
  • 3.其他事件
    • 1.拷贝对象
      • 如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend()方法
        • js
          // 语法:
          $.extend([deep], target, object1, [objectN])
          // deep:可选参数,如果设置为true,则进行深拷贝,否则进行浅拷贝。
          // target:目标对象,拷贝到该对象上。
          // object1, [objectN]:源对象,从这些对象中拷贝属性到目标对象上。
          var target = {name: "Tom", age: 18};
          var object1 = {name: "Jerry", gender: "male"};
          var object2 = {age: 20, gender: "female"};
          $.extend(target, object1, object2);
          console.log(target); // {name: "Jerry", age: 20, gender: "female"}
    • 2.多库共存
      • jQuery使用$作为标识符,如果与其他库冲突,可以使用$.noConflict()方法释放$标识符,然后使用jQuery代替$。
        • js
          // 1.解决方案一:
          // 使用jQuery的别名$,如:jQuery("div")
          // 示例:
          jQuery(function() {})
          // 2.解决方案二:
          // jQuery变量规定新的名称:$.noConflict()
          // 示例:
          var $jq = $.noConflict();
          $jq(function() {})
    • 3.其他方法
      • js
          // $.trim():去除字符串两端的空格。
          // $.type():判断数据的类型。
          // $.isArray():判断是否为数组。
          // $.isFunction():判断是否为函数。
          // $.isPlainObject():判断是否为普通对象。
          // $.isEmptyObject():判断是否为空对象。
          // $.parseJSON():将JSON字符串转换为JavaScript对象。
          // $.parseXML():将XML字符串转换为XML文档对象。
          // $.ajax():发送AJ
          // $.get():发送GET请求。
          // $.post():发送POST请求。
          // $.getJSON():发送GET请求并解析JSON数据。
          // $.getScript():发送GET请求并加载JavaScript文件。
    • 4.jQuery插件
      • 1.jQuery插件是扩展jQuery功能的第三方库,可以通过jQuery的extend()方法来扩展jQuery的功能。
      • 2.jQuery插件常用网站:
      • 3.jQuery插件的使用步骤:
        • 1.下载jQuery插件:从jQuery插件网站下载所需的jQuery插件,并将其引入到HTML文件中。
        • 2.引入jQuery插件:在HTML文件中引入jQuery插件,可以通过以下方式引入:
          • 1.直接引入jQuery插件文件:
          • 2.通过CDN引入jQuery插件:
        • 3.复制html、css、js(调用插件)
      • 4.常用插件:
        • 1.瀑布流插件(Masonry.js)
        • 2.轮播图插件(Bootstrap Carousel)
        • 3.图片懒加载(EasyLazyLoad.js)
        • 4.日期选择器插件(DatePicker.js)
        • 5.表单验证插件(jQuery Validation Plugin)
        • 6.弹出层插件(Layer.js)
        • 7.滚动条插件(NiceScroll.js)
        • 8.滚动监听插件(ScrollMagic.js)
        • 9.图表插件(Chart.js)
        • 10.地图插件(Leaflet.js)
        • 11.富文本编辑器插件(Quill.js)
        • 12.视频播放器插件(Video.js)
        • 13.音频播放器插件(Howler.js)
        • 14.动画插件(Animate.css)
        • 15.模态框插件(Bootstrap Modal)
        • 16.导航插件(Bootstrap Navbar)
        • 17.全屏滚动插件(fullPage.js)
        • 18.响应式表格插件(Responsive Tables)
        • 19.图片预览插件(Magnific Popup)
        • 20.图片裁剪插件(cropper.js)
        • 21.图片上传插件(Dropzone.js)
        • 22.图片压缩插件(Compressor.js)
        • 23.图片预览插件(Viewer.js)
        • 24.图片拖拽插件(Draggable.js)
        • 25.图片旋转插件(Rotate.js)
        • 26.图片缩放插件(Zoom.js)
        • 27.图片滤镜插件(Filterizr.js)
        • 28.图片拖拽排序插件(Sortable.js)
        • 29.bootstrap JS(Bootstrap.js)

8.jQuery尺寸、位置操作

    • 方法:
    •        语法                                 用法
      
    •        width()/height()                    获取匹配元素的宽度和高度 只算 width/height
      
    •        innerWidth()/innerHeight()          获取匹配元素的宽度和高度 包含 padding
      
    •        outerWidth()/outerHeight()          获取匹配元素的宽度和高度 包含 padding、border
      
    •        outerWidth(true)/outerHeight(true)  获取匹配元素的宽度和高度 包含 padding、border、margin
      
    •        offset()                            获取匹配元素相对于文档的偏移(浏览器窗口)
      
    •        position()                          获取匹配元素相对于其父元素的偏移(父级带有定位的盒子)
      
    •        scrollTop()/scrollLeft()            获取匹配元素相对滚动条顶部的偏移/相对滚动条左侧的偏移
      
    •        scroll()                            设置匹配元素相对滚动条顶部的偏移/相对滚动条左侧的偏移
      
    •        offsetParent()                      获取最近的被定位的祖先元素
      
    • 使用:
      • js
        // 获取元素相对于文档的偏移
        var offset = $('#box').offset();
        console.log(offset.left, offset.top);
        // 设置元素偏移量
        $('#box').offset({
          left: 100,
          top: 200
        })
        // 获取元素相对于父元素的偏移(这个方法只能获取不能设置)
        var position = $('#box').position();
        console.log(position.left, position.top);
        
        // 获取元素相对滚动条顶部的偏移
        var scrollTop = $(document).scrollTop();
        // 设置元素相对滚动条顶部的偏移
        $(document).scrollTop(100);