在使用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
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相關的插件(點我瞭解)