1. 程式人生 > >jQuery學習記錄四

jQuery學習記錄四

元素的事件繫結

    *如果是先建立元素,再為這個子元素繫結事件, 後面再建立的子元素,沒有事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: green;
    }
    p{
      width: 100px;
      height: 30px;
      background-color: red;
      cursor: pointer;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    //點選按鈕為div中新增一個子元素,並且子元素有點選的事件
    $(function () {
      //第一個按鈕
      $("#btn").click(function () {
        $("<p>這是一個p</p>").appendTo($("#dv"));
        //先建立,後繫結的事件是可以用的
//        $("p").click(function () {
//          alert("哈哈");
//        });

        //同上
//        $("p").bind("click",function () {
//          alert("哈哈");
//        });

        $("#dv").delegate("p","click",function () {
          alert("哈哈");
        });
      });

      $("#btn2").click(function () {
        後新增的----->沒有繫結效果的
        $("<p>這是一個p2</p>").appendTo($("#dv"));
      });
    });
  </script>
</head>
<body>
<input type="button" value="繫結事件" id="btn"/>
<input type="button" value="繫結事件" id="btn2"/>
<div id="dv"></div>

</body>
</html>

有一種繫結事件的方式:同delegate() 父元素點選,為子元素新增點選事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: green;
    }
    p{
      width: 100px;
      height: 30px;
      background-color: red;
      cursor: pointer;
    }
    </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //點選按鈕為div繫結事件

      //此時on和delegate的作用是一樣的,但是引數的順序是不一樣
      $("#btn").click(function () {
        $("<p>這是一個p</p>").appendTo($("#dv"));
        //和delegate是一樣,都是在為子元素繫結事件
        $("#dv").on("click","p",function () {
          alert("p被點選了");
        });
      });
    });
  </script>
</head>
<body>
<input type="button" value="繫結事件" id="btn"/>
<input type="button" value="繫結事件" id="btn2"/>
<div id="dv"></div>
</body>
</html>

不同繫結事件的區別

    * 物件.事件名字(事件處理函式);--->普通的寫法
    * 物件.bind(引數1,引數2);---->引數1:事件的名字,引數2:事件處理函式
    * 前兩種方式只能為存在的元素繫結事件,後新增的元素沒有事件
    *
    * 下面的兩種方式,可以為存在的元素繫結事件,後新增的元素也有事件
    * 物件.delegate("選擇器","事件名字",事件處理函式);
    * 父級元素呼叫方法,代理子級元素繫結事件
    * 物件.on("事件名字","選擇器",事件處理函式);
    * 父級元素呼叫方法,代理子級元素繫結事件
    *
    * 因為delegate方法中是呼叫的on的方法
    * 所以,以後直接用on就可以了

解除繫結的方法

      //用什麼方式繫結事件,最好用對應的方式解綁事件
      //bind括號中寫什麼事件的名字就會把這個事件解綁,會把這個元素的這個點選的多個事件都會解綁
      //物件.click()這種方式新增的事件也可以使用unbind解綁
      //括號中沒有任何引數,此時該元素的所有的事件全部解綁
      //同時解綁多個事件---每個事件的名字中間用空格即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: green;
    }
    p{
      width: 100px;
      height: 30px;
      background-color: red;
      cursor: pointer;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //第一個按鈕為div繫結事件
      $("#btn").click(function () {
//        //div的點選事件
        $("#dv").bind("click",function () {
          console.log("div被點了");
        }).bind("click",function () {
          console.log("div點第二個點選");
        });
        //滑鼠進入
        $("#dv").bind("mouseenter",function () {
          $(this).css("backgroundColor","blue");
        });
        //滑鼠離開
        $("#dv").bind("mouseleave",function () {
          $(this).css("backgroundColor","yellow");
        });

//        $("#dv").click(function () {
//          console.log("哈哈");
//        });


      });
      //第二個按鈕為div解綁事件
      $("#btn2").click(function () {
        //解綁的是點選事件,所有的點選事件全部移除
        //$("#dv").unbind("click");
        //括號中沒有任何引數,此時該元素的所有的事件全部解綁
        //$("#dv").unbind();
        //同時解綁多個事件
        //$("#dv").unbind("mouseenter mouseleave");
      });
    });
  </script>
</head>
<body>
<input type="button" value="繫結事件" id="btn"/>
<input type="button" value="解綁事件" id="btn2"/>
<div id="dv"></div>

</body>
</html>

通過delegate()繫結事件的解綁方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: green;
    }
    p{
      width: 100px;
      height: 30px;
      background-color: red;
      cursor: pointer;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //delegate繫結事件對應的方式的解綁方式

      //點選第一個按鈕,div有自己的點選事件,有滑鼠進入和滑鼠離開事件
      //同時為p繫結點選事件

      $("#btn").click(function () {
        //為div繫結事件
        $("#dv").click(function () {
          console.log("div被點了");
        }).mouseenter(function () {
          console.log("滑鼠進來了");
        }).mouseleave(function () {
          console.log("滑鼠離開了");
        });
        //在div中建立一個p,同時繫結點選事件
        $("<p>這是一個p</p>").appendTo($("#dv"));
        //為p繫結事件
        $("#dv").delegate("p","click",function () {
          console.log("啊~p被點了");
        });
        $("#dv").delegate("p","mouseenter",function () {
          console.log("p的滑鼠進入");
        });
      });
      //第二個按鈕解綁事件
      $("#btn2").click(function () {
        //p的點選事件沒有了,移除了p的所有的事件
        //$("#dv").undelegate();
        //移除的是p的點選事件
        $("#dv").undelegate("p","click");
        //可以移除多個事件,但是每個事件之間用空格隔開
        $("#dv").undelegate("p","click mouseenter");
      });
    });
  </script>
</head>
<body>
<input type="button" value="繫結事件" id="btn"/>
<input type="button" value="解綁事件" id="btn2"/>
<div id="dv">

</div>

</body>
</html>

案例:為表格動態新增一行

        *JavaScript程式碼都很簡單,尤其加了jQuery之後,HTML和CSS不熟看起來困難。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="checkDemo.css">
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            /*新增框的顯示與隱藏*/
            $('#j_btnAddData').click(function () {
                $('#j_formAdd').show();
                $('#j_mask').show();
            });
            function closeKuang() {
                $('#j_formAdd').hide();
                $('#j_mask').hide();
            }
            $('#j_hideFormAdd').click(function () {
                closeKuang();
            });
            /*新增行操作的實現*/
            $('#j_btnAdd').click(function () {
                var j_txtLesson=$('#j_txtLesson');
                var j_txtBelSch=$('#j_txtBelSch');
                $('<tr><td>'+j_txtLesson.val()+'</td><td>'+j_txtBelSch.val()+'</td><td><a href="#">GET</a></td></tr>').appendTo($('#j_tb'));
                closeKuang();
                j_txtLesson.val("");
                j_txtBelSch.val("這就是命");
            });
            /*點選get移除一個*/
            $('#j_tb').on('click','.get',function () {
                $(this).parent().parent().remove();
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <div>
        <input type="button" value="新增資料" id="j_btnAddData" class="btnAdd">
    </div>
    <table>
        <thead>
            <tr>
                <th>課程名稱</th>
                <th>所屬學院</th>
                <th>已學會</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td>JavaScript</td>
                <td>前端移動開發</td>
                <td><a href="javascript:;" class="get">GET</a></td>
            </tr>
            ...多個行...
        </tbody>
    </table>
</div>
<div id="j_mask" class="mask"></div>
<div id="j_formAdd" class="form-add">
    <div class="form-add-title">
        <span>新增資料</span>
        <div id="j_hideFormAdd">x</div>
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtLesson">課程名稱:</label>
        <input class="txt" type="text" id="j_txtLesson" placeholder="請輸入課程名稱">
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtBelSch">所屬學院:</label>
        <input class="txt" type="text" id="j_txtBelSch" value="傳智播客-前端與移動開發學院">
    </div>
    <div class="form-submit">
        <input type="button" value="新增" id="j_btnAdd">
    </div>
</div>
</body>
</html>

事件冒泡現象,以及事件冒泡的阻止方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    #dv1 {
      width: 300px;
      height: 200px;
      background-color: red;
    }

    #dv2 {
      width: 250px;
      height: 150px;
      background-color: green;
    }

    #dv3 {
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $("#dv1").click(function () {
        //為什麼是undefined
        //物件.id----->DOM中的
        console.log($(this).attr("id"));
      });
      $("#dv2").click(function () {
        console.log($(this).attr("id"));
      });
      $("#dv3").click(function () {
        console.log($(this).attr("id"));
        return false;
      });
    });

//    document.getElementById("btn").onclick=function (e) {
//      e.stopPropagation();
//      window.event.cancelBubble=true;
//    };
  </script>
</head>
<body>

<div id="dv1">
  <div id="dv2">
    <div id="dv3">

    </div>
  </div>
</div>
</body>
</html>

時間的觸發

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //文字框新增獲取焦點的事件
      $("#txt").focus(function () {
        console.log("我的獲取焦點的事件觸發了");
        //設定當前元素的下一個兄弟元素中顯示一個提示資訊
        $(this).next("span").text("文字框獲取焦點了");
      });

      //按鈕的點及事件
      $("#btn").click(function () {
        //呼叫文字框的獲取焦點的事件---第一種方式讓別的元素的事件觸發
        //物件.事件名字();
        //$("#txt").focus();
        //第二種觸發事件的方式
        //$("#txt").trigger("focus");//觸發的意思
        //這種方式可以觸發該事件,但是,不能觸發瀏覽器的預設的行為(就是文字無法獲得焦點)
        $("#txt").triggerHandler("focus");
      });
    });
  </script>
</head>
<body>
<input type="button" value="我也要觸發文字框的獲取焦點的事件" id="btn"/>
<input type="text" value="" id="txt" /><span id="sp"></span>

</body>
</html>

事件的引數物件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: red;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //事件引數物件
      $("#dv").mousedown(function (e) {
        console.log(arguments.length);  1
        console.log(e);
        //獲取的是滑鼠的按鍵的值
        console.log(e.button);    0
      });
    });
  </script>
</head>
<body>
<div id="dv"></div>
</body>
</html>

鍵盤狀態的獲取

   *注:先按下鍵盤在按滑鼠,不然事件觸發過早

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      background-color: red;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $(document).mousedown(function (e) {
        //判斷使用者按下滑鼠的時候,有沒有按下alt鍵
       //console.log(e.altKey);
        if(e.altKey){
          //使用者按下了alt鍵的同時也按下滑鼠了
          console.log("按下了alt鍵,滑鼠也按下了");
        }else if(e.shiftKey){
          //使用者按下了shift鍵,同時按下滑鼠
          console.log("按下了shift鍵,滑鼠也按下了");
        }else if(e.ctrlKey){
          //使用者按下了ctrl鍵,同時按下滑鼠
          console.log("按下了ctrl鍵,滑鼠也按下了");
        }else{
          console.log("使用者按下了滑鼠");
        }
      });
    });
  </script>
</head>
<body>
<div id="dv"></div>
</body>
</html>

案例:點選鍵盤修改背景顏色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 800px;
      height: 600px;
      background-color: gray;
      background-color: ;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //使用者在頁面按鍵,可以改變div的背景顏色
      $(document).keydown(function (e) {
        switch (e.keyCode){
          case 65:$("#dv").css("backgroundColor","red");break;
          case 66:$("#dv").css("backgroundColor","green");break;
          case 67:$("#dv").css("backgroundColor","blue");break;
          case 68:$("#dv").css("backgroundColor","orange");break;
          case 69:$("#dv").css("backgroundColor","yellow");break;
          case 70:$("#dv").css("backgroundColor","deeppink");break;
          case 71:$("#dv").css("backgroundColor","hotpink");break;
          case 72:$("#dv").css("backgroundColor","oranged");break;
          case 73:$("#dv").css("backgroundColor","black");break;
          case 74:$("#dv").css("backgroundColor","white");break;
          case 75:$("#dv").css("backgroundColor","yellowgreen");break;
        }
      });
    });
  </script>
</head>
<body>
<div id="dv"></div>
</body>
</html>

鏈式程式設計的原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js">
  </script>
  <script>
//    $(function () {
//      //為按鈕註冊點選事件
//      $("#btn").click(function () {
//        //$(this).val("哈哈").val("嘎嘎");
//        //console.log( );
//
//        //物件.方法();呼叫,如果返回來的還是物件,那麼可以繼續的呼叫方法
//      });
//    });


    function Person(age) {
      this.age=age;
      this.sayHi=function (txt) {
        if(txt){
          console.log("您好啊:"+txt);
          return this;
        }else{
          console.log("您好啊");
        }
      };
      this.eat=function () {
        console.log("中午就吃了一個饅頭和鹹菜");
        return this;
      };
    }
    //物件
     var per=new Person(10);
     per.sayHi("嘎嘎").eat();
    //per.sayHi().eat().sayHi().eat().eat().sayHi();
    //console.log();



    //方法();----獲取這個值,如果.方法(值)--->當前的物件
    //val();---返回的是value屬性的值, val("fdds");---當前的物件
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
</body>
</html>

案例:評分


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>五角星評分案例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .comment {
      font-size: 40px;
      color: yellow;
    }

    .comment li {
      float: left;
    }

    ul {
      list-style: none;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>

    $(function () {
      //獲取所有的li標籤
      $(".comment>li").mouseenter(function () {//進入
        //當前的li是實心的五角星,前面的li也都是實現的五角星,滑鼠後面的li是空心的五角星
        $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
      }).click(function () {//點選
        //做一個記錄
        //點哪個li就為這個li新增一個自定義屬性,作為標識,但是其他的li中的這個自定義屬性要刪除
        $(this).attr("index","1").siblings("li").removeAttr("index");
      }).mouseleave(function () {//離開
        //滑鼠離開的時候,獲取那個帶有index自定義屬性的li,然後,改變這個li中的五角星,同時前面的五角星也都是實心的,同時後面的五角星都是空心
        //先幹掉所有的li中的實心的五角星
        $(".comment>li").text("☆");
        $(".comment>li[index=1]").text("★").prevAll("li").text("★");
      });
    });
  </script>
</head>

<body>
<ul class="comment">
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
</ul>
</body>

</html>

each()的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      list-style-type: none;
    }
    li{
      width: 100px;
      height: 100px;
      background-color: green;
      margin-right: 10px;
      float: left;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    //隱式迭代---內部幫助我們迴圈遍歷做操作

    //每個元素做不同的操作的時候
    //each方法,幫助我們遍歷jQuery的物件

    $(function () {
      //獲取所有的li,針對每個li的透明進行設定
      $("#uu>li").each(function (index,ele) {
        //引數1:索引,引數2:物件
        //console.log(arguments[0]+"===="+arguments[1]);
        //每個li的透明度不一樣
        var opacity=(index+1)/10;
        $(ele).css("opacity",opacity);
      });
    });

    //each方法就是用來遍歷jQuery物件的,但是,裡面的每個物件最開始都是DOM物件,如果想要使用jQuery的方法,需要把DOM物件轉jQuery物件

  </script>
</head>
<body>
<ul id="uu">
  <li>1</li>
  <li>2</li>
</ul>

</body>
</html>

自定義$與jQuery的$衝突問題

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    //一個html檔案引入了多個的js檔案庫,每個js庫中的頂級物件可能都是$
    //1.js  $.eat();
    //2.js  $.sayHi();


  </script>
  <script src="jquery-1.12.1.js"></script>
  <script>

    //    var $=10;//普通的變數,10
    //    console.log($);
    //    //頁面載入
    //    $(function () {               $ is not a function
    //      $("#btn").click(function () {
    //        console.log("小蘇好猥瑣哦");
    //      });
    //    });


    // /var $=10;//普通的變數,10
    //console.log($);            打印出10
    ////頁面載入
    //jQuery(function () {       只能通過這種方式進行呼叫
    //  jQuery("#btn").click(function () {
    //    console.log("小蘇好猥瑣哦");
    //  });
    //});

    var fdsfdsf = $.noConflict();//把$的權利給了xy了,$就可以作為其他的用法出現在程式碼中
    var $ = 10;//普通的變數,10
    console.log($);
    //頁面載入
    fdsfdsf(function () {
      fdsfdsf("#btn").click(function () {
        console.log("小蘇好猥瑣哦");
      });
    });


  </script>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>

</body>
</html>

包裝集:把很多的DOM的物件進行包裝或者是封裝---->jQuery物件
    //jQuery物件---->DOM物件--->jQuery物件[0]--->獲取到這個物件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
//    $(function () {
//      $("p")[0].innerText="哈哈";
//    });


    //包裝集  ----->length屬性

    //jQuery中如何判斷這個元素是否存在,就是通過包裝集的length屬性來測試的


    //是通過這個物件.length屬性不等於0的方式來判斷

//    $(function () {
//      if($("#btn").length!=0){
//        console.log("存在");
//      }else{
//        console.log("不存在");
//      }
//    });


  </script>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html>

案例:點選按鈕只建立一個p標籤

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      background-color: red;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $("#btn").click(function () {
        if($("#p1").length==0){
          //點選按鈕,只建立一個p標籤,在div中
          $("<p id='p1'>這是一個p</p>").appendTo($("#dv"));
        }

      });
    });
  </script>
</head>
<body>
<input type="button" value="建立一個p" id="btn"/>
<div id="dv"></div>

</body>
</html>

幾個屬性介紹

    //innerWidth()/innerHeight()    方法返回元素的寬度/高度(包括內邊距)。
    //outerWidth()/outerHeight()  方法返回元素的寬度/高度(包括內邊距和邊框)。
    //outerWidth(true)/outerHeight(true)  方法返回元素的寬度/高度(包括內邊距、邊框和外邊距)。

外掛的使用:別人寫好的拿來改改。。。

事件引數物件

//e.target這個屬性得到的是觸發該事件的目標物件,此時是一個DOM物件
//e.currentTarget這個屬性得到的是觸發該事件的當前的物件
//e.delegateTarget這個屬性得到的是代理的這個物件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: yellow;
    }
    p{
      width: 100px;
      height: 30px;
      background-color: pink;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>


    //e.target這個屬性得到的是觸發該事件的目標物件,此時是一個DOM物件
    //e.currentTarget這個屬性得到的是觸發該事件的當前的物件
    //e.delegateTarget這個屬性得到的是代理的這個物件

//    $(function () {
//      //事件引數物件
//      $("#dv").click(function (e) {
//        //console.log("哈哈");
//        //得到是觸發該事件的目標物件
//        console.log("div被點了");
//        //console.log($(e.target).attr("id"));
//      });
//
//      $("p").click(function (e) {
//        console.log("p被點選了");
//        //return false;
//      });
//    });


    $(function () {
      console.log(window);

      $("#dv").click(function (e) {
        console.log("div被點了");
        //console.log($(e.currentTarget).attr("id"));
        //console.log(e);

        console.log(e.screenX+"===="+e.screenY);
      });

      $("p").click(function (e) {
       console.log("p被點了");
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv">
  <p id="p1">這是一個p</p>
</div>

</body>
</html>

jQuery UI的使用

前提:下載了jQuery UI,並將jquery-ui-1.12.1.custom這個資料夾複製到專案中,裡邊有一個index.html檔案有各種特效

    //1.引入 jQuery UI 的css檔案
    //2 引入jquery的js檔案
    //3 引入jQuery UI 的js檔案
    //4 查詢和複製UI 中的某個功能的所有的程式碼(html,css,js)
    //5 測試和使用

比如:我想做一個tab特效,開啟index.html檔案找到對應的特效,F12→點選要檢視開發工具最左邊的框框箭頭→複製檢視的內容標題(有很多方式如類樣式...原始碼中一般通過註釋分開了,所以可以通過這種方式來找HTML原始碼,只要找到就可以了)如:tab→檢視網頁原始碼→ctrl+f,將標題內容複製進去進行查詢。將HTML和部分JavaScript複製到HTML檔案中。ok

   *注:js程式碼一般要在$(function(){});之中