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 相关文章推荐
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
element中的$confirm的使用
Apr 26 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
vant时间控件使用方法详解
Dec 24 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
一个好用的分页函数
2006/11/16 PHP
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
flexigrid 参数说明
2010/11/23 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
javascript  删除select中的所有option的实例
2017/09/17 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
QA工程师岗位职责
2013/11/20 职场文书
会计自荐信范文
2014/03/09 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
地震捐款倡议书
2014/08/29 职场文书
付款委托书范本
2014/10/05 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
人事聘任通知
2015/04/21 职场文书
标准发言稿结尾
2019/07/18 职场文书