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

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery选择器-根据多个属性选择示例代码

    根据多个属性选择E[attr=val][attr=val] $("div[title='ttt'][class='aaaa']").click()................ 所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

  • jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足"选择器"条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素

  • Jquery选择器中使用变量实现动态选择例子

    例子一: <table> <tr> <th>用户名</th> <th>状态</th> <tr> <tr> <td>张三</td> <td data-uid="10000">正常</td> <tr> <tr> <td>李四</td> <td data-uid="10001"

  • 使用jquery选择器如何获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu

  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

    今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

  • jQuery Selector选择器小结

    //jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#

  • JQuery中$之选择器用法介绍

    1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素.下面举个例子来说明一下: HTML代码 <input name="newsletter" /> <input name="milkman" /&g

  • jQuery过滤选择器:not()方法使用介绍

    jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) 复制代码 代码如下: <p >"a">sdfsdfs</p> <p >"b">sdfsdfs</p> <p >"c">sdf

  • Jquery颜色选择器ColorPicker实现代码

    Jquery颜色选择器ColorPicker实现代码

    在CMS中通常都有给标题添加颜色的功能,但一般都比较简单,颜色支持也少,这里我要分享一个自己修改的颜色选择器.界面简洁,功能强大.在我们的日常项目中可以快速的部署. 复制代码 代码如下: $(".colorpicker").colorpicker({ target:'#title', success:function(o,color){ $("#color").val(color) }, reset:function(o){ $("#color"

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

    本文实例为大家分享了jQuery属性过滤选择器的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="t

  • jquery选择器之层级过滤选择器详解

    jquery选择器之层级过滤选择器详解

    复制代码 代码如下: $("ancestor descendant"):选取parent元素后所有的child元素$("parent > child"):选取parent元素后所有的直属child元素,何谓"直属",也就是第一级的意思了$("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素$("prev ~ siblings"):选择prev后面

  • jquery选择器之内容过滤选择器详解

    jquery选择器之内容过滤选择器详解

    先写出DOM元素的HTML结构: 复制代码 代码如下: <style type="text/css">    /*高亮显示*/    .highlight{               background-color: gray    }</style> 复制代码 代码如下: <div>John Resign</div><div>George Martin</div><div>Malcom John

  • jquery选择器之基本过滤选择器详解

    jquery选择器之基本过滤选择器详解

    复制代码 代码如下: <style type="text/css">  /*高亮显示*/  .highlight{      background-color: gray  } </style> 复制代码 代码如下: <body>   <h3>各省市行政区划</h3>   <table border="1" width="50%">    <thead>     

  • jQuery选择器之子元素选择器详解

    jQuery选择器之子元素选择器详解

    本文实例为大家分享了jQuery子元素选择器,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="

  • jQuery选择器之属性筛选选择器用法详解

    jQuery选择器之属性筛选选择器用法详解

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <

  • jQuery选择器之基本过滤选择器用法实例分析

    本文实例讲述了jQuery选择器之基本过滤选择器用法.分享给大家供大家参考,具体如下: 前面一篇介绍了层次选择器,今天我们学习一下jQuery的另一种选择器:基本过滤选择器.过滤选择器可以过滤掉自己不想要的东西,也就是说过滤后留下的都是自己需要的.jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素,jQuery过滤选择器的过滤规则与CSS伪类选择器语法是相同的都以冒号(:)开头.按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤.属性过滤.内容过滤.子元素过滤.

  • jQuery表单对象属性过滤选择器实例详解

    jQuery表单对象属性过滤选择器实例详解

    本文实例讲述了jQuery表单对象属性过滤选择器.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2-11</title> <script src="jquery-1.7.2.min.js" type="t

  • jQuery中DOM 属性使用实例详解下篇

    目录 DOM属性(下) .html() .val() .attr() .removeAttr() DOM属性(下) .html() 获取集合中第一个匹配元素的HTML内容 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容. 如果选择器匹配多个元素,那么只有第一个匹配元素的 HTML 内容会被获取. $('div.demo-container').html(); html()方法还可以设置每一个匹配元素的html内容. 我们可以使用 .html() 来设置元素

  • jquery表单对象属性过滤选择器实例分析

    本文实例讲述了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"> &

随机推荐