javascript学习~编程小哥令狐
1.javascript的变量类型：
- 数值类型：number
- 字符串类型：string
- 对象类型：object
- 布尔类型：boolean
- 函数类型：function
2.JavaScript里的特殊值：
- undefined：未定义，所有js变量未赋初始值的时候，默认都是undefined
- null：空值
- NAN：全称是Not a number 非数字，非数值。
3.JavaScript变量定义及其初始化
var a; a=10; // var i; // alert(i);//undefined //i=12; // alert(i);//12 //alert(typeof (i)); var a=12; var b="abc"; alert(a*b);//NAN,非数值
4.关系（比较）运算
- 等于： == 数字比较
- 全等于： === 数字比较+数据类型比较
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var a=123; var b="123"; alert(a==b);//数字面比较，为true alert(a===b);//数据类型比较，为false </script> </head> <body> </body> </html>
5.逻辑运算
- 与运算【且运算】： &&
- 或运算： ||
- 非运算【取反运算】：！
- 0、null、undefined、“空字符串”都认为是false
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // var a=0; // if(a){ // alert("0为真"); // }else{ // alert("0为假"); // } // var b=null; // if(b){ // alert("null为真"); // }else{ // alert("null为假"); // } // var c=undefined; // if(c){ // alert("undefined为真"); // }else{ // alert("undefined为假"); // } var d=""; if(d){ alert("空字符串为真"); }else{ alert("空字符串为假"); } </script> </head> <body> </body> </html>
6.数组
- 数组的定义：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var arr=[];//定义一个空数组 // alert(arr.length); arr[0]=12; // alert(arr[0]); // arr[2]="abc"; // alert(arr.length); //数组的遍历 for (var i=0;i<arr.length;i++){ alert(arr[i]); } </script> </head> <body> </body> </html>
7.函数
7.1函数的定义方法（一）
function
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //定义一个无惨函数 // function fun(){ // alert("无参函数被调用"); // } // //函数调用 // fun(); function fun2(a,b) { alert("有参函数的调用=》a="+a+"b="+b); } fun2(1,2) //定义带有返回值的函数 function sum(num1,num2){ return (num1+num2); } alert(sum(1,2)); </script> </head> <body> </body> </html>
7.2函数定义方法（二）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //无参函数 var fun=function () { alert("无参函数"); } fun(); //有参函数 var fun2=function(a,b){ alert("有参函数a="+a+",b="+b); } fun2(1,2); //有参函数带返回值 var sum=function(num1,num2){ return num1+num2; } alert(sum(1,2)); </script> </head> <body> </body> </html>
7.3隐形参数arguments
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun(){ //alert(arguments.length);//查看参数的个数 /* * 这个功能类似于数组的功能，可以通过下标查看 * */ alert(arguments[0]); alert(arguments[1]); alert(arguments[2]); alert("无惨函数fun"); for(var i=0;i<arguments.length;i++) alert(arguments[i]); } fun(1,"ab",true); //需求：编写一个函数，用于计算所有参数相加的和并返回 function Total() { var sum=0; for(var i=0;i<arguments.length;i++){ sum+=arguments[i]; } return sum; } alert(Total(1,2,3,4,5,6,7,8,9)); </script> </head> <body> </body> </html>
8.Js中的自定义对象
8.1Object形式的自定义对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // 对象的定义： // var 变量名 = new Object(); // 对象实例（空对象） // 变量名.属性名 = 值; // 定义一个属性 // 变量名.函数名 = function(){} // 定义一个函数 var obj=new Object(); obj.name="令狐荣豪"; obj.age=18; obj.fun=function(){ alert("姓名是："+obj.name+"年龄是："+obj.age); alert("姓名是："+this.name+"年龄是："+this.age); } // 对象的访问： // 变量名.属性 / 函数名(); // alert( obj.age ); obj.fun(); </script> </head> <body> </body> </html>
8.2花括号形式的自定义对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // 对象的定义： // var 变量名 = { // 空对象 // 属性名：值, // 定义一个属性 // 属性名：值, // 定义一个属性 // 函数名：function(){} // 定义一个函数 // }; var obj = { name:"国哥", age:18, fun : function () { alert("姓名：" + this.name + " , 年龄：" + this.age); } }; var oobj={ name:"令狐", age:18, fun:function () { alert("姓名："+oobj.name+"年龄："+oobj.age); } } // 对象的访问： // 变量名.属性 / 函数名(); alert(oobj.name); oobj.fun(); </script> </head> <body> </body> </html>
9.javascript中的事件
- 事件是电脑输入设备与页面进行交互的响应，我们称为事件。
9.1常用的事件
onload加载完成事件【页面加载完成后，常用作js代码初始化操作】onclick单击事件【常用于按钮的点击响应操作】onblur失去焦点事件【常用于输入框失去焦点后验证其输入内容是否会丢失】onchange内容发生改变事件【常用于下拉列表和输入框内容发生改变后的操作】onsubmit表单提交事件【常用于表单提交前，验证所有表单项是否合法】
9.2事件的注册(绑定)
- 事件的注册(绑定)就是告诉浏览器，当事件
- 响应后要执行哪些操作代码。
- 静态注册事件：通过html标签的事件属性直接赋予事件响应的代码，这种方式我们叫静态注册事件。
- 动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function（）{}这种形式赋予事件响应后的代码，叫动态注册。
动态注册基本步骤：
1.获取标签对象
2.标签对象.事件名
9.21onload事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // onload事件的方法 function onloadFun(){ alert("静态注册onload事件") } // onload事件动态注册。是固定写法 window.onload=function () { alert("动态注册onload事件") } </script> </head> <!--静态注册onload事件 onload事件是浏览器解析完页面之后就会自动触发的事件 <body onload="onloadFun();"> --> <body onload="onloadFun()"> </body> </html>
9.22onclick事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onclickFun() { alert("静态注册事件"); } //动态注册事件 window.onload=function () { //1.获取标签对象 /* * 1.document:表示当前整个页面，是JavaScript语言提供的一个对象(文档) * 2.get：获取 * 3.Element：元素【标签】 * 4.By：通过 * 5.Id：id属性 * getElementById:通过id属性获取标签元素，对象 * */ var btnObj=document.getElementById("btn1"); //btnObj就是一个对象 // 2.通过标签对象.事件名=function(){} btnObj.onclick=function () { alert("动态注册事件"); } } </script> </head> <body> <!--静态注册事件--> <button onclick="onclickFun()">按钮1</button> <!--动态注册事件--> <button id="btn1">按钮2</button> </body> </html>
9.23 onblur事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //静态注册事件 function onblurFun() { //console是控制台对象，是JavaScript语言提供的，专门用来x向浏览器控制台打印输出的，用于测试使用 //log是打印的方法 console.log("静态失去焦点事件"); } //动态注册onblur事件 window.onload=function () { //1.获取标签对象 var passwordObj=document.getElementById("password"); //2.通过标签对象.事件名=function(){}; passwordObj.onblur=function () { alert("动态焦点事件"); } } </script> </head> <body> 用户名：<input type="text" onblur="onblurFun()"><br> 密码：<input type="text" id="password"><br> </body> </html>
9.24 onchange事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onchangeFun() { alert("女神已经改变了"); } window.onload=function () { var onchangeObj=document.getElementById("onchangeFun"); onchangeObj.onchange=function () { alert("女神已经改变了动态"); } } </script> </head> <body> 请选择你心中的女神： <!-- 静态注册change事件--> <!-- <select onchange="onchangeFun()">--> <select id="onchangeFun"> <option>---女神---</option> <option>芳芳</option> <option>佳佳</option> <option>娘娘</option> </select> </body> </html>
9.24 onsubmit事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" > //静态注册表单提交事件 function onsubmitFun() { //要验证所有表单是否合法，如果有一个不合法就阻止提交表单 alert("静态注册表单提交事件------发现不合法"); return false; } window.onload=function () { var submitFunObj=document.getElementById("submitFun"); submitFunObj.onsubmit=function () { alert("静态注册表单提交事件------发现不合法"); return false; } } </script> </head> <body> <!--return false 可以阻止表单提交--> <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()"> <input type="submit" value="静态注册"> </form> <form action="http://localhost:8080" method="get" id="submitFun"> <input type="submit" value="动态注册"> </form> </body> </html>
10.Dom模型
DOm全称是 Document Object Model文档对象模型
大白话就是把文档中的标签对象，属性，文本，转换成对象来管理。
10.1Document对象中的方法介绍
document.getElementById(elementId)
通过标签的id属性查找标签的dom对象，elementId是标签的id属性值
doucument.getElementsByName(elementName)
通过标签的name属性查找dom对象，elementName标签的name属性值document.getElementsByTagName(tagname)
t通过标签名查找标签dom对象，tagname是标签名
document.createElement(tagname)
方法，通过给定的标签名创建一个标签对象，tagname是创建的标签名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" > /* * 需求：当用户点击了校验按钮，要获取输出框里的内容，然后验证是否合法 * 验证的规则是，必须有字母数字下划线组成，并且长度在5-12位 * */ function onclickFun() { //当我们需要操作一个标签的饿时候，一定要先获取这个标签对象， var usernameObj=document.getElementById("username"); // alert(usernameObj); //[object HTMLInputElement]他就是dom对象 //dom对象就是标签，保存了标签的所有信息，所以你可以访问其属性值 //alert(usernameObj.value); //验证字符串合不合法，需要利用正则表达式的规则 var usernameText=usernameObj.value; var patt=/^\w{5,12}$/;//正则表达式的规则 /* * test()方法用于测试某个字符串，是不是匹配的规则 * 匹配就返回true，不匹配就返回false * */ if(patt.test(usernameText)){ alert("用户名合法"); }else { alert("用户名不合法"); } } </script> </head> <body> 用户名：<input type="text" id="username" value="wzg"> <button onclick="onclickFun()">校验</button> </body> </html>
- 正则表达式：
10.2 检测字符串中是否包含字母“e”------正则表达式对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //表示要求字符串中，是否包含字母e //var patt=new RegExp("e"); var patt=/e/;//这个也是正则表达式对象 var str="abcd"; alert(patt.test(str));//不包含e所以打印出false </script> </head> <body> </body> </html>
10.3常用检测
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //表示要求字符串中，是否包含字母a或b或c var patt=/[abc]/; //表示要求字符串中，是否包含字母a到z var patt=/[a-z]/; //表示要求字符串中，是否包含字母A到Z var patt=/[A-Z]/; //表示要求字符串中，是否包含数字0到9 var patt=/[0-9]/; ///表示字符串是否包含字母数字下划线 var patt=/\w/; var str="abcd"; alert(patt.test(str)); </script> </head> <body> </body> </html>
11.JavaScript两种常见的验证提示效果—getElementById方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" > /* * 需求：当用户点击了校验按钮，要获取输出框里的内容，然后验证是否合法 * 验证的规则是，必须有字母数字下划线组成，并且长度在5-12位 * */ function onclickFun() { //当我们需要操作一个标签的饿时候，一定要先获取这个标签对象， var usernameObj=document.getElementById("username"); // alert(usernameObj); //[object HTMLInputElement]他就是dom对象 //dom对象就是标签，保存了标签的所有信息，所以你可以访问其属性值 //alert(usernameObj.value); //验证字符串合不合法，需要利用正则表达式的规则 var usernameText=usernameObj.value; var patt=/^\w{5,12}$/;//正则表达式的规则 /* * test()方法用于测试某个字符串，是不是匹配的规则 * 匹配就返回true，不匹配就返回false * */ var usernameSpanObj=document.getElementById("usernameSpan"); usernameSpanObj.innerHTML="令狐你好"; if(patt.test(usernameText)){ alert(""); usernameSpanObj.innerHTML="用户名合法"; }else { usernameSpanObj.innerHTML="用户名不合法"; alert(""); } } </script> </head> <body> 用户名：<input type="text" id="username" value="wzg"> <span id="usernameSpan" style="color: red;"></span> <button onclick="onclickFun()">校验</button> </body> </html>
11.1getElementsByName()方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //全选 function checkAll() { //让所有复选框都选中 //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合 //这个集合的操作跟数组一样 //集合中每个元素都是dom对象 var hobbys=document.getElementsByName("hobby"); //checked表示复选框选中的状态，如果选中是true，不逊中是false //这个属性可读可写 // // hobbys[2].checked=true; for (var i=0;i<hobbys.length;i++){ hobbys[i].checked=true; } } //全不选 function checkNo() { //让所有复选框都选中 //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合 //这个集合的操作跟数组一样 //集合中每个元素都是dom对象 var hobbys=document.getElementsByName("hobby"); //checked表示复选框选中的状态，如果选中是true，不逊中是false //这个属性可读可写 // // hobbys[2].checked=true; for (var i=0;i<hobbys.length;i++){ hobbys[i].checked=false; } } //反选 function checkReverse() { var hobbys=document.getElementsByName("hobby"); for (var i=0;i<hobbys.length;i++){ if (hobbys[i].checked===false) hobbys[i].checked=true; else hobbys[i].checked=false; } } </script> </head> <body> 兴趣爱好： <input type="checkbox" name="hobby" value="cpp" checked="checked">C++ <input type="checkbox" name="hobby" value="java">java <input type="checkbox" name="hobby" value="js">javascript <br> <button onclick="checkAll()">全选</button> <button onclick="checkNo()">全不选</button> <button onclick="checkReverse()">反选</button> </body> </html>
11.2getElementsByTagName()方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // 全选 function checkAll() { //document.getElementsByTagName("input")是按照指定标签名来进行查询并返回集合 //这个集合的操作和数组一样 //集合是dom对象 //集合中元素顺序是他们在html页面从上到下的顺序 var inputs=document.getElementsByTagName("input"); for (var i=0;i<inputs.length;i++){ inputs[i].checked=true } } </script> </head> <body> <!--as --> 兴趣爱好： <input type="checkbox" value="cpp" checked="checked">C++ <input type="checkbox" value="java">Java <input type="checkbox" value="js">JavaScript <br/> <button id="btn01" onclick="checkAll()">全选</button> </body> </html>
12.节点的常用属性和方法
节点就是标签对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>dom查询</title> <link rel="stylesheet" type="text/css" href="style/css.css" /> <script type="text/javascript"> window.onload = function(){//页面加载之后的函数 //1.查找#bj节点 document.getElementById("btn01").onclick=function () { var bjObj=document.getElementById("bj"); alert(bjObj.innerHTML); }; //2.查找所有li节点 var btn02Ele = document.getElementById("btn02"); btn02Ele.onclick = function(){ var lis=document.getElementById("li"); alert(lis.length); }; //3.查找name=gender的所有节点 var btn03Ele = document.getElementById("btn03"); btn03Ele.onclick = function(){ }; //4.查找#city下所有li节点 var btn04Ele = document.getElementById("btn04"); btn04Ele.onclick = function(){ }; //5.返回#city的所有子节点 var btn05Ele = document.getElementById("btn05"); btn05Ele.onclick = function(){ }; //6.返回#phone的第一个子节点 var btn06Ele = document.getElementById("btn06"); btn06Ele.onclick = function(){ }; //7.返回#bj的父节点 var btn07Ele = document.getElementById("btn07"); btn07Ele.onclick = function(){ }; //8.返回#android的前一个兄弟节点 var btn08Ele = document.getElementById("btn08"); btn08Ele.onclick = function(){ }; //9.读取#username的value属性值 var btn09Ele = document.getElementById("btn09"); btn09Ele.onclick = function(){ }; //10.设置#username的value属性值 var btn10Ele = document.getElementById("btn10"); btn10Ele.onclick = function(){ }; //11.返回#bj的文本值 var btn11Ele = document.getElementById("btn11"); btn11Ele.onclick = function(){ }; }; </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br> <br> <p> 你喜欢哪款单机游戏? </p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br /> <br /> <p> 你手机的操作系统是? </p> <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul> </div> <div class="inner"> gender: <input type="radio" name="gender" value="male"/> Male <input type="radio" name="gender" value="female"/> Female <br> <br> name: <input type="text" name="name" id="username" value="abcde"/> </div> </div> <div id="btnList"> <div><button id="btn01">查找#bj节点</button></div> <div><button id="btn02">查找所有li节点</button></div> <div><button id="btn03">查找name=gender的所有节点</button></div> <div><button id="btn04">查找#city下所有li节点</button></div> <div><button id="btn05">返回#city的所有子节点</button></div> <div><button id="btn06">返回#phone的第一个子节点</button></div> <div><button id="btn07">返回#bj的父节点</button></div> <div><button id="btn08">返回#android的前一个兄弟节点</button></div> <div><button id="btn09">返回#username的value属性值</button></div> <div><button id="btn10">设置#username的value属性值</button></div> <div><button id="btn11">返回#bj的文本值</button></div> </div> </body> </html>
