源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery之Document元素选择器篇

  • 时间:2022-03-13 21:39 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery之Document元素选择器篇
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>  <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代码 //获取第一个list item $('#jqdt ol li:eq(0)') //等价于 $('#jqdt').find('li:eq(0)') //以下同 //获取所有偶数行的list item $('#jqdt ol li:even') //获取索引小于3的list item $('#jqdt ol li:lt(3)') //获取所有li中css不为groof的list item $('#jqdt ol li:not(.groof)') //获取P标记下所有超连接属性值以'#'打头的元素 $('p a[@href*=#]') //获取所有code元素和css为groof的li元素的集合 $('#jqdt code, li.groof') //先获取ol下css属性为groof的A, 然后找到节点A下的一级子节点strong元素 $('#jqdt ol .groof > strong') //首先找到所有以list item作为自己的前一节点的list item元素(所以不会选择到第一个list item,因为它的前面没有list item节点了).然后在这些元素中找到超连接属性值以为'pdf'结尾的一级子节点 $('#jqdt ol li + li > a[@href$=pdf]') //找到所有已隐藏的span元素 $('span:visible') //找到超连接中包含火箭字样的元素 $('li a:contains(“火箭“)')   注: $('#jqdt ol.groof > strong') 其中的>代表只访问下一级子节点中包含strong的元素, 如果改为 $('#jqdt ol.groof strong') 则访问所有下级子节点中的strong元素,包括子节点的子节点等。   3). 常用的自定义选择器   :eq(0) 选择索引等于0也就是第一个元素   :gt(4) 选择所有索引大于4的元素   :lt(4) 选择所有索引小于4的元素   :first 等价于 :eq(0)    :last 选择最后一个元素   :parent 选择所有含有子节点的元素 (including text).    :contains('test') 选择含有指定文本的元素    :visible 选择所有可见元素(包含: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等价于[@type=radio]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部