JQuery中属性过滤选择器用法实例分析


Posted in Javascript onMay 18, 2015

本文实例讲述了JQuery中属性过滤选择器用法。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>属性过滤选择器</title>
<style type="text/css">
div{width:200px;border:1px solid red;margin:10px auto;}  
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
 //==========举例1================
 //: $("div[id]") ; 说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
 showElements($("div[id]"));
 //==========举例2================
 //$("div[myTag]='tt2') 匹配给定的属性是某个特定值的元素
 //匹配div中myTag属性为tt2的div
 alert($("div[myTag='tt2']").attr("myTag")); //注意中括号的结束位置
 //==========举例3================
 //[attribute!=value]
 //用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值 集合元素
 //说明: 匹配所有不含有指定的属性,或者属性不等于特定值的元素.
 //此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,
 //请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.
 //...<1> 查找div中myTag属性不为tt1的所有div 会找到两个
 //showElements($("div[myTag!='tt1']"));
 //...<2> 查找div中包含myTag属性,并且myTag属性不等于tt1的div
 showElements($("div[myTag]:not([myTag='tt1'])")); //注意中括号和括号的方式
 //==========举例4================
 //[attribute^=value] 匹配给定的属性是以某些值开始的元素
 //...<1>查找myTag属性以tt2开头的所有div
 showElements($("div[myTag^='tt2']"));
 //==========举例5================
 //[attribute$=value] 匹配给定的属性是以某些值结尾的元素.
 //...<1>查找myTag属性以3结尾的所有div
 showElements($("div[myTag$='3']"));
 //==========举例6================
 //[attribute*=value] 匹配给定的属性是以包含某些值的元素.
 //...<1>查找myTag属性包含tt的所有div
 showElements($("div[myTag*='tt']"));
 //==========举例7================
 //用法: $(”input[id][name$=‘man']“) 返回值 集合元素
 //复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.
 //这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.
 //...<1>查找包含id属性,并且myTag属性不为tt2的所有div
 showElements($("div[id][myTag!='tt2']"));
});
function showElements(elements) {
 var output = "";
 for (var i = 0; i < elements.length; i++) {
  if (output == "") {
   output = elements.eq(i).html();
  }
  else {
   output += "\r\n" + elements.eq(i).html();
  }
 }
 alert(output);
}
</script>
</head>
<body>
<div>我是没有id的DIV</div>
<div id="div1" myTag="tt1">我是id为div1的DIV myTag为tt1</div>
<div id="div2" myTag="tt2">我是id为div2的DIV myTag为tt2</div>
<div id="div3" myTag="tt23">我是id为div2的DIV myTag为tt23</div>
<div id="div4" myTag="tt33">我是id为div2的DIV myTag为tt33</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
jquery图片切换实例分析
Apr 15 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
Vue实现简单的留言板
Oct 23 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 #Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 #Javascript
JavaScript的9种继承实现方式归纳
May 18 #Javascript
JQuery中上下文选择器实现方法
May 18 #Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 #Javascript
JQuery球队选择实例
May 18 #Javascript
JQuery实现动态添加删除评论的方法
May 18 #Javascript
You might like
PHP获取数组最大值下标的方法
2015/05/12 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
jquery $.ajax相关用法分享
2012/03/16 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
js简单时间比较的方法
2016/08/02 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python3实现从指定路径查找文件的方法
2015/05/22 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
给分销商的致歉信
2014/01/14 职场文书
青年教师培训方案
2014/02/06 职场文书
党员干部一句话承诺
2014/05/30 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
同学毕业留言寄语
2015/02/27 职场文书
房产证明范本
2015/06/19 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS