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>
