jquery获取对象的方法足以应付常见的各种类型的对象


Posted in Javascript onMay 14, 2014

(1)基本对象获取

$("*")
获取所有对象

$("#element")
获取id为element的对象等同于document.getElementById(“element”);

$(".abc")
获取class为abc的对象

$("div")
获取html中所有的div元素

$("#a,.b,p")
获取id为a和class为b以及所有p元素

$("#a .b p")
获取id为a并且class为b元素下的p元素

(2)层级对象获取

$("div>input")
获取div下所有input对象

$("div+h")
获取紧跟在div后的一个h元素

$("div~p")
获取在元素div之后的所有p元素

(3)简单对象获取

$("element:first")
获取页面上某个元素的第一个如$("div:frist")表示第一个div

$("element:last")
获取页面上某个元素的最后一个如$("div:frist")表示最后一个div

$("element:not(selector)")
去除所有与选择器匹配的元素如$("input:not(:check)")表示所有未被选中的复选框

$("element:even")
获取element元素的偶数行

$("element:odd")
获取元素的奇数行

$("element:eq(index)")
获取特定索引的元素 如$("div:el(2)")表示第三个div

$("element:gt(index)")
匹配所有大于给定索引值的元素

$("element:lt(index)")
匹配所有小于给定索引的元素

$(":header")
匹配h标记的元素

$("element:animated")
匹配所有没有执行动画效果的元素

(4)内容对象的获取和对象的可见性

$("Element:contains(text)")
元素中的文本是否包含某个字母或字符串

$("Element:empty")
获得不包含文本或子元素的元素对象

$("Element:parent")
获得对象元素包含文本或子元素

$("Element:has(selector)")
匹配含有某个元素是否包含某个元素 如$("p:has(span)")表示所有包含span元素的p元素

$("Element:hidden")
匹配所有不可见元素,包括display:none 以及input的属性是hidden的元素

$("Element:visible")
匹配所有课件元素

(5)对象获取进阶

$("Element[id]")
获取所有带有id属性的元素

$("Element[attribute=abcd]")
获取所有某个属性为abcd的元素

$("Element[attribute!=abcd]")
获得所有某个属性不为abcd的元素

$("Element[attribute^=ab]")
获得所有某个属性以ab开头的元素

$("Element[attribute$=ab]")
获得所有某个属性以ab结尾的元素

$("Element[attribute*=ab]")
获得所有含有某个属性包含ab的元素

$("Element[selector1][selector2][.....]")
符合属性选择器 如$("input[id][name][value=abcd]")表示获得带有ID、Name以及value是abcd的input元素

(6)子元素的获取

$("Element:nth-child(index)")
选择父级下的第N个子元素,索引从1开始
:nth-child(even)偶数
:nth-child(odd)奇数
:nth-child(3n)表达式
:nth-child(2)索引
:nth-child(3n+1)表达式

$("Element:first-child")
父级下的第一个子级元素

$("Element:last-child")
父级下的最后一个子级元素

$("Element:only-child")
父级下的唯一的一个子级元素

(7)表单对象的获取

$(:input)
只能匹配input元素类型为 input button select textarea

$(:text)
所有当行文本框

$(:password)
所有密码框

$(:radio)
所有单选按钮

$(:checkbox)
所有复选框

$(:submit)
所有提交按钮

$(:image)
所有图片域
$(:reset)
所有充值按钮

$(:button)
所有按钮

$(:file)
所有的文件上传域

$(:hidden)
所有不可见元素或者type为hidden的元素

$(:enabled)
所有可用input元素

$(:disabled)
所有不可用input元素

$(:checked)
所有复选框元素

$(:selected)
所有下拉表

(8)元素属性的设置与移除

$("Element").attr(name)
取得第一个匹配元素的属性值 如$("img").attr("src");

$("Element").attr({key:value,key:value,......})
为某一个元素一次性设置多个属性

$("Element").attr(key,value)
为某个元素设置属性

$("Element").attr(key,function)
为所有匹配的元素设置一个计算的属性

$("Element").removeAttr(name)
移除某一个属性

Javascript 相关文章推荐
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
jquery-syntax动态语法着色示例代码
May 14 #Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 #Javascript
调整小数的格式保留小数点后两位
May 14 #Javascript
原生js的弹出层且其内的窗口居中
May 14 #Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 #Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 #Javascript
JavaScript函数获取事件源的小例子
May 14 #Javascript
You might like
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jquery使用经验小结
2015/05/20 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
Python获取文件所在目录和文件名的方法
2017/01/12 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
python 画图 图例自由定义方式
2020/04/17 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
巾帼志愿者活动方案
2014/08/17 职场文书
后进生评语大全
2015/01/04 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
婚宴来宾致辞
2015/07/28 职场文书
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS