jQuery

概念
  • 一个javaScript框架,简化开发
  • 本质上就是一些js文件,封装了js的原生代码而已
快速入门
  • 步骤:

    1. 下载JQuery:官网

    2. 导入js文件

      • <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    3. 使用

      • <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>JQuery快速入门</title>
            <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
        </head>
        <body>
            <div id="div1">div1.....</div>
        </body>
        <script>
            //使用JQuey获取元素对象
            var div1 = $("#div1");
            alert(div1.html());
        </script>
        </html>      
  • JQuery与JS对象相互转换

    • JQ --> JS:jq对象[索引] 或者 jq对象.get(索引)
    • JS --> JQ:$(js对象)
  • 事件绑定

    • 根据id获取值,通过click方法绑定

    • <body>
          <div id="div1">div1.....</div>
          <input type="button" value="OK" id="b1">
      </body>
      <script>
          //事件绑定
          $("#b1").click(function (){
              alert("你点击我了")
          })
      </script>
  • 入口函数:dom文档加载完后执行该函数的代码

    • $(function (){
          //事件绑定
          $("#b1").click(function (){
              alert("你点击我了")
          })
      })
  • 样式控制:CSS

    • $("id").css("属性","值")
    • $("#div1").css("background-color","red")
选择器
  1. 基本选择器

    • 标签选择器(元素选择器)

      • 语法:$("html标签名")获取所有匹配标签名称的元素

      • $("#b1").click(function (){
           $("div").css("","") 
        });
    • id选择器

      • 语法:$("#id值")获得与指定id属性值匹配的元素

      • $("#b1").click(function (){
           $("#one").css("","") 
        });
    • 类选择器

      • 语法:$(".class的属性值")获得与指定的class属性值匹配的元素

      • $("#b1").click(function (){
           $(".mini").css("","") 
        });
  2. 层级选择器

    • 后代选择器

      • 语法:$("A B")选择A元素内部所有的B元素

        $("#b1").click(function (){
           $("body div").css("","") 
        });
    • 子选择器

      • 语法:$("A > B")选择A元素内部所有B子元素

      • $("#b1").click(function (){
           $("body > div").css("","") 
        });
  3. 属性选择器

    • 属性名称选择器

      • 语法:$("A[属性名]")包含指定属性的选择器

      • $("#b1").click(function (){
           $("div[test]").css("","") 
        });
    • 属性选择器

      • 语法:$("A[属性名='值']")包含指定属性等于指定值的选择器

      • $("#b1").click(function (){
           $("div[test='one']").css("","") 
        });
    • 复合属性选择器

      • 语法:$("A[属性名='值'][]...")包含多个属性条件的选择器

      • $("#b1").click(function (){
           $("div[test='one'][test='two']").css("","") 
        });
  4. 过滤选择器

    • 首元素选择器

      • 语法::first获得选择的元素中的第一个元素

      • $("#b1").click(function (){
           $("div:first").css("","") 
        });
    • 尾元选择器

      • 语法::last获得选择的元素中的最后一个元素

      • $("#b1").click(function (){
           $("div:last").css("","") 
        });
    • 非元素选择器

      • 语法::not(selector)不包括指定内容的元素

      • //class不为one
        $("#b1").click(function (){
           $("div:not(.one)").css("","") 
        });
    • 偶数选择器

      • 语法::even偶数从0开始计数

      • //索引值为偶数
        $("#b1").click(function (){
           $("div:even").css("","") 
        });
    • 奇数选择器

      • 语法::odd奇数从0开始计数

      • $("#b1").click(function (){
           $("div:odd").css("","") 
        });
    • 等于索引选择器

      • 语法::eq(index)指定索引元素

      • //索引值为1
        $("#b1").click(function (){
           $("div:eq(1)").css("","") 
        });
    • 大于索引选择器

      • 语法::gt(index)大于指定索引元素

      • //索引值大于1
        $("#b1").click(function (){
           $("div:gt(1)").css("","") 
        });
    • 小于索引选择器

      • 语法::lt(index)小于指定索引元素

      • //索引值小于1
        $("#b1").click(function (){
           $("div:lt(1)").css("","") 
        });
    • 标题选择器

      • 语法::header获得标题h1~h6元素,固定写法

      • //标题
        $("#b1").click(function (){
           $(":header").css("","") 
        });
    1. 表单过滤选择器
    • 可用元素选择器:

      • 语法::enabled获得可用元素

      • //利用val()方法改变表单内的值
        $("#b1").click(function (){
           $("input[type='text']:enabled").val("aaa"); 
        });
    • 不可用元素选择器

      • 语法::disabled获得不可用选择器

      • //利用val()方法改变表单内的值
        $("#b1").click(function (){
           $("input[type='text']:disabled").val("aaa"); 
        });
    • 选中选择器

      • 语法::checked获得单选/复选框选中的元素

      • //获取选中的个数
        $("#b1").click(function (){
           $("input[type='checkBox']:checked").length; 
        });
    • 选中选择器

      • 语法::selected获得下拉框选中的元素

      • //获取选中的个数
        $("#b1").click(function (){
           $("#job > optition:selected").length; 
        });
DOM操作
1. 内容操作
 * html():获取/设置元素标签体内容  `<a><font>内容</font></a> --> <font>内容</font>`
 * text():获取/设置元素标签体纯文本内容 `<a><font>内容</font></a> --> 内容`
 * val():获取/设置元素的value属性值 
2. 属性操作
 * 通用属性操作
   * attr():获取/设置元素属性
   * removeAttr():删除属性
   * prop():获取/设置元素属性
   * removeProp():删除属性
   * attr()/prop()区别:
     * 如果操作的元素是固有属性,用prop()
     * 如果操作的是自定义属性,用attr()  
 * 对class属性操作
   * addClass():添加class属性值
   * removeClass():删除class属性值
   * toggleClass():切换class属性值
3. CRUD操作
 * append():父元素将子元素追加到末尾
   * `对象1.append(对象2)`:将对象2添加到对象1元素内部,并且在末尾
 * prepend():父元素将子元素追加到开头
   * `对象1.prepend(对象2)`:将对象2添加到对象1元素内部,并且在开头
 * appendTo():
   * `对象1.appendTo(对象2)`:将对象1添加到对象2内部,并且在末尾
 * prependTo():
   * `对象1.prependTo(对象2)`:将对象1添加到对象2内部,并且在开头
 * after():添加元素到元素后面
   * `对象1.after(对象2)`:将对象2添加到对象1的后面。对象1和对象2是兄弟关系
 * before():添加到元素前面
   * `对象1.before(对象2)`:将对象2添加到对象1的前面。对象1和对象2是兄弟关系
 * insertAfter():
   * `对象1.insertAfter(对象2)`:将对象2添加到对象1的后面。对象1和对象2是兄弟关系
 * insertBefore():
   * `对象1.insertBefore(对象2)`:将对象2添加到对象1的前面。对象1和对象2是兄弟关系
 * remove():移除元素
 * empty():清空元素的所有后代元素
动画
  1. 三种方式显示和隐藏元素

    • 默认显示和隐藏

      • show([speed,[easing],[fn]])

        • speed:动画的速度,预定义值("slow","normal","fast")或毫秒值(如:1000)
        • easing:用来指定切换效果,默认是"swing"(先慢中间快最后慢),可用参数"linear"(匀速)
        • fn:在动画完成时执行的函数,每个元素执行一次
      • hide([speed,[easing],[fn]])

      • toggle([speed,[easing],[fn]])

        <script>
            function show() {
                $("#div1").show("slow","swing",function () {
                    alert("显示了.....")
                })
            }
            function hide() {
                $("#div1").hide("slow","swing",function () {
                    alert("隐藏了.....")
                })
            }
            function toggle() {
                $("#div1").toggle("slow","swing",function () {
                    alert("切换显示了.....")
                })
            }
        </script>
        <body>
            <div id="div1">div1.....</div>
            <input type="button" value="show" onclick="show()" id="b1">
            <input type="button" value="hide" onclick="hide()" id="b2">
            <input type="button" value="toggle" onclick="toggle()" id="b3">
        </body>
    • 滑动显示和隐藏

      • slideDown([speed],[easing],[fn])

      • slideUp([speed],[easing],[fn])

      • slideToggle([speed],[easing],[fn])

        <script>
            function show() {
                $("#div1").slideDown("slow","swing",function () {
                    alert("显示了.....")
                })
            }
            function hide() {
                $("#div1").slideUp("slow","swing",function () {
                    alert("隐藏了.....")
                })
            }
            function toggle() {
                $("#div1").slideToggle("slow","swing",function () {
                    alert("切换显示了.....")
                })
            }
        </script>
        <body>
            <div id="div1">div1.....</div>
            <input type="button" value="show" onclick="show()" id="b1">
            <input type="button" value="hide" onclick="hide()" id="b2">
            <input type="button" value="toggle" onclick="toggle()" id="b3">
        </body>
    • 淡入淡出显示和隐藏

      • fadeIn([speed],[easing],[fn])

      • fadeOut([speed],[easing],[fn])

      • fadeToggle([speed],[easing],[fn])

        <script>
            function show() {
                $("#div1").fadeIn("slow","swing",function () {
                    alert("显示了.....")
                })
            }
            function hide() {
                $("#div1").fadeOut("slow","swing",function () {
                    alert("隐藏了.....")
                })
            }
            function toggle() {
                $("#div1").fadeToggle("slow","swing",function () {
                    alert("切换显示了.....")
                })
            }
        </script>
        <body>
            <div id="div1">div1.....</div>
            <input type="button" value="show" onclick="show()" id="b1">
            <input type="button" value="hide" onclick="hide()" id="b2">
            <input type="button" value="toggle" onclick="toggle()" id="b3">
        </body>
    1. 遍历
    • js遍历方式

      • for(初始化值;循环结束条件;步长)

      • <script>
            $(function () {
                var city = $("#city li");
                for (var i = 0; i < city.length; i++) {
                    alert(i+":"+$(city[i]).html())
                }
            })
        </script>
        <body>
        <ul id="city">
            <li>北京</li>
            <li>上海</li>
            <li>内蒙古</li>
            <li>重庆</li>
        </ul>
        </body>
    • jq的遍历方式

      • jq对象.each(callback)

      • <script>
            $(function () {
                var city = $("#city li");
                // for (var i = 0; i < city.length; i++) {
                //     alert(i+":"+$(city[i]).html())
                // }
                city.each(function (index,element) {
                    //使用this获取
                    //alert(this.innerHTML)
                    //在回调函数中定义参数;index(索引) element(元素对象)
                    //alert(index+":"+element.innerHTML)
                    if ("上海" == $(element).html())
                    {
                        //如果当前方法返回为false则结束循环(break)
                        //如果返回为true,则结束本次循环,继续下次循环(continue)
                        return true;
                    }
                    alert(index+":"+$(element).html())
                })
        
            })
        </script>
      • $.each(object,[callback])

      • $.each(city,function () {
            alert($(this).html());
        })
      • for...of:类似foreach

      • for (li of city)
        {
           alert(li.innerHTML)
        }
    1. 事件绑定
    • 标准方式

      • jq对象.事件方法(回调函数)
    • on绑定事件/off解除绑定

      • jq对象.on("事件名称",回调函数)

      • jq对象.off("事件名称")若off方法不传递参数,则将组件上的所有事件全部解除

        $("#bt1").on("click",function () {
            alert("点击了")
        })
        $("#bt2").click(function () {
            $("#bt1").off("click")
        })
    • 事件切换:toggle

      • jq对象.toggle(fn1,fn2.....)
        • 当单击jq对象对应组件后,会执行fn1,第二次点击执行fn2
        • 注意:1.9版本.toggle()方法删除,jQuery Migrate插件可以恢复功能
    1. 插件:增强JQuery功能
    • 实现方式:

      • $.fn.extend(object):增强通过JQuery获取的对象的功能 $("#id")

        $.fn.extend({
            方法名:function(){}
        })
        $("#id").方法名();
      • $.extend(object):增强JQuery对象自身的功能 $/JQuery

        $.extend({
            方法名:function(){}
        })
        $.方法名();
Last modification:September 12th, 2020 at 08:35 pm
如果觉得我的文章对你有用,请随意赞赏