学习视频:https://www.bilibili.com/video/BV1Y7411K7zz?p=43&spm_id_from=pageDriver
1.关系运算符
==表示数值的比较
===表示全等号,不仅比较数值,还会比较类型
2.逻辑运算符
0,null,underfined,""都认为是false
&&运算符
如果表达式全为真,返回最后一个表达式的值
有一个为假时,返回第一个为假的表达式的值
||或运算
全为假时,返回最后一个表达式的值
只要存在为真的表达式,就会返回第一个为真的表达式的值
&&运算和||运算有短路
即某个&&和||运算有结果了之后,后面的表达式不再执行
3.数组
<script type="text/javascript"> var arr=[]//定义一个空数组 arr[0] = 1; arr[2] = 12; arr[3] = "a" for (var i = 0; i < arr.length; i++) { alert(arr[i]) } </script>
4.函数
方式一:
使用function关键字来定义函数
有参函数定义时不用写参数类型*
有返回值时直接使用return关键字返回值即可
方式二:
var 函数名=function(参数列表){}
js函数不允许重载
函数的arguments隐形参数(只在function函数内)
在function函数中不需要定义,但却可以直接用来获取所有参数的变量,即为隐形参数。非常像java基础中的可变长参数。操作也类似数组。
5,JS中的自定义对象
(1)Object形式的自定义对象
(2){}花括号形式的自定义对象
<script type="text/javascript"> var obj = new Object(); obj.name = "星爷"; obj.age = 66; obj.bea=function () { alert("名字是"+this.name+" 年龄是"+this.age); } obj.bea(); </script>
<script type="text/javascript"> var star={ name:"周润发", age:45, fun:function () { alert("名字是"+this.name+"年龄是"+this.age); } }; star.fun() </script>
6.js中的事件
事件即电脑输入设备与页面进行交互的响应
事件注册(绑定)
分为静态注册和动态注册。
什么是事件的注册:
告诉浏览器,当事件发生后应该执行哪些操作代码。
静态注册事件:通过html标签的事件属性直接赋予事件响应后的代码,这种方式称为静态注册。
动态注册事件:先通过js代码得到标签的dom对象,然后再通过dom对象.事件名=function(){},这种形式赋予事件响应后的代码,叫动态注册。
动态注册基本步骤:
(1)获取标签对象
(2)标签对象.事件名=function(){}
例如
静态注册onload事件:
<head> <meta charset="UTF-8"> <title>onload页面</title> <script> function f() { alert("静态注册onload事件,执行的所有代码"); } </script> </head> <body onl oad="f();"> </body>
动态注册onload事件:
<script type="text/javascript"> // function f() { // alert("静态注册onload事件,执行的所有代码"); // } window.onload = function () { alert("动态注册onload事件,执行的所有代码..."); } </script>
动态注册onclick事件
<head> <meta charset="UTF-8"> <title>onload页面</title> <script type="text/javascript"> // function f() { // alert("静态注册onload事件,执行的所有代码"); // } window.onload = function () { var btnobj = document.getElementById("btn01"); btnobj.onclick = function () { alert("动态注册onclick事件,点击执行的代码..."); } } </script> </head> <body> <button id="btn01">按钮一</button> </body>
点击按钮后弹框
静态注册onclur事件
<head> <meta charset="UTF-8"> <title>注册onblur事件</title> <script type="text/javascript"> function onblurFun() { //console是控制台对象,是由javascript语言提供,专门用来向浏览器的控制器打印输出,用于测试使用 console.log("静态注册失去焦点事件..."); } </script> </head> <body> 用户名:<input type="text" onblur="onblurFun();"><br/> 密码:<input type="text" onblur="onblurFun();"><br/> </body>
每次失焦后控制台会打印测试的文字
动态注册失去焦点事件:
<head> <meta charset="UTF-8"> <title>注册onblur事件</title> <script type="text/javascript"> // function onblurFun() { // //console是控制台对象,是由javascript语言提供,专门用来向浏览器的控制器打印输出,用于测试使用 // console.log("静态注册失去焦点事件..."); // } window.onload = function () { var pwobj = document.getElementById("password"); pwobj.onblur = function () { console.log("动态注册失去焦点事件...") } } </script> </head> <body> 用户名:<input type="text" ><br/> 密码:<input type="text" id="password"><br/>
发现表单非法提交静态,动态事件
<script type="text/javascript"> function onsubmitFun() { alert("静态提交非法..."); return false; } window.onload = function () { var emObj = document.getElementById("form01"); emObj.onsubmit = function () { alert("动态提交非法..."); return false; } } </script> </head> <body> <!--用户名:<input type="text" ><br/>--> <!--密码:<input type="text" id="password"><br/>--> <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();"> <input type="submit" value="静态注册"/> </form> <form action="http://localhost:8080" id="form01"> <input type="submit" value="动态注册"/> </form> </body>
7.DOM模型
标签对象化,简单说就是使用类记录标签的信息
可以使用getElementsByName根据name来获取对象
<head> <meta charset="UTF-8"> <title>allSelect</title> <script type="text/javascript"> function allselectFun() { var elObj = document.getElementsByName("hobby"); for (var i = 0; i <elObj.length; i++) { elObj[i].checked = true; } } function noselectFun() { var elObj = document.getElementsByName("hobby"); for (var i = 0; i <elObj.length; i++) { elObj[i].checked = false; } } function reverseselectFun() { var elObj = document.getElementsByName("hobby"); for(var i = 0;i < elObj.length ;i++){ if(elObj[i].checked){ elObj[i].checked =false; }else{ elObj[i].checked =true; } } } </script> </head> <body> 兴趣爱好: <input type="checkbox" name="hobby" value="Cpp">c++ <input type="checkbox" name="hobby" value="Java">java <input type="checkbox" name="hobby" value="Python">python <br/> <button onclick="allselectFun()">全选</button> <button onclick="noselectFun()">全不选</button> <button onclick="reverseselectFun()">反选</button> </body>
如果既没有id属性,也没有name属性,可以通过getElementsByTagName根据标签名来查询并返回集合,集合中同样存放Dom对象,操作与数组一样
appendChild()添加子元素