• jQuery学习笔记——jQuery选择器详解种类与方法

    jQuery的选择器根据页面中元素的不同，可以分为基本选择器、层次选择器、表单选择器、过滤选择器，而过滤选择器又有简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性选择器6种。(图片序号与文章序号不一致，以文章序号为准)

    一、基本选择器：

    <!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>
        <meta name="keywords" content=" keywords" />
        <meta name="description" content="description" />
    </head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <style type="text/css">
        body    {font-size:12px;text-align:center}
        .clsFrame    {width:300px;height:100px}
        .clsFrame div,span    {display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px;}
        .clsOne    {background-color:#EEE}
    </style>
    <body>
     <script type="text/javascript">
        $(    function(){
            $(    '#divOne').css('display','block');//选择id为divOne的标签
        });
        $(    function(){
            $(    'div span').css('display','block');//选择div中的所有span标签
        });
        $(    function(){
            $(    '.clsFrame').css('display','block');//选择class为clsFrame的标签
        });
        $(    function(){
            $(    '*').css('display','block');//选择所有的内容
        });
        $(    function(){
            $(    '#divOne,span').css('display','block');//选择id为divOne和标签为span的所有标签
        });
         </script>
    <div class="clsFrame">
        <div id="divOne">ID</div>
        <div class="clsOne">CLASS</div>
        <span>SPAN</span>
    </div>

    </body>
    </html>

    二、层次选择器：

    <!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>
        <meta name="keywords" content=" keywords" />
        <meta name="description" content="description" />
    </head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <style type="text/css">
        body    {font-size:12px;text-align:center}
        div,span    {float:left;border:solid 1px #ccc;margin:8px;display:none}
        .clsFraA    {width:65px;height:65px}
        .clsFraP    {width:45px;height:45px;background-color:#eee}
        .clsFraC    {width:25px;height:25px;background-color:#ddd}
        .a    {width:15px;height:15px;background-color:#bbb}
    </style>
    <body>
     <script type="text/javascript">
        $(    function(){
            $(    '#divMid').css('display','block');
            $(    'div span').css('display','block');//选择div中的所有span标签
        });
        $(    function(){
            $(    '#divMid').css('display','block');
            $(    'div>span').css('display','block');//选择div中的子标签（div中第一层span标签）
        });
        $(    function(){
            $(    '#divMid+div').css('display','block');//选择id为divMid的下一个div标签(这里的div必须与该ID标签相邻)
            $('#divMid').next().css('display','block');//选择该ID后的一个标签（任意）
        });
        $(    function(){
            $(    '#divMid~div').css('display','block');//选择id 为divMid后边所有的div标签
            $('#divMid').nextAll().css('display','block');//选择该ID后的所有标签
        });
        $(    function(){
            $(    '#divMid').siblings('div').css('display','block');//选择该ID相邻的所有标签
        });
         </script>
    <div class="clsFraA">Left</div>
    <div class="clsFraA" id="divMid">
        <span class="clsFraP" id="Span1">Span1
            <span class="clsFraC" id="Span2">Span2</span>
        </span>
    </div>
    <span class="a">Test</span>
    <div class="clsFraA">Right_1</div>
    <div class="clsFraA">Right_2</div>
    </body>
    </html>

    三、表单选择器:

    <!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>
        <meta name="keywords" content=" keywords" />
        <meta name="description" content="description" />
    </head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <style type="text/css">
        body    {font-size:12px;text-align:center}
        form    {width:241px}
        textarea,select,button,input,span    {display:none}
        .btn    {border:#666 solid 1px;padding:2px;width:60px;filter:progid:DXImageTransform.Mircrosoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D0);}
        .txt    {border:#666 1px solid;padding:3px}
        .img    {padding:2px;border:#ccc 1px solid}
        .div    {border:solid 1px solid;background-color:#eee;padding:5px}
    </style>
    <body>
    <script type="text/javascript">
        $(    function(){
            $(    '#form1 div').html('表单共找出Input类型元素。。。'+$('#form1 :input').length);//选择子标签
            $(    '#form1 div').addClass('div');
        });
        $(    function(){
            $(    '#form1 :text').show(3000);//选择form中的类型为text的标签
        });
        $(    function(){
            $(    '#form1 :password').show(3000);
        });
        $(    function(){
            $(    '#form1 :radio').show(3000);
            $(    '#form1 #Span1').show(3000);
        });
        $(    function(){
            $(    '#form1 :image').show(3000);
        });
    </script>
    <form method="post" action="" id="form1">
        <textarea name="" rows="" cols="" class="txt">TextArea</textarea>
        <select name="">
            <option value="0">Item 0</option>
        </select>
        <input type="text" name="" value="Text" class="txt" />
        <input type="password" name="" value="Password" class="txt" />
        <input type="radio" name=""/><span id="Span1">Radio</span>
        <input type="checkbox" name="" />
        <span id="Span2">CheckBox</span>
        <input type="submit" name="" value="submit" class="btn" />
        <input type="image" name="" title="Image" src="http://img.baidu.com/img/logo-news.gif" class="img" />
        <input type="reset" value="Reset" class="btn"/>
        <input type="button" value="Button" onclick="" class="btn" />
        <input type="file" name="" title="File" class="txt" />
        <div id="divShow"></div>
    </form>
    </body>
    </html>


    四、过滤器选择器：

    　　1、简单过滤选择器：

    <!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>
        <meta name="keywords" content=" keywords" />
        <meta name="description" content="description" />
    </head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <style type="text/css">
        body    {font-size:12px;text-align:center}
        div    {width:241px;height:83px;border:solid 1px #eee}
        h1    {font-size:13px;}
        ul    {list-style-type:none;padding:0px}
        .DefClass,.NotClass    {height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee}
        .GetFocus    {width:58px;border:solid 1px #666;background-color:#eee}
        #spanMove    {width:238px;height:23px;line-height:23px}
    </style>
    <body>
    <script type="text/javascript">
        $(    function(){
            $(    'li:first').addClass('GetFocus');//第一个
        });
        $(    function(){
            $(    'li:last').addClass('GetFocus');//最后一个
        });
        $(    function(){
            $(    'li:not(.NotClass)').addClass('GetFocus');//非
        });
        $(    function(){
            $(    'li:even').addClass('GetFocus');//取偶数，从0开始
        });
        $(    function(){
            $(    'li:odd').addClass('GetFocus');//取奇数，从0开始
        });
        $(    function(){
            $(    'li:eq(2)').addClass('GetFocus');//等于2,从0开始
        });
        $(    function(){
            $(    'li:gt(1)').addClass('GetFocus');//大于1
        });
        $(    function(){
            $(    'li:lt(2)').addClass('GetFocus');//小于2
        });
        $(    function(){
            $(    'div h1').css('width','238');
            $(    ':header').addClass('GetFocus');//标题类元素
        });
        $(    function(){
            animateIt();
            $(    '#spnMove:animated').addClass('GetFocus');//增加动画效果元素
        });
            function animateIt(){//动画函数
            $(    '#spnMove').slideToggle('slow',animateIt);
        }
    </script>
    <div>
        <h1>基本过滤选择器</h1>
        <ul>
            <li class="DefClass">Item 0</li>
            <li class="DefClass">Item 1</li>
            <li class="NotClass">Item 2</li>
            <li class="DefClass">Item 3</li>
        </ul>
        <span id="spnMove">Span Move</span>
    </div>

    </body>
    </html>

    　　2、内容过滤选择器

    <!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>
        <meta name="keywords" content=" keywords" />
        <meta name="description" content="description" />
    </head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <style type="text/css">
        body    {font-size:12px;text-align:center}
        div    {float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}
        span    {float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee}
    </style>
    <body>
    <script type="text/javascript">
        $(    function(){
            $(    'div:contains("a")').css('display','block');//给定文本中有“A”
        });
        $(    function(){
            $(    'div:empty').css('display','block');//空div的
        });
        $(    function(){
            $(    'div:has(span)').css('display','block');//div中有子标签是span的
        });
        $(    function(){
            $(    'div:parent').css('display','block');//含有子标签或文本的
        });
    </script>
    <div>ABCD</div>
    <div><span></span></div>
    <div>EFaH</div>
    <div></div>

    </body>
    </html>

    　　3、可见性过滤选择器

    <!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>
        <meta name="keywords" content=" keywords" />
        <meta name="description" content="description" />
    </head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <style type="text/css">
        body    {font-size:12px;text-align:center}
        div,span    {float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px}
        .GetFocus    {border:solid 1px #666;background-color:#eee}
    </style>
    <body>
    <script type="text/javascript">
        $(    function(){
            $(    'span:hidden').show();
            $(    'div:visible').addClass('GetFocus');
        });
        $(    function(){
            $(    'span:hidden').show().addClass('GetFocus');
        });
    </script>
    <span style="display:none">Hidden</span>
    <div>Visible</div>
    </body>
    </html>

    　　4、属性过滤选择器：

    <!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>
        <meta name="keywords" content=" keywords" />
        <meta name="description" content="description" />
    </head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <style type="text/css">
        body    {font-size:12px;text-align:center}
        div    {float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}
    </style>
    <body>
    <script type="text/javascript">
        $(    function(){
            $(    'div[id]').show(3000);//选出div中包含ID的标签
        });
        $(    function(){
            $(    'div[title="A"]').show(3000);//选出div中title是A的标签
        });
        $(    function(){
            $(    'div[title!="A"]').show(3000);//选出div中title不是A的标签
        });
        $(    function(){
            $(    'div[title^="A"]').show(3000);//选出div中的title是以A开头的
        });
        $(    function(){
            $(    'div[title$="C"]').show(3000);//选出id中title是以C为结尾的
        });
        $(    function(){
            $(    'div[title*="B"]').show(3000);//选出div中title中有B的
        });
        $(    function(){
            $(    'div[id="divAB"][title*="B"]').show(3000);//选出div中ID为divAB并且title中含有B
        });
    </script>
    <div id="divID">ID</div>
    <div title="A">Title A</div>
    <div id="divAB" title="AB">ID <br />Title AB</div>
    <div title="ABC">Title ABC</div>
    </body>
    </html>

    　　5、子元素过滤选择器：

    <!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>
        <meta name="keywords" content=" keywords" />
        <meta name="description" content="description" />
    </head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <style type="text/css">
        body    {font-size:12px;text-align:center}
        ul    {width:250px;list-style-type:none;padding:0px}
        ul li    {height:23px;width:60px;line-height:23px;float:left;border:solid 1px #eee;border-bottom:solid 1px #eee;margin-bottom:5px}
        .GetFocus    {width:58px;border:solid 1px #666;background-color:#eee}
    </style>
    <body>
    <script type="text/javascript">
        $(    function(){
            $(    'li:nth-child(2)').addClass('GetFocus');//li中第二个字子元素　　:nth-child(eq/even/odd/index)
        });
        $(    function(){
            $(    'li:first-child').addClass('GetFocus');//li中第一个子元素
        });
        $(    function(){
            $(    'li:last-child').addClass('GetFocus');//li中最后一个子元素
        });
        $(    function(){
            $(    'li:only-child').addClass('GetFocus');//li中有唯一一个元素
        });
    </script>
        <ul>
            <li>Item 1-0</li>
            <li>Item 1-1</li>
            <li>Item 1-2</li>
            <li>Item 1-3</li>
        </ul>
        <ul>
            <li>Item 2-0</li>
            <li>Item 2-1</li>
            <li>Item 2-2</li>
            <li>Item 2-3</li>
        </ul>
        <ul>
            <li>Item 3-0</li>
        </ul>
    </body>
    </html>


    　　6、表单对象属性过滤选择器：

    <!DOCTaYPE 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>
        <meta name="keywords" content=" keywords" />
        <meta name="description" content="description" />
    </head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <style type="text/css">
        body    {font-size:12px;text-align:center}
        div    {display:none}
        select    {height:65px}
        .clsIpt    {width:100px;padding:3px}
        .GetFocus    {border:solid 1px #666 ;background-color:#eee}
    </style>
    <body>
    <script type="text/javascript">
        $(    function(){
            $(    '#divA').show(3000);
            $(    '#form1 input:enabled').addClass('GetFocus');//input标签中enabled
        });
        $(    function(){
            $(    '#divA').show(3000);
            $(    '#form1 input:disabled').addClass('GetFocus');
        });
        $(    function(){
            $(    '#divB').show(3000);
            $(    '#divB input:checked').addClass('GetFocus');//input中的checked
        });
        $(    function(){
            $(    '#divC').show(3000);
            $(    '#Span2').html('选中项是'+$('select option:selected').text());//select中option的selected项
        });
    </script>
        <form method="post" action="" id="form1" style="241px">
            <div id="divA">
                <input type="text" name="" class="clsIpt" value="可用文本" />
                <input type="text" name="" class="clsIpt" disabled="disabled" value="不可用文本框" />
            </div>
            <div id="divB">
                <input type="checkbox" name="" value="1" checked="checked" />选中
                <input type="checkbox" name="" value="0" />未选中
            </div>
            <div id="divC">
                <select name="">
                    <option value="0">Item 0</option>
                    <option value="1" selected="selected">Item 1</option>
                    <option value="2">Item 2</option>
                    <option value="3" selected="selected">Item 3</option>
                </select>
                <span id="Span2"></span>
            </div>
        </form>
    </body>
    </html>


    From:Picaso博客~~~http://www.cnblogs.com/picaso/
  • 相关阅读:
    yum命令速查
    5分钟理解编译系统
    Nginx（一）安装及启停
    Linux时间命令
    常用七种排序的python实现
    python迭代器、生成器、装饰器
    LeetCode【第217题】Contains Duplicate
    LeetCode【第1题】Two Sum
    python【第二十篇】Django表的多对多、Ajax
    不要问我DO在哪里？
  • 原文地址：https://www.cnblogs.com/picaso/p/2432098.html
Copyright © 2020-2023  润新知