jQuery代碼怎么寫

導入jQuery庫

<!-- 導入jQuery庫，使用scrip標簽的src屬性?-->

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>

<script type="text/javascript">

$(function(){

alert("--");

});

</script>

加載文檔

$(document).ready(function(){}); 作用相當于JS當中的?window.onload = function(){}

$(document).ready(function(){}); 可以簡寫為?$(function(){});

jQuery常用方法

val()方法

返回value值：jQuery對象.val()

對多選框而言：val()方法返回的是被選中的第一個值，而不是全部被選中的值組成的數組

設置value值：傳入數組適應性更強

①jQuery對象.val("value")

文本框

密碼框

單選下拉列表

②jQuery對象.val(["value01","value02"])

文本框

密碼框

單選框

多選框

單選下拉列表

多選下拉列表

each()方法

用來遍歷一組元素

each(function(){

在函數體內使用this關鍵字引用當前正在被遍歷的元素

this永遠是DOM對象????

$(this)轉為jQuery對象

});

text()方法

返回文本值：jQuery對象.text()

設置文本值：jQuery對象.text("文本值")

attr()方法

返回屬性值：jQuery對象.attr("屬性名")

設置屬性值：jQuery對象.attr("屬性名","屬性值")

$.trim()方法：去除字符串前后空格

jQuery特性

隱式迭代

自動遍歷所有被選中的p元素，把單擊響應函數綁定到每一個p元素上
$("p").click(function(){

//jQuery對象.text()方法可以返回元素節點內的文本值

var text = $(this).text();

alert(text);

});

函數連綴

很多jQuery方法，返回值都是調用對象本身，所以可以以“連綴”的方式，繼續進行調用???例如：$("text").focus(...).blur(...)

注意：在使用方法連綴時，一定要留意每個參與連綴的方法的返回值還是不是原來調用的那個對象，?如果不是了，就不能繼續連綴，除非你要操作的是這個新的對象

基本選擇器

id選擇器：#id $("#one")

class選擇器：.class $(".mini")

選擇元素名：$(元素名) $("div")

所有元素：* $("*")

“,”表示并列關系?$("span,#two") 此時所有span元素和id為two的都會被選中

選擇特定class屬性的元素?元素名.class $("div.one")

 

層次選擇器

選擇后代元素：空格?父元素?后代元素

選擇直接子元素：> 父元素>子元素

緊鄰的下一個兄弟元素：+ 前元素+后元素?必須是緊鄰的

緊鄰的后面所有的兄弟元素：~ 前元素~后元素?必須是緊鄰的

所有兄弟元素?siblings()這個函數?本身元素.siblings()

選取不相鄰的下一個兄弟元素?nextAll(元素名:first)

選取前面的兄弟元素?prev() prevAll()

 

基本過濾選擇器

:first選取第一個元素

:last選取最后一個元素

:not(選擇器)選擇指定選擇器之外的元素

:even 選擇索引值為偶數的元素，注意：索引值從0開始

:odd 選擇索引值為奇數的元素

:gt(索引值) 選擇索引值大于指定索引值的元素

:eq(索引值) 選擇索引值等于指定索引值的元素

:lt(索引值) 選擇索引值小于指定索引值的元素

:header 選擇所有的標題元素

?:animated 選擇所有正在執行動畫的元素

 

內容過濾選擇器

:contains(text) 選擇含有指定文本的選擇器

:empty 選擇空的元素

:has(選擇器) 選擇包含匹配指定選擇器的元素

:parent 選擇有子元素或文本元素的元素（當爹的）

 

可見性過濾選擇器

:visible 選擇可見的元素

:hidden 選擇所有不可見的元素（注意：選中不等于在頁面上顯示，要想在頁面上顯示，需借助show()

表單隱藏域無法使用show()方法在頁面上顯示，但是選中后，可以獲取操作其值

 

屬性過濾選擇器

[attribut]含有指定屬性的元素

[attribut=value]含有指定屬性，且屬性值為指定值的元素

[attribut!=value]屬性值不等于value的元素，注意：沒有指定屬性的元素也會被選中，如果想準確指定，需使用組合選擇器，例如：[title][title!=test]

[attribut^=value]屬性值以value開始的元素

[attribut$=value]屬性值以value結尾的元素

[attribut*=value]屬性值包含value的元素

[selector1][selector2]注意：[selector2]在[selector1]的選擇后的結果的范圍內進行選擇

 

子元素過濾選擇器

父元素:nth-child(索引值) 每一個父元素下指定索引值的子元素，索引值從1開始

父元素:first-child(索引值) 每一個父元素下第一個子元素

父元素:last-child(索引值) 每一個父元素下最后一個子元素

父元素:only-child(索引值) 如果一個父元素下存在著一個單獨的子元素，那么就選擇它

 

表單元素過濾選擇器

表單元素:enabled 選擇可用的表單元素

表單元素:disabled 選擇不可用的表單元素

單選框（或復選框）:checked 匹配單選框或多選框被選中的

對于多選框來說，所有被選中的元素返回值是一個數組，不能直接使用val()返回所有的值，需要使用each()方法進行遍歷

"select :selected" 選擇被選中的下拉列表項

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

$("select :selected").each(function(){

alert($(this).val());

});

});