jQuery Selector选择器小结


Posted in Javascript onMay 06, 2010

//jQuery 选择器 $
//$(expression,[context]) return jQuery
//Unit One
//expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素

// $("*"); // 表示页面所有元素标签
// $("th, td") // 表示所有<th><td>元素标签
// $("a") // 表示所有<a>元素标签
// $("div#onlydiv"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配
// $("#rating"); // 表示id=rating的元素
// $("#orderedlist > li"); // 表示id=orderedlist 所有子元素,但不包括子元素下的子元素
// $("#orderedlist li:last"); // 表示id=orderedlist 中li最后一个元素
// $("#orderedlist li:first"); // 表示id=orderedlist 中li第一个元素
// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中li第(N)个元素 n为数组下标
// $("button:only-child"); //表示 css选择中的它为父容器唯一的元素
// $(".stuff:empty"); // 表示css选择中的空元素
// $(".buttons:enabled"); // 表示css选择中的正常启用的元素
// $(".buttons:disabled"); // 表示css选择中的非启用元素
// $("input:checked"); // 表示css选择中的选中的元素
// $("button:not(.not)"); // 表示css选择中的去除not()中的元素
// $("button.not"); // 表示css选择中的class=not的元素 $(".CLSS")为全文档匹配
// $("#orderedlist2 li"); // 表示id=orderedlist 所有子元素且包括所有子元素的子元素
// //alert($("#orderedlist ~ li").length);
// $("#orderedlist,.buttons,li"); //匹配 css选择符的元素

//expression 之 根据元素属性选择
// alert($("button[@class]").length); // 表示有class属性的元素
// alert($("button[@class=not").length); // 表示有class属性且值等于not的元素
// alert($('button[@class^=not').length); // 表示有class属性且值开头匹配not的元素
// alert($('button[@class$=not').length); // 表示有class属性且值结尾匹配not的元素
// alert($('button[@class*=not').length); // 表示有class属性且值中匹配not的元素
//expression 之 XPATH 过滤器 XPATH语法来表示需要选择的页面元素
//$("ol[@id^='orderedlist']").find("li:contains('First')").each(function(i) {
//// $(this).html( $(this).html() + " BAM! " + i );
// $(this).mouseover(function(){
// $(this).css("color","red");
// });
// $(this).mouseout(function(){
// $(this).css("color","#000");
// });
// });
//查找ol标签且属性 id=orderedlist的所有元素,这里有两种写法
//ol[@id='orderedlist'] 定位父元素 直接用each 迭代
//ol[@id='orderedlist']/* 所有父元素下的子元素 使用find('child- element').each()迭代

//Unit two
///$( html, [ownerDocument]) return jQuery
//这个函数允许传入html元素文本,构造器会产生这个HTML文本所创造的jQuery对象,这个对象可以是原本没有的,也可是原本页面上存在的
//$('<p>hello</p>').appendTo("h2"); //生成一个标记文本 并追加到页面h2标签内
//也可以 将原本页面元素取出追加
//$("input",this).appendTo("h2"); //注意,这里取出的页面元素,是移动!而不是复制

///$(elements) return jQuery
//这个函数允许直接传入DOM
//$(document.forms[0].elements).appendTo("h2"); // 可以参考DOM文档
//$(callback) return jQuery

//以下是selector一些说明
/*
基础:

#id:根据对象的id属性获取对象。
element:匹配某一HTML标签的所有对象
.class:根据对象的class属性获取对象
*:获取所有的对象
selector1, selector2, selectorN:获取多个选择符的合集,不剔出重复项

层级选择符:
ancestor descendant:这个选择符就是空格,表示先找到第一个选择符的所有对象,然后在他的子孙节点中找到所有符合第二个选择符的对象。
parent > child:这个选择符就是大于号,表示先找到第一个选择符的所有对象,然后在他的子节点(不能是孙节点)中找到所有符合第二个选择符的对象。
prev + next:这个选择符就是加号,表示先找到第一个选择符的所有对象,然后找和他同级的紧跟着的下一个节点同时符合第二个选择符的对象。
prev ~ siblings:这个选择符就是~号,表示先找到第一个选择符的所有对象,然后找和他同级的以后所有节点里面同时符合第二个选择符的对象。

基础过滤符:
:first:匹配多个对象中的第一个对象
:last:匹配多个对象中的最后一个对象
:not(selector):匹配去除了not后面选择符中内容的项
:even:匹配所有对象中的第偶数个
:odd:匹配所有对象中的第奇数个
:eq(index):匹配某一下表的单独某元素
:gt(index):匹配大于某一下标的所有元素
:lt(index):匹配小于某一下标的所有元素
:header:匹配所有的header元素,例如 h1,h2,h3,h4,h5,h6
:animated:匹配所有有动画效果的元素

文本过滤符:
:contains(text):匹配内部拥有该文本元素的对象,包含间接有用的情况
:empty:匹配所有没有子元素的对象
:has(selector):匹配所有至少含有一个子选择符的对象
:parent:匹配所有的父对象,父对象包含那些只含有文本的对象

可见性过滤符:
:hidden:匹配所有隐藏对象,或者input中的hidden类型
:visible:匹配所有可见的对象

属性过滤符:
[attribute]:匹配拥有某一属性的所有对象
[attribute=value]:匹配拥有某一属性和值的对象
[attribute!=value]:匹配拥有某一属性,且不是某一值的对象
[attribute^=value]:匹配拥有某一属性,且以某一值开头的对象
[attribute$=value]:匹配拥有某一属性,且以某一值结尾的对象
[attribute*=value]:匹配拥有某一属性,且包含某一值的对象
[selector1] [selector2][selectorN]:匹配同时符合多个属性选择符的对象

子过滤符:
:nth- child(index/even/odd/equation):匹配子元素中的某一下标/偶数/奇数/等式的对象,:eq(index)只能匹配某单一对象的子元素特征,而这个方法可以匹配多个对象的某一子元素共同特征
:first-child:匹配第一个子元素
:last- child:匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作
:only-child:如果一个父元素只有一个子元素,就匹配这个子元素

表单过滤符
Name Type

:input Returns: Array<Element(s)>
匹配表单内input元素

:text Returns: Array<Element(s)>
匹配表单内 input type为text的元素

:password Returns: Array<Element(s)>
匹配表单内input type为password的元素

:radio Returns: Array<Element(s)>
匹配表单内input type为radio的元素

:checkbox Returns: Array<Element(s)>
匹配表单内input type为checkbox的元素

:submit Returns: Array<Element(s)>
匹配表单内input type为submit的元素

:image Returns: Array<Element(s)>
匹配表单内image的元素

:reset Returns: Array<Element(s)>
匹配表单内 input type为reset的元素

:button Returns: Array<Element(s)>
匹配表单内input type为button的元素

:file Returns: Array<Element(s)>
匹配表单内input type为file的元素.

:hidden Returns: Array<Element(s)>
匹配表单内input type为hidden的元素或者hidden区域

:enabled Returns: Array<Element(s)>
匹配所有启用元素

:disabled Returns: Array<Element(s)>
匹配所有非启用元素

:checked Returns: Array<Element(s)>
匹配所有选中元素

:selected Returns: Array<Element(s)>
匹配所有下拉列表选中元素

*/

Javascript 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
Jquery 动态添加按钮实现代码
May 06 #Javascript
jquery DOM操作 基于命令改变页面
May 06 #Javascript
JQuery 学习笔记01 JQuery初接触
May 06 #Javascript
Jquery 扩展方法
May 06 #Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 #Javascript
屏蔽F1~F12的快捷键的js函数
May 06 #Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 #Javascript
You might like
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
Wordpress php 分页代码
2009/10/21 PHP
小谈php正则提取图片地址
2014/03/27 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python中正则表达式与模式匹配
2019/05/07 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
Python如何在bool函数中取值
2020/09/21 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
解决python3输入的坑——input()
2020/12/05 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
技术总监个人的自我评价范文
2013/12/18 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
科技工作者先进事迹
2014/08/16 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
自查自纠工作总结
2014/10/15 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
九年级语文教学反思
2016/03/03 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python