abstract: 通過(guò)該小節(jié)的學(xué)習(xí)后,讓自己對(duì)JQuery的基礎(chǔ)語(yǔ)法和選擇器有了初步的認(rèn)識(shí),首先JQuery是需要引入頁(yè)面的,引入的方式可以直接寫在body體,也可以在head內(nèi)寫入引入的方式<script type="text/javascript" src="jquery-3.3.1-min.js"></script>,在寫JQuer
通過(guò)該小節(jié)的學(xué)習(xí)后,讓自己對(duì)JQuery的基礎(chǔ)語(yǔ)法和選擇器有了初步的認(rèn)識(shí),首先JQuery是需要引入頁(yè)面的,引入的方式可以直接寫在body體,也可以在head內(nèi)寫入引入的方式<script type="text/javascript" src="jquery-3.3.1-min.js"></script>,在寫JQuery代碼時(shí)都要寫JQuery的文檔就緒函數(shù),
$(document).ready(function(){ Jquery代碼部分; }) 還有就是選擇器,基礎(chǔ)選擇器,通過(guò)標(biāo)簽的Id名class名 還有標(biāo)簽名去獲得的寫法 :$('.box').css('color','red'); 層級(jí)選擇器寫法:$('ul li').css('background','pink')祖先級(jí)與后代級(jí)元素,UL下邊所有的 li全部都會(huì)改變背景顏色; 順序選擇器寫法:$('p:even').css('color','red');p標(biāo)簽偶數(shù)行的元素內(nèi)容變紅色,一般都是從“0”行開(kāi)始的 對(duì)應(yīng)的奇數(shù)行用odd,還有not等; 內(nèi)容選擇器屬性選擇器寫法:$(input'[屬性名=屬性值]').css('改變的屬性','改變的屬性值'); input框下是這個(gè)屬性名和屬性值的所有元素改變,最后一個(gè)就是表單選擇器; 自己及總結(jié),感覺(jué)這么多的選擇器,只要頁(yè)面需要改動(dòng)的部位有ID名或者class名,用基礎(chǔ)選擇器就可以實(shí)現(xiàn)改變相應(yīng)的屬性及其內(nèi)容了,為什么還要掌握后邊那么多的選擇器呀? 感覺(jué)掌握幾個(gè)選擇器就可以了,沒(méi)必要都掌握。 小案例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Jquery選擇器</title> <link rel='shortcut icon' type='image/x-icon' href='../picture/mi.png'> <link rel='stylesheet' type='text/css' href='../css/css.css'> <script type='text/javascript' src='jquery-3.3.1.min.js'></script> <style type='text/css'> /*css 內(nèi)部樣式填寫*/ </style> </head> <body> <!-- 層級(jí)選擇器(相當(dāng)于父類和子類的元素關(guān)系) 給定的父級(jí)元素下匹配所有的子元素: $('父級(jí)元素>子級(jí)元素') 給定的祖級(jí)元素下匹配所有的后代元素: $('祖級(jí)元素 后代元素') 匹配緊跟在prev元素后面的next元素:$('prev + next')(同級(jí)元素) 匹配prev元素后面所有的siblings元素:$('prev ~ siblings') --> <script type='text/javascript'> window.onload=function(){ var a=document.getElementById('user'); a.focus(); //load網(wǎng)頁(yè)后輸入光標(biāo)在輸入框內(nèi) } $(document).ready(function(){ // $('ul').css('margin-left','20px'); // $('ul>li').css('list-style','none'); //父類與子類的元素關(guān)系只是去出ul下li的樣式 // $('ul li').css('list-style','none'); //祖級(jí)元素與后代元素的關(guān)系,去除Ul里所有層級(jí)里的li的默認(rèn)樣式 $('label+input').css('height','50px'); //只能給label相鄰的input該變高度的屬性 // $('label~input').css('height','50px'); //可以改變label到最后一個(gè)input的高度屬性 // $('li:first').css('font-size','50px'); //li標(biāo)簽下第一個(gè)元素字體增大 // $('li:even').css('color','red'); //li標(biāo)簽下偶數(shù)行字體顏色變紅 $('ul:parent').css('background','blue'); //ul標(biāo)簽下所有元素含有內(nèi)容或者子標(biāo)簽的元素//相當(dāng)于給無(wú)序列表加背景色 }) </script> <ul> <li>01</li> <li>02</li> <div> <li>001</li> <li>002</li> <li>003</li> </div> <li>03</li> <li>04</li> <li>05</li> </ul> <hr><br> <label for='user'>用戶名:</label> <input type='username' name='user' id='user' placeholder='請(qǐng)輸入用戶名'> <input type='password' name='password' placeholder='請(qǐng)輸入密碼'> <input type='button' value='提交'> <input type='submit' value='提交'> <input type="reset" value='重寫'> </body> </html>
Correcting teacher:天蓬老師Correction time:2018-12-06 11:48:54
Teacher's summary:表單選擇器, 效率最高的是, 是使用偽類來(lái)選擇,很遺憾,你幾乎沒(méi)有用, 有空看看手冊(cè), jQuery中定義了非常多的,非常方便的表單選擇器方法