一、作用域
1.作用域例一
1 <script> 2 3 var str = "global"; //AO1 AO1.str 4 function t(age){ 5 console.log(str); // undefined 6 var str = "locale"; 7 // console.log(str); // locale 8 9 } 10 t(); 11 // 预编译，形成AO对象： 12 /** 13 * 1.f分析函数的参数： 14 * 如果没有参数的话，AO对象上没有任何属性 15 * Ao.age = undefined 16 * 2.分析函数的变量声明： 17 * AO.str = undefined 18 * 19 * 3.分析函数的函数声明表达式： 20 * 无 21 * AO.sum = functioon(){} 22 * **/ 23 /** 24 * AO.str = "lcoale" 25 * **/ 26 </script>
2.作用域例二
1 <script> 2 function t(age){ 3 console.log(age); // 词法:5 执行结果:funcation age() 4 var age = 99; 5 console.log(age); // 词法:5 执行结果:99 6 function age() { // 词法:fun 执行结果:99不能执行 7 } 8 //age(); 9 console.log(age) // 词法:fun 执行结果:99 10 } 11 t(5) 12 13 /* 14 ********************变量的作用域是在声明时决定的而不是调用执行时决定****************** 15 * 一.词法分析 16 * 1.有参数时 17 * age = undenfined 18 * age = 5 19 * 2.发现age已经在AO上面,什么也不做.不会复盖age=5 20 * 3.function age会复盖上面的age=5;(注意在词法分析的时候最后age=funcation age()) 21 * 22 * 二.执行 23 * 1.第一个console.log打印function age(){},因为词法分析后,最后就是funcation age(){} 24 * 2.第二个console.log打印99,因为var age=99把function age(){}复盖. 25 * 3.第三个console.log打印99, function没有执行,如果执行的话,会报错. 26 * 4.至于function age()为什么没有复盖 age=99.那么先读(变量的作用域是在声明时决定的而不是调用执行时决定). 27 * function age()在词法分析的时候生效了,在执行的时候早被第一部让参数复盖; 28 * */ 29 </script>
二、jQuery事例
1.tab切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 .item{ 9 height:38px; 10 line-height: 38px; 11 background-color: #204982; 12 300px; 13 } 14 .menu{ 15 float: left; 16 border-right: 1px solid green; 17 padding:0 10px; 18 color:white; 19 cursor: pointer; 20 } 21 22 .hide{ 23 display: none; 24 } 25 26 .active{ 27 background-color: #2459a2; 28 } 29 </style> 30 <body> 31 <div style=" 700px;margin: 0 auto;"> 32 <div class="item"> 33 <div class="menu active" a="1">菜单一</div> 34 <div class="menu" a="2">菜单二</div> 35 <div class="menu" a="3">菜单三</div> 36 </div> 37 38 <div class="content"> 39 <div class="info" b="1">内容一</div> 40 <div class="info hide" b="2">内容二</div> 41 <div class="info hide" b="3">内容三</div> 42 </div> 43 </div> 44 </body> 45 <script src="jquery.js"></script> 46 <script> 47 $(".menu").click(function(){ 48 $(this).addClass('active').siblings().removeClass('active'); 49 var v = $(this).attr('a'); // 1, 2, 3 50 $(this).parent().siblings().children("[b='"+ v +"']").removeClass("hide").siblings().addClass("hide"); 51 }); 52 </script> 53 </html>
2.动画效果
1 <body> 2 <img src="ju.jpg" alt="" style="display: none"> 3 </body> 4 <script src="jquery.js"></script> 5 <script> 6 // $("img").show(1000); 7 // $("img").hide(1000); 8 // $("img").toggle("slow"); 9 // $("img").fadeIn(1000); 10 // $("img").fadeOut(1000); 11 function test(){ 12 $("img").slideToggle(1000) 13 } 14 setInterval(test,3000); 15 </script>
3.左菜单选择
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 .info{ 9 400px; 10 } 11 .item{ 12 /*height:34px;*/ 13 } 14 .header{ 15 /*line-height: 34px;*/ 16 background-color: burlywood; 17 cursor: pointer; 18 } 19 .content{ 20 display: none; 21 } 22 </style> 23 <body> 24 <div class="info"> 25 <div class="item"> 26 <div class="header">菜单一</div> 27 <div class="content">内容一</div> 28 <div class="content">内容一</div> 29 <div class="content1">内容一</div> 30 </div> 31 <div class="item"> 32 <div class="header">菜单二</div> 33 <div class="content">内容二</div> 34 <div class="content">内容二</div> 35 <div class="content">内容二</div> 36 </div> 37 <div class="item"> 38 <div class="header">菜单三</div> 39 <div class="content">内容三</div> 40 <div class="content">内容三</div> 41 <div class="content">内容三</div> 42 </div> 43 </div> 44 </body> 45 <script src="jquery.js"></script> 46 <script> 47 $(".header").click(function(){ 48 $(this).nextAll().css("display","block"); 49 $(this).parent('.item').siblings('.item').children('.content').css("display","none"); 50 }); 51 </script> 52 </html>
4.左右元素选择
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 select{ 8 150px; 9 height:300px; 10 } 11 </style> 12 </head> 13 <body> 14 <select name="fruit" id="fruit" multiple></select> 15 <input type="button" value="<---" onclick="toleft();"> 16 <input type="button" value="<===" onclick="totalleft();"> 17 <input type="button" value="--->" onclick="toright();"> 18 <input type="button" value="===>" onclick="totalright();"> 19 <select name="fish" id="fish" multiple> 20 <option value="">大鱼</option> 21 <option value="">小鱼</option> 22 <option value="">虾米</option> 23 <option value="">甲鱼</option> 24 <option value="">咸鱼</option> 25 <option value="">苹果</option> 26 <option value="">香蕉</option> 27 <option value="">菠萝</option> 28 <option value="">西瓜</option> 29 </select> 30 </body> 31 <script src="jquery.js"></script> 32 <script> 33 function toleft(){ 34 // append() 35 $("#fish option:selected").appendTo("#fruit"); 36 } 37 38 function totalleft(){ 39 $("#fish option").appendTo("#fruit"); 40 } 41 42 function toright(){ 43 $("#fruit option:selected").appendTo("#fish"); 44 } 45 function totalright(){ 46 $("#fruit option").appendTo("#fish"); 47 } 48 </script> 49 </html>
5.请输入关键字
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <!--placeholder="请输入关键字" 就可以代替这些,这个属于html5功能--> 9 <input type="text" > 10 </body> 11 <script src="jquery.js"></script> 12 <script> 13 $("input[type='text']").focus(function(){ 14 var v = $(this).val(); 15 if(v == "请输入关键字"){ 16 $(this).val(""); 17 } 18 }); 19 $("input[type='text']").blur(function(){ 20 var v = $(this).val(); 21 if(v == ""){ 22 $(this).val("请输入关键字"); 23 } 24 }) 25 </script> 26 </html>
6.文档处理
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul> 9 <li>艺术家们</li> 10 </ul> 11 <br> 12 <input type="button" onclick="add();" value="向ul中添加一个li元素" /> 13 <input type="button" onclick="del();" value="删除元素的内容" /> 14 </body> 15 <script src="jquery.js"></script> 16 <script> 17 function del(){ 18 // $("ul").empty(); 19 $("ul").remove(); 20 } 21 function add(){ 22 // var myli = $("<li>闫帅</li>"); 23 // $("ul").append(myli); 24 // var myli = $("<li>苍老师</li>"); 25 // myli.appendTo($("ul")); 26 27 // var myli = $("<li>alex</li>"); 28 // $("ul").prepend(myli); 29 var myspan = $("<span>感谢日本艺术家们 alex</span>"); 30 $("ul").before(myspan); 31 } 32 33 </script> 34 </html>
7.样式处理--开关灯
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 .on{ 9 background-image: url('on.jpg'); 10 } 11 .off{ 12 background-image: url('off.jpg'); 13 } 14 div{ 15 108px; 16 height:144px; 17 } 18 </style> 19 <body> 20 <div id="myimg" class="on off" onclick="bright();"> 21 22 </div> 23 </body> 24 <script src="jquery.js"></script> 25 <script> 26 function bright(){ 27 28 // $("#myimg").removeClass("off"); 29 // $("#myimg").addClass("on"); 30 /** 31 * 如果有off 去掉off 灯亮 32 * 如果没有off 加上off 灯灭 33 * **/ 34 if($("#myimg").hasClass('off')){ 35 $("#myimg").removeClass("off"); 36 }else{ 37 $("#myimg").addClass("off"); 38 } 39 40 } 41 </script> 42 </html>
8.模态对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 .hide{ 9 display: none; 10 } 11 .show{ 12 display: block; 13 } 14 .shadow{ 15 position: fixed; 16 top:0; 17 right:0; 18 left:0; 19 bottom:0; 20 opacity:0.6; 21 background-color: #000; 22 z-index: 10; 23 } 24 .modal{ 25 position: fixed; 26 top:10%; 27 left:20%; 28 right:20%; 29 bottom:30%; 30 background-color: wheat; 31 z-index: 11; 32 } 33 34 </style> 35 <body> 36 <input type="button" onclick="addEle();" value="添加"/> 37 <table border="1" width="400px" id="info"> 38 <tr> 39 <td target="ip">192.168.1.1</td> 40 <td target="port">80</td> 41 <td> 42 <input type="button" value="编辑" class="edit"/> 43 </td> 44 <td> 45 <input type="button" value="删除"/> 46 </td> 47 </tr> 48 <tr> 49 <td target="ip">192.168.1.2</td> 50 <td target="port">81</td> 51 <td> 52 <input type="button" value="编辑" class="edit"/> 53 </td> 54 <td> 55 <input type="button" value="删除"/> 56 </td> 57 </tr> 58 59 <tr> 60 <td target="ip">192.168.1.3</td> 61 <td target="port">82</td> 62 <td> 63 <input type="button" value="编辑" class="edit"/> 64 </td> 65 <td> 66 <input type="button" value="删除"/> 67 </td> 68 </tr> 69 </table> 70 <div class="modal hide"> 71 主机IP：<input type="text" value="" name="ip"/><p> 72 端口号：<input type="text" value="" name="port"/><p> 73 <input type="button" value="确认"> 74 <input type="button" value="取消" onclick="cancelModel()"> 75 </div> 76 <div class="shadow hide"></div> 77 </body> 78 <script src="jquery.js"></script> 79 <script> 80 function addEle(){ 81 $(".hide").css("display","block"); 82 } 83 function cancelModel(){ 84 $(".hide").css("display","none"); 85 } 86 87 $(".edit").click(function(){ 88 $(".hide").css("display","block"); 89 var tds = $(this).parent().siblings('td'); 90 // console.log(tds); 91 tds.each(function(){ 92 var k = $(this).attr('target'); 93 var v = $(this).text(); 94 console.log(k + '---' + v); 95 var v1 = "input[name = '"; 96 var v2 = "']"; 97 var tmp = v1 + k + v2; 98 // console.log(tmp); 99 $(tmp).val(v); 100 }); 101 102 103 104 //获取ip和port值 105 // var ip = $(tds[0]).text(); 106 // var port = $(tds[1]).text(); 107 //// console.log(ip + '----' + port); 108 // // 设置ip和port到模态框内 109 // $("input[name='ip']").val(ip); 110 // $("input[name='port']").val(port); 111 }) 112 </script> 113 </html>
9.表单提交
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form action="http://www.baidu.com" id="info" method="get"> 9 用户名：<input type="text" desc="username"><br> 10 密码：<input type="password" desc="password"><br> 11 邮箱：<input type="text" desc="mail"><br> 12 地址：<input type="text" desc="addr"><br> 13 <input type="submit" value="提交" > 14 </form> 15 </body> 16 <script src="jquery.js"></script> 17 <script> 18 $(":submit").click(function(){ 19 var flag = true; 20 $(".err").remove(); 21 $("input[type='text'],input[type='password']").each(function(){ 22 var v = $(this).val(); 23 if(v.length == 0 ){ 24 flag = false; 25 var desc = $(this).attr("desc"); 26 $(this).after($("<span class='err'>" + desc + "必填</span>")); 27 return false; 28 } 29 }); 30 return flag; 31 }) 32 </script> 33 </html>
10.全选反选
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="全选" onclick="SelectAll();"> 9 <input type="button" value="取消" onclick="CancelAll();"> 10 <input type="button" value="反选" onclick="ReverseAll();"> 11 <table border="1px" width="400px"> 12 <tr> 13 <td>1</td> 14 <td>2</td> 15 <td>3</td> 16 <td><input type="checkbox" /></td> 17 </tr> 18 <tr> 19 <td>1</td> 20 <td>2</td> 21 <td>3</td> 22 <td><input type="checkbox" /></td> 23 </tr> 24 <tr> 25 <td>1</td> 26 <td>2</td> 27 <td>3</td> 28 <td><input type="checkbox" /></td> 29 </tr> 30 </table> 31 </body> 32 <script src="jquery.js"></script> 33 <script> 34 function SelectAll(){ 35 $("input[type='checkbox']").prop("checked",true); 36 } 37 function CancelAll(){ 38 $("input[type='checkbox']").prop("checked",false); 39 } 40 function ReverseAll(){ 41 /** 42 * js的循环： 43 * for(var i=0;i<length;i++){ 44 * } 45 * 46 * for(var i in dict_info){ 47 * } 48 * **/ 49 $("input[type='checkbox']").each(function () { 50 // console.log(1); 51 // console.log($(this)); 52 var s = $(this).prop("checked"); 53 // console.log(s); 54 if(s){ 55 $(this).prop("checked",false); 56 }else{ 57 $(this).prop("checked",true); 58 } 59 /** 60 * s = 4 > 3 ? true : false 61 * **/ 62 $(this).prop("checked") ? $(this).prop("checked",false) : $(this).prop("checked",true); 63 }); 64 } 65 </script> 66 </html>
11.阻止事件发生
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <a href="http://www.baidu.com" onclick = "return dianji();">走一波</a> 9 </body> 10 <script src="jquery.js"></script> 11 <script> 12 function dianji(){ 13 alert('dsadsad'); 14 return false; 15 } 16 </script> 17 </html>
12.隔行换色
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <table border="1" width="400px"> 9 <tr> 10 <td>1</td> 11 <td>2</td> 12 <td>3</td> 13 </tr> 14 <tr> 15 <td>1</td> 16 <td>2</td> 17 <td>3</td> 18 </tr> 19 <tr> 20 <td>1</td> 21 <td>2</td> 22 <td>3</td> 23 </tr> 24 </table> 25 </body> 26 <script src="jquery.js"></script> 27 <script> 28 $("tr").mouseover(function(){ 29 $(this).css("background-color","red"); 30 }); 31 $("tr").mouseout(function(){ 32 $(this).css("background-color","white"); 33 }) 34 </script> 35 </html>
13.页面加载(将js写在页面头部,也不影响加载2个方法)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="jquery.js"></script> 7 <script> 8 //方法一 9 $(function(){ 10 $("div").click(function(){ 11 console.log("dsadsadsa"); 12 }) 13 }); 14 //方法二 15 $(document).ready(function(){ 16 $("div").click(function(){ 17 console.log("dsadsadsa"); 18 }) 19 }); 20 21 </script> 22 </head> 23 <body> 24 <div> 25 dsjandksandksank 26 </div> 27 </body> 28 </html>