jQuery选择器之属性过滤选择器详解


Posted in jQuery onSeptember 28, 2017

本文实例为大家分享了jQuery属性过滤选择器的具体代码,供大家参考,具体内容如下

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" >
    <style type="text/css">
      div, span, p {
        width: 140px;
        height: 140px;
        margin: 5px;
        background: #aaa;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Verdana;
      }
      
      div.mini {
        width: 55px;
        height: 55px;
        background-color: #aaa;
        font-size: 12px;
      }
      
      div.hide {
        display: none;
      }      
    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
      $(function(){
        
        $("#btn1").click(function(){
          $("div[title]").css("background", "#ffbbaa");
        });
        $("#btn2").click(function(){
          $("div[title='test']").css("background", "#ffbbaa");
        });
        $("#btn3").click(function(){
          //选取的元素中包含没有 title 的 div 元素. 
          $("div[title!='test']").css("background", "#ffbbaa");
        });
        
        $("#btn4").click(function(){
          $("div[title^='te']").css("background", "#ffbbaa");
        });
        
        $("#btn5").click(function(){
          $("div[title$='est']").css("background", "#ffbbaa");
        });
        $("#btn6").click(function(){
          $("div[title*='es']").css("background", "#ffbbaa");
        });
        $("#btn7").click(function(){
          $("div[id][title*='es']").css("background", "#ffbbaa");
        });
        
        $("#btn8").click(function(){
          $("div[title][title!='test']").css("background", "#ffbbaa");
        });
        
      })
    </script>
  </head>
  <body>    
    <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
    <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2"/>
    <input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3"/>
    <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4"/>
    
    <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5"/>
    <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6"/>
    <input type="button" value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7"/>
    <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/>
    
    <br><br>
    <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
    </div>
    <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>
    <div style="display:none;" class="none">style的display为"none"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div>
      包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
    </div>
    <div id="mover">正在执行动画的div元素.</div>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery Tree Multiselect使用详解
May 02 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现左右轮播图效果
Sep 28 #jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 #jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 #jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 #jQuery
jQuery EasyUI开发技巧总结
Sep 26 #jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 #jQuery
You might like
php GeoIP的使用教程
2011/03/09 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
PHP中16个高危函数整理
2019/09/19 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
暇步士官网:Hush Puppies
2016/09/22 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
编辑求职信样本
2013/12/16 职场文书
办理退休介绍信
2014/01/09 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
两只小狮子教学反思
2014/02/05 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
环卫工作个人总结
2015/03/04 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
走进毛泽东观后感
2015/06/04 职场文书
高中班主任寄语
2019/06/21 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python