JavaScript

一、JavaScript和html代码的结合方式

1.第一种方式

<!-- JavaScript和html代码的结合方式JavaScript和html代码的结合方式1 需求 ①在head或body标签中，使用script标签来书写JavaScript代码 基础知识 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> //alert是JavaScript语言提供的警告框函数，可接受任意参数作为警告框的提示信息 alert("hello javaScript"); </script> </head> <body> </body> </html>

2.第二种方式

//js代码 alert("hello javaScript"); <!-- JavaScript和html代码的结合方式JavaScript和html代码的结合方式2 需求 ①使用script标签引入单独的JavaScript代码文件 基础知识 1.src属性专门用来引入js文件路径 2.script标签可以用来定义js代码，也可以用来引入js文件，但是两个功能二选一，不能同时使用 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript" src="js.js"></script> </head> <body> </body> </html>

二、基础知识

1.逻辑运算

<!-- 逻辑运算 需求 ① 基础知识 1.在js中，所有变量都可作为boolean类型变量去使用，0，null，undefined，""(空串)都认为是false 2.&& 且运算有两种情况 1.表达式全为真时，返回最后一个表达式的值 2.表达式中有一个为假时，返回第一个为假的表达式的值 3.|| 或运算有两种情况 1.表达式全为假时，返回最后一个表达式的值 2.表达式中有一个为真时，返回第一个为真的表达式的值 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> /* 这里验证基础知识1 var a = 0;//null、undefined、""意思均相同 if(a) { alert("0为真") } else { alert("0为假") } 这里验证基础知识2 var a = "abc"; var b = true; var d = false; var c = null; //alert(a && b);//true //alert(b && a);//abc alert(a && d); */ </script> </head> <body> </body> </html>

2.数组

<!-- 数组 需求 ①演示js数组 基础知识 1.js数组自动扩容 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> var arr = [];//定义一个空数组 arr[0] = 12; </script> </head> <body> </body> </html>

3.函数

函数的第一种定义方式  <!-- 函数的第一种定义方式 需求 ①演示js函数 基础知识 1.函数格式 function 函数名(形参列表) { 函数体 } 2.定义带有返回值的函数 只需在函数体内直接使用return语句返回值即可 --> <!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("有参函数fun2()被调用了 a=" + a + ",b=" +b); } fun2(1,2); //定义带有返回值的函数 function fun3(num1,num2) { var result = num1 + num2; return result; } alert(fun3(100,150)); </script> </head> <body> </body> </html> 函数的第二种定义方式 <!-- 函数的第二种定义方式 需求 ①演示js函数 基础知识 1.函数格式 var 函数名 = function(形参列表) { 函数体 } 2.定义带有返回值的函数 只需在函数体内直接使用return语句返回值即可 --> <!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 fun3 = function (num1,num2) { return num1+num2; } alert(fun3(1,2)); </script> </head> <body> </body> </html>

4.自定义对象

Object形式的自定义对象 <!-- JS中的自定义对象 需求 ①Object形式的自定义对象 基础知识 1.对象的定义 var 变量名 = new Object(); //对象实例(空对象) 变量名.属性名 = 值;//定义一个属性 变量名.函数名 = function(){}//定义一个函数 2.对象的访问 变量名.属性名/函数名(); --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> var obj = new Object(); obj.val = 10; obj.fun = function() { alert(obj.val); } obj.fun(); </script> </head> <body> </body> </html> {}花括号形式的自定义对象 <!-- JS中的自定义对象 需求 ①{}花括号形式的自定义对象 基础知识 1.对象的定义 ①var 变量名 = {}; //对象实例(空对象) ②var 变量名 = { 属性名1:值1,//定义一个属性 属性名1:值2, 函数名:function(){} //定义一个函数 }; 2.对象的访问 变量名.属性名/函数名(); --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> var obj = { name:"naruto", age:16, introduction:function () { alert("name="+this.name+",age="+this.age); } }; obj.introduction(); </script> </head> <body> </body> </html>

5.JS中的事件

基础知识  <!-- JS中的事件 需求 基础知识 1.事件的概念 事件是由电脑输入设备与页面进行交互的响应 2.常用的事件 onload 加载完成事件---常用于页面js代码初始化操作 onclick 单击事件---常用于按钮的点击响应操作 onblur 失去焦点事件---常用于输入框失去焦点后，验证其输入内容是否合法 onchange 内容发生改变事件---常用于下拉列表和输入框内容发生改变后操作 onsubmit 表单提交事件---常用于表单提交前，验证所有表单项是否合法 3.事件的注册(绑定) 1.概念 告诉浏览器，当事件响应后要执行哪些操作代码 2.静态注册 通过html标签的事件属性直接赋予事件响应后的代码 3.动态注册 1.概念 先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码 2.步骤 1.获取标签对象 2.标签对象.事件名 = function(){} --> onload事件演示 <!-- JS中的事件 需求 1.onload事件演示 基础知识 1. --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> function onloadFun() { alert('静态注册onload事件，所有代码'); } //onload事件动态注册，是固定写法 window.onload = function () { alert("动态注册的onload事件"); } </script> </head> <!-- 静态注册onload事件 <body onload="alert('静态注册onload事件')"> <body onload="onloadFun();">--> <body> </body> </html> onclick事件的演示 <!-- JS中的事件 需求 1.onclick事件演示 基础知识 1.document是js语言提供的一个对象(文档)，比如当前包含所有代码的整个页面 2.getElementById("")，根据id获取元素(html标签) --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> function onclickFun() { alert('静态注册onclick事件'); } //onclick事件动态注册 window.onload = function () { //1.获取标签对象 var btnObj = document.getElementById("btn2"); //2.通过标签对象.事件名 = function(){} btnObj.onclick = function () { alert("动态注册的onclick实际"); } } </script> </head> <!-- 静态注册onload事件--> <body> <button onclick="onclickFun();">按钮1</button> <button id="btn2" onclick="onclickFun();">按钮2</button> </body> </html> onblur事件的演示 <!-- JS中的事件 需求 1.onblur事件演示(失去焦点事件) 基础知识 1.console是控制台对象，由js提供，用来向浏览器控制台打印输出，用于测试使用 2.log()是打印的方法 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> //静态注册失去焦点事件 function fun() { console.log("静态注册失去焦点"); } //动态注册失去焦点事件 window.onload = function () { //1.获取标签对象 var pwObj = document.getElementById("password"); //2.对象名.事件名 = function(){} pwObj.onblur = function () { console.log("动态注册失去焦点"); } } </script> </head> <body> 用户名:<input type="text" onblur="fun()"><br/> 密码:<input id="password" type="text" ><br/> </body> </html> onchange事件的演示 <!-- JS中的事件 需求 1.onchange事件演示(内容发生改变事件) 基础知识 1. --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> //静态注册onchange事件 function onchangeFun() { alert("球员已经改变了"); } //动态注册onchange事件 window.onload = function () { //1.获取标签对象 var selObj = document.getElementById("sel01"); //2.标签对象.事件名 = function(){} selObj.onchange = function () { alert("球员已经改变了") } } </script> </head> <body> 请选择你心中的球员(静态注册): <select onchange="onchangeFun()"> <option>--球员--</option> <option>库里</option> <option>克莱</option> <option>格林</option> </select> 请选择你心中的球员(动态注册): <select id="sel01"> <option>--球员--</option> <option>帕克</option> <option>吉诺比利</option> <option>邓肯</option> </select> </body> </html> onsubmit表单提交事件 <!-- JS中的事件 需求 1.onsubmit事件演示(表单提交事件) 基础知识 1.若发生错误，则不应提交表单，静态注册要在onsubmit中设置return false 或 onsubmitFun() --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> //静态注册onsubmit事件 function onsubmitFun() { alert("静态注册表单提交"); return false; } //动态注册onsubmit事件 window.onload = function () { //1.获取标签对象 var subObj = document.getElementById("sub01"); //2.标签对象.事件名 = function(){} subObj.onsubmit = function () { alert("动态注册表单提交"); return true; } } </script> </head> <body> <form action="http://localhost:8000" method="get" onsubmit="return onsubmitFun()"> <input type="submit" value="静态注册"> </form> <form id="sub01" action="http://localhost:8000"> <input type="submit" value="动态注册"> </form> </body> </html>

6.DOM模型

基本介绍 <!-- DOM模型 需求 1. 基础知识 1.DOM全称是文档对象模型(Document Object Model)，它的作用就是将文档(当前页面即html文档)中的标签、属性、 文本转换为对象来管理 2.对Document对象的理解 1.Document管理所有的html文档的内容 2.Document是一种树结构的文档，有层级关系 3.Document能够把所有的标签对象化 4.可以通过Document访问所有的标签对象 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> </body> </html> Document对象----getElementById <!-- DOM模型 需求 1.验证用户名是否有效，必须由字母、数字、下划线组成，长度为5~12位 基础知识 1.正则表达式对象中的test()方法用于测试某个字符串是不是匹配规则，匹配返回true，不匹配返回false --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> function onclickFun() { //1.获取标签对象 var usernameObj = document.getElementById("username"); var usernameText = usernameObj.value; //利用正则表达式验证文本是否合法 var patt = /^\w{5,12}$/; if(patt.test(usernameText)) { alert("用户名合法"); } else { alert("用户名不合法"); } } </script> </head> <body> 用户名：<input type="text" id="username" value="wzg"/> <button onclick="onclickFun()">校验</button> </body> </html> 正则表达式对象 <!-- 正则表达式对象 需求 1. 基础知识 1.两种方式创建正则表达式对象(二者等效) 1.var patt = new RegExp("pattern"); 2.var patt = /pattern/; 2.常用方法 1.查找字符串是否包含一个字符---/ch/ 2.查找字符串是否包含任意字符---/[ch1ch2ch3...]/ 3.查找字符串是否包含任意小写字母/大写字母---[a-z]/[A-Z] 4.查找字符串是否包含任意数字---/[0-9]/ 3.元字符 1.\w查找单词字符，包括字母、数字,以及下划线 4.量词 1.查找字符串中至少包含一个ch---/ch+/ 2.查找字符串中至少包含零个或多个ch---/ch*/ 3.查找字符串中至少包含零个或一个ch---/ch?/ 4.查找字符串中是否包含连续的3个字符---/ch{3}/ 5.查找字符串中是否包含3~5个连续的字符---/ch{3,5}/ 6.查找字符串中是否包含至少3个连续的字符---/ch{3,}/ 7.查找字符串中是否以ch结尾---/ch$/ 8.查找字符串中是否以ch开始---/^ch/ 9.要求字符串从头到尾完全匹配---/^ch{3,5}$/ --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> //创建正则表达式对象，要求字符串中必须包含e var patt = new RegExp("e"); var patt2 = /[a2322]/; var str = "abcd" alert(patt2.test(str)); </script> </head> <body> </body> </html> 常见的验证提示效果 <!-- 两种常见的验证提示效果 需求 1.验证用户名是否有效，必须由字母、数字、下划线组成，长度为5~12位 基础知识 1.innerHTML表示起始标签和结束标签中的内容，该属性可读、可写 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> function onclickFun() { //1.获取标签对象 var usernameObj = document.getElementById("username"); var usernameText = usernameObj.value; //利用正则表达式验证文本是否合法 var patt = /^\w{5,12}$/; var usernameSpanObj = document.getElementById("usernameSpan"); if(patt.test(usernameText)) { //提示方式1(文字) usernameSpanObj.innerHTML = "用户名合法"; //提示方式2（图片） //usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">"; } else { usernameSpanObj.innerHTML = "用户名不合法"; //usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">"; } } </script> </head> <body> 用户名：<input type="text" id="username" value="wzg"/> <span id="usernameSpan" style="color: red;">用户名不合法</span> <button onclick="onclickFun()">校验</button> </body> </html> getElementsByName <!-- getElementsByName 需求 1.演示全选、全不选与反选 基础知识 1.getElementsByName()是根据指定的name属性查询返回多个标签对象集合 2.集合中的元素顺序是由html页面中标签对象的顺序决定的 3.checked表示复选框的选中状态，选中为true，否则为false，该属性可读、可写 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> function checkAll() { //获取标签对象 var hobbies = document.getElementsByName("hobby"); for(var i = 0; i < hobbies.length; i++) { hobbies[i].checked = true; } } function checkNo() { //获取标签对象 var hobbies = document.getElementsByName("hobby"); for(var i = 0; i < hobbies.length; i++) { hobbies[i].checked = false; } } function checkReverse() { //获取标签对象 var hobbies = document.getElementsByName("hobby"); for(var i = 0; i < hobbies.length; i++) { hobbies[i].checked = !hobbies[i].checked; } } </script> </head> <body> 兴趣爱好: <input type="checkbox" name="hobby" value="cpp">C++ <input type="checkbox" name="hobby" value="cpp">Java <input type="checkbox" name="hobby" value="cpp">JavaScript <br/> <button onclick="checkAll()">全选</button> <button onclick="checkNo()">全不选</button> <button onclick="checkReverse()">反选</button> </body> </html> getElementsByTagName <!-- getElementsByTagName 需求 1. 基础知识 1.getElementsByTagName是根据标签名来获取集合 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> function checkAll() { //按照指定标签名查询并返回集合(集合中都是dom对象，顺序与html页面中一致) var inputs = document.getElementsByTagName("input"); for(var i = 0; i < inputs.length; i++) { inputs[i].checked = true; } } </script> </head> <body> 兴趣爱好: <input type="checkbox" value="cpp">C++ <input type="checkbox" value="cpp">Java <input type="checkbox" value="cpp">JavaScript <br/> <button onclick="checkAll()">全选</button> </body> </html> 节点的常用属性和方法 <!-- 节点的常用属性和方法 需求 1. 基础知识 1.节点就是标签对象，节点的属性和方法也就是标签对象的属性和方法 2.常用的属性 1.childNodes---获取当前节点的所有子节点 2.firstChild---获取当前节点的第一个子节点 3.lastChild---获取当前节点的最后一个子节点 4.parentNode---获取当前节点的父节点 5.nextSibling---获取当前节点的下一个节点 6.previousSibling---获取当前节点的上一个节点 7.className---获取/设置标签的class属性值 8.innerHTML---获取/设置起始标签和结束标签中的内容 9.innerText---获取/设置起始标签和结束标签中的文本 3.常用的方法---通过具体的元素节点调用 1.getElementsByTagName()---获取当前节点的指定标签名孩子节点 2.appendChild(oChildNode)---添加一个子节点，oChildNode是要添加的孩子节点 --> document对象的补充说明 <!-- 节点的常用属性和方法 需求 1.使用js代码来创建html标签，并显示在页面上，标签内容是<div>国哥好帅<div> 基础知识 1.document.createElement("")---创建标签 2.appendChilde("");---添加子元素 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script type="text/javascript"> window.onload = function () { var divObj = document.createElement("div"); divObj.innerHTML = "国哥好帅";//对标签内容赋值 document.body.appendChild(divObj);//相当于添加到body中 } </script> </head> <body> </body> </html>