jquery之Document元素選擇器篇
對(duì)于熟悉prototype的朋友,$符號(hào)應(yīng)該很熟悉,
prototype: var element = $('eleId')
jquery: var element = $('#eleId')
DOM: var element = document.getElementById('eleId')
以上三種選擇方式是等價(jià)的,相比prototype來(lái)說(shuō)jquery多了個(gè)#號(hào)
例:
$('#j1′).html()
<div id=“j1“>Hello, jQuery!</content>
2.通過(guò)xpath+css來(lái)獲取你想要的…
1).
在這段例子中我們需要用到的HTML代碼
<div class=”contentToChange”>
<p class=”alert”>警告!警告!警告!警告!</p>
<p class=”firstParagraph”>我是第一段</p>
<p class=”secondParagraph”>第二段,哎,火箭輸球了 0比33!火箭替補(bǔ)釘上恥辱柱 <em>姚麥</em>身邊再無(wú)可用之人頻繁失誤成姚明致命毒藥 板凳消失是火箭落后主因</p>
</div>
jquery代碼:
//獲取div.contentToChange下p標(biāo)記數(shù)組長(zhǎng)度
alert($('div.contentToChange p').size())
//通過(guò)調(diào)整高度來(lái)顯示/隱藏所有匹配的元素,這里的匹配元素是p.firstParagraph
$('div.contentToChange p.firstParagraph').slideToggle('slow');
//找到匹配所有div.contentToChange下所有css不為alert的p元素,并在其后面添加文字
$('div.contentToChange p:not(.alert)').append('<strong class=“addText“>這是新加的文字</strong>‘);
//找到所有為strong元素且css為addText的元素,然后刪除
$('strong.addText').remove();
//找到P標(biāo)記下css為secondParagraph的元素,然后漸隱
$('div.contentToChange p.secondParagraph').hide('slow');
//找到div.contentToChange下所有em元素,然后通過(guò)jquery中的css方法改變它們的顏色和字體
$('div.contentToChange em').css({color:“#993300“,fontWeight:“bold“});
//添加css樣式
$('div.contentToChange p.secondParagraph').addClass('new‘)
//刪除css樣式
$('div.contentToChange p.secondParagraph').removeClass('new‘);
2).
在這段例子中我們需要用到的HTML代碼:
<div id=”jqdt” style=”width: 400px; padding: 1em; border: 1px solid #000″>
<p class=”goofy”> 這個(gè) <em>段落</em> 包括了一些css屬性為”groof”的 <strong>文本</strong>, 它還具有一個(gè) <a href=”http://www.englishrules.com” class=”external text” title=”http://www.englishrules.com”>外部連接</a>, 一些 <code>$(代碼)</code>, 和一個(gè)超連接屬性是以 <a href=”#dt-link3_same-page_link” title=”">#打頭的超連接</a>. </p>
<ol>
<li>list item 1 with dummy link to <a href=”/action/edit/Silly.pdf” class=”new” title=”Silly.pdf”>silly.pdf</a></li>
<li class=”groof”><em>list <strong>item</strong> 2</em> with class=”<strong>groof</strong>“</li>
<li>list item 3<span style=”display: none;”> SURPRISE!</span></li>
<li><strong>list item 4</strong> with silly link to <a href=”/action/edit/Silly.pdf_silly.pdf” class=”new” title=”Silly.pdf silly.pdf”>silly.pdf silly.pdf</a></li>
<li><a href=”contains.php”>支持火箭</a>,支持MM!</li>
</ol>
</div>
jquery代碼
//獲取第一個(gè)list item
$('#jqdt ol li:eq(0)')
//等價(jià)于
$('#jqdt').find('li:eq(0)') //以下同
//獲取所有偶數(shù)行的list item
$('#jqdt ol li:even')
//獲取索引小于3的list item
$('#jqdt ol li:lt(3)')
//獲取所有l(wèi)i中css不為groof的list item
$('#jqdt ol li:not(.groof)')
//獲取P標(biāo)記下所有超連接屬性值以'#'打頭的元素
$('p a[@href*=#]')
//獲取所有code元素和css為groof的li元素的集合
$('#jqdt code, li.groof')
//先獲取ol下css屬性為groof的A, 然后找到節(jié)點(diǎn)A下的一級(jí)子節(jié)點(diǎn)strong元素
$('#jqdt ol .groof > strong')
//首先找到所有以list item作為自己的前一節(jié)點(diǎn)的list item元素(所以不會(huì)選擇到第一個(gè)list item,因?yàn)樗那懊鏇](méi)有l(wèi)ist item節(jié)點(diǎn)了).然后在這些元素中找到超連接屬性值以為'pdf'結(jié)尾的一級(jí)子節(jié)點(diǎn)
$('#jqdt ol li + li > a[@href$=pdf]')
//找到所有已隱藏的span元素
$('span:visible')
//找到超連接中包含火箭字樣的元素
$('li a:contains(“火箭“)')
注:
$('#jqdt ol.groof > strong') 其中的>代表只訪問(wèn)下一級(jí)子節(jié)點(diǎn)中包含strong的元素,
如果改為 $('#jqdt ol.groof strong') 則訪問(wèn)所有下級(jí)子節(jié)點(diǎn)中的strong元素,包括子節(jié)點(diǎn)的子節(jié)點(diǎn)等。
3).
常用的自定義選擇器
:eq(0) 選擇索引等于0也就是第一個(gè)元素
:gt(4) 選擇所有索引大于4的元素
:lt(4) 選擇所有索引小于4的元素
:first 等價(jià)于 :eq(0)
:last 選擇最后一個(gè)元素
:parent 選擇所有含有子節(jié)點(diǎn)的元素 (including text).
:contains('test') 選擇含有指定文本的元素
:visible 選擇所有可見(jiàn)元素(包含:display:block|inline,或者visibility為visible的元素,但是不包括表單元素(type hidden)
:hidden 選擇所有隱藏元素(包含:display:none,或者visibility為hidden的元素,包括表單元素(type hidden)
例:
$('p:first').css('fontWeight','bold')
$('div:hidden').show();
$(“div:contains('test')“).hide();
$('input[@name=bar]').val() //獲取名字為bar的input表單的值
$('select[@name=slt]').val() //獲取名為slt的下拉菜單的選擇中值
$('input[@type=radio][@checked]') //獲取所有被選中的radio表單
表單選擇器
:input Selects all form elements (input, select, textarea, button).
:text Selects all text fields (type=”text”).
:password Selects all password fields (type=”password”).
:radio Selects all radio fields (type=”radio”).
:checkbox Selects all checkbox fields (type=”checkbox”).
:submit Selects all submit buttons (type=”submit”).
:image Selects all form images (type=”image”).
:reset Selects all reset buttons (type=”reset”).
:button Selects all other buttons (type=”button”).
例:
$('myForm:input')
$('input:radio',myForm)
//:radio等價(jià)于[@type=radio]
相關(guān)文章
jquery基本選擇器匹配多個(gè)元素的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery基本選擇器匹配多個(gè)元素的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09jquery+json實(shí)現(xiàn)動(dòng)態(tài)商品內(nèi)容展示的方法
這篇文章主要介紹了jquery+json實(shí)現(xiàn)動(dòng)態(tài)商品內(nèi)容展示的方法,涉及jQuery操作及解析json格式數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2016-01-01基于MVC+EasyUI的web開發(fā)框架之使用云打印控件C-Lodop打印頁(yè)面或套打報(bào)關(guān)運(yùn)單信息
這篇文章主要介紹了基于MVC+EasyUI的web開發(fā)框架之使用云打印控件C-Lodop打印頁(yè)面或套打報(bào)關(guān)運(yùn)單信息的相關(guān)資料,非常不錯(cuò),需要的朋友可以參考下2016-08-08jQuery移除tr無(wú)效的解決方法(tr是動(dòng)態(tài)添加)
移除掉某些tr(tr是動(dòng)態(tài)添加的)嘗試了很多方法,都不見(jiàn)效,后來(lái)發(fā)現(xiàn)個(gè)不錯(cuò)的方法,于是與大家分享下2014-09-09jQuery實(shí)現(xiàn)監(jiān)聽(tīng)下拉框選中內(nèi)容發(fā)生改變操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)監(jiān)聽(tīng)下拉框選中內(nèi)容發(fā)生改變操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)select選中觸發(fā)change事件相關(guān)操作技巧,需要的朋友可以參考下2018-07-07jquery實(shí)現(xiàn)漫天雪花飛舞的圣誕祝福雪花效果代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)漫天雪花飛舞的圣誕祝福雪花效果,很浪漫,感興趣的小伙伴們可以參考一下2015-08-08jQuery解析XML文件同時(shí)動(dòng)態(tài)增加js文件的方法
這篇文章主要介紹了jQuery解析XML文件同時(shí)動(dòng)態(tài)增加js文件的方法,涉及jQuery Ajax調(diào)用及返回函數(shù)中增加js文件的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件。
因?yàn)樽罱夹g(shù)長(zhǎng)進(jìn)緩慢,也沒(méi)高手帶,只能靠自己了,所以想仿個(gè)WEBQQ來(lái)鍛煉下自己。做之前最好先把必要的東西準(zhǔn)備好2011-12-12解析jQuery的三種bind/One/Live事件綁定使用方法
本篇文章主要是對(duì)jQuery的三種bind/One/Live事件綁定使用方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12