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>