JQuery中根据属性或属性值获得元素(6种情况获取方法)


Posted in Javascript onJanuary 17, 2013

根据属性获得元素

1.比如要获取页面p标签中属性有id的元素

$("p[id]").css("color","red");

根据属性值获得元素
1.$。在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下:
HTML代码
<input name="newsletter" /> 
<input name="milkman" /> 
<input name="jobletter" />

jQuery 代码:
$("input[name$='letter']")

结果:
[ <input name="newsletter" />, <input name="jobletter" /> ]

2.!。选择器:[attribute!=value],匹配所有不含有指定的属性,或者属性不等于特定值的元素,此选择器等价于:not([attr=value])。
例子说明一下:
HTML代码

<input type="checkbox" name="newsletter" value="Hot Fuzz" /> 
<input type="checkbox" name="newsletter" value="Cold Fusion" /> 
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery 代码:
$("input[name!='newsletter']").attr("checked", true);

结果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

3.*。选择器:[attribute*=value],匹配给定的属性是以包含某些值的元素。举个例子说明一下:
HTML 代码:

<input name="man-news" /> 
<input name="milkman" /> 
<input name="letterman2" /> 
<input name="newmilk" />

jQuery 代码:
$("input[name*='man']")

结果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

4.@。匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即
可。

5.^。选择器:[attribute^=value],匹配给定的属性是以某些值开始的元素,下面举个例子来说明一下:
HTML 代码:

<input name="newsletter" /> 
<input name="milkman" /> 
<input name="newsboy" />

jQuery 代码:
$("input[name^='news']")

结果:
[ <input name="newsletter" />, <input name="newsboy" /> ]

6 获取指定属性且设定值中有指定字符串的元素
HTML 代码:

<input type="checkbox" name="newsletter" value="Hot Fuzz"/> 
<input type="checkbox" name="newsletter" value="Cold Fusion" /> 
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery代码:
$("input[name$='letter'][value$='zz']").attr("checked","true");支持多条件操作

当然了,也可以根据id属性或其他属性来获取,如$("input[id=id1]").css("color",red);
在jquery中,当使用$(”input[name='metaId']“).val()不能直接获得被选择的radio的值,只是获得 radio标签的第一个值,这可能jquery使用xpath语言了进行查找有关,而我们通常是想获得被选中的radio的值,有以下几种方法:
1,使用$(”input[name='metaId']:checked”).val()获得 //name代表radio中name属性名
2,使用$(”:radio:checked”).val()获得 //限制页面只有一组radio标签
Javascript 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
JavaScript控制Session操作方法
Jan 17 #Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 #Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 #Javascript
jquery选择器的选择使用及性能介绍
Jan 16 #Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 #Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 #Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 #Javascript
You might like
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
破解Session cookie的方法
2006/07/28 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
JS面向对象编程详解
2016/03/06 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
python操作 hbase 数据的方法
2016/12/18 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python学生信息管理系统(完整版)
2020/04/05 Python
将python图片转为二进制文本的实例
2019/01/24 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
英国床垫在线:Mattress Online
2016/12/07 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
小学教师岗位职责
2013/11/25 职场文书
党员评议个人总结
2014/10/20 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
2022漫威和DC电影上映作品
2022/04/05 欧美动漫