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 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
ztree+ajax实现文件树下载功能
May 18 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
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
python ddt数据驱动最简实例代码
2019/02/22 Python
python中的数据结构比较
2019/05/13 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
Python中qutip用法示例详解
2020/10/02 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
学校七一活动方案
2014/01/19 职场文书
岗位职责风险防控
2014/02/18 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
六一节目主持词
2014/04/01 职场文书
安全生产培训心得体会
2016/01/18 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
python实现简单区块链结构
2021/04/25 Python
详解Vue的sync修饰符
2021/05/15 Vue.js
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis