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">测试一< ...
一周排行
  • PEX无人值守装系统,为集群、测试机、装机。
      集群无人值守装机(手册)一.配置DHCP服务.1.配置静态IP[[email protected] ...
  • SVN导出/导入、SVN备份/还原小白版
    一.导出: 1.进入svn安装路径bin文件夹下,使用 cd 命令. 在windows下, ...
  • 求整数组环中最大子数组的和升级版
    题目:返回一个整数数组中最大子数组的和 额外要求:让数组手尾相连,构成一个环,允许a[n] ...
  • (作者:顾宏军 为开源杂志写的系列文章,这是第一部分,在<开源>杂志第六期上,其它的都还未写,呵呵.)经过多年的发展,开源已成为一种趋势,开源软件成为软件产业的一股重要力量,在CRM.ERP等企业应用领域 ...
  • 终于把药品捐献了--了了我一大心愿.今天是哀悼日的第二天,昨天晚上老公从美国出差回来.本来做好了很强的心里准备感受国内的抗灾自救的气氛,可是当我们路过天安门广场,还是那样安静祥和的地方,看见国旗在一半的位置低垂悬挂着 ...
  • proxy代理服务器的使用
    proxy: 经常看到用proxy做代理服务器来访问 代理服务器(Proxy Server ...
  • 在需求:需求获取技术之 问卷调查中介绍了问卷调查技术技术,本篇继续介绍文档分析(Document Analysis)技术,这种技术在我们自己学习架构时也非常有用,像我之前做的报表引擎基本上就是参考已有产品资料以及试用 ...
  • 简介PasswordStrength控件是用来提示用户输入密码的情况,用户在密码框中输入密码时,在文本框的后面会有一个提示,显示密码的强度,这种提示有两种方式:文本和进度条,提示信息的位置也可以由我们来自己设置,样式 ...
  • 首注:本学习教程为传智播客汤阳光讲师所公布的免费OA项目视频我的文字版实践笔记,本人用此来加强巩固自己开发知识,如有网友转载,请注明.谢谢. 一 权限管理分析: 1.权限的含义: 即控制管理功能的使用.比如登陆,需要 ...
  • 虽然用于指定字符串常量的标准语法通常都很方便,但是当字符串中包含了很多单引号或反斜线时很难理解它,因为每一个都需要被双写.要在这种情形下允许可读性更好的查询,PostgreSQL提供了另一种被称为“美元引用”的方式来 ...