前端——jQuery

jQuery介紹:

  1. jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
  2. jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互,可以極大地簡化JavaScript編程。
  3. 它的宗旨就是:「Write less, do more.「 

在使用jQuery時候,須要在body標籤的內部後面導入javascript

<script src="jquery-3.2.1.min.js"></script>

 

jQuery對象和DOM對象之間的轉換;css

1. jQuery對象轉換成DOM對象,用索引取出具體的標籤;html

2. DOM對象轉換成jQuery對象,$(DOM對象);java

jQuery的關鍵字爲$;注意 jQuery對象保存到變量的時候,變量名前面叫上$,方便與DOM區別;jquery

 

jQuery基礎語法

1. 找標籤編程

1. 基本選擇器
  1. $("ID值")
  2. $(".class名")
  3. $("標籤名")
  4. $("*") 找全部
  5. $("條件1,條件2") 組合查找
數組

2. 層級選擇器
  同CSS選擇器
  1. $("x y");// x的全部後代y(子子孫孫)
  2. $("x > y");// x的全部兒子y(兒子)
瀏覽器

  緊挨和找以後全部的兄弟,都是在同一級的找的;
  3. $("x + y")// 找到全部緊挨在x後面的y
  4. $("x ~ y")// x以後全部的兄弟y

3. 基本篩選器
  1. :first // 第一個
  2. :last // 最後一個
  3. :eq(index)// 索引等於index的那個元素
  4. :even // 匹配全部索引值爲偶數的元素,從 0 開始計數
  5. :odd // 匹配全部索引值爲奇數的元素,從 0 開始計數
  6. :gt(index)// 匹配全部大於給定索引值的元素
  7. :lt(index)// 匹配全部小於給定索引值的元素
  8. :not(元素選擇器)// 移除全部知足not條件的標籤
  9. :has(元素選擇器)// 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找,也就是往下找)app

 

$("div:has(h1)")// 找到全部後代中有h1標籤的div標籤
$("div:has(.c1)")// 找到全部後代中有c1樣式類的div標籤
$("li:not(.c1)")// 找到全部不包含c1樣式類的li標籤
$("li:not(:has(a))")// 找到全部後代中不含a標籤的li標籤

 

模態框:less

<!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">
  <title>自定義模態框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  .hide{
    display:none
  }
  </style>
</head>
<body>

<!--模態框-->
<div class="cover hide"></div>
<div class="modal hide"></div>
<button>點擊</button>
<script src="jquery-3.2.1.min.js"></script>
<script src="js_demo.js"></script>
<script>
  $("button").on("click",function () {
      var $coverElem = $(".cover");
      var $modalElem = $(".modal");
      $coverElem.removeClass("hide");
      $modalElem.removeClass("hide")
  })

</script>
</body>
</html>

 

4. 屬性選擇器
  1. [attribute]
  2. [attribute=value]  ; 屬性等於
  3. [attribute!=value]; 屬性不等於

 

5.表單篩選器 

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
$(":checkbox") // 找到全部的 type ="checkbox" 的標籤

 

表單對象的屬性

:enabled
:disabled
:checked
:selected

 

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">廣州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到全部被選中的option

 

篩選器方法

1. 上一個

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

2. 下一個

$("#id").next()  // 找到下一個
$("#id").nextAll() //找到下面全部的
$("#id").nextUntil("#i2") //往下面找,直到找到id=i2的標籤爲止;

3. 父元素

$("#id").parent()
$("#id").parents()  // 查找當前元素的全部的父輩元素
$("#id").parentsUntil() // 查找當前元素的全部的父輩元素,直到遇到匹配的那個元素爲止。  

4. 兒子和兄弟

$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們, 同一級的

 

查找(find)

搜索全部與指定表達式 匹配 的元素。這個函數是找出正在處理的元素的後代元素的好方法。

$("div").find("p") //找到div後代有p標籤的元素

  

篩選  

篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。  

$("div").filter(".c1")  // 從結果集 中 篩選出 有c1樣式類的元素;
.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最後一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定後代的元素,去掉那些不含有指定後代的元素。
.eq() // 索引值等於指定值的元素

  

操做標籤

 樣式操做

addClass();// 添加指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名,若是有就移除,若是沒有就添加。

 示例:開關燈 

2. 直接修改樣式
  1. 原生DOM .style.color="green"
  2. $("div").css("color", "green")
  3. 修改多個樣式時,傳入鍵值對!!!
  .css({},)

3. 位置操做
  1. offset  -->  獲取匹配元素在當前窗口的相對偏移(body,右上角)
  2. position --> 獲取相對 父標籤 的偏移位置
  3. scrollTop()   獲取匹配元素 相對滾動條頂部  的偏移
  4. scrollLeft()   獲取匹配元素 相對滾動條左側  的偏移

例子:
  返回頂部示例

<script>
  $("#b1").on("click", function () {
    $(".c1").offset({left: 200, top:200});
  });


  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>

  

4. 大小
  1. height()       內容
  2. width()

  3. innerHeight()    內容+padding
  4. innerWidth()

  5. outerHeight()    內容+padding+border
  6. outerWidth()

注意:outerHeight()和outerWidth()取得是內容+padding+border


2. 文檔操做
  1. 操做HTML
    .html() --> 相似於 innerHTML ,獲取內容和子標籤
  2. 操做text
    .text() --> 相似於 innerText ,獲取內容

3. 值
   1. val()// 取得第一個匹配元素的當前值,在循環元素 或者 是 元素爲數組的話,就只會取到第一個元素;
   2. val(val)// 設置 全部匹配元素 的值

   3.val([val1, val2])   // 設置多選的checkbox、多選select的值

 

屬性操做:

attr(attrName)// 返回第一個匹配元素的屬性值
attr(attrName, attrValue)// 爲全部匹配元素設置一個屬性值
attr({k1: v1, k2:v2})// 爲全部匹配元素設置多個屬性值
removeAttr()// 從每個匹配的元素中刪除一個屬性

用於checkbox和radio 

prop() // 獲取屬性
removeProp() // 移除屬性
$checkboxElem.prop("checked",false); // 設定不選中;
$checkboxElem.prop("checked");// 判斷是否選中; 選中返回值爲true 或者 選不中是false;

對於返回布爾值的好比checkbox、radio和option的是否被選中都用 prop

  

文檔處理

添加到指定元素內部的後面;

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素內部的前面;  

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

 

添加到指定元素外部的後面

$(A).after(B)// 把B放到A的後面
$(A).insertAfter(B)// 把A放到B的後面

  

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

  

清空和移除元素

remove()// 從DOM中刪除全部匹配的元素。
empty()// 刪除匹配的元素集合中全部的子節點。

例子:

點擊按鈕在表格添加一行數據。

點擊每一行的刪除按鈕刪除當前行數據

  

克隆  

clone()    // 參數
// clone方法不加參數true,克隆標籤但不克隆標籤帶的事件
// clone方法加參數true,克隆標籤而且克隆標籤帶的事件

 

替換

$("p").replaceWith("<b>Hello world!</b>");
//粗體的Hello world! 來替換含有p標籤的內容; 
$("p").replaceAll("<b>Hello world!</b>");
//含有p標籤的內容 來替換 Hello world!;

  

 

事件

經常使用事件:

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

  

事件的綁定:

幾種全部事情的綁定:

1. 在標籤裏面寫 onclick=foo(this);
2. 原生DOM的JS綁定   DOM對象.onclick=function(){...}
3. jQuery版的綁定事件  jQuery對象.click(function(){...})

 

從此要用的jQuery綁定事件的方式
jQuery對象.on("click", 選擇器(可選的,經過別人來綁定事件的時候,須要填的),function(){...})
1.沒有選擇器的話,則是jQuery對象觸發點擊事件後,執行匿名函數;

2.若是有選擇器的話,則是該選擇器 觸發點擊事件後,執行 匿名函數,而jQuery對象只是起到了綁定事件的一個做用,例子以下;

$("#t1").on("click", "選擇器", function(){...})
適用於 給將來的元素(選擇器)(頁面生成的時候尚未的標籤) 綁定事件 (事件委託)

事件冒泡和事件捕獲
利用事件冒泡,給已經存在的標籤綁定事件,用來捕獲後代標籤的事件.

例子:在表格中新添加一行數據,沒有綁定相應的事件,因此用已經存在的標籤來爲這一行數據來綁定事件;

  //新增叫的沒有綁定編輯和刪除的事件,須要經過上級去綁定
            var bodyElem = $("body");
            bodyElem.on("click", ".edit-btn", function () {...}

  

移除事件:

經過off()方法來 移除  .on()綁定的事件;

 bodyElem.off("click", ".edit-btn", function () {...}

 

阻止後續事件執行

return false; // 常見阻止表單提交等

  

頁面的載入:

只有當 文檔樹(DOM樹)加載完成後,才能執行jQuery中的對於標籤的操做;所以通常把<script>...</script>標籤放在body標籤的最後面;

DOM執行完後後執行對應的操做;

$(document).ready(function(){
  // 寫綁定事件的具體操做
});

這樣<script>...</script>標籤能夠放在head裏面了;

例子;按住ctrl來批量操做

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>大做業</title>
    <style>
        .hide {
            display: none;
        }

        #myCover {
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            position: fixed;
            background-color: #b0b0b0;
            z-index: 999;
        }

        #myModal {
            position: fixed;
            width: 400px;
            height: 300px;
            top: 50%;
            left: 50%;
            background-color: #f5f5f5;
            margin-left: -200px;
            margin-top: -150px;
            z-index: 1000;
        }

        .dv1 {
            position: absolute;
            width: 200px;
            height: 200px;
            /*定位*/
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        <!--整個文檔樹執行完成後就執行下面的函數-->
        $(document).ready(function () {
            // 點擊 新增按鈕時綁定的事件
            var $myCover = $("#myCover");
            var $myModal = $("#myModal");
            var $modalName = $("#modal-name");
            var $modalHabit = $("#modal-habit");
            var moder;
            var $cElem;
            var numElen;


            //新增
            $("#add").on("click", function () {
                $myCover.removeClass("hide");
                $myModal.removeClass("hide");
                moder = 0;
            });


            //編輯
            $(".edit-btn").on("click", function () {
                moder = 1;
                $myCover.removeClass("hide");
                $myModal.removeClass("hide");
                var $contenElem = $(this).parent().siblings();
                //拿到了含有數據的jQuery對象,用 data 儲存起來;
                // console.log($contenElem)
                var $subElem = $("#modal-submit");
                $subElem.data("object", $contenElem);
                $cElem = $subElem.data("object");
                // console.log($cElem);
                for (var i = 0; i < $cElem.length; i++) {
                    //拿到對應編輯的那一行的編號;
                    // console.log(moder);
                    if (i === 1) {
                        $modalName.val($($cElem[1]).text())
                    }
                    if (i === 2) {
                        $modalHabit.val($($cElem[2]).text())
                    }
                }
            });


            //刪除的操做
            $(".delete-btn").on("click", function () {
                var $deleteElem = $(this).parent().parent();
                numElen = $(this).parent().siblings().first().text();
                console.log(numElen);
                //找到刪除的標籤,修改此標籤下面的全部標籤的序號,都減1,這樣刪除的時候序號就會自動的變化;
                var $nElen = $(this).parent().parent().nextAll();
                $nElen.each(function () {
                    numbElem = $(this).children().first().text();
                    $(this).children().first().text(parseInt(numbElem)-1);

                });
                console.log($nElen);
                $deleteElem.html("");

            });


            //模態框的取消按鈕綁定事件;
            $("#modal-cancel").on("click", function () {
                $("#modal-name").val("");
                $("#modal-habit").val("");
                $myCover.addClass("hide");
                $myModal.addClass("hide");
            });

            //模態框的提交按鈕綁定事件;
            var $modalElem = $("#modal-submit");
            $modalElem.on("click", function () {
                var k0Elem = $modalName.val();
                var k1Elem = $modalHabit.val();
                $modalElem.data({"k0": k0Elem, "k1": k1Elem});
                $myCover.addClass("hide");
                $myModal.addClass("hide");
                //要判斷 是新增彈出的模態框,仍是 編輯彈出的模態框;
                //moder === 0爲新增的

                if (moder === 0) {
                    var num = $("tbody tr").siblings().last().find("td").first().text();
                    console.log(num);
                    var number = parseInt(num) + 1;

                    //若是本身不等於他自己返回true的話,則爲NAN;
                    if (number !== number){
                         number = numElen
                    }
                    var name = $modalElem.data("k0");
                    var hoby = $modalElem.data("k1");
                    var hrElem = document.createElement("tr");
                    $(hrElem).html("<td>" + number + "</td> <td>" + name + "</td><td>" + hoby + "</td>" + "<td>\n" +
                        "<button class=\"edit-btn\">編輯</button>\n" +
                        "<button class=\"delete-btn\">刪除</button>\n" +
                        "</td>");
                    $("tbody").append(hrElem)
                } else {
                    //根據存具體的jQuery對象來找到位置修改值;
                    $($cElem[1]).text(k0Elem);
                    $($cElem[2]).text(k1Elem)
                }
            });


            //新增叫的沒有綁定編輯和刪除的事件,須要經過上級去綁定
            var bodyElem = $("body");
            bodyElem.on("click", ".edit-btn", function () {
                moder = 1;
                $myCover.removeClass("hide");
                $myModal.removeClass("hide");
                var $contenElem = $(this).parent().siblings();
                //拿到了含有數據的jQuery對象,用 data 儲存起來;
                // console.log($contenElem)
                var $subElem = $("#modal-submit");
                $subElem.data("object", $contenElem);
                $cElem = $subElem.data("object");
                // console.log($cElem);
                for (var i = 0; i < $cElem.length; i++) {
                    //拿到對應編輯的那一行的編號;
                    // console.log(moder);
                    if (i === 1) {
                        $modalName.val($($cElem[1]).text())
                    }
                    if (i === 2) {
                        $modalHabit.val($($cElem[2]).text())
                    }
                }
            });


            //刪除
            bodyElem.on("click", ".delete-btn", function () {
                var $deleteElem = $(this).parent().siblings().parent();
                numElen = $(this).parent().siblings().first().text();
                 var $nElen = $(this).parent().parent().nextAll();
                $nElen.each(function () {
                    numbElem = $(this).children().first().text();
                    $(this).children().first().text(parseInt(numbElem)-1);

                });
                $deleteElem.html("");
                $deleteElem.html("")
            })
        })

    </script>
</head>
<body>
<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>序號</th>
        <th>姓名</th>
        <th>愛好</th>
        <th>操做</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Egon</td>
        <td>街舞</td>
        <td>
            <button class="edit-btn">編輯</button>
            <button class="delete-btn">刪除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Alex</td>
        <td>燙頭</td>
        <td>
            <button class="edit-btn">編輯</button>
            <button class="delete-btn">刪除</button>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>苑局</td>
        <td>日天</td>
        <td>
            <button class="edit-btn">編輯</button>
            <button class="delete-btn">刪除</button>
        </td>
    </tr>
    </tbody>
</table>

<div id="myCover" class="cover hide"></div>
<div id="myModal" class="modal hide">
    <div class="dv1">
        <p>
            <label for="modal-name">姓名</label>
            <input type="text" id="modal-name">
        </p>
        <p>
            <label for="modal-habit">愛好</label>
            <input type="text" id="modal-habit">
        </p>
        <p>
            <button id="modal-submit">提交</button>
            <button id="modal-cancel">取消</button>
        </p>
    </div>
</div>
</body>
</html>

 

jQuery有一些動畫效果(瞭解)

[s] 爲指定動畫運行的時間(毫秒數默認400),[e]爲指定什麼動畫效果,默認爲swing,
[fn]是元素顯示完畢後須要執行的函數
// 基本 show([s],[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑動 slideDown([s],[e],[fn]) slideUp([s],[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]])

  

補充:

類型於for循環函數的;

each,一個通用的迭代函數,它能夠用來無縫迭代對象和數組 

each循環的兩種方法:
1. $.each(a1, function(){...})
2. $("div").each(function(){
console.log(this); --> this指的是每次進入循環的標籤
})

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//i是索引,v是每次循環的具體元素。
 console.log(this); // this 指的是 每一次循環的元素; }) $("li").each(function(i, v){ console.log(i, v);//i是索引,v是每次循環的具體元素。 })

  

終止each循環

return false;

  

.data()

$("..").data(key, value):

描述:在匹配的元素上存儲任意相關數據(按照 鍵值對的 形似儲存起來;)

注意: .data() 能夠用來 存儲jQuery對象;數字;字符串

  var $subElem = $("#modal-submit");
  $subElem.data("object", $contenElem);
  $cElem = $subElem.data("object");   //取出鍵爲object的值

.removeData(key): 

刪除標籤上的鍵爲key的值;

$("div").removeData("k");  //移除元素上存放k對應的數據

  

jQuery相關的插件(點我瞭解

相關文章
相關標籤/搜索