JQuery（上）

1、流行的JavaScript類庫 -- 框架、插件

（1）爲了簡化 JavaScript 的開發, 一些 JavsScript 庫誕生了. JavaScript 庫封裝了很多預定義的對象和實用函數。能幫助使用者建立有高難度交互的 Web2.0 特性的富客戶端頁面, 並且兼容各大瀏覽器

（2）當前流行的 JavaScript 庫有:

jQuery, MooTools, Prototype, Dojo, YUI,

EXT_JS DWR

www.open-open.com

2、jquery是什麼

（1）jQuery由美國人John Resig創建，至今已吸引了來自世界各地的衆多

javascript高手加入其team。

（2）jQuery是繼prototype之後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。

（3）它是輕量級的js庫(壓縮後只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。

（4）jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地爲網站提供AJAX交互。

（5）jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。

（6）jQuery能夠使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只需定義id即可

3、jQuery:簡單例子

$(document).ready(function(){//等待dom元素加載完畢,類似window.onload;

alert("您好,我是張三丰");

});

</script>

4、什麼是jQuery對象？

（1）jQuery 對象就是通過jQuery包裝DOM對象後產生的對象。

（2）jQuery 對象是 jQuery 獨有的. 如果一個對象是 jQuery 對象, 那麼它就可以使用 jQuery 裏的方法: $(“#test”).html();

比如：

$("#test").html() 意思是指：獲取ID爲test的元素內的html代碼。其中html()是jQuery裏的方法

這段代碼等同於用DOM實現代碼：

document.getElementById(" test ").innerHTML;

（3）雖然jQuery對象是包裝DOM對象後產生的，但是jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery裏的方法.亂使用會報錯

（4）約定：如果獲取的是 jQuery 對象, 那麼要在變量前面加上 $.

var $variable = jQuery 對象

var variable = DOM 對象

5、DOM對象轉成jQuery對象

（1）對於已經是一個DOM對象，只需要用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。$(DOM對象)

（2）轉換後就可以使用 jQuery 中的方法了

6、jQuery對象轉成DOM對象

兩種轉換方式將一個jQuery對象轉換成DOM對象：[index]和.get(index);

(1) jQuery對象是一個數組對象，可以通過[index]的方法，來得到相應的DOM對象

(2) jQuery本身提供，通過.get(index)方法，得到相應的DOM對象

7、jQuery 選擇器

//若網頁中沒有id=value的元素,瀏覽器會報錯

document.getElementById("username").value;

//需要判斷document.getElementById("username")是否存在

if(document.getElementById("username")){

var username=document.getElementById("username");

alert(username.value);

}else{

alert("沒有該id元素");

}

//使用JQUERY處理即使不存在也不會報錯

var $username=$("#username");

alert("^^^ "+$username.val());

//注意:在javaScript中函數返回值爲空,表示false

8、基本選擇器

基本選擇器是 jQuery 中最常用的選擇器, 也是最簡單的選擇器, 它通過元素 id, class 和標籤名來查找 DOM 元素(在網頁中 id 只能使用一次, class 允許重複使用).

1、#id 用法: $(”#myDiv”); 返回值單個元素的組成的集合

說明: 這個就是直接選擇html中的id=”myDiv”

2、Element 用法: $(”div”) 返回值集合元素

說明: element的英文翻譯過來是”元素”,所以element其實就是html已經定義的標籤元素,例如 div, input, a等等.

3、class 用法: $(”.myClass”) 返回值集合元素

說明: 這個標籤是直接選擇html代碼中class=”myClass”的元素或元素組(因爲在同一html頁面中class是可以存在多個同樣值的).

4、* 用法: $(”*”) 返回值集合元素

說明: 匹配所有元素,多用於結合上下文來搜索

5、selector1, selector2, selectorN 用法: $(”div,span,p.myClass”) 返回值集合元素

說明: 將每一個選擇器匹配到的元素合併後一起返回.你可以指定任意多個選擇器, 並將匹配到的元素合併到一個結果內.其中p.myClass是表示匹配元素

p class=”myClass”

9、基本選擇器示例

（1）改變 id 爲 one 的元素的背景色爲 #0000FF

（2）改變 class 爲 mini 的所有元素的背景色爲 #FF0033

（3）改變元素名爲 <div> 的所有元素的背景色爲 #00FFFF

（4）改變所有元素的背景色爲 #00FF33

（5）改變所有的<span>元素和 id 爲 two 的元素的背景色爲 #3399FF

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<input type="button" value=" 改變元素名爲 <div> 的所有元素的背景色爲 #00FFFF" id="b2"/>

<input type="button" value=" 改變所有的<span>元素和 id 爲 two 的元素的背景色爲 #3399FF" id="b5"/>

<h2>天氣又冷了</h2>

id爲one

</div>

id爲two class是 mini

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini01" >class是 mini01</div>

<div class="mini" >class是 mini</div>

</div>

<br>

動畫

</div>

<br>

<span class="spanone"> span

</span>

<span class="mini"> span

</span>

</body>

//<input type="button" value="改變 id 爲 one 的元素的背景色爲 #0000FF" id="b1"/>

$("#b1").click(function(){

//通過ID的方式查找元素

//具體點擊按鈕所做的操作

//設置css樣式

//css(name, value)

// name 屬性名

// value 屬性值

//background

$("#one").css("background"," #0000FF");

});

//<input type="button" value=" 改變元素名爲 <div> 的所有元素的背景色爲 #00FFFF" id="b2"/>

$("#b2").click(function(){

// 通過元素的名字查找元素

//$("div") <==> document.getElementsByTagName("div")

$("div").css("background","00FFFF");

});

//<input type="button" value=" 改變 class 爲 mini 的所有元素的背景色爲 #FF0033" id="b3"/>

$("#b3").click(function(){

// 通過 .class 查找元素

$(".mini").css("background", "#FF0033");

});

//<input type="button" value=" 改變所有元素的背景色爲 #00FF33" id="b4"/>

// 通過 “ * ” 查找元素

$("#b4").click(function(){

$("*").css("background", " #00FF33");

});

//<input type="button" value=" 改變所有的<span>元素和 id 爲 two 的元素的背景色爲 #3399FF" id="b5"/>

$("#b5").click(function(){

//多個選擇器的時候，用“，”分隔

$("span,#two").css("background","#3399FF");

});

</script>

</html>

10、層次選擇器

如果想通過 DOM 元素之間的層次關係來獲取特定元素, 例如後代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使用層次選擇器.

1 、ancestor descendant

用法: $(”form input”) ; 返回值集合元素

說明: 在給定的祖先元素下匹配所有後代元素.這個要下面講的”parent > child”區分開.

2、parent > child
用法: $(”form > input”) ; 返回值集合元素

說明: 在給定的父元素下匹配所有子元素.注意:要區分好後代元素與子元素

3、prev + next

用法: $(”label + input”) ; 返回值集合元素

說明: 匹配所有緊接在 prev 元素後的 next 元素

4、prev ~ siblings

用法: $(”form ~ input”) ; 返回值集合元素

說明: 匹配 prev 元素之後的所有 siblings 元素.注意:是匹配之後的元素,不包含該元素在內,並且siblings匹配的是和prev同輩的元素,其後輩元素不被匹配.

注意: (“prev ~ div”) 選擇器只能選擇 “# prev ” 元素後面的同輩元素; 而 jQuery 中的方法 siblings() 與前後位置無關, 只要是同輩節點就可以選取

注意:

1. $("#one + div") 選擇 id 爲 one 的下一個 div 元素, 必須是近鄰的!

2. $(“#two ~ div”) 選擇 id 爲 two 的元素後面的所有 div 兄弟元素

11、層次選擇器示例

（1）改變 <body> 內所有 <div> 的背景色爲 #0000FF

（2）改變 <body> 內子 <div> 的背景色爲 #FF0033

（3）改變 id 爲 one 的下一個 <div> 的背景色爲 #0000FF

（4）改變 id 爲 two 的元素後面的所有兄弟<div>的元素的背景色爲 # #0000FF

（5）改變 id 爲 two 的元素所有 <div> 兄弟元素的背景色爲 #0000FF

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<input type="button" value="改變 <body> 內所有 <div> 的背景色爲 #0000FF" id="b1"/>

<input type="button" value=" 改變 <body> 內子 <div> 的背景色爲 #FF0033" id="b2"/>

<input type="button" value=" 改變 id 爲 one 的下一個 <div> 的背景色爲 #0000FF" id="b3"/>

<input type="button" value=" 改變 id 爲 two 的元素後面的所有兄弟<div>的元素的背景色爲 # #0000FF" id="b4"/>

<input type="button" value=" 改變 id 爲 two 的元素所有 <div> 兄弟元素的背景色爲 #0000FF" id="b5"/>

<h2>天氣又冷了</h2>

id爲one

</div>

id爲two class是 mini

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini01" >class是 mini01</div>

<div class="mini" >class是 mini</div>

</div>

<br>

動畫

</div>

<br>

<span class="spanone"> span

</span>

</body>

//<input type="button" value="改變 <body> 內所有 <div> 的背景色爲 #0000FF" id="b1"/>

$("#b1").click(function(){

// 查找指定元素下的所有子孫元素通過空格來實現格式：（祖宗元素子孫元素）

$("body div").css("background"," #0000FF");

});

//<input type="button" value=" 改變 <body> 內子 <div> 的背景色爲 #FF0033" id="b2"/>

$("#b2").click(function(){

//查找指定元素下的所有子元素（兒子）通過 “>” 來實現格式：（父元素>子元素）

$("body>div").css("background","#FF0033");

});

//<input type="button" value=" 改變 id 爲 one 的下一個 <div> 的背景色爲 #0000FF" id="b3"/>

$("#b3").click(function(){

//查找指定元素下的下一個元素通過 “+” 來實現格式：（當前元素+指定下一個所要查找的元素）

$("#one+div").css("background"," #0000FF");

});

//<input type="button" value=" 改變 id 爲 two 的元素後面的所有兄弟<div>的元素的背景色爲 # #0000FF" id="b4"/>

$("#b4").click(function(){

//查找指定元素下的後面的所有兄弟元素通過 “~” 來實現格式：（當前元素~所要查找的兄弟元素）

$("#two~div").css("background"," #0000FF");

});

//<input type="button" value=" 改變 id 爲 two 的元素所有 <div> 兄弟元素的背景色爲 #0000FF" id="b5"/>

$("#b5").click(function(){

$("#two").siblings("div").css("background"," #0000FF");

});

</script>

</html>

12、過濾選擇器

（1）過濾選擇器主要是通過特定的過濾規則來篩選出所需的 DOM 元素, 該選擇器都以 “:” 開頭

（2）按照不同的過濾規則, 過濾選擇器可以分爲基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對象屬性過濾選擇器.

13、基礎過濾選擇器

1、:first
用法: $(”tr:first”) ; 返回值單個元素的組成的集合

說明: 匹配找到的第一個元素

2、:last
用法: $(”tr:last”) 返回值集合元素

說明: 匹配找到的最後一個元素.與 :first 相對應.

3、:not(selector)
用法: $(”input:not(:checked)”)返回值集合元素

說明: 去除所有與給定選擇器匹配的元素.有點類似於”非”,意思是沒有被選中的input(當input的type=”checkbox”).

4、:even
用法: $(”tr:even”) 返回值集合元素

說明: 匹配所有索引值爲偶數的元素，從 0 開始計數.js的數組都是從0開始計數的.例如要選擇table中的行,因爲是從0開始計數,所以table中的第一個tr就爲偶數0.

5、: odd
用法: $(”tr:odd”) 返回值集合元素

說明: 匹配所有索引值爲奇數的元素,和:even對應,從 0 開始計數.

6、:eq(index)
用法: $(”tr:eq(0)”) 返回值集合元素

說明: 匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號裏面的是索引值,不是元素排列數.

7、:gt(index)
用法: $(”tr:gt(0)”) 返回值集合元素

說明: 匹配所有大於給定索引值的元素.

8、:lt(index)
用法: $(”tr:lt(2)”) 返回值集合元素

說明: 匹配所有小於給定索引值的元素.

9、:header(固定寫法)
用法: $(”:header”).css(”background”, “#EEE”) 返回值集合元素

說明: 匹配如 h1, h2, h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素.

10、:animated(固定寫法) 返回值集合元素

說明: 匹配所有正在執行動畫效果的元素

14、基礎過濾選擇器示例

（1）改變第一個 div 元素的背景色爲 #0000FF

（2）改變最後一個 div 元素的背景色爲 #0000FF

（3）改變class不爲 one 的所有 div 元素的背景色爲 #0000FF

（4）改變索引值爲偶數的 div 元素的背景色爲 #0000FF

（5）改變索引值爲奇數的 div 元素的背景色爲 #0000FF

（6）改變索引值爲大於 3 的 div 元素的背景色爲 #0000FF

（7）改變索引值爲等於 3 的 div 元素的背景色爲 #0000FF

（8）改變索引值爲小於 3 的 div 元素的背景色爲 #0000FF

（9）改變所有的標題元素的背景色爲 #0000FF

（10）改變當前正在執行動畫的所有元素的背景色爲 #0000FF

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<h2>天氣又冷了</h2>

id爲one

</div>

id爲two class是 mini

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini01" >class是 mini01</div>

<div class="mini" >class是 mini</div>

</div>

<br>

動畫

</div>

<br>

</body>

//<input type="button" value=" 改變第一個 div 元素的背景色爲 #0000FF" id="b1"/>

$("#b1").click(function(){

$("div:first").css("background","#0000ff");

});

//<input type="button" value=" 改變最後一個 div 元素的背景色爲 #0000FF" id="b2"/>

$("#b2").click(function(){

$("div:last").css("background","#0000ff");

});

//<input type="button" value=" 改變class不爲 one 的所有 div 元素的背景色爲 #0000FF" id="b3"/>

$("#b3").click(function(){

$("div:not(.one)").css("background","#0000FF");

});

//<input type="button" value=" 改變索引值爲偶數的 div 元素的背景色爲 #0000FF" id="b4"/>

$("#b4").click(function(){

//偶數 even 奇數： odd

$("div:even").css("background","#0000FF");

});

//<input type="button" value=" 改變索引值爲奇數的 div 元素的背景色爲 #0000FF" id="b5"/>

$("#b5").click(function(){

//偶數 even 奇數： odd

$("div:odd").css("background","#0000FF");

});

//<input type="button" value=" 改變索引值爲大於 3 的 div 元素的背景色爲 #0000FF" id="b6"/>

$("#b6").click(function(){

//gt(index)大於

$("div:gt(3)").css("background","#0000FF");

});

//<input type="button" value=" 改變索引值爲等於 3 的 div 元素的背景色爲 #0000FF" id="b7"/>

$("#b7").click(function(){

//eq(index)等於

$("div:eq(3)").css("background","#0000FF");

});

//<input type="button" value=" 改變索引值爲小於 3 的 div 元素的背景色爲 #0000FF" id="b8"/>

$("#b8").click(function(){

//lt(index)小於

$("div:lt(3)").css("background","#0000FF");

});

//<input type="button" value=" 改變所有的標題元素的背景色爲 #0000FF" id="b9"/>

$("#b9").click(function(){

//標題

//:header

$(":header").css("background","#0000FF");

});

//<input type="button" value=" 改變當前正在執行動畫的所有元素的背景色爲 #0000FF" id="b10"/>

function startAnimation(){

$("#mover").slideToggle("normal", function(){

startAnimation();

});

}

startAnimation();

$("#b10").click(function(){

//動畫 :animated

$(":animated").css("background","#0000FF");

});

</script>

</html>

15、內容過濾選擇器

內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文本內容上

1、:contains(text)
用法: $(”div:contains(’John’)”) 返回值集合元素

說明: 匹配包含給定文本的元素.這個選擇器比較有用，當我們要選擇的不是dom標籤元素時,它就派上了用場了,它的作用是查找被標籤”圍”起來的文本內容是否符合指定的內容的.

2、:empty
用法: $(”td:empty”) 返回值集合元素

說明: 匹配所有不包含子元素或者文本的空元素

3、:has(selector)

用法: $(”div:has(p)”).addClass(”test”) 返回值集合元素

說明: 匹配含有選擇器所匹配的元素的元素.這個解釋需要好好琢磨,但是一旦看了使用的例子就完全清楚了:給所有包含p元素的div標籤加上class=”test”.

4、:parent
用法: $(”td:parent”) 返回值集合元素

說明: 匹配含有子元素或者文本的元素.注意:這裏是”:parent”,可不是”.parent”哦!感覺與上面講的”:empty”形成反義詞.

注意：沒有其它子節點是 :empty, 相反的是 :parent

16、內容過濾選擇器示例

（1）改變含有文本 ‘di’ 的 div 元素的背景色爲 #0000FF

（2）改變不包含子元素(或者文本元素) 的 div 空元素的背景色爲 #0000FF

（3）改變含有 class 爲 mini 元素的 div 元素的背景色爲 #0000FF

（4）改變含有子元素(或者文本元素)的div元素的背景色爲 #0000FF

（5）改變不含有文本 di; 的 div 元素的背景色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<h2>天氣又冷了</h2>

id爲one div

</div>

id爲two class是 mini div

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini01" >class是 mini01</div>

<div class="mini" >class是 mini</div>

</div>

</div>

<br>

動畫

</div>

<br>

</body>

//<input type="button" value=" 改變含有文本 ‘di’ 的 div 元素的背景色爲 #0000FF" id="b1"/>

$("#b1").click(function (){

$("div:contains('di')").css("background","#0000ff");

});

//<input type="button" value=" 改變不包含子元素(或者文本元素) 的 div 空元素的背景色爲" id="b2"/>

$("#b2").click(function (){

$("div:empty").css("background","#0000ff");

});

//<input type="button" value=" 改變含有 class 爲 mini 元素的 div 元素的背景色爲 #0000FF" id="b3"/>

$("#b3").click(function (){

$("div:.mini").css("background","#0000FF");

});

//<input type="button" value=" 改變含有子元素(或者文本元素)的div元素的背景色爲 #0000FF" id="b4"/>

$("#b4").click(function (){

$("div:parent").css("background","#0000FF");

});

//<input type="button" value=" 改變不含有文本 di; 的 div 元素的背景色" id="b5"/>

$("#b5").click(function (){

$("div:not(:contains('di'))").css("background","#0000ff");

});

</script>

</html>

17、可見度過濾選擇器

可見度過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素

1、:hidden
用法: $(”tr:hidden”) 返回值集合元素

說明: 匹配所有的不可見元素，input 元素的 type 屬性爲 “hidden” 的話也會被匹配到.意思是css中display:none和input type=”hidden”的都會被匹配到.同樣,要在腦海中徹底分清楚冒號”:”, 點號”.”和逗號”,”的區別.

2、:visible用法: $(”tr:visible”) 返回值集合元素

說明: 匹配所有的可見元素.

JQuery對象。each(function(){ .... });

JQuery.each( JQuery對象, function(index, domEle){ .... });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<br>

<br>

<input type="checkbox" name="items" value="美容">美容

<input type="checkbox" name="items" value="IT" >IT

<input type="checkbox" name="items" value="金融" >金融

<input type="checkbox" name="items" value="管理" >管理

<br>

<input type="radio" name="sex" value="男" checked="checked" >男

<input type="radio" name="sex" value="女" >女

<br>

<option value="中級程序員" >中級程序員</option>

<option value="高級程序員">高級程序員</option>

<option value="系統分析師">系統分析師</option>

</select>

</select>

<textarea cols=4 rows=4>textarea</textarea>

id爲two class是 mini div

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini01" >class是 mini01</div>

<div class="mini" >class是 mini</div>

</div>

</body>

$("#ok").click(function(){

var $inputs = $(":input");

$.each($inputs, function(index, domEle){

//alert(domEle.value);

//alert($(domEle).val());

});

</script>

</html>

18、可見度過濾選擇器示例

（1）改變所有可見的div元素的背景色爲 #0000FF

（2）選取所有不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來, 並設置其背景色爲 #0000FF

（3）選取所有的文本隱藏域, 並打印它們的值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

div.visible{

display:none;

}

</style>

</head>

<body>

<h2>天氣又冷了</h2>

id爲one div

</div>

id爲two class是 mini div

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini01" >class是 mini01</div>

<div class="mini" >class是 mini</div>

</div>

這是隱藏的

</div>

</div>

<br>

動畫

</div>

<br>

</body>

//<input type="button" value=" 改變所有可見的div元素的背景色爲 #0000FF" id="b1"/>

$("#b1").click(function(){

$("div:visible").css("background","0000FF");

});

//<input type="button" value=" 選取所有不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來, 並設置其背景色爲 #0000FF" id="b2"/>

$("#b2").click(function(){

$("div:hidden").show().css("background","#ff0000");

});

//<input type="button" value=" 選取所有的文本隱藏域, 並打印它們的值" id="b3"/>

//

// <input type="hidden" value="hidden_1">

// <input type="hidden" value="hidden_2">

// <input type="hidden" value="hidden_3">

// <input type="hidden" value="hidden_4">

$("#b3").click(function(){

var $inputs = $("input:hidden");

for(var i =0; i< $inputs.length; i++){

var domEle = $inputs[i];

alert(domEle.value);

}

});

//<input type="button" value=" 選取所有的文本隱藏域, 並打印它們的值" id="b4"/>

//

// <input type="hidden" value="hidden_1">

// <input type="hidden" value="hidden_2">

// <input type="hidden" value="hidden_3">

// <input type="hidden" value="hidden_4">

$("#b4").click(function(){

var $inputs = $("input:hidden");

//方式1：

//JQuery對象.each(function(index, domEle){});

// 參數1：索引值

// 參數2： domEle 得到的DOM對象

$inputs.each(function(index, domEle){

//alert(index);

//alert(domEle.val());

//alert(domEle.value);

});

//方式2：

//jQuery.each(object, [callback]) 靜態方法

// 參數1： object JQuery對象

// 參數2： callback 回調方法function(index, domEle){}

//$ <==> document

$.each($inputs, function(index, domEle){

alert(domEle.value);

});

</script>

</html>

19、屬性過濾選擇器

屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素

1、[attribute]
用法: $(”div[id]“) ; 返回值集合元素

說明: 匹配包含給定屬性的元素. 例子中是選取了所有帶”id”屬性的div標籤.

2、[attribute=value]
用法: $(”input[name='newsletter']“).attr(”checked”, true); 返回值集合元素

說明: 匹配給定的屬性是某個特定值的元素.例子中選取了所有 name 屬性是 newsletter 的 input 元素.

3、[attribute!=value]
用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值集合元素

說明: 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素.此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value]).之前看到的 :not 派上了用場.

4、[attribute^=value]
用法: $(”input[name^=‘news’]“) 返回值集合元素

說明: 匹配給定的屬性是以某些值開始的元素.,我們又見到了這幾個類似於正則匹配的符號.現在想忘都忘不掉了吧?!

該選擇器不是以 : 開頭!

5、[attribute$=value]
用法: $(”input[name$=‘letter’]“) 返回值集合元素

說明: 匹配給定的屬性是以某些值結尾的元素.

6、[attribute*=value]
用法: $(”input[name*=‘man’]“) 返回值集合元素

說明: 匹配給定的屬性是以包含某些值的元素.

7、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(”input[id][name$=‘man’]“) 返回值集合元素

說明: 複合屬性選擇器,需要同時滿足多個條件時使用.又是一個組合,這種情況我們實際使用的時候很常用.這個例子中選擇的是所有含有 id 屬性,並且它的 name 屬性是以 man 結尾的元素.

20、屬性過濾選擇器示例

（1）選取下列元素,改變其背景色爲 #0000FF

（2）含有屬性title 的div元素.

（3）屬性title值等於"test"的div元素.

（4）屬性title值不等於"test"的div元素(沒有屬性title的也將被選中).

（5）屬性title值以"te"開始的div元素.

（6）屬性title值以"est"結束的div元素.

（7）屬性title值含有"es"的div元素.

（8）選取有屬性id的div元素，然後在結果中選取屬性title值含有“es”的 div 元素.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

div.visible{

display:none;

}

</style>

</head>

<body>

<h2>天氣又冷了</h2>

id爲one div

</div>

id爲two class是 mini div title="test"

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini" >class是 mini</div>

</div>

class是 one title="test02"

<div class="mini01" >class是 mini01</div>

<div class="mini" >class是 mini</div>

</div>

這是隱藏的

</div>

</div>

<br>

動畫

</div>

<br>

</body>

//<input type="button" value=" 含有屬性title 的div元素" id="b1"/>

$("#b1").click(function(){

$("div[title]").css("background","red");

});

//<input type="button" value=" 屬性title值等於test的div元素" id="b2"/>

$("#b2").click(function(){

$("div[title=test]").css("background","red");

});

//<input type="button" value=" 屬性title值不等於test的div元素(沒有屬性title的也將被選中)" id="b3"/>

$("#b3").click(function(){

$("div[title!=test]").css("background","red");

});

//<input type="button" value=" 屬性title值以te開始的div元素." id="b4"/>

$("#b4").click(function(){

//^0-9$

$("div[title^=te]").css("background","red");

});

//<input type="button" value=" 屬性title值以est結束的div元素.." id="b5"/>

$("#b5").click(function(){

$("div[title$=est]").css("background","red");

});

//<input type="button" value="屬性title值含有es的div元素." id="b6"/>

$("#b6").click(function(){

$("div[title*=es]").css("background","red");

});

//<input type="button" value="選取有屬性id的div元素，然後在結果中選取屬性title值含有“es”的 div 元素" id="b7"/>

$("#b7").click(function(){

$("div[id][title*=es]").css("background","red");

//多個屬性過濾選擇器的時候多個條件寫在一起，不需要分隔

//選擇器：多個條件之間用","分隔

});

</script>

</html>

21、子元素過濾選擇器 " " , ">"

1、:nth-child(index/even/odd/equation)
用法: $(”ul li:nth-child(2)”) 返回值集合元素

說明: 匹配其父元素下的第N個子或奇偶元素.這個選擇器和之前說的基礎過濾(Basic Filters)中的 eq() 有些類似,不同的地方就是前者是從0開始,後者是從1開始.

2、:first-child
用法: $(”ul li:first-child”) 返回值集合元素

說明: 匹配第一個子元素.’:first’ 只匹配一個元素,而此選擇符將爲每個父元素匹配一個子元素.這裏需要特別點的記憶下區別.

3、:last-child
用法: $(”ul li:last-child”) 返回值集合元素

說明: 匹配最後一個子元素.’:last’只匹配一個元素,而此選擇符將爲每個父元素匹配一個子元素.

4、: only-child
用法: $(”ul li:only-child”) 返回值集合元素

說明: 如果某個元素是父元素中唯一的子元素,那將會被匹配.如果父元素中含有其他元素,那將不會被匹配.意思就是:只有一個子元素的纔會被匹

5、nth-child() 選擇器詳解如下：

(1) :nth-child(even/odd): 能選取每個父元素下的索引值爲偶(奇)數的元素

(2):nth-child(2): 能選取每個父元素下的索引值爲 2 的元素

(3):nth-child(3n): 能選取每個父元素下的索引值是 3 的倍數的元素

(3):nth-child(3n + 1): 能選取每個父元素下的索引值是 3n + 1的元素

22、子元素過濾選擇器示例

（1）選取下列元素,改變其背景色爲 #0000FF

（2）每個class爲one的div父元素下的第2個子元素.

（3）每個class爲one的div父元素下的第一個子元素

（4）每個class爲one的div父元素下的最後一個子元素

（5）如果class爲one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

div.visible{

display:none;

}

</style>

</head>

<body>

<h2>天氣又冷了</h2>

id爲one div

</div>

id爲two class是 mini div title="test"

<div class="mini" >class是 mini</div>

</div>

<div class="mini" >class是 mini******</div>

</div>

class是 one

<div class="mini" >class是 mini</div>

</div>

class是 one title="test02" (**************

<div class="mini01" >class是 mini01</div>

<div class="mini" >cdddddddlass是 mini</div>

</div>

這是隱藏的

</div>

</div>

<br>

動畫

</div>

<br>

</body>

/**注意：使用子元素過濾選擇器的時候，要想體現父子關係，必須要在父子的中間添加【空格】或者【大於號】，這樣才能體現父子關係，否則會有問題*/

//<input type="button" value=" 每個class爲one的div父元素下的第2個子元素" id="b1"/>

$("#b1").click(function(){

//:nth-child(2)

//$("div[class='one'] :nth-child(2)").css("background","pink");

$("div[class='one'] :nth-child(2)").css("background","red");

});

//<input type="button" value=" 每個class爲one的div父元素下的第一個子元素" id="b2"/>

$("#b2").click(function(){

//:first-child

$("div[class='one'] :first-child").css("background","red");

});

//<input type="button" value=" 每個class爲one的div父元素下的最後一個子元素" id="b3"/>

$("#b3").click(function(){

//:last-child

$("div[class='one'] :last-child").css("background","red");

});

//<input type="button" value=" 如果class爲one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素" id="b4"/>

$("#b4").click(function(){

//:only-child

$("div[class='one'] :only-child").css("background","red");

});

</script>

</html>

23、表單對象屬性過濾選擇器

此選擇器主要對所選擇的表單元素進行過濾

1、:enabled
用法: $(”input:enabled”) 返回值集合元素

說明: 匹配所有可用元素.意思是查找所有input中不帶有disabled=”disabled”的input.不爲disabled,當然就爲enabled啦.

2、:disabled
用法: $(”input:disabled”) 返回值集合元素

說明: 匹配所有不可用元素.與上面的那個是相對應的.

3、:checked
用法: $(”input:checked”) 返回值集合元素

說明: 匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option).這話說起來有些繞口.

4、:selected
用法: $(”select option:selected”) 返回值集合元素

說明: 匹配所有選中的option元素.

注意 select 標籤中的 option 是 select 的子元素

24、表單對象屬性過濾選擇器示例

（1）利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值

（2）利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值

（3）利用 jQuery 對象的 length 屬性獲取多選框選中的個數

（4）利用 jQuery 對象的 text() 方法獲取下拉框選中的內容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<br>

<input type="checkbox" name="items" value="美容" >美容

<input type="checkbox" name="items" value="IT" >IT

<input type="checkbox" name="items" value="金融" >金融

<input type="checkbox" name="items" value="管理" >管理

<br>

<input type="radio" name="sex" value="男" >男

<input type="radio" name="sex" value="女" >女

<br>

<option>中級程序員</option>

<option>高級程序員</option>

<option>系統分析師</option>

</select>

</select>

id爲two class是 mini div

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini" >class是 mini</div>

</div>

class是 one

<div class="mini01" >class是 mini01</div>

<div class="mini" >class是 mini</div>

</div>

</body>

//<input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值" id="b1"/>

$("#b1").click(function(){

// <input type="text" value="不可用值1" disabled="disabled">

// <input type="text" value="可用值1" >

// <input type="text" value="不可用值2" disabled="disabled">

// <input type="text" value="可用值2" >

//:enabled 可用

//setXXX(..) val("可用值2")

//getXXX(..) val()

$("input[type='text']:enabled").val("xxx");

});

//<input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值" id="b2"/>

$("#b2").click(function(){

$("input[type='text']:disabled").val("xxx");

});

//<input type="button" value=" 利用 jQuery 對象的 length 屬性獲取多選框選中的個數" id="b3"/>

$("#b3").click(function(){

// <input type="checkbox" name="items" value="美容" >美容

// <input type="checkbox" name="items" value="IT" >IT

// <input type="checkbox" name="items" value="金融" >金融

// <input type="checkbox" name="items" value="管理" >管理

var $inputs = $("input[type='checkbox']:checked");

alert($inputs.length);

});

//<input type="button" value=" 利用 jQuery 對象的 text() 方法獲取下拉框選中的內容" id="b4"/>

$("#b4").click(function(){

// <select name="job" id="job" multiple="multiple" size=4>

// <option>程序員</option>

//<option>中級程序員</option>

//<option>高級程序員</option>

//<option>系統分析師</option>

// </select>

// <select name="edu" id="edu">

// <option>本科</option>

//<option>博士</option>

//<option>碩士</option>

//<option>大專</option>

// </select>

var $options = $("select>option:selected");

$options.each(function(index, domEle){

//alert(domEle.innerHTML);

var $JQueryEle = $(domEle);

alert($JQueryEle.text());

});

</script>

</html>

25、表單選擇器

1、:input
用法: $(”:input”) ; 返回值集合元素

說明:匹配所有 input, textarea, select 和 button 元素

2、:text
用法: $(”:text”) ; 返回值集合元素

說明: 匹配所有的單行文本框.

3、:password
用法: $(”:password”) ; 返回值集合元素

說明: 匹配所有密碼框.

4、:radio
用法: $(”:radio”) ; 返回值集合元素

說明: 匹配所有單選按鈕.

5、:checkbox
用法: $(”:checkbox”) ; 返回值集合元素

說明: 匹配所有複選框

6、:submit
用法: $(”:submit”) ; 返回值集合元素

說明: 匹配所有提交按鈕.

7、:image
用法: $(”:image”) 返回值集合元素

說明: 匹配所有圖像域.

8、:reset
用法: $(”:reset”) ; 返回值集合元素

說明: 匹配所有重置按鈕.

9、:button
用法: $(”:button”) ; 返回值集合元素

說明: 匹配所有按鈕.這個包括直接寫的元素button.

10、:file
用法: $(”:file”) ; 返回值集合元素

說明: 匹配所有文件域.

11、:hidden
用法: $(”input:hidden”) ; 返回值集合元素

說明: 匹配所有不可見元素，或者type爲hidden的元素.這個選擇器就不僅限於表單了,除了匹配input中的hidden外,那些style爲hidden的也會被匹配.

注意: 要選取input中爲hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的話就是匹配頁面中所有的不可見元素,包括寬度或高度爲0的,

dyonline2012

發佈了56 篇原創文章 · 獲贊 5 · 訪問量 6萬+

私信關注

JavaScript加強

JavaWEB開發國際化

JSTL標籤庫

EL表達式

JDBC事務控制管理

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結