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">测试一< ...
一周排行
  • 本次学习的内容为根据DBHelper对数据库里的数据进行增删改查 具体内容为: 一.编写程序     1.创建工程——Mangage    2.在src目录下创建五个包,分别为DAO,DBHelper,Entity, ...
  • 一.库strcpy函数,把一个字符串复制到另外一个字符串中#include<stdio.h> #include<assert.h> char* my_srtcpy( char *srt, ch ...
  • 问题描述 1 通常情况下,当我们点击MyEclipse任务栏上的部署按钮时,会弹出项目部署框,如下图: 2 但我们有时也会遇到点击部署按钮怎么也弹不出项目部署框的问题. END 解决方法一: 1 找到MyEclips ...
  • 经常用apache的目录浏览功能共享文件,换了Fedora再共享文件时发现中文目录和中文文件名乱码.百度,google,N小时加不断尝试终于找到解决办法.现共享出来以备后用.        目录浏览时中文乱码     ...
  •  近日,百度数据显示在android 和IOS 的应用差别还是很大,同时入围前10的,只有UC和QQ,360在android 第4名,而在IOS却不在10名内.互联网竞争激烈,移动互联网的竞争更加的激烈,要求企业更加 ...
  • 题目来源:code[VS] 题目描述 Description       Ural大学有N个职员,编号为1~N.他们有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.每个职员有一个快乐 ...
  • C++精品视频课程推荐-开启面向对象世界的大门
    亲爱的学员们:您好!51CTO学院为梦想增值,诚邀您的关注!51CTO学院致力于让专家分享 ...
  • CnetOS 下编译安装 MySql 查看是否存在旧版本: rpm -qa | grep mysql 卸载旧版本: rpm -e mysql   #普通删除模式 rpm -e --nodeps mysql   #强力 ...
  • sysinternals利器系列之——ZoomIt
    今天在sysinternals网站上看到一个有趣的工具,名字叫ZoomIt,看名字我猜测它 ...