jQuery選取和操縱元素的執行個體介紹,與直接用JavaScript擷取元素不同,jQuery會忽略元素不存在的報錯,無論元素存在與否,都會得到一個jQuery對象,該對象包含了所選擇元素的集合.id選擇器比較特殊,集合長度永遠是1或者0.
jQuery初探 jQuery選取和操縱元素的特點
JavaScript選取元素
先來看看不用jQuery的時候我們是怎麼處理元素選取的.
JavaScript選取元素的時候,可以根據id擷取元素,當id不存在的時候,結果為null,并且console會報腳本執行錯誤.
是以一般的做法是先用一個if判斷該元素存在.
比如:
<body>
<a>click me</a>
<script type="text/javascript">
// document.getElementById("someId").style.color = "red";//if id does not exist,report error in console.
if (document.getElementById("hello")) {//ensure it's neither null nor undefined.
document.getElementById("hello").style.color = "red";
}
</script>
</body> jQuery選取操縱元素
jQuery擷取元素用的是$()運算符,比如擷取某個id的對象用:$(“#idValue”).
不論該id的元素存在與否,都會傳回一個jQuery對象(object).
這一點和直接用JavaScript擷取DOM對象是完全不一樣的.
一般情況下$()擷取的是所有滿足條件的元素,即得到的這個jQuery對象有一個屬性length,表示元素的個數,可能為0,表示沒有擷取到元素.比如當要擷取的目标id不存在時,該值為0.
id選擇器是一個比較特殊的選擇器,它隻擷取滿足指定id的單個元素.如果id有多個,隻傳回第一個元素.
如果id不存在時,雖然可以擷取jQuery對象,但是将jQuery對象轉換為DOM對象(用[0]或者get(0)),将會得到一個undifined.
之後對這個DOM對象的任何屬性操作都會報錯,因為undefined不存在任何屬性.
//jQuery
alert($("#hello"));//object
//method1: convert jQuery object to DOM object
alert($("#hello")[0]);//undefined
$("#hello")[0].style.color = "red";//report error here! 既然轉換成DOM元素不太好用,那麼我們就放棄轉換,直接操縱jQuery元素.
$("#hello").css("color","red"); 這樣,雖然對應id的元素還是不存在,樣式修改也沒有生效,但是頁面不會報任何錯誤,因為jQuery會将其忽略掉.
如果id存在,則該樣式會生效.
jQuery對象中的大多數方法同時支援讀操作和寫操作.
下面我們給連結加上我們想要的id.
<body>
<a id="hello">click me</a>
<script type="text/javascript">
//jQuery
alert($("#hello").length);//show DOM elements count.
$("#hello").css("color","red");//write action
alert($("#hello").css("color"));//read action
</script>
</body> 這個例子中hello是一個存在的id,首先用jQuery對象的css()方法的寫操作賦予它一個顔色值,後來用讀操作讀出這個顔色值,彈窗顯示出來.
jQuery中的大多數方法都是用同一個名字,同時支援相對應的讀操作和寫操作.
一般讀操作是一個參數,寫操作是兩個參數.
總結: jQuery文法
jQuery 文法是為 HTML 元素的選取編制的,可以對元素執行某些操作.
基礎文法是：$(selector).action()
$符号定義 jQuery.
選擇符(selector)“查詢”和“查找” HTML 元素.
jQuery 的 action() 執行對元素的讀寫操作.
關于jQuery選擇器的内容這裡先不詳細介紹.本文隻用了其中的id選擇器作示例.
參考資料
聖思園張龍老師JavaWeb視訊教程66.
HTML參考手冊:http://www.w3school.com.cn/tags/index.asp
jQuery文法:http://www.w3school.com.cn/jquery/jquery_syntax.asp
作者: 聖騎士Wind
出處: 部落格園: 聖騎士Wind
Github: https://github.com/mengdd
微信公衆号: 聖騎士Wind
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)