• jquery选择器


    属性选择E[attr]:$("[title]").click()...    $("div[title]").click()....

    选择所有元素内 属性带有title的元素
    即:<li class="aaaa" title="ttt">li-1</li>
    选择所有div标签(指定标签)下的所有带title的元素

    即:<div class="aaaa" title="ttt">li-1</div>

    属性值选择E[@attr=val]
    $("div[title='ttt']").click().....

    选择div下所有title属性等于ttt的元素

    <div class="aaaa" title="ttt">li-1</div>

    如果是 $("[title='ttt']").click().....
    所有元素下属性title等于ttt的元素
    <li class="aaaa" title="ttt">li-1</li>
    <div class="aaaa" title="ttt">li-1</div>

    属性值开始字母选择E[attr^=val]
    $("div[title^='t']").click().....
    所有div元素下所有属性title值是以t为开头的元素

    属性值结尾字母选择E[@attr$=val]
    $("div[title$='t']").click()................

    所有div元素下所有属性title值是以t为结尾的元素

    属性值包含字母选择E[@attr*=val]
    $("div[title*='t']").click().......
    所有div元素下所有属性title值是包含t的所有元素

    多个属性选择E[attr=val][attr=val]
    $("div[title='ttt'][class='aaaa']").click().......
    所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

    获取父级元素:

     parent([expr]):

    获取指定元素的所有父级元素

     1 <div id="par_div">
     2      <a id="href_fir" href="#">href_fir</a>
     3         <a id="href_sec" href="#">href_sec</a>
     4         <a id="href_thr" href="#">href_thr</a></div>
     5         <span id="par_span">
     6             <a id="href_fiv" href="#">href_fiv</a>
     7         </span>
     8 </div>
     9 $(document).ready(function(){
    10 $("a").parent().addClass('a_par');
    11 });            
    View Code

    获取同级元素:next([expr]):

    获取指定元素的下一个同级元素

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4   <script type="text/javascript" src="/jquery/jquery.js"></script>
     5 </head>
     6 
     7 <body>
     8 <ul>
     9    <li>list item 1</li>
    10    <li>list item 2</li>
    11    <li class="third-item">list item 3</li>
    12    <li>list item 4</li>
    13    <li>list item 5</li>
    14 </ul>
    15 
    16 <script>
    17 $('li.third-item').next().css('background-color', 'red');
    18 </script>
    19 
    20 </body>
    21 </html>

    这个例子的结果是,只有list item 4背景色变为红色

     

    nextAll([expr]):获取指定元素后边的所有同级元素

    andSelf():获取指定元素后边的所有同级元素,之后加上指定的元素

    即:自己及其之后的所有同级元素

    prev():获取指定元素的上一个同级元素(是上一个哦)。

    prevAll():获取指定元素的前边所有的同级元素。

    获取子元素

    1、查找子元素方式1:>

    例如:var aNods = $("ul > a");查找ul下的所有a标签

    2、查找子元素方式2:children()

    3、查找子元素方式3:find()

    这里再简单介绍以下children()和find()的异同:

    1> children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样。 
    2> children方法获得的仅仅是元素一下级的子元素,即:immediate children。 
    3> find方法获得所有下级元素,即:descendants of these elements in the DOM tree 
    4> children方法的参数selector 是可选的(optionally),用来过滤子元素,但find方法的参数selector方法是必选的。 

    5> find方法事实上可以通过使用 jQuery( selector, context )来实现。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').

    例:

     1 <ul class="level-1">
     2   <li class="item-i">I</li>
     3   <li class="item-ii">II
     4     <ul class="level-2">
     5       <li class="item-a">A</li>
     6       <li class="item-b">B
     7         <ul class="level-3">
     8           <li class="item-1">1</li>
     9           <li class="item-2">2</li>
    10           <li class="item-3">3</li>
    11         </ul>
    12       </li>
    13       <li class="item-c">C</li>
    14     </ul>
    15   </li>
    16   <li class="item-iii">III</li>
    17 </ul>

    使用:$('ul.level-2').children().css('border', '1px solid green'); 的效果是:

    使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是: 

     

    下面还有一些:

    1 :first :last

    $('div:first');
    $('div:last');
    获取所有div元素的第一个元素和最后一个元素

    2 :even :odd$('div:even');

    匹配所有div对象中的偶数元素
    $('div:odd'):
    匹配所有div对象中的奇数元素

    3 eq(index)

    $('div:eq(2)')
    匹配第二个div对象
    这个参数是数字,所以在获取某些对象时也比较灵活.

    4 :gt(index) :lt(index)

    $('div:gt(1)')
    匹配小于下标的所有元素
    $('div:lt(2)')
    匹配大于下标的所有元素

    5 :contains(text)

    $('div:contains("txt")');
    匹配内部包含有文本txt元素的对象

    6 :empty

    $('div:empty')
    匹配所有没有子元素的对象

    7 :has(selector)

    $('div:has("#abc")')
    返回含有#abc子元素的div对象

    8 :hidden :visible

    $('div:hidden')
    匹配所有隐藏对象
    $('div:visible')
    匹配所有可见的对象

    $("div[id]")                查找所有含有 id 属性的div元素。
    $("div[id='ajaxa']")        查找 id 为 ajaxa 的 div 元素。
    $("div[id!='ajaxa']")       查找 id 不为 ajaxa 的 div 元素。
    $("div[id^='ajaxa']")       查找 id 以 ajaxa 开头的 div 元素。
    $("div[id$='ajaxa']")       查找 id 以 ajaxa 结尾的 div 元素。
    $("div[id*='ajaxa']")       查找 id 含 ajaxa 的 div 元素。
    $("div[id][class='ajaxa']") 查找存在id属性并且类为ajaxa的 div 元素。

     

    jquery 获得tagName 的方法:$('#id').attr("tagName");jquery把tagName 当成属性了。

  • 相关阅读:
    TRansportation ANalysis and SIMulation System
    源数据的换行符
    小学生的加减乘除
    ORDER BY today_used ASC' % (MAX_USED_TIMES)
    线程污染 重复请求
    SQLite支持的并发访问数
    数组和链表的对比
    第一类 第二类 反向 螺旋 数学归纳法
    阶乘
    api 爬虫 避免相同 input 在信息未更新 情况下 重复请求重复
  • 原文地址:https://www.cnblogs.com/fwpsl/p/7147101.html
Copyright © 2020-2023  润新知