JS函数的作用域
python中的函数和类也有作用域。控制语句没有作用域。
<script> if (1){ var x=2; } console.log(x);//x是可以找到的,因为控制语句没有作用域 function f() { var y=4; } f(); console.log(y)//出现y没有定义的错误,函数是有作用域的。 </script>
//嵌套函数的作用域 <script> var name="beijing"; function f() { function fun() { var name="guangdong"; return name; } fun(); return fun(); } var b=f(); console.log(b);//结果为guangdoong console.log(name);//结果为beijing </script>
闭包 <script> var name="beijing"; function f() { var name="shanghai"; function fun() { var name="guangdong"; console.log(name); } return fun; } var b=f(); b();//运行结果为广东 </script>
<script> window.alert("nihao");//alert()方法,只有确定,没有取消,仅仅是提醒 var b=window.confirm("你是张萍吗?");//confirm()方法,选择确定为true,选择取消为false,可以进行选择 console.log(b); var t=window.prompt("hello----");//prompt()方法是进行文本写入,有确定和取消两种选择,输入信息,然后进行选择 console.log(t); window.open("http://www.baidu.com") </script>
<script> function show_Time() { var current_Time=new Date().toLocaleString();//new Data()用来获取当前时间 var b=document.getElementById("id1"); b.value=current_Time; } var clock1; function begin() { if (clock1==undefined){ show_Time(); clock1=setInterval(show_Time,1000)//setInterval()用来做定时器。 } } function end() { clearInterval(clock1); clock1=undefined } </script>
<div onclick="fun()">你是我的小呀小苹果</div> <script> function fun() { console.log("你是一次的") } var c=setTimeout(fun,1000);//1秒后执行函数fun一次。 clearTimeout(c) </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="f()">onsubmit</a> <script> function f() { history.back() } </script> </body> </html> //实现在两个页面中的跳转。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="2.html" onclick="fun()">click>>>></a> <script> function fun() { history.go() } </script> </body> </html>
<script> function f() { location.assign("http://www.baidu.com");//页面跳转到百度页面,可以返回到当前页面 //注意assign()和replace()的区别,replace()没有后退。 location.reload();//刷新页面 location.replace("http://www.baidu.com");//当前页面被新的页面覆盖 } </script>
<script> var ele=document.getElementsByClassName("p1")[0]; console.log(ele.nodeName);//在HTML中所有的标签都是节点,节点名字 console.log(ele.nodeType);//节点类型 console.log(ele.nodeValue);//节点值 console.log(ele.innerHTML);//节点中的文本信息 </script>
<script> var ele=document.getElementsByClassName("p1")[0]; /*console.log(ele.nodeName);//在HTML中所有的标签都是节点,节点名字 console.log(ele.nodeType);//节点类型 console.log(ele.nodeValue);//节点值 console.log(ele.innerHTML);//节点中的文本信息 ele.innerHTML="你是改了之后的信息";*/ ele.parentNode.innerHTML="HAOLEO";//父亲节点,这个很重要,必须记住,别的可以不记。 var v=ele.nextSibling;//兄弟节点 console.log(v);//运行结果为#text,不建议使用这种,因为他将空文档都算作兄弟节点了。 var cv=ele.nextElementSibling; console.log(cv);//运行结果为div标签及里面的文字 </script>
js用的最多的是属性。
一定要注意;局部查找一定不支持getElementById()和 getElementsByName()方法。
所谓局部查找就是用当前找到的标签进行别的标签的查询,而全局查找则是用document对象来查找。
innerHTML和innerTEXT拿到的是不同的,后者只拿到文本内容。
<script> var ele=document.getElementById("ad"); function f1() { if(ele.value=="请输入用户名"){ ele.value=""; } } function f2() { if(!ele.value.trim()){ ele.value="请输入用户名" } } </script>
最好将script放到body下面,免得加载出现错误。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="div1"> <div class="div2">dddd</div> <div class="div2">yyyy</div> <div class="div2">zzzz</div> <div class="div2">dtttt</div> <div class="div2">ppppp</div> <p id="p1">iiiiiiiii</p> </div> <script> //绑定事件的第二种方法,以后建议写第二种。即先获得标签,完了给标签绑定事件,很重要 var id=document.getElementById("p1"); id.onclick=function () { alert(222) } var uu=document.getElementsByClassName("div2"); //getElementsByClassName()方法获取到的是一个集合,必须用索引的方式进行遍历 for (var i=0;i<uu.length;i++){ uu[i].onclick=function () { alert(3333) } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="div1"> <div class="div2">dddd</div> <div class="div2">yyyy</div> <div class="div2">zzzz</div> <div class="div2">dtttt</div> <div class="div2">ppppp</div> //注意带上参数this之后拿到的就是这个标签对象,可以通过当前标签对象对其兄弟标签进行操作。 <p id="p1"onclick="func(this)">iiiiiiiii</p> </div> <script> //参数that是随便给的,只要名字不是this就行。 function func(that) { console.log(that); var n=that.previousElementSibling;//通过that获得上面的一个兄弟标签。 n.innerHTML=""; } </script> </body> </html>