js及jQuery總結（七）
阿新 • • 發佈：2018-12-12
08.01_jQuery概述
* 是一個輕量級的JavaScript庫
* jQuery的功能：
* html元素的獲取
* html元素的操作
* css操作
* 事件函式
* js中的特效和動畫
* DOM的操作
* AJAX
* jQuery的好處：
* 將js的程式碼簡單化
* 不需要關心相容問題
* 提供了大量的實用的函式
* jQuery的設計思想
* 模擬css選擇元素
* 獨有的語法方式
* jQuery的寫法
* 函式
* 取值賦值一體化
08.02_ jQuery的選擇器
* 選擇器是jQuery的核心 * 支援css語法 * 分類： * 基本選擇器 * 層次選擇器 * 過濾選擇器 * 屬性選擇器 * 表單選擇器 * jQuery選擇器的優勢： * a.程式碼更簡化 舉例：document.getElementById("divid"); $("#divid") * b.支援css所有的語法【css1-css3】【html1--html5】 * c.完善的檢測機制
08.03_jQuery的安裝
* 官網：jquery.com
* 本質上其實就是一個js檔案，直接匯入到工程中，在需要使用的頁面中通過<script>標籤引用
08.04_jQuery的使用
- 1.基礎語法
- 通過美元符來定義jQuery
- 基礎語法格式為：$(選擇器seclector).methodName()
- seclector:是一個字串表示式，用於識別DOM中的元素，
- 多個jQuery操作可以連起來寫：$(seclector).method1().methond2().method3()…
HelloJQuery
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.js"></script> </head> <body> <div id="box">hehehe</div> <div class="box_class">hahaha</div> <p>"hello"</p> </body> <script type="text/javascript"> /*$(document).ready(function(){ alert("hello"); }) alert("world"); window.onload = function(){ alert("helloworld"); }*/ var $result = $("#box").html("hello"); // alert($result.get(0)); $(".box_class").html("heihei"); $("p").html("houhou"); $(".box_class,p").html("hihihi"); $("*").html("hhh"); </script> </html>
08.05_jQuery選擇器–基本選擇器【5種】
- 1.1ID選擇器
- 語法：$("#id")
- 說明：相當於document.getElementById(“id”)
- 1.2元素選擇器【標籤名稱選擇器】
- 語法：$(“element”)
- 1.3類名選擇器
- 語法：$(".class")
- 1.4複合選擇器
- 語法：$(“選擇器1，選擇器2”)
- 1.5萬用字元選擇器
- 語法：$("*")
08.06_jQuery選擇器–層次選擇器【4種】
- 2.1 ancestor descendant選擇器
- 先輩後輩
- 作用：獲取ancestor 後的所有的descendant 標籤【父子標籤或者先輩和後輩關係】
- 語法：$("ancestor descendant ") //類似於包含選擇器
- 說明：
- ancestor 可以是任何有效的選擇器
- descendant 用於匹配元素的選擇器,是ancestor 後輩或者子標籤
.list li{} 例如：$(“ul li”)
- 2.2 parent>child選擇器
- parent代表父元素，child代表子元素，使用該選擇器只能選擇指定父元素下的子元素
- 語法：$(“parent>child”)
- 2.3 prev+next選擇器
- 用於匹配緊跟在perv後面的next元素
- 注意：prev和next是同輩關係【兄弟關係】
- 語法：$(“prev+next”)
- 2.4 prev~siblings選擇器
- 用於匹配緊跟在perv後面的所有的siblings元素，
- 注意：prev和siblings是同輩關係【兄弟關係】
- 語法：$(“prev~siblings”)
層次選擇器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<div id="box">
<p>hello</p>
<div>
<p>world</p>
<div>
<p>helloworld</p>
</div>
</div>
</div>
<div id="box00">
<div id="box01">"hello"</div>
<div id="box02">"world"</div>
<div id="box03"><p>"helloworld"</p></div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
// ancestor descendant選擇器
var $box_p = $("#box p");
console.log($box_p);
// parent>child選擇器
var $box00 = $("#box00>div");
console.log($box00);
// prev+next選擇器
var $box04 = $("#box01+div");
console.log($box04);
// prev~siblings選擇器
var $box05 = $("#box00~div");
console.log($box05);
})
</script>
</html>
08.07_ jQuery選擇器–過濾選擇器【5種】
- 簡單過濾器
- XX：first 第一個
- XX：last 最後一個
- XX：even 偶數位
- XX：odd 奇數位
- XX：eq() 給定位置的元素
- XX：gt() 大於給定位置的元素（不含）
- XX：lt() 小於給定位置的元素（不含）
- ：header() 匹配所有標題(
標籤)
- p:not(.pp) 匹配除了.pp之外的元素
- .pp:animated 匹配所有正在執行動畫的元素
簡單過濾器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入jQuery檔案-->
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<p class="pp">aaa</p>
<p class="pp">bbb</p>
<p class="pp">ccc</p>
<p class="pp">ddd</p>
<p class="pp11">ddd</p>
<p class="pp12">ddd</p>
<h1>aaa</h1>
<h3>aaa</h3>
</body>
<script>
$(document).ready(function(){
//通過指定的條件篩選元素
//類似於偽類選擇器
//:first 只匹配第一個元素的內容
var $jqObj1 = $(".pp:first").html("hello");
//:last 只匹配最後一個元素的內容
var $jqObj2 = $(".pp:last").html("hello");
//注意：標籤從0開始編號的
//:even 匹配索引值為偶數的元素
var $jqObj3 = $(".pp:even").html("even~~~~");
//:odd 匹配索引值為奇數的元素
var $jqObj4 = $(".pp:odd").html("odd~~~~");
//：eq(index) 匹配給定索引的元素
var $jqObj5 = $(".pp:eq(1)").html("eq~~~~");
//:gt(index) 匹配所有大於給定索引的元素
//注意：不包含指定索引
var $jqObj6 = $(".pp:gt(1)").html("gt~~~~");
//:lt(index) 匹配所有小於給定索引的元素
//注意：不包含指定索引
var $jqObj7 = $(".pp:lt(1)").html("lt~~~~");
//:header 匹配如h1,h2...的所有的元素
var $jqObj8 = $(":header").html("header~~~~");
//：not(selector) 去除所有與選擇器匹配的元素
var $jqObj9 = $("p:not(.pp)").html("pp~~~~");
//:animated 匹配所有正在執行動畫的元素
var $jqObj10 = $(".pp:animated").html("pp~~~~");
})
</script>
</html>
- 內容過濾器
- :contains(“字串”) 匹配文字內容包含字串的不元素
- :empty 匹配文字為空的元素
- :has(seclector) 匹配含有選擇器所匹配的元素
- :parent 匹配指定選擇器的父元素
內容過濾器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
</head>
<body>
<p class="pp">aaa</p>
<p class="pp">bbbPython</p>
<p class="pp">ccc</p>
<p class="pp"></p>
<table>
<tr>
<td>
<p>good</p>
</td>
<td>
<p>nice</p>
</td>
<td>
<h1>aaa</h1>
</td>
</tr>
</table>
</body>
<script>
$(document).ready(function(){
//:contains("字串") 匹配文字內容包含字串的不元素
var $jqObj1 = $("p:contains('Python')");
$jqObj1.html("hello");
//:empty 匹配文字為空的元素
var $jqObj2 = $("p:empty").html("hello");
//:has(seclector) 匹配含有選擇器所匹配的元素
var $jqObj3 = $("td:has(p)");
console.log($jqObj3);
//:parent 匹配指定選擇器的父元素
var $jqObj4 = $("p:parent");
// console.log($jqObj4); })
- 可見性過濾器
- :hidden 匹配隱藏的元素
- :visible 匹配可見的元素
可見性過濾器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入jQuery檔案-->
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!--元素的可見狀態：顯示/隱藏-->
<input type="text" value="aaa" />
<!--設定隱藏-->
<!--方式一-->
<input type="hidden" value="bbb" />
<!--方式二-->
<input type="text" value="ccc" style="display:none"/>
</body>
<script>
$(document).ready(function(){
//:hidden 匹配隱藏的元素
//:visible 匹配可見的元素
var $jqObj1 = $("input:visible");
//修改匹配出來的input標籤的value值
//類似於 標籤物件.value = 具體的值
$jqObj1.val("hello");
var $jqObj2 = $("input:hidden:last");
})
</script>
</html>
- 表單物件的屬性過濾器
- :checked 匹配所有被選中的元素
- :disabled 匹配的是所有不可用的元素
- :enabled 匹配的是所有可用的元素
- :selected 匹配的是select標籤下有selected屬性的option標籤
表單物件的屬性過濾器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入jQuery檔案-->
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form>
<input type="checkbox" checked="checked" value="複選框1"/>
<input type="checkbox" checked="checked" value="複選框2"/>
<input type="checkbox" value="複選框3"/>
<input type="button" value="按鈕" disabled />
<select onchange="selectVal()">
<option value="選項1" selected="selected">選項1</option>
<option value="選項2">選項2</option>
<option value="選項3">選項3</option>
</select>
</form>
</body>
<script>
$(document).ready(function(){
//:checked 匹配所有被選中的元素
var $jqObj1 = $("input:checked:eq(1)").val("aaa");
//:disabled 匹配的是所有不可用的元素
var $jqObj2 = $("input:disabled");
//:enabled 匹配的是所有可用的元素
var $jqObj3 = $("input:enabled");
//:selected 匹配的是select標籤下有selected屬性的option標籤
function selectVal(){
//匹配的是select標籤下有selected屬性的option標籤
var $jqObj4 = $("select option:selected");
}
})
</script>
</html>
- 表單子元素過濾器
- ：first-child 匹配所有給定元素的第一個子元素
- : last-child 匹配所有給定元素的最後一個子元素
- : only-child 如果某個父元素只有一個子元素，那麼將會被匹配
- : nth-child(index) 匹配父元素下的第index個子元素（注意：index從1開始）
表單子元素過濾器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入jQuery檔案-->
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<ul>
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
<li>選項4</li>
<li>選項5</li>
</ul>
<ul>
<li>aaa</li>
</ul>
</body>
<script>
$(document).ready(function(){
//類似於結構選擇器
//：first-child 匹配所有給定元素的第一個子元素
var $jqObj1 = $("ul li:first-child");
//:last-child
var $jqObj2 = $("ul li:last-child");
//:only-child 如果 某個父元素只有一個子元素，那麼將會被匹配
var $jqObj3 = $("ul li:only-child");
//:nth-child(index) 匹配父元素下的第index個子元素
//注意：index從1開始
var $jqObj4 = $("ul li:nth-child(3)");
})
</script>
</html>
08.08_jQuery選擇器–屬性選擇器【1種】
- 屬性選擇器：
- 通過元素的屬性作為過濾條件
- 類似於css中的屬性過濾器
- [attr] 匹配給定屬性的元素
- [attr=value] 匹配給定屬性,並且值為value的元素
- [attr!=value] 匹配給定屬性,並且值不為value的元素
- [attr*=value] 匹配給定屬性,並且值含有value的元素
- [attr^=value] 匹配給定屬性,並且值以value開頭的元素
- [attr$=value] 匹配給定屬性,並且值以value結尾的元素
- [selector1][selector2][selector3].複合屬性選擇器，需要同時滿足多個條件時進行匹配
屬性選擇器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入jQuery檔案-->
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!--通過元素的屬性作為過濾條件-->
<div name="div1">第1個div</div>
<div name="div2">第2個div</div>
<div name="div3">第3個div</div>
<div name="div4">第4個div</div>
<div name="div5">第5個div</div>
<div id="id" name="box1">第6個div</div>
<div name="box2">第7個div</div>
</body>
<script>
$(document).ready(function(){
//類似於css中的屬性過濾器
//[attr] 匹配給定屬性的元素
var $jqObj1 = $("div[name]");
//[attr=value] 匹配給定屬性,並且值為value的元素
var $jqObj2 = $("div[name='div3']");
//[attr!=value] 匹配給定屬性,並且值不為value的元素
var $jqObj3 = $("div[name!='div3']");
//[attr*=value] 匹配給定屬性,並且值含有value的元素
var $jqObj4 = $("div[name*='box']");
//[attr^=value] 匹配給定屬性,並且值以value開頭的元素
var $jqObj5 = $("div[name^='box']");
//[attr$=value] 匹配給定屬性,並且值以value結尾的元素
var $jqObj6 = $("div[name$='x1']");
//複合屬性選擇器
//[selector1][selector2][selector3]... 需要同時滿足多個條件時進行匹配
var $jqObj7 = $("div[id][name='box1']");
})
</script>
</html>
08.09_jQuery選擇器–表單選擇器【1種】
- 表單選擇器
- attr；給指定的標籤新增屬性並且設定屬性的值
表單選擇器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入jQuery檔案-->
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form>
複選框：<input type="checkbox" />
單選框：<input type="radio" />
檔案：<input type="file" />
普通輸入框：<input type="text" />
密碼：<input type="password" />
郵箱：<input type="email" />
按鈕：<input type="button" />
提交：<input type="submit" />
重置：<input type="reset" />
隱藏域：<input type="hidden" />
</form>
</body>
<script>
$(document).ready(function(){
//本質上還是一個過濾選擇器
//attr；給指定的標籤新增屬性並且設定屬性的值
$(":checkbox").attr("checked","checked");
$(":radio").attr("checked","checked");
$(":file").hide();
$(":password").val("123");
$(":text").val("文字");
})
</script>
</html>
08.10_使用jQuery選擇器的注意事項
- 使用jQuery選擇器的注意事項
- 1.注意空格
- 2.避免含有特殊符號:. # ( []
使用jQuery選擇器的注意事項案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入jQuery檔案-->
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="name">
<div style="display: none;">小科</div>
<div style="display: none;">小金</div>
<div style="display: none;">小王</div>
<div style="display: none;">小張</div>
<div style="display: none;" class="name">老張</div>
</div>
<div style="display: none;" class="name">aaa</div>
<div style="display: none;" class="name">bbb</div>
<div id="box#test" style="width:200px;"></div>
</body>
<script>
$(document).ready(function(){
//1.注意空格
//針對：層次選擇器：父子標籤和 先輩與後輩標籤
var $jq_1 = $(".name :hidden");
var $jq_2 = $(".name:hidden");
console.log($jq_1.length);//5
console.log($jq_2.length);//3
//2.含有特殊符號:. # ( []
//轉義：\\
$("#box\\#test")
})
</script>
</html>