• Jquey模糊选择


    属性字头选择器(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” 的元素都不会被选择。

    eg:

    <!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>
    
  • 相关阅读:
    C# 中的高性能计时器(Daniel Strigl著,野比译)(转)
    C#中SerialPort类 随笔
    迭代器
    枚举数与可枚举类型(笔记)
    jQuery的关注与学习
    敏捷开发的4句宣言 大数据
    bat脚本
    c++动态库中回调函数使用
    C++中遍历lua table
    vs2010编译release版本却依赖debug版本库msvcrd100.dll
  • 原文地址:https://www.cnblogs.com/ericyi/p/2363248.html
Copyright © 2020-2023  润新知