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 相关文章推荐
判断ie的两种简单方法
Aug 12 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
原生js实现俄罗斯方块
Oct 20 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
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
JS中创建函数的三种方式及区别
2016/03/13 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python的requests网络编程包使用教程
2016/07/11 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
python如何实现一个刷网页小程序
2018/11/27 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
简单了解python数组的基本操作
2019/11/26 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
综合实践教学反思
2014/01/31 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
民间个人借款协议书
2014/09/30 职场文书
地球一小时活动总结
2015/02/27 职场文书