2021-4-2 前端達人
| 區別 | window.onload | $(document).ready() |
|---|---|---|
| 執行次數 | 只能執行一次，如果執行第二次，第一次的執行會被覆蓋 | 可用執行多次，不會覆蓋之前的執行 |
| 執行時機 | 必須等待網易全部加載挖完畢(包括圖片等)，然后再執行包裹的代碼 | 只需要等待網頁中的DOM結果加載完 畢就可以執行包裹的代碼 |
| 簡寫方式 | 無 | $(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、標簽選擇器： function htmlSelector(){ //獲取所有的div元素（集合） var divList=$("div"); console.log(divList);//jQuery的對象 console.log(divList.length); for(var i=0;i<divList.length;i++){ console.log(divList[i]);//js的對象 //將js對象轉換為jQuery的對象 console.log($(divList[i])); } } //2、id選擇器 function idSelector(){ //根據id獲取到的元素是惟一的，即使頁面上有重名的id，獲取的是第一個 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.....所有標簽 console.log(list.length); for(var i=0;i<list.length;i++){ console.log(list[i]);//js的對象 } } //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標簽中name屬性是userName元素的集合 list=$("input[name^='user']");//獲取所有input標簽中name屬性是user開頭的元素的集合 list=$("input[name$='user']");//獲取所有input標簽中name屬性是user結尾的元素的集合 list=$("input[name*='user']");//獲取所有input標簽中name屬性包含了user的元素的集合 list=$("input[id][name^='user']");//獲取所有input標簽中既有id屬性又有name屬性以user開頭的元素的集合 printList(list); } //11、可見性選擇器 function seeSelector(){ //匹配所有的可見div元素 var list=$("div:visible"); //匹配所有的不可見div元素 var list=$("div:hidden"); //匹配所有的不可見input元素,樣式有display：none的元素和type=hidden的元素 list=$("input:hidden"); printList(list); } //文檔就緒事件：頁面加載完畢之后執行： $(function(){ seeSelector(); }); //打印集合 function printList(list){ for(var i=0;i<list.length;i++){ console.log(list[i]); console.log(list[i].innerHTML);//非表單項元素使用該種方式輸出 console.log(list[i].value);//只有表單項元素才有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>
| 鼠標事件 | 鍵盤事件 | 事件 | 文檔/窗口事件 |
|---|---|---|---|
| click | keydown | submit | load |
| dblclick | keyup | change | |
| mouseover | focus | ||
| mouseout | blur | ||
| hover |
