Jquery 获取对象的几种方式介绍


Posted in Javascript onJanuary 17, 2014

1、JQuery的核心的一些方法
each(callback) '就像循环
$("Element").length; ‘元素的个数,是个属性
$("Element").size(); '也是元素的个数,不过带括号是个方法
$("Element").get(); ‘某个元素在页面中的集合,以数组的形式存储
$("Element").get(index); '功能和上面的相同,index表示第几个元素,数组的下标
$("Element").get().reverse(); ‘把得到的数组方向
$("Element1").index($("Element2")); '元素2在元素1中的索引值是。

2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦,但是他俩是可以转换滴)
$("*") ‘表示获取所有对象 但是我至今没这样用过
$("#XXX") '获得 id=XXX 的元素对象(id可以是标签的id或CSS样式id) 常用

$("input[name='username']") 获得input标签中name='userName'的元素对象 常用

$(".abc") ' 获得样式class的名字是.abc的元素对象 常用
$("div") ' 标签选择器 选择所有的div元素 常用
$("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
$("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素

3、层级元素获取
$("Element1 Element2 Element3 ....") '前面父级 后面是子集
$("div > p") '获取div下面的所有的 p元素
$("div + p") 'div元素后面的第一个 p元素
$("div ~ p") 'div后面的所有的 p元素

4、简单对象获取
$("Element:first") 'HTML页面中某类元素的第一个元素
$("Element:last") 'HTML页面中某类元素的最后一个元素
$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如:$("input:not(:checked)") 表示选择所有没有选中的复选框
$("Element:even") '获得偶数行
$("Element:odd“)'获得奇数行
$("Element:eq(index)") '取得一个给定的索引值
$("Element:gt(index)") '取得给定索引值的元素 之后的所有元素
$("Element:lt(index)") '取得给定索引值的元素 之前的所有元素

5、内容对象的获取和对象可见性
$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:partnt") '获得元素包含子元素或文本的
$("Element:has(selector)") ‘是否包含某个元素, 如:$("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素

6、其他对象获取方法
$("Element[id]") '所有带有ID属性的元素
$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素
$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素
$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素
$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素
$("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素
$("Element[selector1][selector2][....]") '符合属性选择器,比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。

7、子元素的获取
$("Element:nth-child(index)") '选择父级下面的第n个元素
$("Element:nth-child(even)") '选择父级下面的偶数
$("Element:nth-child(odd)") '选择父级下面的奇数
$("Element:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父级下面的第一个子元素
$("Element:last-child") '选择父级下面的最后一个子元素
$("Element:only-child") '匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt

8、表单对象获取
$(:input)//查找所有的Input元素,当然也包括下拉列表,文本域,单选框,复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域,例如
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素,作用与上相反
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表

9、元素属性的设置与移除
$("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src")
$("Element".attr(key,value)") '某一个元素设置属性
$("Element".attr({key:value,key1:value,....})) ‘为某个元素一次性设置多个属性
$("Element").attr(key,function) '为所有匹配的元素设置一个计算的属性值。
$("Element").removeAttr(name)//移除某一个属性

Javascript 相关文章推荐
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 #Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 #Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 #Javascript
js使用eval解析json(js中使用json)
Jan 17 #Javascript
js window.open弹出新的网页窗口
Jan 16 #Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 #Javascript
jQuery获得内容和属性示例代码
Jan 16 #Javascript
You might like
推荐一篇入门级的Class文章
2007/03/19 PHP
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
javascript测试题练习代码
2012/10/10 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
jQuery事件用法详解
2016/10/06 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
python实现多线程的两种方式
2016/05/22 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
python如何制作英文字典
2019/06/25 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
公司周年庆典策划方案
2014/05/17 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
物资采购管理制度
2015/08/06 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
python函数的两种嵌套方法使用
2022/04/02 Python