一、jQuery初體驗 使用jQuery給一個按鈕綁定單擊事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src ...
一、jQuery初體驗
使用jQuery給一個按鈕綁定單擊事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function () {
// var butObj = document.getElementById("butId");
// butObj.onclick = function () {
// alert("js 單機事件")
// }
// }
// 1. 表示頁面載入完成之後,類似於 window.onload = function () {
$(function () {
var $butObj = $("#butId"); // 2. 按照id查詢標簽對象
$butObj.click(function () { // 3. 綁定單擊事件
alert("jQuery 單擊事件")
});
});
</script>
</head>
<body>
<button id="butId"> hello </button>
</body>
</html>
註意:
- 使用 jQuery 一定要引入 jQuery 庫
- jQuery 中的$到底是什麼? 答案: 它是一個函數
- 怎麼為按鈕添加點擊響應函數的?
- 使用 jQuery 查詢到標簽對象
- 使用標簽對象.click(function(){});
二、jQuery 核心函數
$ 是 jQuery 的核心函數,能完成 jQuery 的很多功能。$()就是調用$這個函數
- 傳入參數為 [ 函數 ] 時:
- 表示頁面載入完成之後。相當於 window.onload=function(){}
- 傳入參數為 [HTML 字元串 ] 時:
- 會對我們創建這個 html 標簽對象
- 傳入參數為 [ 選擇器字元串 ] 時:
- $(“#id 屬性值”); id 選擇器,根據 id 查詢標簽對象
- $(“標簽名”); 標簽名選擇器,根據指定的標簽名查詢標簽對象
- $(“.class 屬性值”); 類型選擇器,可以根據 class 屬性查詢標簽對象
- 傳入參數為 [DOM 對象 ] 時:
- 會把這個 dom 對象轉換為 jQuery 對象
三、jQuery 對象和 dom 對象區分
1. 什麼是 jQuery 對象,什麼是 dom 對象
Dom對象
- 通過 getElementById()查詢出來的標簽對象是 Dom 對象
- 通過 getElementsByName()查詢出來的標簽對象是 Dom 對象
- 通過 getElementsByTagName()查詢出來的標簽對象是 Dom 對象
- 通過 createElement() 方法創建的對象,是 Dom 對象
DOM 對象 Alert 出來的效果是:[object HTML 標 簽 名 Element]
jQuery對象
通過 JQuery 提供的 API 創建的對象,是 JQuery 對象
通過 JQuery 包裝的 Dom 對象,也是 JQuery 對象
通過 JQuery 提供的 API 查詢到的對象,是 JQuery 對象
jQuery 對象 Alert 出來的效果是:[objectObject]
2. jQuery 對象的本質是什麼?
jQuery 對象是 dom 對象的數組 +jQuery 提供的一系列功能函數
3. jQuery 對象和 Dom 對象使用區別
jQuery 對象不能使用 DOM 對象的屬性和方法
DOM 對象也不能使用 jQuery 對象的屬性和方法
4. Dom 對象和 jQuery 對象互轉
dom對象轉化為 jQuery 對象
- 先有 DOM 對象
- $(DOM 對象 ) 就可以轉換成為 jQuery 對象
jQuery 對象轉為 dom 對象
- 先有 jQuery 對象
- jQuery 對象[下標]取出相應的 DOM 對象
四、jQuery選擇器
1. 基本選擇器
-
ID 選擇器:根據 id 查找標簽對象
- .class 選擇器:根據 class 查找標簽對象
- element 選擇器:根據標簽名查找標簽對象
- * 選擇器:表示任意的,所有的元素
- selector1,selector2 組合選擇器:合併選擇器 1,選擇器 2 的結果並返回
p.myClass
表示標簽名必須是 p 標簽,而且 class 類型還要是 myClass
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.選擇 id 為 one 的元素 "background-color","#bbffaa"
$("#btn1").click(function () {
// css() 方法 可以設置和獲取樣式
$("#one").css("background-color","#bbffaa");
});
//2.選擇 class 為 mini 的所有元素
$("#btn2").click(function () {
$(".mini").css("background-color","#bbffaa");
});
//3.選擇 元素名是 div 的所有元素
$("#btn3").click(function () {
$("div").css("background-color","#bbffaa");
});
//4.選擇所有的元素
$("#btn4").click(function () {
$("*").css("background-color","#bbffaa");
});
//5.選擇所有的 span 元素和id為two的元素
$("#btn5").click(function () {
$("span,#two").css("background-color","#bbffaa");
});
});
</script>
</head>
<body>
<!-- <div>
<h1>基本選擇器</h1>
</div> -->
<input type="button" value="選擇 id 為 one 的元素" id="btn1" />
<input type="button" value="選擇 class 為 mini 的所有元素" id="btn2" />
<input type="button" value="選擇 元素名是 div 的所有元素" id="btn3" />
<input type="button" value="選擇 所有的元素" id="btn4" />
<input type="button" value="選擇 所有的 span 元素和id為two的元素" id="btn5" />
<br>
<div class="one" id="one">
id 為 one,class 為 one 的div
<div class="mini">class為mini</div>
</div>
<div class="one" id="two" title="test">
id為two,class為one,title為test的div
<div class="mini" title="other">class為mini,title為other</div>
<div class="mini" title="test">class為mini,title為test</div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini" title="tesst">class為mini,title為tesst</div>
</div>
<div style="display:none;" class="none">style的display為"none"的div</div>
<div class="hide">class為"hide"的div</div>
<div>
包含input的type為"hidden"的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>
2. 層級選擇器
- ancestor descendant 後代選擇器 :在給定的祖先元素下匹配所有的後代元素
- parent>child 子元素選擇器:在給定的父元素下匹配所有的子元素
- prev+next 相鄰元素選擇器:匹配所有緊接在 prev 元素後的 next 元素
- prev~sibings 之後的兄弟元素選擇器:匹配 prev 元素之後的所有 siblings 元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1.選擇 body 內的所有 div 元素
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 內, 選擇div子元素
$("#btn2").click(function(){
$("body > div").css("background", "#bbffaa");
});
//3.選擇 id 為 one 的下一個 div 元素
$("#btn3").click(function(){
$("#one+div").css("background", "#bbffaa");
});
//4.選擇 id 為 two 的元素後面的所有 div 兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="選擇 body 內的所有 div 元素" id="btn1" />
<input type="button" value="在 body 內, 選擇div子元素" id="btn2" />
<input type="button" value="選擇 id 為 one 的下一個 div 元素" id="btn3" />
<input type="button" value="選擇 id 為 two 的元素後面的所有 div 兄弟元素" id="btn4" />
<br><br>
<div class="one" id="one">
id 為 one,class 為 one 的div
<div class="mini">class為mini</div>
</div>
<div class="one" id="two" title="test">
id為two,class為one,title為test的div
<div class="mini" title="other">class為mini,title為other</div>
<div class="mini" title="test">class為mini,title為test</div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini" title="tesst">class為mini,title為tesst</div>
</div>
<div style="display:none;" class="none">style的display為"none"的div</div>
<div class="hide">class為"hide"的div</div>
<div>
包含input的type為"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
</body>
</html>
3. 過濾選擇器
基本過濾器:
- :first 獲取第一個元素
- :last 獲取最後個元素
- :not(selector) 去除所有與給定選擇器匹配的元素
- :even 匹配所有索引值為偶數的元素,從 0 開始計數
- :odd 匹配所有索引值為奇數的元素,從 0 開始計數
- :eq(index) 匹配一個給定索引值的元素
- :gt(index) 匹配所有大於給定索引值的元素 ,$("li:gt(2)") //下標大於 2 的li
- :lt(index) 匹配所有小於給定索引值的元素
- :header 匹配如 h1,h2,h3 之類的標題元素 :
- animated 匹配所有正在執行動畫效果的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
$(document).ready(function(){
//1.選擇第一個 div 元素
$("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2.選擇最後一個 div 元素
$("#btn2").click(function(){
$("div:last").css("background", "#bbffaa");
});
//3.選擇class不為 one 的所有 div 元素
$("#btn3").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//4.選擇索引值為偶數的 div 元素
$("#btn4").click(function(){
$("div:even").css("background", "#bbffaa");
});
//5.選擇索引值為奇數的 div 元素
$("#btn5").click(function(){
$("div:odd").css("background", "#bbffaa");
});
//6.選擇索引值為大於 3 的 div 元素
$("#btn6").click(function(){
$("div:gt(3)").css("background", "#bbffaa");
});
//7.選擇索引值為等於 3 的 div 元素
$("#btn7").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//8.選擇索引值為小於 3 的 div 元素
$("#btn8").click(function(){
$("div:lt(3)").css("background", "#bbffaa");
});
//9.選擇所有的標題元素
$("#btn9").click(function(){
$(":header").css("background", "#bbffaa");
});
//10.選擇當前正在執行動畫的所有元素
$("#btn10").click(function(){
$(":animated").css("background", "#bbffaa");
});
//11.選擇沒有執行動畫的最後一個div
$("#btn11").click(function(){
$("div:not(:animated):last").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="選擇第一個 div 元素" id="btn1" />
<input type="button" value="選擇最後一個 div 元素" id="btn2" />
<input type="button" value="選擇class不為 one 的所有 div 元素" id="btn3" />
<input type="button" value="選擇索引值為偶數的 div 元素" id="btn4" />
<input type="button" value="選擇索引值為奇數的 div 元素" id="btn5" />
<input type="button" value="選擇索引值為大於 3 的 div 元素" id="btn6" />
<input type="button" value="選擇索引值為等於 3 的 div 元素" id="btn7" />
<input type="button" value="選擇索引值為小於 3 的 div 元素" id="btn8" />
<input type="button" value="選擇所有的標題元素" id="btn9" />
<input type="button" value="選擇當前正在執行動畫的所有元素" id="btn10" />
<input type="button" value="選擇沒有執行動畫的最後一個div" id="btn11" />
<h3>基本選擇器.</h3>
<br><br>
<div class="one" id="one">
id 為 one,class 為 one 的div
<div class="mini">class為mini</div>
</div>
<div class="one" id="two" title="test">
id為two,class為one,title為test的div
<div class="mini" title="other">class為mini,title為other</div>
<div class="mini" title="test">class為mini,title為test</div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini" title="tesst">class為mini,title為tesst</div>
</div>
<div style="display:none;" class="none">style的display為"none"的div</div>
<div class="hide">class為"hide"的div</div>
<div>
包含input的type為"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在執行動畫的div元素.</div>
</body>
</html>
內容過濾器:
- :contains(text) 匹配包含給定文本的元素
- :empty 匹配所有不包含子元素或者文本的空元素
- :parent 匹配含有子元素或者文本的元素
- :has(selector) 匹配含有選擇器所匹配的元素的元素
屬性過濾器:
- [attribute] 匹配包含給定屬性的元素。
- [attribute=value] 匹配給定的屬性是某個特定值的元素
- [attribute!=value] 匹配所有不含有指定的屬性,或者屬性不等於特定值的元素。
- [attribute^=value] 匹配給定的屬性是以某些值開始的元素
- [attribute$=value] 匹配給定的屬性是以某些值結尾的元素
- [attribute*=value] 匹配給定的屬性是以包含某些值的元素
- [attrSel1][attrSel2][attrSelN] 複合屬性選擇器,需要同時滿足多個條件時使用
表單過濾器:
- :input 匹配所有 input,textarea,select 和 button 元素
- :text 匹配所有 文本輸入框
- :password 匹配所有的密碼輸入框
- :radio 匹配所有的單選框
- :checkbox 匹配所有的覆選框
- :submit 匹配所有提交按鈕
- :image 匹配所有 img 標簽
- :reset 匹配所有重置按鈕
- :button 匹配所有 inputtype=button<button>按鈕
- :file 匹配所有 inputtype=file 文件上傳
- :hidden 匹配所有不可見元素 display:none 或 inputtype=hidden
表單對象屬性過濾器:
- :enabled 匹配所有可用元素
- :disabled 匹配所有不可用元素
- :checked 匹配所有選中的單選,覆選,和下拉列表中選中的 option 標簽對象
- :selected 匹配所有選中的 option
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.對錶單內 可用input 賦值操作
$("#btn1").click(function(){
// val()可以操作表單項的value屬性值
// 它可以設置和獲取
$(":text:enabled").val("我是萬能的程式員");
});
//2.對錶單內 不可用input 賦值操作
$("#btn2").click(function(){
$(":text:disabled").val("管你可用不可用,反正我是萬能的程式員");
});
//3.獲取多選框選中的個數 使用size()方法獲取選取到的元素集合的元素個數
$("#btn3").click(function(){
alert( $(":checkbox:checked").length );
});
//4.獲取多選框,每個選中的value值
$("#btn4").click(function(){
// 獲取全部選中的覆選框標簽對象
var $checkboies = $(":checkbox:checked");
// 老式遍歷
// for (var i = 0; i < $checkboies.length; i++){
// alert( $checkboies[i].value );
// }
// each方法是jQuery對象提供用來遍歷元素的方法
// 在遍歷的function函數中,有一個this對象,這個this對象,就是當前遍歷到的dom對象
$checkboies.each(function () {
alert( this.value );
});
});
//5.獲取下拉框選中的內容
$("#btn5").click(function(){
// 獲取選中的option標簽對象
var $options = $("select option:selected");
// 遍歷,獲取option標簽中的文本內容
$options.each(function () {
// 在each遍歷的function函數中,有一個this對象。這個this對象是當前正在遍歷到的dom對象
alert(this.innerHTML);
});
});
})
</script>
</head>
<body>
<h3>表單對象屬性過濾選擇器</h3>
<button id="btn1">對錶單內 可用input 賦值操作.</button>
<button id="btn2">對錶單內 不可用input 賦值操作.</button><br /><br />
<button id="btn3">獲取多選框選中的個數.</button>
<button id="btn4">獲取多選框選中的內容.</button><br /><br />
<button id="btn5">獲取下拉框選中的內容.</button><br /><br />
<form id="form1" action="#">
可用元素: <input name="add" value="可用文本框1"/><br>
不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
可用元素: <input name="che" value="可用文本框2"/><br>
不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
<br>
多選框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option>浙江</option>
<option selected="selected">遼寧</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br><br>
下拉列表2: <br>
<select name="test2">
<option>浙江</option>
<option>遼寧</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
</form>
</body>
</html>
五、jQuery 元素篩選
- eq() 獲取給定索引的元素 功能跟 :eq() 一樣
- first() 獲取第一個元素 功能跟 :first 一樣
- last() 獲取最後一個元素 功能跟 :last 一樣
- filter(exp) 留下匹配的元素
- is(exp) 判斷是否匹配給定的選擇器,只要有一個匹配就返回,true
- has(exp) 返回包含有匹配選擇器的元素的元素 功能跟 :has 一樣
- not(exp) 刪除匹配選擇器的元素 功能跟 :not 一樣
- children(exp) 返回匹配給定選擇器的子元素 功能跟 parent>child 一樣
- find(exp) 返回匹配給定選擇器的後代元素 功能跟 ancestordescendant 一樣
- next() 返回當前元素的下一個兄弟元素 功能跟 prev+next 功能一樣
- nextAll() 返回當前元素後面所有的兄弟元素 功能跟 prev~siblings 功能一樣
- nextUntil() 返回當前元素到指定匹配的元素為止的後面元素
- parent() 返回父元素
- prev(exp) 返回當前元素的上一個兄弟元素
- prevAll() 返回當前元素前面所有的兄弟元素
- prevUnit(exp) 返回當前元素到指定匹配的元素為止的前面元素
- siblings(exp) 返回所有兄弟元素
- add() 把 add 匹配的選擇器的元素添加到當前 jquery 對象中