前端——jQuery
jQuery介紹:
- jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
- jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，可以極大地簡化JavaScript編程。
- 它的宗旨就是：「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相關的插件（點我瞭解）
- 1. 前端-JQuery
- 2. 前端之Jquery
- 3. 【前端】jQuery
- 4. 前端 之 jQuery
- 5. 前端-jQuery
- 6. 前端之jQuery
- 7. 前端之JQuery
- 8. 前端JQuery（一）
- 9. 前端 jQuery
- 10. 前端 -- jQuery
- 更多相關文章...
- • WSDL 端口 - WSDL 教程
- • XSLT - 在客戶端 - XSLT 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端-JQuery
- 2. 前端之Jquery
- 3. 【前端】jQuery
- 4. 前端 之 jQuery
- 5. 前端-jQuery
- 6. 前端之jQuery
- 7. 前端之JQuery
- 8. 前端JQuery（一）
- 9. 前端 jQuery
- 10. 前端 -- jQuery