JS是一种基于对象的脚本语言，是浏览器上的程序语言，可以操作浏览器上的一切内容，在浏览器上提供用户交互，页面美化和增加页面的智能性，可以操作的对象有三个来源：
①浏览器环境和HTML标签语句所构成的现成对象（链接，图像，插件，HTML表单元素，浏览器细节等）；
②通过JavaScript的内置类所创建的对象，比如Date（日期）和Number（数值）；
③通过JavaScript编程，用户自己创建对象
变量：属于弱类型变量，不需要声明变量类型，直接用var关键字，如果我们不用var声明的话，那这个变量就是全局变量
常量：直接在程序中出现的数据值
标识符：由不以数字开头的字母，数字，下划线（_），美元符号（$）组成，常用于表示函数，变量名称，如果这个标识符是js中的保留字，不允许重新定义，比如if，new，break等
数据类型：
①数字类型（Number）：包括整型和浮点型数值
②字符串（String）：由Unicode字符，数字，标点符号组成的序列
③布尔型（Boolean）：有两个值true和false，也代表1和0，实际运算中，true=1，false=0
④Null和Undefined：null表示尚未存在的对象，undefined表示已经对齐进行了声明，但是没有对其赋值
运算符：
①算术运算符：就是我们常说的加减乘除
②逻辑运算符：就是>，==，<等
a：AND (&&)运算符：如果某个运算数，不是原始的Boolean型，逻辑AND运算并不一定返回Boolean值。如果一个运算数是对象，一个是Boolean，返回的是该对象；如果两个都是对象，则返回第二个对象；如果某个运算符是null，返回就是null；如果某个运算符是NaN，返回NaN；如果某个元素是undfined，返回undefined。
b：OR（||）运算符：如果一个运算数是一个对象，并且该对象左边的运算数均为false，则返回该对象；如果两个运算数都是对象，则返回第一个运算数；如果最后一个运算数书null，并且其他的运算数值均为false，则返回null；如果最后一个运算数书NaN，并且其他的运算数值均为false，则返回null；如果某个运算数unddefined，并且其他的运算数值均为false，则返回unddefined。
③等性运算符：
a：如果一个运算数是Boolean值，在检查相等性之前，把它转换成数字值，false转换成0，true为1
b：如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字
c：如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串
d：如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字
在进行比较的时候，要遵循下列规则：
a：值null和undefined相等
b：在检查相等性时，不能把null和undefined转换成其他值
c：如果某个运算数是NaN，等号将返回false，非等号将返回true
d：如果两个运算数都是对象，那么比较的是它们的引用值，如果两个运算数都指向同一个对象，那么等号返回true，否则两个运算数不等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> console.log("null和undefined:" + (null == undefined)); //true console.log("NaN:" + ("NaN" == NaN)); //false NaN只要参与运算,就会返回false,除非用的是不等号 console.log("数字和NaN:" + (5 == NaN)); //false console.log("NaN和NaN:" + (NaN == NaN)); //false console.log("NaN和!NaN:" + (NaN != NaN)); //true console.log("false和0:" + (false == 0)); //true console.log("true和1:" + (true == 1)); //true console.log("true和非1:" + (true == 2)); //false console.log("undefined和0:" + (undefined == 0)); //false console.log("null和0:" + (null == 0)); //false console.log("数字和字符串:" + ("5" == 5)); //true </script> </body> </html>
④关系运算符：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var res = "Blue" < "alpha"; console.log("结果:" + res); //输出是true </script> </body> </html>
说明：因为字符串“Blue”的字母B的字符代码是66，而“alpha”的a字符代码是97，所以alpha要大
比较运算符的规则：
如果两个运算数一个数字类型，一个是其他类型，会将其转换成数字类型
如果两个运算数都是字符串，先从最高位的ascii码进行比较，以位进行比较
控制语句：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>A</p> <p>B</p> <p>C</p> <p>D</p> <p>E</p> <script> var week = 2; /** *if型控制语句 */ if (week == 1){ console.log("星期:" + week); }else if (week == 2){ console.log("星期:" + week); }else if (week == 3){ console.log("星期:" + week); }else { console.log("星期未定义"); } /** * switch型控制语句 */ week = 3; switch (week){ case 1: console.log("星期:" + week); break; case 2: console.log("星期:" + week); break; case 3: console.log("星期:" + week); break; default: console.log("星期未定义"); } /** * if和switch的区别 * * switch根据一个值来进行多路分支,并且编译器可以对多路分支进行优化 * switch只将表达式计算一次,然后将表达式的值和case的值进行比较,进而选择哪一个case的语句块 * if每次判断都要将条件进行计算一次 * * 所以在进行多路分支时,switch的效率要高于if */ /** * for循环控制语句 */ for(var i = 1;i < 7; i++){ document.write("<H" + i + ">" + i + "</H" + i + ">"); document.write("<br/>") } /** * 通过for循环来寻找标签 */ var doms = document.getElementsByTagName("p"); for(var i in doms){ console.log("标签:" + i); //遍历出来的数据可能有别的元素,所以不建议使用这种方法 比如这个循环除了遍历出来ABCDE外,还有length,item,nameItem } /** * while循环控制语句 */ var i = 1; while (i < 7){ document.write("<H" + i + ">" + i + "</H" + i + ">"); i ++; } </script> </body> </html>
对象:常用的内置对象有:Array String Date Math Number Function Global Error RegExp Object
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script language="JavaScript"> var num = Number.MAX_VALUE; console.log("数字对象:" + num + " 类型:" + (typeof num)); //创建字符串对象 var strObj = new String("Hello JS"); console.log("字符串对象:" + strObj + " 类型:" + (typeof strObj)); /** * 字符串对象常用方法 * */ //大小写转换 console.log("转换成大写:" + strObj.toUpperCase()); console.log("转换成小写:" + strObj.toLowerCase()); //获取指定字符串 根据索引获取 console.log("获取索引等于2的字符:" + strObj.charAt(2)); //查询字符串 console.log("查询l的索引:" + strObj.indexOf("l")); console.log("通过match来匹配:" + strObj.match("JS")); console.log("通过search来寻找,返回的是索引位置:" + strObj.search("JS")); //字符串截取 console.log("截取字符串,右边可取:" + strObj.substr(1,3)); console.log("截取字符串,右边不可取:" + strObj.substring(1,3)); console.log("截取字符串,通过切片,右边也是不可取:" + strObj.slice(1,3)); //字符串替换 console.log("替换字符串:" + strObj.replace("JS","js")); //字符串分割 console.log("字符串分割,返回的是一个数组:" + strObj.split("")); //字符串连接 console.log("字符串连接:" + strObj.concat(" or world")); //创建日期对象 var date = new Date(); console.log("日期对象:" + date.getDate() + " 类型:" + (typeof date)); //创建数组对象 var arr = new Array("星期一","星期二","星期三"); console.log("数组对象:" + arr + " 类型:" + (typeof arr)); /** * 数组常用的方法 */ //数据连接,返回的是连接的字符串 console.log("通过join来连接:" + arr.join([1,2,3])); //结果 星期一1,2,3星期二1,2,3星期三 console.log("通过concat连接:" + arr.concat([1,2,3])); //结果 星期一,星期二,星期三,1,2,3 var arr1 = [23,45,37,25,100]; //反转 console.log("反转:" + arr1.reverse()); //排序 正序 console.log("正序:" + arr1.sort()); //输出结果是:100,23,25,37,45 //反序 function f(a, b) { return a-b; } console.log("降序:" + arr1.sort(f)); //输出结果是:23,25,37,45,100 //切片 和字符串差不多 //栈操作 push 进栈 pop出栈 整体进栈 var arr2 = [1,2,3]; arr2.push([4,5,6,7]); console.log("进栈:" + arr2 + " 数组长度:" + arr2.length); //结果 进栈:1,2,3,4,5,6,7 数组长度:4 console.log("出栈:" + arr2.pop() + " 数组长度:" + arr2.length); //结果 出栈:4,5,6,7 数组长度:3 //栈操作 shift unshift unshift是往前插 var arr3 = [1,2,3]; arr3.unshift([4,5,6,7]); console.log("unshift进栈:" + arr3 + " 数组长度:" + arr3.length); //结果 unshift进栈:4,5,6,7,1,2,3 数组长度:4 console.log("shift出栈:" + arr3.shift() + " 数组长度:" + arr3.length); //结果 shift出栈:4,5,6,7 数组长度:3 //函数对象 /** * 功能说明: * 可以使用变量,常量或表达式作为函数调用的参数 * 函数由关键字function定义 * 函数名的定义规则与标识符一样,大小写是敏感的 * 返回值必须用return */ var obj = new Function("name","console.log(\"通过Function来创建函数:\" + name)"); obj("Jasonhy"); //我们在向函数传递参数的时候,所有的参数都放在arguments对象中 function add() { var sum = 0; for (var i = 0 ; i < arguments.length ; i ++){ sum += arguments[i]; } return sum; } console.log("不限参数传递:" + add(1,2,3,4,5)); //匿名函数一 var func = function () { console.log("匿名函数一"); }; func(); //匿名函数二 (function (args) { console.log(args); })("匿名函数二"); </script> </body> </html>
作用域链：在js中，函数也就是对象，实际上js里一切都是对象，函数对象和其他对象一样，拥有可以通过代码访问属性和一系列供js引擎访问的内部属性，其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。
BOM对象：也就是浏览器对象模型，可以对浏览器窗口进行访问和操作，使用BOM，开发者可以移动窗口，改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
a：window对象，所有的浏览器都支持window对象，从概念上来讲，一个html文档对应一个window对象，功能上来讲，是控制浏览器窗口的，使用上来讲，window对象不需要创建对象，直接使用即可
window猜数字案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button onclick="acceptInput()">开始游戏</button> <script> //alert方法 // alert("hello alert"); //confirm方法,弹出框有确认和取消按钮,可以通过res来接着用户的选择 // var res = confirm("是否需要记住用户名"); // console.log("选的结果:" + res); //prompt方法,可输入文本, 有确定和取消 可获取结果 // res = prompt("请输入内容"); // console.log("输入的内容:" + res); //猜数字案例 var num = Math.round(Math.random() * 100); function acceptInput() { //让用户输入数字 var userNum = prompt("请输入一个0-100之间的数字"); //将用户输入的数字与随机数进行比较 if (isNaN(userNum)){ //用户输入的是无效数字 alert("请输入有效的数字"); acceptInput(); }else if (userNum > num){ alert("您输入的数字大了,请重新输入"); acceptInput(); }else if(userNum < num) { alert("您输入的数字小了,请重新输入"); acceptInput(); }else if (userNum == num){ var res = confirm("恭喜您,答对了,是否继续游戏"); if (res){ num = Math.round(Math.random() * 100); acceptInput(); }else { close(); } }else { close(); } } </script> </body> </html>
window时间显示案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="ID1" type="text" onclick="begin()"> <button onclick="end()">停止</button> <script> /** * 对应方法 * * setInterval 按照指定的周期(以毫秒计)来调用函数或计算表达式 * clearInterval 取消由setInterval设置的timeout * setTimeout 在指定毫秒数后调用函数或计算表达式 * clearTimeout 取消由setTimeout方法设置的timeout * scrollTo 把内容滚动到指定的坐标 */ function showTime() { var nowd2 = new Date().toLocaleString(); var temp = document.getElementById("ID1"); temp.value = nowd2; } var clock; function begin() { if (clock == undefined){ showTime(); clock = setInterval(showTime,1000); }else if (clock != undefined){ showTime(); clock = setInterval(showTime,1000); } } function end() { clearInterval(clock); } </script> </body> </html>
History对象：包含用户（在浏览器中）访问过的URL，包含的方法有：
a：length返回浏览器历史列表中的URL数量
b：back（）加载history列表中的前一个URL
c：forward（）加载history列表中的下一个URL
d：go（）加载history列表中的某个具体页面
Location对象：包含有关当前的URL信息，包含的方法有：
a：assign（）类似一个链接
b：reload（）刷新
c：replace（）页面替换
注：assign可以后退，replace不可以后退
DOM（下面如果没有特殊的指定，我们说的DOM就是HTML DOM）对象：DOM是W3C的标准，定义了访问HTML和XML文档的标准，分为三个不同的部分：
a：核心DOM--针对任何结构化文档的保准模型
b：XML DOM --针对XML文档的标准模型，定义了所有XML元素的对象和属性，以及访问它们的方法。
c：HTML DOM --针对HTML文档的标准模型，定义了所有HTML元素的对象和属性，以及访问它们的方法。
DOM节点：HTML文档中的所有内容都是节点
a：整个文档是一个文档节点（document对象）
b：每个HTML元素是元素节点（element对象）
c：HTML元素内的文本是文本节点（text对象）
d：每个HTML属性是属性节点（attribute对象）
e：注释是注释节点（comment对象）
节点自身的属性：
a：attribute--节点（元素）的属性节点
b：nodeType--节点类型
c：nodeType--节点值
d：nodeName--节点名称
e：innerHTML--节点（元素）的文本值
导航属性：
a：parentNode--节点（元素）的父节点
b：firstChild--节点下第一个子元素
c：lastChild--节点下最后一个子元素
d：childNodes--节点（元素）的子节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="div1"> <p name="littleP" class="p1">hello p</p> <div class="div2">hello div <div>div3</div> <a href="#">click</a> </div> </div> <script> //拿到多个标签 var eles = document.getElementsByClassName("p1"); for(var i = 0 ; i < eles.length; i ++){ console.log("拿到的标签:" + eles[i]); console.log("标签长度:" + eles.length); } //拿出第一个,就是我们想要的p标签 var ele = eles[0]; /** * 导航属性 */ //父 console.log("父节点:" + ele.parentNode); //兄弟节点 var b_ele = ele.nextSibling; console.log("兄弟:" + b_ele.nodeName); //直接获取后面的元素,换行也会当成是一个元素 var b_ele2 = ele.nextElementSibling; console.log("兄弟标签:" + b_ele2.nodeName); //获取的是兄弟标签,不管是否含有换行或空行 //获取所有子标签 var ele3 = document.getElementsByClassName("div1")[0]; console.log("长度:" + ele3.children.length); //用p标签取出标签 取文本内容 var ele4 = document.getElementsByName("littleP")[0]; var p_ele4 = ele4.nextElementSibling; console.log("innerHTML:" + p_ele4.innerHTML); console.log("innerText:" + p_ele4.innerText); //innerHTML和innerText的区别:innerHTML取出的是文本加里面的标签名,innerText取出的仅仅是文本 </script> </body> </html>
DOM Event（事件）：
a：onclick--当用户点击某个对象时调用的事件句柄
b：ondblclick--当用户双击某个对象时调用的事件句柄
c：onfocus--元素获得焦点
d：onblur--元素失去焦点，应用场景：用于表单验证，用户离开某个输入框时，代表以及输入完，我们可以对它进行验证
e：onchange--域的内容被改变，应用场景：通常用于表单元素，当元素内容被改变时触发（比如联动效果）
f：onkeydown--某个键盘按键被按下，应用场景：当用户在最后一个输入框按下回车按键时，表单提交
g：onkeypress--某个键盘按键被按下并松开
h：onkeyup--某个键盘按键被松开
i：onload--一张页面或一幅图像完成加载，这个属性被触发，就标志着页面内容被加载完成，应用场景：当有些事情我们希望页面加载完立刻执行，那么可以使用该事件属性
j：onmousedown--鼠标按钮被按下
k：onmousemove--鼠标被移动
l：onmouseout--鼠标从某元素移开
m：onmouseover--鼠标在某元素之上
n：onmouseleave--鼠标从元素离开
o：onselect--文本被选中
p：onsubmit--确认按钮被点击
案例：onload事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--如果我们要将script放在这里,可以用onload事件,表示页面加载完成,这里再执行--> <script> window.onload = function () { console.log("被执行的22:" + new Date().toLocaleString()); var ele = document.getElementsByClassName("div1")[0]; console.log("文本内容:" + ele); }; function ff() { console.log("被执行的33:" + new Date().toLocaleString()); } </script> </head> <!--在body里绑定,表示内容加载完成,可以执行函数了--> <body onload="ff()"> <div class="div1">hello onload</div> <script> console.log("被执行的11:" + new Date().toLocaleString()); </script> </body> </html>
案例：onsubmit事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="form1"> <input type="text" name="username"> <input type="submit" value="提交"> </form> <script> var ele = document.getElementById("form1"); //当点击提交的时候,会触发这个函数,然后再触发提交那个事件 //可以用来做一些检测,比如用户名注册检测是否符合格式 ele.onsubmit = function (e) { //如果检测数据格式不正确,我们可以返回false,这样就不会提交事件了 // return false; //第二种方法就是,如果匹配失败了,可以通过event事件来阻止 e.preventDefault(); } </script> </body> </html>
Event对象： 代表事件的状态，比如事件在其中发生的元素，键盘按键的状态，鼠标的位置，鼠标按钮的状态。事件通常域函数结合使用，函数不会在事件发生前执行，event对象在事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数，我们获得仅仅需要接收一下即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 300px; height: 300px; background-color: #783d0c; } .inner{ width: 100px; height: 100px; background-color: #84a42b; } </style> </head> <body> <div class="outer" onclick="func2()"> <div class="inner"></div> </div> <script> var ele = document.getElementsByClassName("inner")[0]; ele.onclick = function (e) { //通过e来阻止事件传播 alert("i am inner"); e.stopPropagation(); }; function func2() { alert("i am outer"); } </script> </body> </html>
案例：二级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id="provinces"> <option value="">请选择省份</option> </select> <select id="citys"> <option value="">请选择城市</option> </select> <script> data = { "广东省":["广州市","深圳市","佛山市"], "江苏省":["南京市","苏州市"], "贵州省":["贵阳市","凯里市","遵义市"] }; var pro_ele = document.getElementById("provinces"); var city_ele = document.getElementById("citys"); //动态添加数据 for(var i in data){ var opt = document.createElement("option"); opt.innerHTML = i; pro_ele.appendChild(opt); } //绑定事件 pro_ele.onchange= function () { //获取索引值 var citys = data[this.options[this.selectedIndex].innerHTML]; //将数据清空再加入 city_ele.options.length = 1; for(var i = 0 ; i < citys.length; i++){ var opt = document.createElement("option"); opt.innerHTML = citys[i]; city_ele.appendChild(opt); } } </script> </body> </html>
案例：模块对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ height: 1800px; background-color: white; } .shade{ position: fixed; /*占满屏*/ top: 0; left: 0; right: 0; bottom:0; background-color: grey; opacity: 0.5; } .model{ position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; width: 200px; height: 200px; background-color: white; } .hide{ display: none; } </style> </head> <body> <div class="content"> <button onclick="show()">显示</button> </div> <!--遮罩--> <div class="shade hide"></div> <!--弹出框--> <div class="model hide"> <button onclick="cancel()">关闭</button> </div> <script> function show() { var ele_shade = document.getElementsByClassName("shade")[0]; var ele_model = document.getElementsByClassName("model")[0]; ele_shade.classList.remove("hide"); ele_model.classList.remove("hide"); } function cancel() { var ele_shade = document.getElementsByClassName("shade")[0]; var ele_model = document.getElementsByClassName("model")[0]; ele_shade.classList.add("hide"); ele_model.classList.add("hide"); } </script> </body> </html>
案例：正反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--通过js实现正反选功能--> <button onclick="selectAll()">全选</button> <button onclick="cancel()">取消</button> <button onclick="reverse()">反选</button> <table border="1px"> <tr> <td> <input type="checkbox"> </td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>333</td> <td>333</td> <td>333</td> </tr> </table> <script> function selectAll() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++){ var input = inputs[i]; input.checked = true; } } function cancel() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++){ var input = inputs[i]; input.checked = false; } } function reverse() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++){ var input = inputs[i]; if (input.checked){ input.checked =false; }else { input.checked = true; } } } </script> </body> </html>
浙公网安备 33010602011771号