jQuery选择器面试题
$(
"#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选择器面试题的更多相关文章
- JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解
JQuery选择器大全 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素 ...
- jQuery经典面试题及答案精选(转)
jQuery是一款非常流行的Javascript框架,如果你想要从事Web前端开发这个岗位,那么jQuery是你必须掌握而且能够熟练应用的一门技术.本文整理了一些关于jQuery的经典面试题及答案,分 ...
- jQuery经典面试题及答案精选
jQuery是一款非常流行的Javascript框架,如果你想要从事Web前端开发这个岗位,那么jQuery是你必须掌握而且能够熟练应用的一门技术.本文整理了一些关于jQuery的经典面试题及答案,分 ...
- jQuery简单面试题
干货 | jQuery经典面试题及答案精选 面试题来啦! 毫无疑问,JavaScript是一门如此有用,但总是被低估的一门语言. 在 jQuery 粉墨登场之前,我们曾经会写出冗长的JavaScrip ...
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jQuery的案例及必知重要的jQuery选择器
Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
随机推荐
- 09 ListView监听 ExpandableListView的使用总结
1.ListView的滚动监听 >setOnScrollListener 监听 //ListVIew滚动监听 lv.setOnScrollListener(new OnScrollListene ...
- Day 21:Docker 入门教程
几个月以前,红帽(Red Hat)宣布了在 Docker 技术上和 dotCloud 建立合作关系.在那时候,我并没有时间去学习关于 Docker 的知识,所以在今天,趁着这个 30 天的挑战,我决定 ...
- Dynamics CRM 2015 Online Update1 UI界面的更新变化
听说出 Dynamics CRM 2015 Online Update1了,立马跑去申请了个30天试用版简单的看了下,UI上的变化还是让人耳目一新的,也可能是被CRM2013的UI蹂躏太久了没 ...
- Java中类的创建及类与对象的关系
//import java.util.Scanner; //创建一个类 class Person{ //属性和方法的定义不是必须的 //属性 String name ; int age ; //方法 ...
- 谈谈Ext JS组件之引子
Ext JS组件,对于Ext JS开发人员来说,应当不会陌生,毕竟做开发,都必须与它打交道.对于这样一个大家都熟悉的东西,为什么要用一个专题的形式来写呢?是否有这方面的需要?还不如去写点使用技巧? 确 ...
- Google的两种广告推广方式
1搜索关键字广告推送:AdWords: 覆盖广泛:在全球最大的搜索和网络平台上进行推广. 定位精准:锁定目标客户群体,让潜在客户轻松找上门. 成本可控:仅当用户点击广告时,您才支付费用. 2.网站内容 ...
- H5学习之旅-H5列表(8)
列表的基本语法 ol:有序列表 ul:无序列表 li:列表项 dl:列表 dt:列表项 dd:列表描述 常用列表 1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心 ...
- css3的样式讲解-css学习之旅(3)
css背景 属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:bac ...
- Android Widget工作原理详解(一) 最全介绍
转载请标明出处:http://blog.csdn.net/sk719887916/article/details/46853033 ; Widget是安卓的一应用程序组件,学名窗口小部件,它是微型应用 ...
- 用C语言实现Ping程序功能
本文转载自:http://www.ibm.com/developerworks/cn/linux/network/ping/ ping命令是用来查看网络上另一个主机系统的网络连接是否正常的一个工具.p ...