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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
js和jquery中获取非行间样式
May 05 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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使用CURL伪造IP和来源实例详解
2015/01/15 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
如何在PHP中读写文件
2020/09/07 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
TensorFlow实现创建分类器
2018/02/06 Python
使用python编写监听端
2018/04/12 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Python 监测文件是否更新的方法
2019/06/10 Python
10款最好的Python开发编辑器
2019/07/03 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
Django实现基于类的分页功能
2019/10/31 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
关于环保的活动方案
2014/08/25 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
师范生见习自我总结
2015/06/23 职场文书
高中运动会前导词
2015/07/20 职场文书
详解Vue slot插槽
2021/11/20 Vue.js