JS中$含義及用法


$在JS中本身只是一個符號而異,在JS里什么也不是。
但在JS應用庫JQUERY的作者將之做為一個自定義函數名了,這個函數是獲取指定網頁元素的函數,使用非常之頻繁,所以好多新手不知道,還以為$是JS的什么特殊語法。
后來,可能有些程序員JQUERY用得多了,發現$這個函數很好用,很方便,所以,在不用JQUERY的情況,一般自己也會自定義一個$函數。
即:
function $(Nid){
 return document.getElementById(Nid);
}

就這么簡單(在JSQUERY里可能稍微功能再強大一點,但主要還是我寫的這個功能。)
以后在網頁就不用每次使用document.getElementById("ID名")來獲取元素,只用$('ID名')即可,非常簡使了。

三種具體用法:
1、$()可以是$(expresion),即css選擇器、Xpath或html元素,也就是通過上述表達式來匹配目標元素。 
比如:$("a")構造的這個對象,是用CSS選擇器構建了一個jQuery對象——它選擇了所有的<a/>這個標簽。如: 
$("a").click(function(){...}) 
就是在點擊頁面上的任何一個鏈接時的觸發事件。確切地說,就是jQuery用<a/>這個標簽構建了一個對象$("a"),函數 click()是這個jQuery對象的一個(事件)方法。 

比如有這樣一段HTML代碼: 
<p>one</p> 
<div> 
<p>two</p> 
</div> 
<p>three</p> 
<a href="#" id="test" onClick="jq()" >jQuery</a> 
而操作這段HTML的是如下一條語句: 
alert($("div>p").html()); 

$()中的是一個查詢表達式,也就是用“div>p”這樣一個查詢表達式構建了一個jQuery對象,然后的“html()”意思是顯示其html內容,也就是上面HTML代碼段的[two]。再如: 
$("<div><p>Hello</p></div>").appendTo("body"); 
$()中的是一個字符串,用這樣一段字串構建了jQuery對象,然后向<body/>中添加這一字串。 

2、$()可以是$(element),即一個特定的DOM元素。如常用的DOM對象有document、location、form等。如這樣一行代碼: 
$(document).find("div>p").html()); 
$()中的document是一個DOM元素,即在全文尋找帶<p>的<div>元素,並顯示<p>中的內容。 
3、$()可以是$(function),即一個函數,它是$(document).ready()的一個速記方式。如常見的形式是這樣的: 
$(document).ready(function(){ 
alert("Hello world!"); 
}); 

可變形作: 
$(function(){ 
alert("Hello world!"); 
}); 

對於選擇HTML文檔中的elements,jQuery有兩種方法: 
1)如$("div>ul a"),它的意思是div標簽中的ul標簽中的a標簽 
不過,$('div>ul')和$('div ul')是有區別的, 


$('div>ul')是<div>的直接后代里找<ul>; 
而$('div ul')是在<div>的所有后代里找<ul>。 



2)用jQuery對象的幾個方法(如方法find()、each()等) 
$("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一樣迭代了所有的li,而表達式中的“#”表示HTML中的ID,如上例中的“#orderedlist”就表示“ID為orderedlist所在的標簽”。 

**************************************************************** 

1、標簽選擇器$('p')、類選擇器$('.myClass')、id選擇器$('#myId')相對簡單,不多說。不過有一點——$('div>ul')和$('div ul')是有區別的, 
$('div>ul')是<div>的直接后代里找<ul>;而$('div ul')是在<div>的所有后代里找<ul>。 
所以,$('#sId>li')所選擇的是id為"sId"的所有<li>孩子節點,即使這個<li>的后代還有<li>也不是它所找的范圍(所找到的DOM對象,只是它本級的DOM對象。)。而$('#sId li:not(.horizontal)'),就是指類名"sId"里面的所有li的子孫中沒有horizontal類的所有元素。——這里的not()是一個negation pseudo class. 
這里返回的是一個jQurey對象,一個數組對象,這個jQuery對象的長度可用.length()得到。 
2、XPath選擇器 
如:選擇所有帶有title 屬性的鏈接,我們會這樣寫:$('a[@title]') 
[]里帶@,說明[]里的是元素的屬性;是個屬性選擇器 
[]里沒@,說明[]里的是元素的子孫。 
$('ul li')和$('ul[li]')雖然返回的都是一個jQuery數組,但兩者的含義正好相反。前者是要找<ul>下所有<li>子孫,而后者卻是在找所有子孫為<li>的<ul>數組。 
在XPath中,要找一個“以...開頭”的屬性,用^=,如找一個name屬性是以mail開頭的input元素,就用 
$('input[@name^="mail"]') 
要找一個“以...結尾”的屬性,要用$= 
要找一個“不頭不尾”的屬性,用*= 

3、不屬於上述的CSS和XPath的選擇器,就是自定義的選擇器了,用“:”表示,這里要用的就是:first,:last,:parent ,:hidden,:visible,:odd,:even,:not('xxx'), ":eq(0)"(始於0),:nth(n),:gt(0),:lt(0),:contains("xxx") 
如:$('tr:not([th]):even')意為<tr>元素的子孫中不含<th>的所有子孫的偶數項 

4、還有幾個,簡單不解釋了 
$('th').parent()—— 
$('td:contains("Henry")').prev()——內容包含有"Henry"的<td>的上一個節點 
$('td:contains("Henry")').next()——內容包含有"Henry"的<td>的下一個節點 
$('td:contains("Henry")').siblings()——內容包含有"Henry"的<td>的所有兄弟節點 
還有一個,就是end(),這個方法肯定是用在某個DOM節點執行了某一動作之后,還想在與其相關的節點上執行類似動作,這里就要用到end()。用過end()方法之后,所返回的是執行動作的那個節點的父節點上。舉個例子 
$(...).parent().find(...).addClass().end() 
這里執行動作的節點是find(...),是一個數組對象,它所做的動作是“addClass()”,之后,用了個end(),這時所返回的東東就是指向了parent()所指向的節點,也就是執行“addClass()”動作的那個數組對象的父節點。 

5、要直接訪問DOM元素,可用get(0)的方法,如 
$('#myelement').get(0),也可縮寫成$('#myelement')[0]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM