前端 -----jQuery的選取器

來源:互聯網
上載者:User

標籤:第一個   gre   分享圖片   att   too   點文法   list   img   大於   

 

 

 

 

 

我們以前在CSS中學習的選取器有:

今天來學習一下jQuery 選取器。

jQuery選取器是jQuery強大的體現,它提供了一組方法,讓我們更加方便的擷取到頁面中的元素。

1、jQuery 的基本選取器

 

代碼如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body>    <div></div>    <div id="box"></div>    <div class="box"></div>    <div class="box"></div>    <div></div>    <script type="text/javascript" src="jquery-3.3.1.js"></script>    <script type="text/javascript">        //入口函數        $(function(){            //三種方式擷取jquery對象            var jqBox1 = $("#box");                   var jqBox2 = $(".box");            var jqBox3 = $(‘div‘);            //操作標籤選取器            jqBox3.css(‘width‘, ‘100‘);            jqBox3.css(‘height‘, 100);            jqBox3.css(‘background-color‘, ‘red‘);            jqBox3.css(‘margin-top‘, 10);            //操作類別選取器(隱式迭代,不用一個一個設定)                    jqBox2.css("background", "green");                    jqBox2.text(‘哈哈哈‘)                    //操作id選取器                    jqBox1.css("background", "yellow");                           })    </script>    </body></html>

效果如下:

 

2、層級選取器

 

代碼如下:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="jquery-3.3.1.js"></script>    <script>        $(function () {            //擷取ul中的li設定為粉色            //後代:兒孫重孫曾孫玄孫....            var jqLi = $("ul li");            jqLi.css("margin", 5);            jqLi.css("background", "pink");            //子代:親兒子            var jqOtherLi = $("ul>li");            jqOtherLi.css("background", "red");        });    </script></head><body><ul>    <li>111</li>    <li>222</li>    <li>333</li>    <ol>        <li>aaa</li>        <li>bbb</li>        <li>ccc</li>    </ol></ul></body></html>

效果如下:

 

3、基本過濾選取器

解釋:

代碼如下:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>基本過濾選取器</title>    </head>    <body>        <ul>            <li>哈哈哈哈,基本過濾選取器</li>            <li>嘿嘿嘿</li>            <li>天王蓋地虎</li>            <li>小雞燉蘑菇</li>                    </ul>    </body>    <script src="jquery-3.3.1.js"></script>    <script type="text/javascript">                $(function(){            //擷取第一個 :first ,擷取最後一個 :last                        //奇數            $(‘li:odd‘).css(‘color‘,‘red‘);            //偶數            $(‘li:even‘).css(‘color‘,‘green‘);                        //選中索引值為1的元素 *            $(‘li:eq(1)‘).css(‘font-size‘,‘30px‘);                        //大於索引值1            $(‘li:gt(1)‘).css(‘font-size‘,‘50px‘);                        //小於索引值1            $(‘li:lt(1)‘).css(‘font-size‘,‘12px‘);                                                        })                    </script></html>

效果如下:

4、屬性選取器

 

代碼如下:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>         <div id="box">            <h2 class="title">屬性元素器</h2>            <!--<p class="p1">我是一個段落</p>-->            <ul>                <li id="li1">分手應該體面</li>                <li class="what" id="li2">分手應該體面</li>                <li class="what">分手應該體面</li>                <li class="heihei">分手應該體面</li>            </ul>            <form action="" method="post">                <input name="username" type=‘text‘ value="1" checked="checked"></input>                <input name="username1111" type=‘text‘ value="1"></input>                <input name="username2222" type=‘text‘ value="1"></input>                <input name="username3333" type=‘text‘ value="1"></input>                <button class="btn-default">按鈕1</button>                <button class="btn-info">按鈕1</button>                <button class="btn-success">按鈕1</button>                <button class="btn-danger">按鈕1</button>            </form>        </div>    </body>    <script src="jquery-3.2.1.js"></script>    <script type="text/javascript">                $(function(){            //標籤名[屬性名稱] 尋找所有含有id屬性的該標籤名的元素            $(‘li[id]‘).css(‘color‘,‘red‘);                        //匹配給定的屬性是what值得元素            $(‘li[class=what]‘).css(‘font-size‘,‘30px‘);            //[attr!=value] 匹配所有不含有指定的屬性,或者屬性不等於特定值的元素            $(‘li[class!=what]‘).css(‘font-size‘,‘50px‘);                        //匹配給定的屬性是以某些值開始的元素            $(‘input[name^=username]‘).css(‘background‘,‘gray‘);            //匹配給定的屬性是以某些值結尾的元素            $(‘input[name$=222]‘).css(‘background‘,‘greenyellow‘);                        //匹配給定的屬性是以包含某些值的元素            $(‘button[class*=btn]‘).css(‘background‘,‘red‘)                            })        </script></html>

效果如下:

 

 

 5.篩選選取器

代碼如下:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>         <div id="box">            <p class="p1">                <span>我是第一個span標籤</span>                <span>我是第二個span標籤</span>                <span>我是第三個span標籤</span>            </p>            <button>按鈕</button>        </div>        <ul>            <li class="list">2</li>            <li>3</li>            <li>4</li>            <li>5</li>        </ul>    </body>    <script src="jquery-3.2.1.js"></script>    <script type="text/javascript">                //擷取第n個元素 數值從0開始        $(‘span‘).eq(1).css(‘color‘,‘#FF0000‘);                //擷取第一個元素 :first :last    點文法  :get方法 和set方法        $(‘span‘).last().css(‘color‘,‘greenyellow‘);        $(‘span‘).first().css(‘color‘,‘greenyellow‘);                //尋找span標籤的父元素(親的)        $(‘span‘).parent(‘.p1‘).css({"width":‘200px‘,‘height‘:‘200px‘,"background":‘red‘});                //選擇所有的兄弟元素(不包括自己)                  $(‘.list‘).siblings(‘li‘).css(‘color‘,‘red‘);                                  //尋找所有的後代元素                   $(‘div‘).find(‘button‘).css(‘background‘,‘yellow‘);                                //不寫參數代表擷取所有子項目。                   $(‘ul‘).children().css("background", "green");                   $(‘ul‘).children("li").css("margin-top", 10);                                       </script></html>

效果如下:

前端 -----jQuery的選取器

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.