jQuery选择器。5.21深夜还在编码的你

$( });


2. class选择器(遍历css类元素)
将class="cube"的元素背景色设为黑色

          $( });


3. element选择器(遍历html元素)
将p元素的文字大小设置为12px

          $( });


4. * 选择器(遍历所有元素)

                   $( });


5. 并列选择器

                   $(  
 
   $(    $(    $(  });

$( $( }); <span>G1</span> <span>G2</span> <span>G3</span>

2. :not(取非元素)

              $(         }); 
 <div>G1</div>
 <div   
 <div>
      <div  </div>

当G1所在div和G2所在div是父子关系时,G1和G2都会变色。

3. :even和:odd(取偶数索引或奇数索引元素,索引从0开始,even表示偶数,odd表示奇数)

              $(             $(  
  
 
 <table width=     <tbody>
         <tr><td>A</td></tr>
         <tr><td>B</td></tr>
         <tr><td>C</td></tr>
         <tr><td>D</td></tr>
     </tbody>
 </table>
 $("#myELement")    $("div")          $(".myClass")     $("*")           $("form input")           $("#main > *")           $("label + input")      $("#prev ~ div")                          $(  
 <div>
         <span></span>
         <p>
             <span></span>
         </p>
 </div>


2. prev + next(下一个兄弟元素,等同于next()方法)

           $(            <p  <div></div>
 <div></div>
 <span  <div></div>


3. prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法)

           $(            
 <div  <div>G2</div>
 <span>G3</span>
 <div>G4</div>

$("div[id]") $("input[name='newsletter']") $("input[name!='newsletter']") $("input[name^='news']") $("input[name$='news']") $("input[name*='man']") <script type= $( </script> <ul> <li><a href= <li><a href= <li><a href= <li><a href= <li><a href= <li><a href= </ul>—— 分别为class= .main_shipin a:hover img{filter:Alpha(Opacity=);opacity: $("tr:first") $("tr:last") $("input:not(:checked) + span") $("div:hidden") $("div:visible") <html xmlns= <head runat= <title></title> <style type= .hid- .hid- </style> <script type= <script type= $( alert($( </script> </head> <body> <div <div <input type= </body> </html>

——3.2 :visible(取可见的元素)

下面的代码,最后一个div会有背景色

 <script type=          $(  </script>
 <div  <div  <input type= <div>
  </div>

$("div:contains('John')") $("td:empty") $("div:has(p)") $("td:parent") $( <dl> <dt>技术</dt> <dd>jQuery, .NET, CLR</dd> <dt>SEO</dt> <dd>关键字排名</dd> <dt>其他</dt> <dd></dd> </dl>

2. :empty(取不包含子元素或文本为空的元素)

              $( });

上面第三个dd会显示"没有内容"文本

3. :has(selector)(取选择器匹配的元素)

                           $(  
 <div>
     <h2>
          <span>B</span>
     </h2>
 </div>

4. :parent(取包含子元素或文本的元素)

              $(  
 <ol>
     <li></li>
     <li>A</li>
     <li></li>
     <li>D</li>
 </ol>

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)" $("div span:first-child") $("div span:last-child") $("div button:only-child") $(":input") $(":text") $(":password") $(":radio") $(":checkbox") $(":submit") $(":image") $(":reset") $(":button") $(":file") $(":hidden") 1 $(":enabled") 2 $(":disabled") 3 $(":checked") 4 $("select option:selected") <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> $("form input" [ <input name="name" />, <input name="newsletter" /> ]

    <form>
 <label>Name:</label>
 <input name="name" />
 <fieldset>
       <label>Newsletter:</label>
       <input name="newsletter" />
 </fieldset>
 </form>
 <input name="none" /> 
  $("form > input"  [ <input name="name" /> ] 
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> $("label + input" [ <input name="name" />, <input name="newsletter" /> ]

--

    <form>
 <label>Name:</label>
 <input name="name" />
 <fieldset>
       <label>Newsletter:</label>
       <input name="newsletter" />
 </fieldset>
 </form>
 <input name="none" /> 
  $("form ~ input"  [ <input name="none" /> ] 

更多相关文章
  • jQuery-1.9.1源码分析系列二jQuery选择器
    1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(""), $(null), $(undefined), $(false) ... // ...
  • 到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的例子是说HTML就像一个人的骨骼.器官,而CSS就是人的皮肤,有了这两样也就构成了一个植物人了,加上 ...
  • 转自:http://www.jb51.net/article/26261.htm一.JQuery与JavaScript 1.JavaScript库 使用过JavaScriptDOM的人都应该知道(比如昨天的练习),使用JSDOM进行页面的操作是十分麻烦的.比如获取.修改及添加子节点等这些操作.如果操 ...
  • JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)
    一.jQuery 选择器jQuery 选择器简介  - jQuery 选择器类似于 CSS 选择(定位元素,施加样式),能够实现定位元素,施加行为  - 使用 jQuery 选择器能够将内容与行为分离  - 学会使用选择器是学习 jQuery 的基础jQuery 选择器的优势  - 简洁的写法:  ...
  • 1.$event对象  $event对象其实就是潜在的jQuery事件对象,通过$event.target获取这个元素,通过$event.currentTarget获取子元素. 例如: <li ng-click="getApplicationListByType(1,$event)& ...
  •  买了<Jqeruy权威指南>很久,也粗略地过了一遍,现在需要用到相关的技术,所以重新理一遍. 整理一下自己的对jquery选择器的知识点.详细博文请见我的博客地址:http://www.hanluner.com/201111/77.html  没有船的海贼jquery选择器主要有几种方 ...
  • 在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对象:documentElement是Document对象的属性,返回的是文档根节点 对于HTML文档 ...
  • jquery选择器控制li点击css效果html代码:<ul id="aaa">    <li><a class="curricula qadown" href="#/activities">测试一< ...
一周排行