zoukankan      html  css  js  c++  java
  • JQUERY 模糊选择

    JQUERY 模糊选择  
          [属性名称]         匹配包含给定属性的元素
          [att=value]       匹配包含给定属性的元素
          [att*=value]     模糊匹配
          [att!=value]      不能是这个值
          [att$=value]     结尾是这个值
          [att^=value]     开头是这个值
          [att1][att2][att3]...   匹配多个属性条件中的一个

    属性字头选择器(Attribute Contains Prefix Selector)

    jQuery 属性字头选择器的使用格式是 jQuery(‘[attribute|=value]‘) ,例如 jQuery(‘[herflang|=en]‘) 这句代码执行时将会选择文档中所有含有 herflang 属性,并且 herflang 的值以 “en” 开头的元素,即使 “en” 后面紧跟着连字符 “-” 也能进行选择。
    属性开头选择器(Attribute Starts With Selector)

    jQuery(‘[attribute^=value]‘) ,用于选择属性的值以某个字符串开头的元素,但和 jQuery(‘[attribute|=value]‘) 的区别是,如果 value 的后面是一个连字符的话,这个元素不会被选择。例如 jQuery(‘[rel^=no]‘) 将会选择所有 rel 的值以 “no” 开头的元素,但类似于 rel=”no-****” 的元素不会被选择。
    属性包含选择器(Attribute Contains Selector)

    基本使用方法为 jQuery(‘[attribute*=value]‘),例如 jQuery(‘[rel*=no]‘),表示所有带有 rel 属性,并且 rel 的值里包含子字符串 “no” 的元素(如 rel=”nofollow”,rel=”yesorno” 等等)都将会被选择。
    属性单词选择器(Attribute Contains Word Selector)

    jQuery(‘[attribute~=value]‘),这个选择器的特别之处在于 value 的值只能必须是一个独立的单词(或者是字符串),例如 jQuery(‘[rel~=no]‘) ,此句在执行的时候会选择带有 rel=”yes or no” 的元素,但不会选择带有 rel=”yesorno” 的元素。这个选择器可以看做属性包含选择器的补充品,用于需要进行严格匹配的时候。
    属性结尾选择器(Attribute Ends With Selector)

    jQuery(‘[attribute$=value]‘) ,用于选择特定属性的值以某个字符串结尾的元素,例如 jQuery(‘[rel$=no]‘) 将会选择 rel 属性的值以 “no” 结尾的元素。
    属性均等选择器(Attribute Equals Selector)

    jQuery(‘[attribute=value]‘) ,只选择属性的值完全相等的元素,如:jQuery(‘[rel=nofollow]‘),则只选择 rel=”nofollow” 的元素,差一点都不行!
    属性非等选择器(Attribute Not Equal Selector)

    jQuery(‘[attribute!=value]‘) ,和 :not([attr=value]) 的效果一样,用于选择属性不等于某个值的元素,例如 jQuery(‘[rel!=nofollow]‘),所有 rel=”nofollow” 的元素都不会被选择。

     

    <!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>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
           //以指定字符开头
           alert($("[id^='A_M']").length);  //所有以id为"A_M"开头的,弹出6
           //以指定字符结尾
           alert($("[id$='_04']").length);  //所有以id为"_04"结尾的,弹出4
           //包含指定字符
           alert($("[id*='M']").length);  //所有id包含"M"的,弹出9
             
           //指定对象内选择
           alert($("div[id^='A_M']").length);  //所有div以id为"A_M"开头的,弹出4
                                               //可以在指定DOM内选择
        });
        // 区分大小写
    </script>
    </head>
     
    <body>
    <div id="A_M_01">
      <li id="A_M_01_ul"></li>
    </div>
    <div id="A_M_02">
      <li id="A_M_02_ul"></li>
    </div>
    <div id="A_M_03"></div>
    <div id="A_M_04"></div>
    <div id="B_M_04"></div>
    <div id="C_M_04"></div>
    <div id="D_M_04"></div>
    </body>
    </html>
    
  • 相关阅读:
    老大叔开博感想
    模板
    Codeforces Round #685 (Div. 2) 题解
    CF830E Perpetual Motion Machine 题解
    THUWC2020游记
    数论
    后缀数组学习笔记
    Codeforces Round #466 (Div. 2)
    博客停写,搬家到www.54kaikai.com
    lda 主题模型--TOPIC MODEL--Gibbslda++结果分析
  • 原文地址:https://www.cnblogs.com/gotolnc/p/4759161.html
Copyright © 2011-2022 走看看