精华内容
下载资源
问答
  • jQuery过滤选择器详解

    2020-10-24 21:35:18
    本文主要给大家详细介绍了jQuery过滤选择器,包含基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器等,十分全面,需要的朋友可以参考下
  • 主要介绍了jQuery过滤选择器用法,包括可见性过滤:hidden、:visible,包含过滤:contains等各种常用的过滤选择器,需要的朋友可以参考下
  • 主要介绍了jQuery过滤选择器用法,实例分析了:first、:last、:odd、:even等等常用的过滤选择器的使用技巧,非常具有实用价值,需要的朋友可以参考下
  • 主要为大家详细介绍了jQuery过滤选择器经典应用,具有一定的实用性,感兴趣的小伙伴们可以参考一下
  • JQuery过滤选择器

    2014-04-01 16:47:33
    使用JQuery选择器可以定位所需要的元素,同时JQuery还提供了过滤选择器,用以进一步对选择器中的结果进行过滤,常用的过滤选择器可以归为以下几类: 1.基本过滤选择器,常用的有: (1):first 选取第一个元素,...

    使用JQuery选择器可以定位所需要的元素,同时JQuery还提供了过滤选择器,用以进一步对选择器中的结果进行过滤,常用的过滤选择器可以归为以下几类:

    1.基本过滤选择器,常用的有:

    (1):first 选取第一个元素,例如$("div:first"),选取第一个div元素;

    (2):last 选取最后一个元素,例如$("div:last"),选取最后一个div元素;

    (3):not 选取不满足选择器条件的元素,例如$("div:not(.class1)"),选取样式名不是class1的div元素;

    (4):even,:odd,选取索引为偶数、奇数的元素,索引与一般编程语言一致,从0开始,例如$("span:even");

    (5):eq(index),:lt(index),:gt(index),选取索引号=、<、>制定索引的元素,例如$("div:eq(1)"),选择索引号等于1的div元素;

    (6):header,选取所有h1....h6的元素,例如$(":header");

    (7):animated,选取正在执行动画的元素,如$("div:animated"),获取正在执行动画的div动画。

    2.属性过滤选择器,格式为$("tagName[属性名或者表达式]"),两种格式的含义如下:

    (1)若为$("tagName[属性名]"),表示拥有该属性的元素,如$("input[id]"),选取有id属性的input元素;

    (2)若为$("tagName[表达式]"),表示属性满足该表达式的元素,如$("input[id=username]"),选取id=username的input元素;

    3.表单对象过滤器,格式为$(":属性值"),如$("#form1:enabled"),选取id为form1的表单下的所有启用元素,$("input:checked"),选取所有选中(radiobutton、checkbox中)的项,$("select:selected")选取所欲选中的下拉列表项。

    4.表单选择器,常用的有以下三种:

    (1)$(":input"),选取所有可提交给服务器的元素,如<input>、<textarea>、<select>和<button>;

    (2)$(":text/password/checkbox..."),获取type=text、password、checkbox...的元素。

    示例一:实现全选、全不选和反选

    <!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>
        <title>JQuery test</title>
        <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
       <script type="text/javascript">
           $(function () {
               $("#selectAll").click(function () {
                   $("input[type=checkbox]").attr("checked", true);
               });
               $("#notSelectAll").click(function () {
                   $("input[type=checkbox]").attr("checked", false);
               });
               $("#reverse").click(function () {
                   $("input[type=checkbox]").each(function () {
                       $(this).attr("checked",!$(this).attr("checked"));
                   });
               })
           });
       </script>
    </head>
    <body>
    <input type="checkbox" value="football" />music1<br />
    <input type="checkbox" value="basketball" />music2<br />
    <input type="checkbox" value="badminton" />music3<br />
    <input type="button" value="全选" id="selectAll" />
    <input type="button" value="全不选" id="notSelectAll" />
    <input type="button" value="反选" id="reverse" />
    
    </body>
    </html>
    
    示例二:QQ显示面板

    <!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>
        <title>QQ显示面板示例</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            ul{list-style-type:none;width:15%;}
            .header{cursor:pointer;}
            .body{border-style:solid;border-width:1px;}
            .hMouseOver{background-color:yellow;}
            .hMouseOut{background-color:white;}
            .bMouseOver{background-color:green;}
            .bMouseOut{background-color:white;}
        </style>
        <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("ul li:odd").addClass("body");
                $("ul li:even").click(function () {
                    $(this).next("li.body").toggle(); //单击时切换显示状态
                }).mouseover(function () { $(this).attr("class", "header hMouseOver"); })
                .mouseout(function () { $(this).attr("class", "header hMouseOut"); });
                $("ul li.body div").mouseover(function () { $(this).attr("class","bMouseOver") })
                .mouseout(function () { $(this).attr("class", "bMouseOut") });
                $("ul li.body").hide();
    
            });
        </script>
    </head>
    <body>
    <ul>
    <li>好友列表1</li>
    <li><div>person1</div>
       <div>person2</div>
       <div>person3<div />
    </li>
    <li>好友列表2</li>
    <li><div>person4</div >
       <div>person5</div >
       <div>person6</div >
    </li>
    <li>好友列表3</li>
    <li><div>person7</div >
       <div>person8</div >
       <div>person9</div >
    </li>
    </ul>
    </body>
    </html>
    
    这只是一个简单的示例,在实际项目中,可以利用后台返回的数据,并结合一定的图片及样式对显示界面作进一步美化。


    展开全文
  • jQuery过滤选择器

    2013-03-21 22:16:40
    过滤选择器 1 基本过滤选择器 1 内容过滤选择器 1 可见性过滤选择器 1 属性过滤选择器 1 子元素过滤选择器 2 表单对象属性过滤选择器 过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需...

    过滤选择器

    基本过滤选择器

    内容过滤选择器

    可见性过滤选择器

    属性过滤选择器

    子元素过滤选择器

    表单对象属性过滤选择器

    过滤选择器

    过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以:”开头

    按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器.

    基本过滤选择器

    基本过滤选择器示例

    改变第一个 div元素的背景色为 # bbffaa

    改变最后一个 div元素的背景色为 # bbffaa

    改变class不为 one的所有 div元素的背景色为 # bbffaa

    改变索引值为偶数的 div元素的背景色为 # bbffaa

    改变索引值为奇数的 div元素的背景色为 # bbffaa

    改变索引值为大于 3的 div元素的背景色为 # bbffaa

    改变索引值为等于 3的 div元素的背景色为 # bbffaa

    改变索引值为小于 3的 div元素的背景色为 # bbffaa

    改变所有的标题元素的背景色为 # bbffaa

    改变当前正在执行动画的所有元素的背景色为 # bbffaa

    内容过滤选择器

    内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

    内容过滤选择器示例

    改变含有文本 ‘di’的 div元素的背景色为 # bbffaa

    改变不包含子元素(或者文本元素)的 div空元素的背景色为 # bbffaa

    改变含有 class为 mini元素的 div元素的背景色为 # bbffaa

    改变含有子元素(或者文本元素)div元素的背景色为 # bbffaa

    可见性过滤选择器

    可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

    可见选择器 :hidden不仅包含样式属性 display为 none的元素,也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden之类的元素

    可见性过滤选择器示例

    改变所有可见的div元素的背景色为 # bbffaa

    选取所有不可见的元素,利用 jQuery中的 show()方法将它们显示出来,并设置其背景色为 # bbffaa

    选取所有的文本隐藏域,并打印它们的值

    属性过滤选择器

    属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

    属性过滤选择器示例

    选取下列元素,改变其背景色为 # bbffaa

    含有属性titlediv元素.

    属性title值等于"test"div元素.

    属性title值不等于"test"div元素(没有属性title的也将被选中).

    属性title值以"te"开始的div元素.

    属性title值以"est"结束的div元素.

    属性title值含有"es"div元素.

    选取有属性iddiv元素,然后在结果中选取属性title值含有“es”div 元素.

    子元素过滤选择器

    nth-child() 选择器详解如下:

    (1) :nth-child(even/odd):能选取每个父元素下的索引值为偶()数的元素

    (2):nth-child(2): 能选取每个父元素下的索引值为 的元素

    (3):nth-child(3n): 能选取每个父元素下的索引值是 的倍数的元素

    (3):nth-child(3n + 1):能选取每个父元素下的索引值是 3n + 1的元素

    子元素过滤选择器示例

    选取下列元素,改变其背景色为 # bbffaa

    每个classonediv父元素下的第2个子元素.

    每个classonediv父元素下的第一个子元素

    每个classonediv父元素下的最后一个子元素

    如果classonediv父元素下的仅仅只有一个子元素,那么选中这个子元素

    表单对象属性过滤选择器

    此选择器主要对所选择的表单元素进行过滤

    表单对象属性过滤选择器示例

    利用 jQuery对象的 val()方法改变表单内可用 <input>元素的值 利用 jQuery对象的 val()方法改变表单内不可用<input>元素的值

    利用 jQuery对象的 length属性获取多选框选中的个数

    利用 jQuery对象的 text()方法获取下拉框选中的内容

    表单选择器

    展开全文
  • 主要介绍了jQuery过滤选择器:not()方法的使用,需要的朋友可以参考下
  • Jquery过滤选择器,选择前几个元素,后几个元素,内容过滤选择器等一、基本过滤选择器(重点掌握下列八个)二、属性过滤选择器(六个必须记住)三、内容过滤选择器(四个必须记住)四、子元素过滤选择器(记住八个)五...

    一、基本过滤选择器(重点掌握下列八个)

    :first 选取第一个元素 $(“div:first”).css(“color”,“red”);
    :last 选取最后一个元素 $(“div:last”).css(“color”,“red”);
    :not 除去指定的选择器外的元素 $(“div:not”).css(“color”,“red”);
    :even 选取索引号是偶数的元素 $(“div:even”).css(“color”,“red”);
    :odd 选取索引号是奇数的元素 $(‘div:odd’).css(“color”,“red”);
    :eq(index) 选取第index个元素 $(‘div:eq(5)’).css(“color”,“red”);
    :gt(index) 选取索引号大于index的元素 ( ′ d i v : g t ( 8 ) ′ ) . c s s ( " c o l o r " , " r e d " ) ; : l t ( i n d e x ) 选 取 索 引 号 小 于 i n d e x 的 元 素 ('div:gt(8)').css("color","red"); :lt(index) 选取索引号小于index的元素 (div:gt(8)).css("color","red");:lt(index)index(‘div:lt(3)’).css(“color”,“red”);

    二、属性过滤选择器(六个必须记住)

    (1):[attribute] 选取拥有此属性的元素 $(‘div:[attribute]’).css(‘background-color’,‘red’);
    (2):[attribute=value] 选取属性值为value的元素 $(‘div:[attribute=text]’)
    (3):[attribute!=value] 选取属性值不为value的元素 $(‘div:[attribute!=text]’)
    (4):[attribute^=value] 选取属性值以value开始的元素 ( ′ d i v : [ a t t r i b u t e = t e x t ] ′ ) ( 5 ) : [ a t t r i b u t e ('div:[attribute^=text]') (5):[attribute (div:[attribute=text])(5):[attribute=value] 选取属性值以value结尾的元素 ( ′ d i v : [ a t t r i b u t e ('div:[attribute (div:[attribute=text]’)
    (6):[attribute*=value] 选取属性值包含value的元素 $(‘div:[attribute*=text]’)

    三、内容过滤选择器(四个必须记住)

    :contains 选取包含文本的text的元素 $(‘div:contains(.mini)’).css(“color”,“red”);
    :has(id选择器名称、Class选择器名称) 选取含有选择器所匹配的元素 $(‘div:has(.mini)’).css(“color”,“red”);
    :empty 选取不包含子元素的元素 $(‘div:empty’).css(“color”,“red”);
    :parent 选取包含子元素的元素 $(‘div:parent’).css(“color”,“red”);

    四、子元素过滤选择器(记住八个)

    (1):nth-child(index) 选取每个父节点下第index个元素、偶数元素或奇数元素。
    $(‘div.one :nth-child(8)’).css(‘background-color’,’#900’);
    (2):first-child 选取每个父元素下的第一个子元素 $(‘div.one :first-child(8)’).css(‘color’,‘red’);
    (3):last-child 选取每个父元素下的最后一个子元素 $(‘div.one :last-child(8)’).css(‘color’,‘red’);
    (4):only-child 选取只有一个子元素的元素 $(‘div.one :only-child(8)’).css(‘color’,‘red’);
    (5):enabled 选取所有可用的元素 $(’#form1 input:enabled’).val(“vaotoo.com”);
    (6):disabled 选取所有不可用的元素 $(’#form1 input:disabled’).val(“vaotoo.com”);
    (7):checked 选取所有被选中的元素(一般为(HTML中)RadioButton、CheckBox标记);
    $(‘input:checked’).text(“vaotoo.com”);
    (8):selected 选取被选中的选项元素(select下拉列表标记中的option=select)
    $(‘select:selected’).each(function(){
    str += $(this).text()+",";
    });

    五、可见性过滤选择器(两个)

    :hidden
    :visibal

    转自:https://www.cnblogs.com/alone2015/p/4962687.html

    展开全文
  • 属性过滤选择器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素 1、[attribute] 用法: $(”div[id]“) ; 返回值:集合元素 说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div...

    属性过滤选择器

    属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
    1、[attribute]
    用法: $(”div[id]“) ;
    返回值集合元素
    说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
    2、[attribute=value]
    用法: $(”input[name='newsletter']“).attr(”checked”, true);
    返回值集合元素
    说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.
    3、[attribute!=value]
    用法: $(”input[name!='newsletter']“).attr(”checked”, true);
    返回值集合元素
    说明: 匹配所有不含有指定的属性,或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.
    4、[attribute^=value]
    用法: $(”input[name^=‘news’]“)
    返回值:集合元素
    说明: *匹配给定的属性是以某些值开始的元素.
    5、[attribute$=value]
    用法: $(”input[name$=‘letter’]“)
    返回值:集合元素
    说明: 匹配给定的属性是以某些值结尾的元素.
    6、[attribute*=value]
    用法: $(”input[name*=‘man’]“)
    返回值: 集合元素
    说明: 匹配给定的属性是以包含某些值的元素.
    7、[attributeFilter1][attributeFilter2][attributeFilterN]
    用法: $(”input[id][name$=‘man’]“)
    返回值 :集合元素
    说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.


    属性过滤选择器示例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>ddd</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
        <style type="text/css">
                div,span{
                    width: 140px;
                    height: 140px;
                    margin: 20px;
                    background: #9999CC;
                    border: #000 1px solid;
                    float:left;
                    font-size: 17px;
                    font-family:Roman;
                }
    
                div.mini{
                    width: 30px;
                    height: 30px;
                    background: #CC66FF;
                    border: #000 1px solid;
                    font-size: 12px;
                    font-family:Roman;
                }
    
                div.visible{
                    display:none;
                }
         </style>
         <!--引入jquery的js库-->
        </head>
    
        <body>
    
             <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
             <input type="button" value=" 含有属性title 的div元素"  id="b1"/>
             <input type="button" value=" 属性title值等于test的div元素"  id="b2"/>
             <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)"  id="b3"/>
             <input type="button" value=" 属性title值 以te开始 的div元素."  id="b4"/>
             <input type="button" value=" 属性title值 以est结束 的div元素.."  id="b5"/>
             <input type="button" value="属性title值 含有es的div元素."  id="b6"/>
             <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素"  id="b7"/>
    
             <!--文本隐藏域-->
             <input type="hidden" value="hidden_1">
             <input type="hidden" value="hidden_2">
             <input type="hidden" value="hidden_3">
             <input type="hidden" value="hidden_4">
    
             <h1>天气冷了</h1>
             <h2>天气又冷了</h2>
    
             <div id="one">
                 id为one   div
    
             </div>
    
             <div id="two" class="mini"  title="test">
                   id为two   class是 mini  div  title="test"
                   <div  class="mini" >class是 mini</div>
            </div>
    
             <div class="visible" >
                    class是 one 
                   <div  class="mini" >class是 mini</div>
                   <div  class="mini" >class是 mini</div>
             </div>
             <div class="one" title="test02">
                  class是 one    title="test02"
                   <div  class="mini01" >class是 mini01</div>
                   <div  class="mini" >class是 mini</div>
            </div>
    
    
            <div class="visible" >
                  这是隐藏的
            </div>
    
            <div class="one">
    
    
            </div>
            <br>
            <div id="mover" >
                  动画
            </div>
            <br>
    
    
        </body>
    <script language="JavaScript">
            //<input type="button" value=" 含有属性title 的div元素"  id="b1"/>
            $("#b1").click(function(){
                $("div[title]").css("background","#0000FF");
            });
    
    
            //<input type="button" value=" 属性title值等于test的div元素"  id="b2"/>
            $("#b2").click(function(){
                $("div[title=test]").css("background","#0000FF");
            });
    
            //<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)"  id="b3"/>
            $("#b3").click(function(){
                $("div[title!=test]").css("background","#0000FF");
            });
    
            //<input type="button" value=" 属性title值 以te开始 的div元素."  id="b4"/>
            $("#b4").click(function(){
                $("div[title^=te]").css("background","#0000FF");
            });
    
            //<input type="button" value=" 属性title值 以est结束 的div元素.."  id="b5"/>
            $("#b5").click(function(){
                $("div[title$=est]").css("background","#0000FF");
            });
    
            //<input type="button" value="属性title值 含有es的div元素."  id="b6"/>
            $("#b6").click(function(){
                $("div[title*=es]").css("background","#0000FF");
            });
    
            //<input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素"  id="b7"/>
            $("#b7").click(function(){
                //多个属性过滤选择器并列使用,就这样并列放置就OK
                $("div[id][title*=es]").css("background","#0000FF");
            });
    
    </script>
    </html>
    
    
    
    
    展开全文
  • 子元素过滤选择器1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”) 返回值 :集合元素 说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 ...
  • 表单对象属性过滤选择器此选择器主要对所选择的表单元素进行过滤 1、:enabled 用法: $(”input:enabled”) 返回值 :集合元素 说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的...
  • 过滤选择器简称:过滤器。它其实也是一种选择器,而这种选择器类似与 CSS3(http://t.mb5u.com/css3/)里的伪类,可以让不支持 CSS3 的低版本浏览器也能支持。和常规选择器一样,jQuery 为了更方便开发者使用,提供了...
  • 过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都可以以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤...
  • jQuery过滤选择器类似于 1.
  • 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性...
  • jQuery过滤选择器之内容过滤器 $(document).ready(function(e) { $("li:empty").text("空内容"); $("div ul:parent").css("background-color","yellow");//匹配div包含的ul元素中包含子元素或者文本元素的ul...
  • 10分钟-jQuery过滤选择器

    千次阅读 2016-04-01 15:31:50
    1.:first过滤选择器本次我们介绍过滤选择器,该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元素。在jQuery中,如果想得到一组相同标签元素中的第1个...
  • 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。 选择器 描述 返回 示例 [attribute] 选择拥有此属性的元素 集合元素 $(“div[id]“)选取拥有属性id的元素 ...
  • Java-jQuery过滤选择器

    千次阅读 2013-03-21 20:46:58
    过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素, 该选择器都以“:”开头 按照不同的过滤规则,过滤选择器可以分为基本过滤, 内容过滤,可见性过滤, 属性过滤,子元素过滤和表单对象属性过滤选择...
  • 过滤选择器的过滤规则主要体现在他所包含的子元素或文本内容上,内容过滤选择器的使用如下
  • 选择器 描述 返回 示例 :hidden 选取所有不可见的元素 集合元素 $(“:hidden”)选取所有不可见的元素,不可见的元素包括:,和,等元素。如果只想选取input的不可见元素,可以使用$(...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,551
精华内容 15,020
关键字:

jquery过滤选择器