欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery的三種$()

 更新時間:2009年12月30日 01:44:24   作者:  
$號是jQuery“類”的一個別稱,$()構(gòu)造了一個jQuery對象。所以,“$()”可以叫做jQuery的構(gòu)造函數(shù)(個人觀點,呵呵?。?/div>
1、$()可以是$(expresion),即css選擇器、Xpath或html元素,也就是通過上述表達(dá)式來匹配目標(biāo)元素。
比如:$("a")構(gòu)造的這個對象,是用CSS選擇器構(gòu)建了一個jQuery對象——它選擇了所有的<a/>這個標(biāo)簽。如:
$("a").click(function(){...})
就是在點擊頁面上的任何一個鏈接時的觸發(fā)事件。確切地說,就是jQuery用<a/>這個標(biāo)簽構(gòu)建了一個對象$("a"),函數(shù) click()是這個jQuery對象的一個(事件)方法。

比如有這樣一段HTML代碼:

復(fù)制代碼 代碼如下:

<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>


而操作這段HTML的是如下一條語句:
alert($("div>p").html());

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

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

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


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



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

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

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

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>的所有子孫的偶數(shù)項

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

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

相關(guān)文章

  • jQuery 選擇器用法基礎(chǔ)入門示例

    jQuery 選擇器用法基礎(chǔ)入門示例

    這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實例形式詳細(xì)分析了jQuery選擇器的基本功能、使用方法及操作注意事項,需要的朋友可以參考下
    2020-01-01
  • jquery.validate使用時遇到的問題

    jquery.validate使用時遇到的問題

    這篇文章主要介紹了jquery.validate使用時遇到的問題的解決方法的匯總,真是應(yīng)了那句老話,會者不難難者不會,這里記錄一下,有需要的小伙伴可以參考下。
    2015-05-05
  • jQuery:unbind方法的使用詳解

    jQuery:unbind方法的使用詳解

    這篇文章主要介紹了jQuery:unbind方法的使用詳解的相關(guān)資料,unbind方法只能解綁用jQuery的bind方法以及用jquery方法注冊的事件處理程序,需要的朋友可以參考下
    2017-08-08
  • jquery插件autocomplete用法示例

    jquery插件autocomplete用法示例

    這篇文章主要介紹了jquery插件autocomplete用法,結(jié)合實例形式分析了jQuery插件autocomplete與后臺交互實現(xiàn)搜索的自動完成功能實現(xiàn)技巧,需要的朋友可以參考下
    2016-07-07
  • jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題

    jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題

    本文主要介紹jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題,通過第三方的json2.js做到兼容,需要的朋友可以參考下。
    2016-05-05
  • jQuery學(xué)習(xí)筆記之jQuery構(gòu)建函數(shù)的7種方法

    jQuery學(xué)習(xí)筆記之jQuery構(gòu)建函數(shù)的7種方法

    jQuery把所有的操作都包裝在一個jQuery()函數(shù)中,形成了統(tǒng)一(也是惟一)的操作入口,這為jQuery操作降低了門檻。那我們來看下具體構(gòu)造函數(shù)的“七種武器”吧。
    2014-06-06
  • jQuery實現(xiàn)帶進(jìn)度條的輪播圖

    jQuery實現(xiàn)帶進(jìn)度條的輪播圖

    這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)帶進(jìn)度條的輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • jQuery版仿Path菜單效果

    jQuery版仿Path菜單效果

    昨日在一個前端網(wǎng)站上看見了一個老外寫的純用css3做的仿Path菜單,心里癢癢,于是也用jQuery寫了一個,現(xiàn)在分享給大家
    2011-12-12
  • 淺談jQuery的bind和unbind事件(綁定和解綁事件)

    淺談jQuery的bind和unbind事件(綁定和解綁事件)

    下面小編就為大家?guī)硪黄獪\談jQuery的bind和unbind事件(綁定和解綁事件)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • jQuery自制提示框tooltip改進(jìn)版

    jQuery自制提示框tooltip改進(jìn)版

    這篇文章主要介紹了jQuery自制提示框tooltip改進(jìn)版,將tooltip內(nèi)容加上圖片預(yù)覽,感興趣的小伙伴們可以參考一下
    2016-08-08

最新評論