$("#myELement")   
选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div")          
选择所有的div标签元素,返回div元素数组
$(".myClass")     
选择使用myClass类的css的所有元素
$("*")            
选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$(
"#myELement,div,.myclass")
 
层叠选择器:
$("form
input"
)        
选择所有的form元素中的input元素
$("#main
> *"
)         
选择id值为main的所有的子元素
$("label
+ input"
)    
选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev
~ div"
)      
同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
 
基本过滤选择器:
$("tr:first")              
选择所有tr元素的第一个
$("tr:last")               
选择所有tr元素的最后一个
$("input:not(:checked)
+ span"
)  
 
过滤掉:checked的选择器的所有的input元素
 
$("tr:even")              
选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
 
$("tr:odd")               
选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)")            
选择所有的td元素中序号为2的那个td元素
$("td:gt(4)")            
选择td元素中序号大于4的所有td元素
$("td:ll(4)")             
选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
内容过滤选择器:
 
$("div:contains('John')")
选择所有div中含有John文本的元素
$("td:empty")          
选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)")       
选择所有含有p标签的div元素
$("td:parent")         
选择所有的以td为父节点的元素数组
可视化过滤选择器:
 
$("div:hidden")       
选择所有的被hidden的div元素
$("div:visible")       
选择所有的可视化的div元素
属性过滤选择器:
 
$("div[id]")             
选择所有含有id属性的div元素
$("input[name='newsletter']")   
选择所有的name属性等于
'newsletter'的input元素
 
$("input[name!='newsletter']")
选择所有的name属性不等于
'newsletter'的input元素
 
$("input[name^='news']")        
选择所有的name属性以
'news'开头的input元素
$("input[name$='news']")        
选择所有的name属性以
'news'结尾的input元素
$("input[name*='man']")         
选择所有的name属性包含
'news'的input元素
 
$("input[id][name$='man']")   
可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
 
子元素过滤选择器:
 
$("ul
li:nth-child(2)"
),$("ul
li:nth-child(odd)"
),$("ul
li:nth-child(3n + 1)"
)
 
$("div
span:first-child"
)         
返回所有的div元素的第一个子节点的数组
$("div
span:last-child"
)          
返回所有的div元素的最后一个节点的数组
$("div
button:only-child"
)      
返回所有的div中只有唯一一个子节点的所有子节点的数组
 
表单元素选择器:
 
$(":input")                 
选择所有的表单输入元素,包括input, textarea, select 和 button
 
$(":text")                    
选择所有的text input元素
$(":password")          
选择所有的password input元素
$(":radio")                  
选择所有的radio input元素
$(":checkbox")           
选择所有的checkbox input元素
$(":submit")              
选择所有的submit input元素
$(":image")                
选择所有的image input元素
$(":reset")                  
选择所有的reset input元素
$(":button")               
选择所有的button input元素
$(":file")                    
选择所有的file input元素
$(":hidden")              
选择所有类型为hidden的input元素或表单的隐藏域
 
表单元素过滤选择器:
 
$(":enabled")            
选择所有的可操作的表单元素
$(":disabled")           
选择所有的不可操作的表单元素
$(":checked")           
选择所有的被checked的表单元素
$("select
option:selected"
)
选择所有的select 的子元素中被selected的元素
 
  
 
选取一个
name 为”S_03_22″的input text框的上一个td的text值
$(”input[@
name =S_03_22]“).parent().prev().text()
 
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@
name ^=
'S_']“).not(”[@
name $=
'_R']“)
 
一个名为
radio_01的radio所选的值
$(”input[@
name =radio_01][@checked]“).val();
 
  
 
  
 
$("A
B"
)
查找A元素下面的所有子节点,包括非直接子节点
$("A>B")
查找A元素下面的直接子节点
$("A+B")
查找A元素后面的兄弟节点,包括非直接子节点
$("A~B")
查找A元素后面的兄弟节点,不包括非直接子节点
 
1.
$(
"A
B"
)
查找A元素下面的所有子节点,包括非直接子节点
 
例子:找到表单中所有的
input 元素
 
HTML
代码:
 
<form>
<label>Name:</label>
<input
name=
"name" />
<fieldset>
      <label>Newsletter:</label>
      <input
name=
"newsletter" />
</fieldset>
</form>
<input
name=
"none" />
jQuery
代码:
 
$("form
input"
)
结果:
 
[
<input name=
"name" />,
<input name=
"newsletter" />
]
 
2.
$(
"A>B")
查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。
 
HTML
代码:
 
<form>
<label>Name:</label>
<input
name=
"name" />
<fieldset>
      <label>Newsletter:</label>
      <input
name=
"newsletter" />
</fieldset>
</form>
<input
name=
"none" />
jQuery
代码:
 
$("form
> input"
)
结果:
 
[
<input name=
"name" />
]
 
3.
$(
"A+B")
查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在
label 后面的 input 元素
 
HTML
代码:
 
<form>
<label>Name:</label>
<input
name=
"name" />
<fieldset>
      <label>Newsletter:</label>
      <input
name=
"newsletter" />
</fieldset>
</form>
<input
name=
"none" />
jQuery
代码:
 
$("label
+ input"
)
结果:
 
[
<input name=
"name" />,
<input name=
"newsletter" />
]
 
 
4.
$(
"A~B")
查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的
input 元素
 
HTML
代码:
 
<form>
<label>Name:</label>
<input
name=
"name" />
<fieldset>
      <label>Newsletter:</label>
      <input
name=
"newsletter" />
</fieldset>
</form>
<input
name=
"none" />
jQuery
代码:
 
$("form
~ input"
)
结果:
 
[
<input name=
"none" />
]

jQuery选择器面试题的更多相关文章

  1. JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解

    JQuery选择器大全   jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素 ...

  2. jQuery经典面试题及答案精选(转)

    jQuery是一款非常流行的Javascript框架,如果你想要从事Web前端开发这个岗位,那么jQuery是你必须掌握而且能够熟练应用的一门技术.本文整理了一些关于jQuery的经典面试题及答案,分 ...

  3. jQuery经典面试题及答案精选

    jQuery是一款非常流行的Javascript框架,如果你想要从事Web前端开发这个岗位,那么jQuery是你必须掌握而且能够熟练应用的一门技术.本文整理了一些关于jQuery的经典面试题及答案,分 ...

  4. jQuery简单面试题

    干货 | jQuery经典面试题及答案精选 面试题来啦! 毫无疑问,JavaScript是一门如此有用,但总是被低估的一门语言. 在 jQuery 粉墨登场之前,我们曾经会写出冗长的JavaScrip ...

  5. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  6. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  7. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  8. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  9. 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

随机推荐

  1. 使用maven将项目打成jar包

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  2. Servlet读取文件的最好的方式

    在java web 开发的时候不可避免的会读取文本信息,但是方式不同,所付出的代价也是不一样的,今天学到了一个比较好的实用性的技巧,拿来与大家分享一下. 读取属性配置文件 之所以说成是读取属性(pro ...

  3. 如何在Cocos2D游戏中实现A*寻路算法(五)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

  4. Swift基础之Swift调用OC语言文件使用步骤

    Swift语言中,有很多封装类并没有,如果需要使用到,就需要桥接OC语言中的类,这时候就需要使用桥接头文件,一下是使用的步骤: 创建一个Swift项目Demo,然后新建一个OC语言的文件 如图: 创建 ...

  5. iOS中大流中的自定义cell 技术分享

    AppDelegate.m指定根视图 self.window.rootViewController = [[UINavigationController alloc] initWithRootView ...

  6. android开发技巧——仿新版QQ锁屏下弹窗

    新版的qq,可以在锁屏下弹窗显示qq消息,正好目前在做的项目也需要这一功能.经过各种试验和资料查找,终于实现,过程不难,但是却有一些地方需要注意. 下面是实现过程. 1.使用Activity,而不是V ...

  7. android异步任务asyntask详解

    在Android中实现异步任务机制有两种方式,Handler和AsyncTask. Handler模式需要为每一个任务创建一个新的线程,任务完成后通过Handler实例向UI线程发送消息,完成界面的更 ...

  8. C语言的布尔类型(_Bool)

    也许很多人都和我一样,不知道现在的C语言已经有了布尔型:从C99标准开始,类型名字为"_Bool". 在此之前的C语言中,使用整型int来表示真假.在输入时:使用非零值表示真:零值 ...

  9. hello 内核模块

    #ifndef __KERNEL__ # define __KERNEL__ #endif #ifndef MODULE # define MODULE #endif #include <lin ...

  10. 【Unity Shaders】Diffuse Shading——向Surface Shader添加properties

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...