jquery之Document元素選擇器篇
2024-05-06 14:17:26
供稿：網友
1.從$開始
對于熟悉prototype的朋友，$符號應該很熟悉,
prototype: var element = $('eleId')
jquery: var element = $('#eleId')
DOM: var element = document.getElementById('eleId')
以上三種選擇方式是等價的,相比prototype來說jquery多了個#號
例:
$('#j1′).html()
<div id=“j1“>Hello, jQuery!</content>
2.通過xpath+css來獲取你想要的…
1).
在這段例子中我們需要用到的HTML代碼
<div class=”contentToChange”>
<p class=”alert”>警告!警告!警告!警告!</p>
<p class=”firstParagraph”>我是第一段</p>
<p class=”secondParagraph”>第二段,哎,火箭輸球了 0比33!火箭替補釘上恥辱柱 <em>姚麥</em>身邊再無可用之人頻繁失誤成姚明致命毒藥 板凳消失是火箭落后主因</p>
</div>
jquery代碼:
//獲取div.contentToChange下p標記數組長度
alert($('div.contentToChange p').size())
//通過調整高度來顯示/隱藏所有匹配的元素,這里的匹配元素是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標記下css為secondParagraph的元素,然后漸隱
$('div.contentToChange p.secondParagraph').hide('slow');
//找到div.contentToChange下所有em元素,然后通過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”> 這個 <em>段落</em> 包括了一些css屬性為”groof”的 <strong>文本</strong>, 它還具有一個 <a href=”http://www.englishrules.com” class=”external text” title=”http://www.englishrules.com”>外部連接</a>, 一些 <code>$(代碼)</code>, 和一個超連接屬性是以 <a href=”#dt-link3_same-page_link” title=”">#打頭的超連接</a>. </p>
