JQuery笔记

一、概念

  • jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

  • JavaScript框架:本质上就是一些js文件,只是封装了js的原生代码而已。

    • //封装方法,根据id来获取元素对象
      function $(id){
          return document.getElementById(id);
      }
    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>自定义js框架</title>
          
          <!--导入自定义的js文件-->
          <script type="text/javascript" src="../js/frame.js"></script>
      </head>
      <body>
      ​
          <div id="div1">div1...</div>
          <div id="div2">div2...</div>
      ​
          <script>
              //使用自定义框架来获取元素对象
              var div1 = $("div1");
              var div2 = $("div2");
              //使用 对象.innerHTML 方法获取对象内容
              alert(div1.innerHTML);
              alert(div2.innerHTML);
          </script>
      </body>
      </html>

二、JQuery初体验

  • 步骤:

    • 下载JQuery:

      • jquery-xxx.js:开发版本。给程序员看的,有良好的缩进与注释;体积一些

      • jquery-xxx.min.js:生产版本。在程序中使用,没有缩进。体积小一些

    • 导入JQuery的js文件:

      • 导入jquery-xxx.min.js即可

    • 使用:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>JQuery快速入门</title>
          
          <!--导入JQuery的js文件-->
          <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
      </head>
      <body>
      ​
          <div id="div1">div1...</div>
          <div id="div2">div2...</div>
      ​
          <script>
              //使用jquery来获取元素对象
              var div1 = $("#div1");
              var div2 = $("#div2");
              //使用 对象.html() 方法获取对象内容
              alert(div1.html());
              alert(div2.html());
          </script>
      </body>
      </html>

三、JQuery对象和js对象的转换

  • JQuery对象在操作时更加方便

  • Jquery对象和 js 对象是不通用的

  • 两者相互转换:

    • * jq --> js:
                  js对象[索引]  或  jq对象.get(索引)
      * js --> jq:
                  $(js对象)
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery快速入门</title>
    ​
        <!--导入JQuery的js文件-->
        <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
    ​
        <div id="div1">div1...</div>
        <div id="div2">div2...</div>
    ​
        <script>
            
            //1. 通过js方式来获取名称叫div的所有html元素对象
            var divs = document.getElementsByTagName("div");
            //2. 可以将其当作数组来使用
            alert(divs.length);
            //3. 对divs中所有的div,让其标签体中的内容变为"aaa"
            for(var i=0; i<divs.length; i++){
                divs[i].innerHTML = "aaa";
            }
            //4. 把js对象转换为jq对象,让标签体的内容变为"bbb"
             for(var i=0; i<divs.length; i++){
                $(divs[i]).html("bbb");
            }
    ​
    ​
            //1. 通过jquery方式来获取名称叫div的所有html元素对象
            var $divs = $("div");
            //2. 也可以将其当作数组来使用
            alert($divs.length);
            //3. 对divs中所有的div,让其标签体中的内容变为"ccc"
            $divs.html("ccc");
            //4. 把jq对象转换为js对象,让标签体的内容变为"ddd \n eee"
            $divs[0].innerHTML = "ddd";
            $divs[1].innerHTML = "eee";
    ​
        </script>
    </body>
    </html>

四、选择器

  • 筛选具有相似特征的元素

4.1 基本语法

4.1.1 事件绑定

  • 点击事件

    <script>
            $("#b1").click(function () {
                alert("我被以jquery的方式点击了");
            })
    </script>

4.1.2 入口函数

  • window.onload 和 $(function(){})的区别:

    • window.load:只能定义一次,如果定义多次,后边的会将前面的覆盖掉

    • $(function):可以定义多次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
​
    <!--导入自定义的js文件-->
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
​
    <script>
        //方式一:先执行加载事件,加载完之后再执行点击事件
        window.onload = function(){
            //获取b1按钮
            $("#b1").click(function () {
                alert("我被以jquery的方式点击了");
            })
        }
        //方式二:使用jquery入口函数(dom文档加载完之后执行该函数中的代码)
        $(function () {
            //获取b1按钮
            $("#b1").click(function () {
                alert("我被以jquery的方式点击了");
            })
        })
​
        /*
         window.onload 和 $(function)的区别:
            * window.load只能定义一次,如果定义多次,后边的会将前面的覆盖掉
            * $(function)可以定义多次。
        */
    </script>
</head>
<body>
​
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
    <input type="button" value="点我" id="b1">
​
</body>
</html>

4.1.3 样式控制

$(function () {
    $("#div1").css("background-color","pink");
})

4.2 分类

4.2.1 基本选择器

  1. 标签选择器(元素选择器):

    • $("html标签名"):获得所有匹配标签名的元素

  2. id选择器:

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

  3. 类选择器:

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

  4. 并集选择器:

    • $("选择器1 , 选择器2 , ......"):获取多个选择器选中的所有元素

4.2.2 层级选择器

  1. 后代选择器:

    • $("A B"):选择A元素内部的所有B元素(包括孙子辈及以下)

  2. 子选择器:

    • $("A > B"):选择A元素内部的所有B子元素(只包括儿子辈)

4.2.3 属性选择器

  1. 属性名称选择器:

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

  2. 属性选择器:

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

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

    • $("A[属性名 ^= '值' ]"):包含指定属性以指定值开头的选择器

    • $("A[属性名 *= '值' ]"):包含指定属性以指定值结尾的选择器

  3. 符合属性选择器:

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

4.2.4 过滤选择器

  1. 首元素选择器:

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

  2. 尾元素选择器:

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

  3. 非元素选择器:

    • :not(selecter):不包括指定内容的元素

  4. 偶数选择器:

    • :even:从0开始计数

  5. 奇数选择器:

    • :odd:从0开始计数

  6. 等于索引选择器:

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

  7. 大于索引选择器:

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

  8. 小于索引选择器:

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

  9. 标题选择器:

    • :header:获得标题元素,固定写法

<script>
    $(function(){
        // <input type="button" value="改变第一个div元素的背景色为粉红色" id="b1" >
        $("b1").click(function () {
            $("div:first").css("background-color","pink");
        });
​
        // <input type="button" value="改变class不为one的所有div元素的背景色为粉红色" id="b2" >
        $("b2").click(function () {
            $("div:not(.one)").css("background-color","pink");
        });
​
        // <input type="button" value="改变索引值为偶数的div元素的背景色为粉红色" id="b3" >
        $("b3").click(function () {
            $("div:even").css("background-color","pink");
        });
​
        // <input type="button" value="改变索引值大于3的div元素的背景色为粉红色" id="b4" >
        $("b4").click(function () {
            $("div:gt").css("background-color","pink");
        });
​
        // <input type="button" value="改变所有的变体元素的背景色为粉红色" id="b5" >
        $("b5").click(function () {
            $(":header").css("background-color","pink");
        });
    })
</script>

4.2.5 表单过滤选择器

  1. 可用元素选择器

    • :enabled:获得可用元素

  2. 不可用元素选择器

    • :disabled:获得不可用元素

  3. 选中选择器:

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

  4. 选中选择器:

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

<script>
​
    $(function () {
​
    // <input type="button" value="利用JQuery对象的var()方法改变表单内可用<input>元素的值" id="b6">
        $("b6").click(function () {
            $("input[type = 'text']:enabled").val("aaa");
        });
    // <input type="button" value="利用JQuery对象的var()方法改变表单内不可用<input>元素的值" id="b7">
        $("b7").click(function () {
            $("input[type = 'text']:disabled").val("aaa");
        });
    // <input type="button" value="利用JQuery对象的length()属性获取复选框选中的个数" id="b8">
        $("b8").click(function () {
            alert($("input[type = 'checkbox']:checked").length);
        });
    // <input type="button" value="利用JQuery对象的length()属性获取下拉框选中的个数" id="b9">
        $("b9").click(function () {
            alert($("#job > option:selected").length);
        });
    })
​
</script>

五、DOM

5.1 内容操作

5.1.1 html( )

  • 获取/设置元素的标签体内容

    • <a><font>内容</font></a>  ----->   <font>内容</font>

5.1.2 text( )

  • 获取/设置元素的标签体纯文本内容

    • <a><font>内容</font></a>  ----->   内容

5.1.3 val( )

  • 获取/设置元素的value属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
​
    <script>
        $(function () {
            //获取 myinput 的value值
            var value = $("#myinput").val();
            alert(value);
            //设置 myinput 的value值
            $("#myinput").val("李四");
​
​
            //获取 mydiv 的标签体内容
            var html = $("#mydiv").html();
            alert(html);//<p><a href="#">标题标签</a></p>
            //设置 mydiv 标签体内容
            $("#mydiv").html("<p>aaaa</p>");
​
​
            //获取 mydiv 的文本内容
            var text = $("#mydiv").text();
            alert(text);//标题标签
            //设置 mydiv 的文本内容
            $("#mydiv").text("bbb");
        })
    </script>
</head>
<body>
    <input type="button" value="张三" name="username" id="myinput"><br>
    <div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>

5.2 属性操作

5.2.1 通用属性操作

  1. attr( ):获取/设置元素的属性

  2. removeAttr( ):删除属性

  3. prop( ):获取/设置元素的属性

  4. removeProp( ):删除属性

  • attr 和 prop 的区别:

    • 如果操作的是元素的固有属性,则建议使用prop

    • 如果操作的是元素自定义的属性,则建议使用attr

  • <script>
        $("function(){
          //获取北京节点的name属性值(name不是元素的固有属性)
          var name = $("bj").attr("name");
        
          //设置背景节点的name属性值为dabeijing
          $("bj").attr("name","dabeijing");
        
          //获取hobby的选中状态(checked是元素固有属性)
          var checked = $("#hobby").prop("checked");
          }")
    </script>

5.2.2 对class属性操作

  1. addClass( ):添加class属性值

  2. removeClass( ):删除class属性值

  3. toggleClass( ):切换class属性

    • toggleClass("one"):

      • 判断如果元素对象上存在class="one",则将属性值one删除掉。如果元素对象上不存在class="one",则添加。

<script>
    $("function(){
        //<input type="button" value="采用属性增加样式 改变id=one的样式" id="b1">
        $("#b1").click(function () {
            $("#one").prop("class","second")
        });
        
        //<input type="button" value="addClass" id="b2"
        $("#b2").click(function () {
            $("#one").addClass("second");
        });
    
        //<input type="button" value="切换样式" id="b2">
        $("#b3").click(function () {
            $("#one").toggle("second");
        });
      }")
</script>

5.3 CRUD操作

  1. append( ):

    • 对象1 . append(对象2):将对象2添加到对象1内部,并且在末尾

  2. prepend( ):

    • 对象1 . prepend(对象2):将对象2添加到对象1内部,并且在开头

  3. appendTo( ):

    • 对象1 . appendTo(对象2):将对象1添加到对象2内部,并且在末尾

  4. prependTo( ):

    • 对象1 . prependTo(对象2):将对象1添加到对象2内部,并且在开头

  5. after( ):

    • 对象1 . after(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系

  6. before( ):

    • 对象1 . before(对象2):将对象2添加到对象1前边。对象1和对象2是兄弟关系

  7. insertAfter( ):

    • 对象1 . insertAfter(对象2):将对象1添加到对象2后边。对象1和对象2是兄弟关系

  8. insertBefore( ):

    • 对象1 . insertBefore(对象2):将对象1添加到对象2前边。对象1和对象2是兄弟关系

  9. remove( ):

    • 对象 . remove( ):将对象删除掉

  10. empty( ):

    • 对象 . empty( ):将对象的后代元素全部清空,但是保留当前对象以及其属性节点

六、基础案例

6.1 隔行换色

<!--需求:将数据的奇数行背景色设为 pink ,偶数行背景色设为 yellow-->
<script>
    $("function(){
      //获取数据行的奇数行的tr,设置背景色为pink
      $("tr:gt(1):odd").css("backgroundColor","pink");
      //获取数据行的偶数行的tr,设置背景色为yellow
      $("tr:gt(1):even").css("backgroundColor","yellow");
      }")
</script>

6.2 全选和全不选

<!--需求:保证下边复选框的选中状态和第一个复选框的选中状态一致-->
​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script>
    function selectAll(obj){
        //设置下边复选框的属性值和第一个复选框的属性值一样
        $(".itemSelect").prop("checked",obj.checked);
    }
</script>
</head>
<body>
    <table>
        <tr>
            <th><input type="checkbox" onclick="selectAll(this)"></th>
            ......
        </tr>
        <tr>
            <th><input type="checkbox" class="itemSelect"></th>
            ......
        </tr>
        <tr>
            <th><input type="checkbox" class="itemSelect"></th>
            ......
        </tr>
        <tr>
            <th><input type="checkbox" class="itemSelect"></th>
            ......
        </tr>
        .......
    </table>
</body>
</html>

6.3 QQ表情选择

<script>
    $(function(){
        $("ul img").click(function(){
            //this是js对象,要调用clone方法,需要将js对象转为jquery对象,即$(this)
            $(".word").append($(this).clone());
        });
    });
</script>

6.4 多选下拉列表左右移动

<script>
    $("function(){
      //获取右边的下拉列表,append(左边下拉列表选中的option)
      $("#toRight").click(function(){
            $("#rightName").append($("#leftName > option:selected"));
      });
    
      //获取右边下拉列表中的option,将其移动到左边的下拉列表中 
      $("#toleft").click(function(){
            $("#rightName > option:selected").appendTo($("#leftName"));
      })
      }");
</script>

#

七、动画

7.1 默认显示和隐藏方式

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

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

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

7.2 滑动显示和隐藏方式

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

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

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

7.3 淡入淡出显示和隐藏方式

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

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

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

    • [speed]:动画的速度。三个预定义的值("slow","noemal","fast")或表示动画时长的毫秒数值(如:1000 ---> 1s)

    • [easing]:用来指定切换效果,默认是 "swing"(动画执行效果是先慢,中间快,最后又慢),可用参数linear(动画执行效果是匀速的)

    • [fn]:在动画完成时执行的函数,每个元素执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#showDiv").css("backgroundColor","pink");
            $("#showDiv").css("border","2px solid red");
            $("#showDiv").css("height","200px");
            $("#showDiv").css("width","200px");
        });
​
        function hideFn() {
            $("#showDiv").hide("slow","swing");
        }
​
        function showFn() {
            $("#showDiv").slideUp("slow","swing");
        }
​
        function toggleFn() {
            $("#showDiv").fadeToggle("slow","linear");
        }
    </script>
</head>
<body>
    <input type="button" value="点击按钮动画隐藏div" onclick="hideFn()">
    <input type="button" value="点击按钮动画显示div" onclick="showFn()">
    <input type="button" value="点击按钮动画切换div的显示与隐藏" onclick="toggleFn()">
​
    <div id="showDiv">
        div显示和隐藏
    </div>
​
​
</body>
</html>

八、遍历

8.1 js的遍历方式

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

8.2 jq的遍历方式

  • jquery对象 . each( callback )

  • $ . each( object , [callback] )

  • for......of :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
​
    <script>
        $(function () {
            var citys = $("#city li");
​
            //1. 通过js的方式进行遍历
            for(var i=0; i<citys.length; i++){
                alert(i + ":" +citys[i].innerHTML);
            }
​
            
​
            //2.1 通过jquery的方式来遍历【jquery对象.each()】
            citys.each(function (index,element) {
                //2.1.1 获取li的第一种方式:this (这种方式无法获取索引)
                alert(this.innerHTML);//js
                alert($(this).html());//jquery
                
                //2.1.2 获取li的第二种方式:在回调函数中定义参数,index(索引)、element(元素对象)
                alert(index + ":" + element.innerHTML);//js
                alert(index + ":" + $(element).html());//jquery
                
                //需求:判断如果时上海,则结束循环
                if("上海" == $(element).html()){
                    //如果当前function返回false,则结束循环,相当于break
                    //如果返回为true,则结束本次循环,继续下次循环,相当于continue
                    return false;
                }
                alert(index + ":" + $(element).html());
​
            });
​
​
            //2.2 通过jquery的方式来遍历【$.each(object,[callback])】
            $.each(citys,function () {
​
                //........function里面的规则和上面2.1的一样..........
​
            });
​
​
            //2.3 通过jquery的方式来遍历【for...of】
            for(li of citys){
                //li就是js对象,再转换为jq对象
                alert($(li).html());
            }
​
        })
​
    </script>
</head>
<body>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
​
</body>
</html>

九、事件绑定

9.1 jquery标准绑定方式

  • jquery对象 . 事件方法(回调函数)

9.2 on/off绑定与解绑

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

    • 相当于:jquery对象 . bind(事件名称1 事件名称2" , 回调函数)

      <script>
      ​
          $(function{
            
            $("#small").bind("mouseover mouseout mousemove",function(event){
                  if(event.type == "mouseover"){
                      $("#showBig").show();
                  } else if(event.type == "mouseout"){
                      $("#showBig").hide();
                  } else if(event.type == "mousemove"){
                      $("#showBig").offset({
                          //+10是为了方式大图标闪
                          letf: event.pageX + 10,
                          top: event.pageY + 10
                      });
                  }
            });
            
          });
      ​
      </script>
  • jquery对象 . off("事件名称")

9.3 toggle事件切换

  • jq对象 . toggle(fn1 , fn2 , ........)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery-migrate-1.0.0.js"></script>
​
    <script>
        
        $(function () {
​
            //1. jquery标准绑定方式
                //1.1 标准绑定方式
                $("#name").click(function () {
                    alert("我被点击了...")
                });
                //1.2 链式编程,简化操作
                $("#name").mouseover(function () {
                    alert("鼠标来了...")
                }).mouseout(function () {
                    alert("鼠标走了...")
                });
                //1.3 不传回调函数,出发浏览器默认事件,让其获得焦点
                $("#name").focus();
​
​
            //2. on/off绑定与解绑
                //2.1 on绑定
                $("#btn1").on("click",function () {
                    alert("我被点击了....")
                });
                //2.2 off解绑
                $("#btn2").click(function () {
                    $("#btn1").off("click")//如果不传参,则将组件上的所有事件全部解绑
                });
​
​
            //3. toggle事件切换
                //需要导入jquery-migrate-1.0.0.js
                $("#btn").toggle(function () {
                    //改变 div 背景色为 green
                    $("#myDiv").css("backgroundColor","green")
                },function () {
                    //改变 div 背景色为 pink
                    $("#myDiv").css("backgroundColor","pink")
                })
​
​
        })
        
    </script>
    
</head>
<body>
    <input type="text" id="name" value="绑定点击事件"><br>
    <input type="button" id="btn1" value="使用on绑定点击事件">
    <input type="button" id="btn2" value="使用off解绑点击事件"><br>
    <input type="button" id="btn" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background: pink">
        点击按钮,切换绿色和粉红色
    </div>
</body>
</html>

十、高级案例

10.1 广告的自动消失与增长

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告的自动消失与出现</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
​
    <script>
​
        /*
        需求:
            1. 当页面加载完3秒之后,显示广告
            2. 广告显示5秒之后,自动消失
        */
​
        //入口函数,在页面加载完成之后,执行其中的代码
        $(function () {
            //定义定时器,调用adShow方法,3秒后执行
            setTimeout(adShow,3000);
            //定义定时器,调用adHide方法,8秒后执行
            setTimeout(adHide,8000);
        });
​
        function adShow() {
           $("#ad").show("slow");
        }
        
        function adHide() {
            $("#ad").hide("slow");
        }
​
    </script>
</head>
<body>
<!--整体的div-->
<div>
    <!--广告div-->
    <div id="ad" style="display: none;">
        <img src="../Image/5.jpg" style="width: 100%">
    </div>
​
    <!--下方正文部分-->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

10.2 抽奖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
​
    <script>
​
        var imgs = [
          "../Image/1.jpg",
          "../Image/2.jpg",
          "../Image/3.jpg",
          "../Image/4.jpg",
          "../Image/5.jpg",
          "../Image/6.jpg"
        ];
​
        var index;
        var startId;
        $(function () {
​
            //处理按钮是否可以使用的效果
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);
​
            //设置开始按钮点击事件
            $("#startID").click(function () {
​
                //定义循环定时器,20毫秒执行一次
                startId = setInterval(function () {
                    //处理按钮是否可以使用的效果
                    $("#startID").prop("disabled",true);
                    $("#stopID").prop("disabled",false);
                    //获取1-6的随机数(Math.random()---->0.000--0.999)
                    index = Math.floor(Math.random()*6 + 1);
                    //设置小相框的属性值
                    $("#img1ID").prop("src",imgs[index])
                },20);
​
            });
            
            //设置停止按钮点击事件
            $("#stopID").click(function () {
                //停止循环定时器
                clearInterval(startId);
​
                //处理按钮是否可以使用的效果
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);
​
​
                //设置大相框的属性值
                $("#img2ID").prop("src",imgs[index]).hide();
                $("#img2ID").show("slow");
            })
​
        })
​
    </script>
</head>
<body>
​
<!--小相框-->
<div style="border-style: dotted;width: 160px;height: 100px">
    <img id="img1ID" src="../Image/1.jpg" style="height: 100px;width: 160px">
</div>
​
<!--大相框-->
<div style="border-style: double;width: 800px;height: 500px;position: absolute;left: 500px;top: 100px;">
    <img id="img2ID" src="../Image/1.jpg" style="height: 500px;width: 800px">
</div>
​
<!--开始按钮-->
<input id="startID" type="button" value="点击开始" style="width: 150px;height: 150px;font-size: 22px">
​
<!--停止按钮-->
<input id="stopID" type="button" value="点击停止" style="width: 150px;height: 150px;font-size: 22px">
</body>
</html>

十一、插件

  • $ . fn . extend(object)

    • 增强通过 jquery获取的对象的功能 $("#id")

    <script>
    ​
        //1. 定义jquery对象插件
        $.fn.extend({
            //定义了一个check方法,所有jquery对象都可调用该方法
            check:function () {
                //让复选框选中
                this.prop("checked","true");//this:调用该方法的jquery对象
            },
            uncheck:function () {
                //让复选框不选中
                this.prop("checked","false");
            }
        });
    ​
        //2. 调用自定义的插件方法
        $(function () {
    ​
            $("#btn-check").click(function () {
                $("input[type = 'checkbox']").check();
            });
    ​
            $("#btn-uncheck").click(function () {
                $("input[type = 'checkbox']").uncheck();
            })
    ​
        })
    ​
    </script>

  • $ . extend(object)

    • 增强 JQuery 对象自身的功能

<scripr>
​
    //对全局方法扩展两个方法。min方法(求两个值得最小值)、max(求两个值得最大值)
    $.extend({
        max:function (a,b) {
            return a >= b ? a:b;
        },
        min:function (a,b) {
            return a <= b ? a:b;
        }
    })
​
    //调用全局方法
    var max = $.max(2,3);
    alert(max);
    
</scripr>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李巴巴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值