1.从$开始
对于熟悉prototype的朋友，$符号应该很熟悉,
prototype:varelement=$('eleId')
jquery:varelement=$('#eleId')
DOM:varelement=document.getElementById('eleId')
以上三种选择方式是等价的,相比prototype来说jquery多了个#号
例:
$('#j1′).html()
<divid=“j1“>Hello,jQuery!</content>
2.通过xpath+css来获取你想要的…
1).
在这段例子中我们需要用到的HTML代码
<divclass=”contentToChange”>
<pclass=”alert”>警告!警告!警告!警告!</p>
<pclass=”firstParagraph”>我是第一段</p>
<pclass=”secondParagraph”>第二段,哎,火箭输球了0比33!火箭替补钉上耻辱柱<em>姚麦</em>身边再无可用之人频繁失误成姚明致命毒药板凳消失是火箭落后主因</p>
</div>
jquery代码:
//获取div.contentToChange下p标记数组长度
alert($('div.contentToChangep').size())
//通过调整高度来显示/隐藏所有匹配的元素,这里的匹配元素是p.firstParagraph
$('div.contentToChangep.firstParagraph').slideToggle('slow');
//找到匹配所有div.contentToChange下所有css不为alert的p元素,并在其后面添加文字
$('div.contentToChangep:not(.alert)').append('<strongclass=“addText“>这是新加的文字</strong>‘);
//找到所有为strong元素且css为addText的元素,然后删除
$('strong.addText').remove();
//找到P标记下css为secondParagraph的元素,然后渐隐
$('div.contentToChangep.secondParagraph').hide('slow');
//找到div.contentToChange下所有em元素,然后通过jquery中的css方法改变它们的颜色和字体
$('div.contentToChangeem').css({color:“#993300“,fontWeight:“bold“});
//添加css样式
$('div.contentToChangep.secondParagraph').addClass('new‘)
//删除css样式
$('div.contentToChangep.secondParagraph').removeClass('new‘);
2).
在这段例子中我们需要用到的HTML代码:
<divid=”jqdt”style=”width:400px;padding:1em;border:1pxsolid#000″>
<pclass=”goofy”>这个<em>段落</em>包括了一些css属性为”groof”的<strong>文本</strong>,它还具有一个<ahref=”http://www.englishrules.com”class=”externaltext”title=”http://www.englishrules.com”>外部连接</a>,一些<code>$(代码)</code>,和一个超连接属性是以<ahref=”#dt-link3_same-page_link”title=”">#打头的超连接</a>.</p>
<ol>
<li>listitem1withdummylinkto<ahref=”/action/edit/Silly.pdf”class=”new”title=”Silly.pdf”>silly.pdf</a></li>
<liclass=”groof”><em>list<strong>item</strong>2</em>withclass=”<strong>groof</strong>“</li>
<li>listitem3<spanstyle=”display:none;”>SURPRISE!</span></li>
<li><strong>listitem4</strong>withsillylinkto<ahref=”/action/edit/Silly.pdf_silly.pdf”class=”new”title=”Silly.pdfsilly.pdf”>silly.pdfsilly.pdf</a></li>
<li><ahref=”contains.php”>支持火箭</a>,支持MM!</li>
</ol>
</div>
jquery代码
//获取第一个listitem
$('#jqdtolli:eq(0)')
//等价于
$('#jqdt').find('li:eq(0)')//以下同
//获取所有偶数行的listitem
$('#jqdtolli:even')
//获取索引小于3的listitem
$('#jqdtolli:lt(3)')
//获取所有li中css不为groof的listitem
$('#jqdtolli:not(.groof)')
//获取P标记下所有超连接属性值以'#'打头的元素
$('pa[@href*=#]')
//获取所有code元素和css为groof的li元素的集合
$('#jqdtcode,li.groof')
//先获取ol下css属性为groof的A,然后找到节点A下的一级子节点strong元素
$('#jqdtol.groof>strong')
//首先找到所有以listitem作为自己的前一节点的listitem元素(所以不会选择到第一个listitem,因为它的前面没有listitem节点了).然后在这些元素中找到超连接属性值以为'pdf'结尾的一级子节点
$('#jqdtolli+li>a[@href$=pdf]')
//找到所有已隐藏的span元素
$('span:visible')
//找到超连接中包含火箭字样的元素
$('lia:contains(“火箭“)')
注：
$('#jqdtol.groof>strong')其中的>代表只访问下一级子节点中包含strong的元素，
如果改为$('#jqdtol.groofstrong')则访问所有下级子节点中的strong元素，包括子节点的子节点等。
3).
常用的自定义选择器
:eq(0)选择索引等于0也就是第一个元素
:gt(4)选择所有索引大于4的元素
:lt(4)选择所有索引小于4的元素
:first等价于:eq(0)
:last选择最后一个元素
:parent选择所有含有子节点的元素(includingtext).
:contains('test')选择含有指定文本的元素
:visible选择所有可见元素(包含:display:block|inline,或者visibility为visible的元素,但是不包括表单元素(typehidden)
:hidden选择所有隐藏元素(包含:display:none,或者visibility为hidden的元素,包括表单元素(typehidden)
例：
$('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表单
表单选择器
:inputSelectsallformelements(input,select,textarea,button).
:textSelectsalltextfields(type=”text”).
:passwordSelectsallpasswordfields(type=”password”).
:radioSelectsallradiofields(type=”radio”).
:checkboxSelectsallcheckboxfields(type=”checkbox”).
:submitSelectsallsubmitbuttons(type=”submit”).
:imageSelectsallformimages(type=”image”).
:resetSelectsallresetbuttons(type=”reset”).
:buttonSelectsallotherbuttons(type=”button”).
例：
$('myForm:input')
$('input:radio',myForm)
//:radio等价于[@type=radio]
【jquery之Document元素选择器篇】相关文章：
★ jquery插件splitScren实现页面分屏切换模板特效