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 |
