亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 25
粉絲 0
評論 0
訪問量 35260
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
jquery選擇器
宿州市筋斗云信息科技-Vip
原創(chuàng)
1152人瀏覽過

jquery中的選擇器！

：first選擇器 (選擇多個相同元素中的第一個元素！)

:first偽類選擇器相當于:eq(0)。它也可以寫為:lt(1)。雖然:first只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>學習筆記-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.             }
  27.             p {
  28.                 width: 500px;
  29.                 height: 50px;
  30.                 text-align: center;
  31.                 line-height: 50px;
  32.                 margin: 30px auto 0 auto;
  33.                 border: 1px solid #eee;
  34.                 background: #0356fa;
  35.                 cursor: pointer;
  36.                 color: #FFF;
  37.             }
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <div>1</div>
  42.         <div>2</div>
  43.         <div>3</div>
  44.         <div>4</div>
  45.         <div>5</div>
  46.         <div>6</div>
  48.         <p type="button" onclick="clicks()">:first (點我選擇第一個DIV)</p>
  49.     </body>
  51.     <script type="text/javascript">
  52.         function clicks(){
  54.             $('div:first').addClass('addCss');
  57.         }
  58.     </script>
  60. </html>
：last選擇器 (選擇多個相同元素中的最后一個元素！)
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>學習筆記-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.                 line-height: 60px;
  26.             }
  28.             p {
  29.                 width: 500px;
  30.                 height: 50px;
  31.                 text-align: center;
  32.                 line-height: 50px;
  33.                 margin: 30px auto 0 auto;
  34.                 border: 1px solid #eee;
  35.                 background: #0356fa;
  36.                 cursor: pointer;
  37.                 color: #FFF;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div>1</div>
  43.         <div>2</div>
  44.         <div>3</div>
  45.         <div>4</div>
  46.         <div>5</div>
  47.         <div>6</div>
  49.         <p type="button" onclick="clicks()">$('div:last')(點我選擇最后一個DIV)</p>
  50.     </body>
  52.     <script type="text/javascript">
  53.         function clicks(){
  55.             $('div:last').addClass('addCss');
  58.         }
  59.     </script>
  61. </html>
：eq（）選擇器 (選擇多個相同元素中的指定的一個元素！從0開始)
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>學習筆記-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.                 line-height: 60px;
  26.             }
  28.             p {
  29.                 width: 500px;
  30.                 height: 50px;
  31.                 text-align: center;
  32.                 line-height: 50px;
  33.                 margin: 30px auto 0 auto;
  34.                 border: 1px solid #eee;
  35.                 background: #0356fa;
  36.                 cursor: pointer;
  37.                 color: #FFF;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div>1</div>
  43.         <div>2</div>
  44.         <div>3</div>
  45.         <div>4</div>
  46.         <div>5</div>
  47.         <div>6</div>
  49.         <p type="button" onclick="clicks()"> $('div:eq(2)')(點我選擇) </p>
  50.     </body>
  52.     <script type="text/javascript">
  53.         function clicks(){
  55.             $('div:eq(2)').addClass('addCss');
  58.         }
  59.     </script>
  61. </html>
：lt（index）選擇器 (選擇匹配集合中所有索引值小于給定index參數(shù)的元素。)
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>學習筆記-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.                 line-height: 60px;
  26.             }
  28.             p {
  29.                 width: 500px;
  30.                 height: 50px;
  31.                 text-align: center;
  32.                 line-height: 50px;
  33.                 margin: 30px auto 0 auto;
  34.                 border: 1px solid #eee;
  35.                 background: #0356fa;
  36.                 cursor: pointer;
  37.                 color: #FFF;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div>0</div>
  43.         <div>1</div>
  44.         <div>2</div>
  45.         <div>3</div>
  46.         <div>4</div>
  47.         <div>5</div>
  49.         <p type="button" onclick="clicks()"> $('div:lt(2)')(點我選擇) </p>
  50.     </body>
  52.     <script type="text/javascript">
  53.         function clicks(){
  55.             $('div:lt(2)').addClass('addCss');
  58.         }
  59.     </script>
  61. </html>
：gt（index）選擇器 (選擇匹配集合中所有索引值大于給定index參數(shù)的元素。)
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>學習筆記-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.                 line-height: 60px;
  26.             }
  28.             p {
  29.                 width: 500px;
  30.                 height: 50px;
  31.                 text-align: center;
  32.                 line-height: 50px;
  33.                 margin: 30px auto 0 auto;
  34.                 border: 1px solid #eee;
  35.                 background: #0356fa;
  36.                 cursor: pointer;
  37.                 color: #FFF;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div>0</div>
  43.         <div>1</div>
  44.         <div>2</div>
  45.         <div>3</div>
  46.         <div>4</div>
  47.         <div>5</div>
  49.         <p type="button" onclick="clicks()"> $('div:gt(0)')(點我選擇) </p>
  50.     </body>
  52.     <script type="text/javascript">
  53.         function clicks(){
  55.             $('div:gt(0)').addClass('addCss');
  58.         }
  59.     </script>
  61. </html>
：DIV[ID]選擇所有具有指定屬性的元素，該屬性可以是任何值。
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>學習筆記-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.                 line-height: 60px;
  26.             }
  28.             p {
  29.                 width: 500px;
  30.                 height: 50px;
  31.                 text-align: center;
  32.                 line-height: 50px;
  33.                 margin: 30px auto 0 auto;
  34.                 border: 1px solid #eee;
  35.                 background: #0356fa;
  36.                 cursor: pointer;
  37.                 color: #FFF;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div id="a">0</div>
  43.         <div id="b">1</div>
  44.         <div id="c">2</div>
  45.         <div class="d">3</div>
  46.         <div id="e">4</div>
  47.         <div class="f">5</div>
  49.         <p type="button" onclick="clicks()"> $('div[id]')(點我選擇有ID屬性的DIV) </p>
  50.     </body>
  52.     <script type="text/javascript">
  53.         function clicks(){
  55.             $('div[id]').addClass('addCss');
  58.         }
  59.     </script>
  61. </html>
批改老師：西門大官人西門大官人

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學