2021-4-2 前端達(dá)人
| 區(qū)別 | window.onload | $(document).ready() |
|---|---|---|
| 執(zhí)行次數(shù) | 只能執(zhí)行一次，如果執(zhí)行第二次，第一次的執(zhí)行會(huì)被覆蓋 | 可用執(zhí)行多次，不會(huì)覆蓋之前的執(zhí)行 |
| 執(zhí)行時(shí)機(jī) | 必須等待網(wǎng)易全部加載挖完畢(包括圖片等)，然后再執(zhí)行包裹的代碼 | 只需要等待網(wǎng)頁(yè)中的DOM結(jié)果加載完 畢就可以執(zhí)行包裹的代碼 |
| 簡(jiǎn)寫(xiě)方式 | 無(wú) | $(function(){ }); |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>選擇器</title> <script type="text/javascript" src="js/jquery-1.11.1.js" ></script> <script> //1、標(biāo)簽選擇器： function htmlSelector(){ //獲取所有的div元素（集合） var divList=$("div"); console.log(divList);//jQuery的對(duì)象 console.log(divList.length); for(var i=0;i<divList.length;i++){ console.log(divList[i]);//js的對(duì)象 //將js對(duì)象轉(zhuǎn)換為jQuery的對(duì)象 console.log($(divList[i])); } } //2、id選擇器 function idSelector(){ //根據(jù)id獲取到的元素是惟一的，即使頁(yè)面上有重名的id，獲取的是第一個(gè) var p=$("#p1"); console.log(p.html()); } //3、.class選擇器 function classSelector(){ var list=$(".mydiv"); console.log(list.length); } //4、 全局選擇器 function allSelector(){ var list=$("*");//包括了html、head、title.....所有標(biāo)簽 console.log(list.length); for(var i=0;i<list.length;i++){ console.log(list[i]);//js的對(duì)象 } } //5、并集選擇器 function andSelector(){ var list=$(".mydiv,p,li"); printList(list); } //6、后代選擇器:包括所有的后代，兒子和孫子輩都有 function subSelector(){ var list=$("form input"); printList(list); } //7、子選擇器：只有子元素 function sunSelector(){ var list=$("form>input"); printList(list); } //8、相鄰選擇器 function nextSelector(){ var list=$("label + input"); printList(list); } //9、同輩選擇器 function sublingsSelector(){ var list=$("form ~ div"); printList(list); } //10、屬性選擇器 function attrSelector(){ var list=$("div[id]");//獲取所有有id屬性的div的元素集合 list=$("div[class]");//獲取所有有class屬性的div的元素集合 list=$("input[name='userName']");//獲取所有input標(biāo)簽中name屬性是userName元素的集合 list=$("input[name^='user']");//獲取所有input標(biāo)簽中name屬性是user開(kāi)頭的元素的集合 list=$("input[name$='user']");//獲取所有input標(biāo)簽中name屬性是user結(jié)尾的元素的集合 list=$("input[name*='user']");//獲取所有input標(biāo)簽中name屬性包含了user的元素的集合 list=$("input[id][name^='user']");//獲取所有input標(biāo)簽中既有id屬性又有name屬性以u(píng)ser開(kāi)頭的元素的集合 printList(list); } //11、可見(jiàn)性選擇器 function seeSelector(){ //匹配所有的可見(jiàn)div元素 var list=$("div:visible"); //匹配所有的不可見(jiàn)div元素 var list=$("div:hidden"); //匹配所有的不可見(jiàn)input元素,樣式有display：none的元素和type=hidden的元素 list=$("input:hidden"); printList(list); } //文檔就緒事件：頁(yè)面加載完畢之后執(zhí)行： $(function(){ seeSelector(); }); //打印集合 function printList(list){ for(var i=0;i<list.length;i++){ console.log(list[i]); console.log(list[i].innerHTML);//非表單項(xiàng)元素使用該種方式輸出 console.log(list[i].value);//只有表單項(xiàng)元素才有value } } </script> </head> <body> <form> <label>用戶名：</label> <input type="hidden" name="userId" value="1001" /> <input style="display: none;" value="隱藏的input" /> <input id="userName" name="userName" value="jiaobaoyu" /><br /> <label>密碼：</label> <input name="userPass" type="password" value="1234567"/><br /> <fieldset> 電話：<input id="phone" name="phoneuser" value="13712345789"/><br /> 郵箱：<input name="emailuser" type="email" value="lina@sina.com" /> </fieldset> </form> 地址：<input name="addressuser1" value="北京" /><br /> <ul> <li>li111111</li> <li>li111111</li> <li>li111111</li> </ul> <p id="p1">p111111111111</p> <div id="div1" class="mydiv" style="display: none;" >div1</div> <div class="mydiv">div2</div> <div id="div3">div3</div> </body> </html>
| 鼠標(biāo)事件 | 鍵盤(pán)事件 | 事件 | 文檔/窗口事件 |
|---|---|---|---|
| click | keydown | submit | load |
| dblclick | keyup | change | |
| mouseover | focus | ||
| mouseout | blur | ||
| hover |
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn
