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

搜索
博主信息
博文 34
粉絲 0
評論 0
訪問量 28316
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
12月20日_ jQuery選擇器、表單對象屬性 - 九期線上班
只貓
原創(chuàng)
735人瀏覽過

JQuery的其他選擇器

  1. <div style="background: lightblue" id="blue" class="my">div1</div>
  2.     <div style="background: lightgreen" id="green" class="my">div2</div>
  3.     <div style="background: lightpink" id="pink" class="my">div3</div>
  5.     <div style="background: lightyellow" id="yellow" class="my">
  6.         <p id="js">
  7.             <i>javascript</i>
  8.             <i>javascript</i>
  9.             <i>javascript</i>
  10.         </p>
  11.         <p id="jq">
  12.             <b attr="title">JQuery</b>
  13.             <b attr="list">jquery</b>
  14.             <b attr="list">jquery</b>
  15.         </p>
  16.         <p><h3>JavascriptJquery</h3></p>
  17.         <i>div的直接子元素1</i>
  18.         <b>div的直接子元素2</b>
  19.     </div>
  21. <script>
  22.     //jQuery偽類選擇器 
  23.     //:first 相當(dāng)于:eq(0)
  24.     var obj1 = $('p:first');
  25.     console.log(obj1);
  26.     //:eq(index) 等于
  27.     var obj2 = $('p:eq(1)');
  28.     console.log(obj2);
  29.     //:gt(index)    大于
  30.     var objs3 = $('div:gt(1)');
  31.     console.log(objs3);
  32.     //:lt(index)    小于
  33.     var objs4 = $('div:lt(2)');
  34.     console.log(objs4);
  35.     //:last
  36.     var obj5 = $('div:last');
  37.     console.log(obj5);
  39.     //jQuery屬性選擇器 
  40.     //選擇該屬性
  41.     var objs6 = $('p[id]');
  42.     console.log(objs6);    //選擇帶有id屬性的p標(biāo)簽
  43.     //給定屬性值
  44.     var obj7 = $("b[attr='title']");
  45.     console.log(obj7);
  46.     //屬性值不等于 != (沒有這個(gè)屬性也算)
  47.     var obj8 = $("b[attr!='title']");
  48.     console.log(obj8);
  50.     //^ 以xxx屬性值開頭
  51.     var obj9 = $("b[attr^='t']");
  52.     console.log(obj9);
  53.     //$ 以xxx屬性值結(jié)尾
  54.     var obj10 = $("b[attr$='e']");
  55.     console.log(obj10);
  56.     //*屬性值包含
  57.     var obj11 = $("b[attr*='i']");
  58.     console.log(obj11);
  60.     //:frist-child
  61.     var obj12 = $("div p:first-child");
  62.     console.log(obj12); //選中id為js的p標(biāo)簽
  63.     </script>

Jquery表單對象屬性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery表單屬性</title>
  6.     <script src="jquery.js"></script>
  7. </head>
  8. <body>
  9.     <form>
  10.         <div>
  11.             <lable>用戶名：</lable>
  12.             <input type="text" name="username">
  13.         </div>    
  14.         <div>
  15.             <lable>密碼：</lable>
  16.             <input type="password" name="pwd">
  17.         </div>
  18.         <div>
  19.             <lable>重復(fù)密碼：</lable>
  20.             <input type="password" name="repwd">
  21.         </div>
  22.         <div>
  23.             <lable>性別：</lable>
  24.             <!-- name屬性相同才互斥 -->
  25.             <input type="radio" name="sex" value="1">男
  26.             <input type="radio" name="sex" value="2">女
  27.         </div>
  28.         <div>
  29.             <lable>籍貫：</lable>
  30.             <select name="province">
  31.             <option value="henan">河南</option>
  32.             <option value="anhui">安徽</option>
  33.             <option value="fujian">福建</option>
  34.             <option value="gansu">甘肅</option>
  35.             <option value="hebei">河北</option>
  36.             </select>
  37.         </div>
  38.         <div>
  39.             <lable>用戶狀態(tài)：</lable>
  40.             <input type="checkbox" name="status">禁用
  41.         </div>
  42.         <!-- 默認(rèn)form里點(diǎn)擊button會(huì)提交 -->
  43.         <button type="button" onclick="save()">保存</button>
  44.     </form>
  46.     <script>
  47.         function save(){
  48.             var name = $('input[name="username"]').val();
  49.             var pwd = $('input[name="pwd"]').val();
  50.             var repwd = $('input[name="repwd"]').val();
  51.             var sex = $('input[name="sex"]:checked').val();
  52.             var status = $('input[name="status"]:checked').val();
  53.             var province = $('select[name="province"]').val();
  55.             //var province = $('select option:select').val();
  56.             var provinceText = $('select option:selected').text();
  57.             console.log(sex);    //始終是1
  58.             console.log(status);    //選與不選都是on
  59.             console.log(province);
  60.             console.log(provinceText);
  61.             //加上 :checked屬性
  62.             //復(fù)選框不選的情況下是undefined  選中是on
  63.             //單選按鈕都不選的情況下是undefined 選中哪個(gè)就是哪個(gè)的value值
  64.             if(pwd == ''){
  65.                 alert('請?zhí)顚懨艽a');
  66.                 return;
  67.             }
  68.             if(pwd!=repwd){
  69.                 alert('兩次輸入的密碼不一致');
  70.                 return;
  71.             }
  72.             if(sex == undefined){
  73.                 alert('請選擇性別');
  74.                 return;
  75.             }
  76.             if(status == undefined){
  77.                 alert('請選擇用戶狀態(tài)');
  78.                 return;
  79.             }
  80.         }
  81.     </script>
  82. </body>
  83. </html>


總結(jié)：選擇器需要多練。不清楚的地方查手冊，靈活運(yùn)用。表單屬性很常用也很有用。案例很有幫助。

批改老師：天蓬老師天蓬老師

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

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

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

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