1）基于对象：(区别于面向对象)，可以通过对象调用方法 obj.fn()
2）事件驱动：网页文档中的HTML标签事件触发JS代码执行
3）解释型：边解释边执行(不会先对网页进行编译生成中间文件)
4）脚本语言：JS不会独立运行，依赖于网页文件(HTML文件)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS初体验</title><style type="text/css">.btnStyle{width: 200px;height: 35px;background: lightcoral;border: 0px;color: white;border-radius: 4px;font-weight: bold;}</style><script type="text/javascript">// 函数function test(){//弹窗alert("Hello World!");var m = 10/0;}</script></head><body><input type="button" value="测试按钮" class="btnStyle" onclick="test()"></body>
</html>1）动态改变网页中HTML标签的属性
2）动态改变网页中HTML标签的样式
3）对用户输入的数据进行合法性校验(格式检查)
4）动态操作网页中的HTML标签（增、删、改）
5）实现页面数据的异步通信(在不阻塞页面加载和用户交互的情况下，与服务器进行数据交换)
1）虽然JS是在用户的浏览器中执行，但是JS不能访问用户的本地文件
2）JS不能操作来自不同服务的网页文档
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS作用</title><script type="text/javascript">// 函数function test() {//操作HTML标签的属性ElementById("img1").width = ElementById("img1").height = 200;//操作HTML标签的样式ElementById("img1").style.borderRadius = "50%";//移出HTML标签（DOM操作&#ElementById("img1").remove();}</script></head><body><img id="img1" src="imgs/img1.jpg"><br><input type="button" value="测试按钮" onclick="test()"></body>
</html> 1）写在body中(常用)、body后、head中
2）在外写个js文件，在head里面调用
1）引用js文件的话必须是双标签
2）script标签用来引用js文件之后，当前script标签就不能再自定义js代码
3）如果引用js文件，还要进行自定义js代码实现，需要重新写一个script标签
{}表示对象类型，js对象的属性名可以直接定义，并且对象的属性支持扩展
var stu = {stuNum:"1001",stuName:"王二狗"};
stu.stuGender = "男";
数组 var arr1 = new Array();
var arrays=[{"uid":14,"uname":"张三"},{"uid":15,"uname":"张三"}]
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS流程控制</title></head><body><button onclick="testFor()">测试for循环</button><button onclick="testForIn()">测试forIn</button><script type="text/javascript">function testFor(){for(var i=0;i<3;i++){console.log(i);}}//遍历JS对象和数组function testForIn(){var stu = {stuNum:"1001",stuName:"张三",stuGender:"男"};for(j in stu){// 遍历对象的属性名+值console.log(j+":"+stu[j]);}var arr = ["aaa","bbb","ccc"];for(i in arr){//遍历数组的索引和值console.log(i+":"+arr[i]);}}</script></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>错误处理</title></head><body><button onclick="testError()">测试错误处理</button><script type="text/javascript">function testError(){try{console.log("----------try");var m =10;var n = 2;if(n !=0){var k = m/n;}else{throw "n的值不能为0";}console.log("k的值为："+k);}catch(e){//TODO handle the exceptionconsole.log(e);}finally{console.log("----------finally");}}</script></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS对象</title></head><body><button onclick="testObj()">通过{}创建js对象</button><script type="text/javascript">function testObj(){var obj = {id:"1001",name:"张三",test1:function(){console.log("test1");}};console.log(obj);console.log(obj.id);console.log(obj.name);st1();}</script></body>
</html>(2)自定义JS构造函数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS对象</title></head><body><button onclick="testObj2()">使用构造函数创建js对象</button><script type="text/javascript">//自定义JS构造函数function Student(num,name){// this.stuNum = "1001";// this.stuName = "张三";//定义属性this.stuNum = num;this.stuName = name;//定义方法hod1 = function(a){console.log("Student----method1:"+a);}hod2 = myMethod2;}function myMethod2(){console.log("Student----method2");}function testObj2(){var s1 = new Student("1001","张三");console.log(s1);s1.method1("wahhha");s1.method2();var s2 = new Student("1002","李四");console.log(s2);s2.method1("hhehheeh");}</script></body>
</html>对象扩展属性：s1.stuGender = “男”，
构造器扩展属性：Student.prototype.stuGender="男"：//（ 需要另外输出
console.log(s1.stuGender);因为tostring没照顾到新的属性）
var str1 = "Hello,World";
var str2 = new String("你好");
charAt("str")、split、indexOf、lastIndexOf、substring、substr(起始，个数)、toUpperCase、toLowerCase、正则表达式
正则表达式：
var str3 = "13030303300";var reg = "^1[3,5,7,9]\d{9}$";var b = str3.match(reg);console.log(b);注意：利用String的match函数进行正则校验，b匹配的话返回本身，不匹配返回null
1）test
function testRegExp(){var str = "13030303300";var reg = new RegExp("^1[3,5,7,8]\d{9}$");var b = st(str);console.log(b);}注意：test匹配返回true，不匹配返回false
/d匹配任意数字、/s 空白字符、/b单词边界、/u???? 匹配unicode字符
a+至少一个a、a* 0-n个a、a？ 0-1个a、a{m}m个a、a{m,n} m-n个a
1）常量 var e = Math.E、 var p = Math.PI;
2）静态数学函数：Math.random、und(四舍五入)、Math.floor(只舍不入，获取比参数小的最大整数)、il（只入不舍，获取大于等于参数的最小整数）、Math.abs获取绝对值、Math.sqrt获取平方根
数组的定义：
1）通过构造器创建
var arr2 = new Array("aaa","bbb");2）静态初始化数组
var arr3 = ["aaa","bbb","ccc"];var arr1 = new Array();
arr1[0] = "aaa";
arr1[1] = "bbb";添加元素，数组长度=最大下标+1
3)遍历：for循环、forin循环
for(var i in arr){console.log(arr[i]);}| arr.join("-") | 把数组里面的元素用-穿起来 |
| arr.slice(2,4) | 截取数组，起末，左闭右开 |
| 反转数组 |
| var date = new Date();console.log(date); | 不好理解的时间 |
| var year = Year(); | 距离1900年的时间 |
| var year = Year()+1900; | 正确的2023 |
| var year1 = FullYear(); | 2023 |
| var month = Month()+1; | 月份 |
| var d = Date(); | 20号 |
| var hour = Hours(); | 21点 |
| var min = Minutes(); | 59分 |
| var sec = Seconds(); | 2秒 |
| var ms = Milliseconds(); | 获取毫秒 |
| var day = Day(); | 获取星期几 星期五 |
| date.setFullYear(2029); date.setMonth(11); date.setDate(28); | set设置时间:2029年12月28号 |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>内置对象Date</title></head><body><button onclick="testDate()">测试Date</button><script type="text/javascript">function testDate(){var date = new Date();//不好理解的时间console.log(date);// set设置时间:2029年12月28号date.setFullYear(2029);date.setMonth(11);date.setDate(28);//距离1900年的时间// var year = Year();//正确的2023var year = Year()+1900;//2023var year1 = FullYear();//月份var month = Month()+1;//20号var d = Date();//21点var hour = Hours();//59分var min = Minutes();//2秒var sec = Seconds();//获取毫秒var ms = Milliseconds();//获取星期几 星期五var day = Day();console.log(year);console.log(year1);console.log(month);console.log(d);console.log(hour);console.log(min);console.log(sec);console.log(ms);console.log(day);}</script></body>
</html>全局对象（预定义的对象）,全局函数直接调用，也可以用window调用
| parseInt | 将字符串转整数 |
| parseFloat | 将字符串转为浮点数 |
| encodeURI | 对网址的参数部分进行编码（特殊符号和中文） |
| decodeURI | 对编码后的网址进行解码 |
| escape | 对字符串中的特殊符号和中文进行编码 |
| unescape | 对字符串中的特殊符号和中文进行解码 |
| var jsonStr = "{stuNum:'1001',stuName:'张三'}"; eval("("+jsonStr+")"); | 将满足json格式的字符串转换成JS对象 |
对象：var s1 = {stuNum:'1001',stuName:'张三'};
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>function</title></head><body><button onclick="testFunction()">测试按钮</button><script type="text/javascript">function testFunction(){var str1 = "3.14";var i = parseFloat(str1);var url = "/?param=中华有我";//对网址的参数部分进行编码（特殊符号和中文）var newUrl = encodeURI(url);//对编码后的网址进行解码var url2 = decodeURI(newUrl);// console.log(newUrl);// console.log(url2);var str2 = "My name is 王大力";//对字符串中的特殊符号和中文进行编码var s = escape(str2);//对字符串中的特殊符号和中文进行解码var s1 = unescape(s)// console.log(s1);//对象var s1 = {stuNum:'1001',stuName:'张三'};// console.log(s1);//当一个字符串满足JS中对象的格式（JSON格式），可以通过eval转换成对象模式var jsonStr = "{stuNum:'1001',stuName:'张三'}";// 将满足json格式的字符串转换成JS对象var stu = eval("("+jsonStr+")");var stu = window.eval("("+jsonStr+")");console.log(stu.stuName);// console.log(jsonStr.stuNum);}</script></body>
</html>| window.navigator | 看浏览器类型（safari、chrome） |
| window.screen | 设备的屏幕 |
| window.location | 地址栏 |
| window.history | 历史记录 |
| window.document | 文档内容 JS代码 |
//看浏览器类型（safari、chrome）var v = window.navigator;//设备的屏幕var s = window.screen;//地址栏var l = window.location;//历史记录var h = window.history;//文档内容 JS代码var a = window.document;| window.name = "w1"; | 设置当前浏览器窗口的名字 |
| window.status="🌟"; | 设置当前浏览器窗口的状态栏 |
| window.closed | 获取当前窗口是否关闭 |
| var h = window.innerHeight; var w = window.innerWidth; | 获取浏览器的内部高/宽度 |
| var oh = window.outerHeight; var ow = window.outerWidth; | 获取浏览器的外部高/宽度 |
//设置/获取当前浏览器窗口的名字window.name = "w1";//设置/获取当前浏览器窗口的状态栏window.status="🌟";//获取当前窗口是否关闭window.closed//获取浏览器的内部高/宽度var h = window.innerHeight;var w = window.innerWidth;//获取浏览器的外部高/宽度var oh = window.outerHeight;var ow = window.outerWidth;| window.self | 指的是自己 |
| window.parent | 父容器 |
| 祖先容器 |
| alert("请注意，倒车！"); | 弹窗，无返回值 |
| confirm("确定删除吗？"); | 有返回值，点击确定才返回true，其他false |
| prompt("请输入生日："); var s =window.prompt("请输入生日：","2023"); | 有返回值，点击确定返回内容,否则返回null，2023这个是设置默认值 |
//无返回值window.alert("请注意，倒车！");//有返回值，点击确定才返回true，其他falsevar s = firm("确定删除吗？");//有返回值，点击确定返回内容,否则返回null// var s =window.prompt("请输入生日：");//2023这个是设置默认值var s =window.prompt("请输入生日：","2023");console.log(s);| var w = window.open(URL,"度",features,true); | 参数1：新打开的窗口显示的网址 参数2：新打开的窗口的名字 参数3：新打开的窗口的属性 参数4：是否替换当前窗口 Tru为替换 返回值：打开的窗口对象 |
var URL = "";//参数1：新打开的窗口显示的网址//参数2：新打开的窗口的名字//参数3：新打开的窗口的属性//参数4：是否替换当前窗口 Tru为替换// 返回值：打开的窗口对象// var w = window.open(URL);// var w =window.open(URL,"百度")var features = "width = 200，height = 100";// var w =window.open(URL,"百度",features);var w = window.open(URL,"百度",features,true);console.log(w.name);var w = window.open("","百度官网","width=300,height=300",true);| 把宽高修改为800，600 | |
| 把宽高额外增加800，600 | |
| 将窗口移动到指定位置 距左200 距上100 | |
| 将窗口在原基础上再移动 左200 上100 | |
| window.scrollTo(200,300); | 滚动滚动条(针对当前窗口的滚动条操作) |
| window.scrollBy(-100,-200); | 滚动滚动条在原基础上再移动 右100 下300 |
var w = window.open("","百度官网","width=300,height=300",true);//把宽高修改为800&#sizeTo(800,600);// 把宽高增加800&#sizeBy(800,600);// 将窗口移动到指定位置 距左200 距上veTo(200,100);// 将窗口在原基础上再移动 左200 上veBy(200,100);//滚动滚动条(针对当前窗口的滚动条操作)window.scrollTo(200,300);// 滚动滚动条在原基础上再移动 右100 下300window.scrollBy(-100,-200);| var task1 = setTimeout(showDate, 3000); | 设置延迟3秒显示 |
| clearTimeout(task1); | 关闭未执行的延时任务 |
| var task2 = setInterval(showDate, 3000); | 设置每3秒显示一次 |
| clearInterval(task2); | 关闭循环任务 |
注意：window可删 直接： task2 = setInterval("showDate()", 3000);
var task = setInterval("show()", 1000);var task = setInterval(show, 1000);| screen.height; screen.width; | 获取屏幕宽度和高度（分辨率） |
| screen.availHeight;screen.availWidth | 获取屏幕宽度和高度（除掉状态栏） |
| screen.deviceXDPI; screen.deviceYDPI | 获取屏幕硬件一英寸的物理像素点 |
//获取屏幕宽度和高度（分辨率）var h= screen.height;var w= screen.width;// alert(w+"*"+h);// 获取屏幕宽度和高度（除掉状态栏）var ah= screen.availHeight;var aw= screen.availWidth;// alert(aw+"*"+ah);// 获取屏幕硬件一英寸的物理像素点var xdpi = screen.deviceXDPI;var ydpi = screen.deviceYDPI;alert(xdpi+"*"+ydpi);| navigator.appName; | 返回浏览器的名称 |
| navigator.appCodeName; | 返回浏览器的代码名 |
| navigator.appVersion; | 返回浏览器的平台及版本信息 |
| navigator.browserLanguage; | 返回浏览器的语言环境（看浏览器支持） |
| 检查当前浏览器是否启用Cookie（重） |
//返回浏览器的名称var name = navigator.appName;// 返回浏览器的代码名var code = navigator.appCodeName;// 返回浏览器的平台及版本信息var version = navigator.appVersion;// 返回浏览器的语言环境（看浏览器支持）var lang = navigator.browserLanguage;// 检查当前浏览器是否启用Cookie（重）var b = kieEnabled;console.log(b);| location.href; | 获取地址栏完整的网址 127.0.0.1:8848/demo3/page19-BOM-Location.html |
| location.href = ""; | 修改地址栏完整的网址（可以实现页面跳转）（多） |
| location.protocol; | 获取地址栏网址的协议 http |
| location.port; | 获取地址栏网址的端口 8848 |
| location.host; | 获取主机和端口号：127.0.0.1:8848 |
| location.hostname; | /获取主机号：127.0.0.1 |
| location.pathname; | 获取路径参数demo3/page19-BOM-Location.html |
| load(); | 重新载入当前网页（刷新网页） |
| place("http:www.baidu"); | 使用网址替换当前地址栏的网址（实现页面跳转） |
//获取地址栏完整的网址 addr:port/aa?key=nalue// 协议 主机 端口 端口// 127.0.0.1:8848/demo3/page19-BOM-Location.htmlvar s1 = location.href;// 获取地址栏网址的协议 httpvar s2 = location.protocol;// 获取地址栏网址的端口 8848var s3 = location.port;//获取主机和端口号：127.0.0.1:8848var s4 = location.host;//获取主机号：127.0.0.1var s5 = location.hostname;// 获取路径参数demo3/page19-BOM-Location.htmlvar s6 = location.pathname;// 修改地址栏完整的网址（可以实现页面跳转）（多）location.href = "";// location函数// 重新载入当前网页（刷新网页&#load();//使用网址替换当前地址栏的网址（实现页面跳转&#place("http:www.baidu");console.log(s6);| history.back(); | 返回上一个页面 |
| history.forward(); | 切换到下一个页面 |
| 正前进负后退 | |
| var len = history.length; | 获取历史记录中网址的个数 |
注意：go数字代表跳几个页面，前提是有过历史记录
（元素——标签节点，属性——属性节点，文本——文本节点）
指代的就是一个网页文档，他提供的属性、函数大多是为了获取网页文档中的元素
| document.all; | 获取当前文档所有元素 |
| document.images; | 获取当前网页文档中所有图片 |
| document.forms; | 获取当前网页文档中的form元素 |
| var arr4 = document.links; | 获取当前网页文档中所有的链接（a,area） |
| document.body; | 获取当前网页文档中的body元素 |
| document.title; document.title = "千锋Java"; | 获取当前网页文档中的标题内容 设置当前文档的标题 |
| document.URL; | 获取当前网页文档的URL |
| 向cookie中添加新的数据（累加） | |
| 获取cookie中缓存的内容 |
| getElementById("img2"); | 根据标签的id属性获取一个标签 |
| getElementsByName("m1"); | 根据标签的name属性获取多个标签（数组） |
| getElementsByClassName("cc"); | 根据标签的class属性获取一组标签（数组） |
| getElementsByTagName("p"); | 根据标签名获取一组标签（数组） |
<img class="cc" src="imgs/img1.jpg" height="100"><br><img id="img2" src="imgs/img2.jpg" height="100"><br><img name="m1" src="imgs/img3.jpg" height="100"><br><p>p1</p><p class="cc">p3</p><p>p3</p>| document.write("从前有座山<br/>"); |
换行输出（依靠浏览器支持） |
| document.open(); | 打开并使用一个新的流 |
| document.close(); | 关闭当前网页的输出流，关闭之后如果执行write，则会打开新的流 |
| | 获取与设置标签中间的内容(可以识别标签) |
| | 获取与设置标签中间的内容(不可以识别标签) |
| | 获取与设置input标签输入框中值 |
// 操作标签属性// 获取属性值var s = img.src;// 设置属性值img.src = "imgs/img3.jpg"; // 操作标签样式// 设置标签的样式属性img.style.border = "2px rgba(255,0,0,0.5) solid";// 样式属性在css中以“-”分割，在js中操作要使用驼峰命名img.style.borderRadius = "50%";var m = img.style.border;console.log(m); <style type="text/css">.imgStyle{width: 200px;height: 200px;border-radius: 50%;transform: rotate(45deg);}</style> var img3 = ElementById("img3");// 标签对象的class属性 使用className进行操作img3.className = "imgStyle";console.log(img3.class);<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.imgStyle{width: 200px;height: 200px;border-radius: 50%;transform: rotate(45deg);}</style></head><body><img src="imgs/img1.jpg" height="200"> <br><img id = "img2" src="imgs/img2.jpg" height="200"> <br><img id = "img3" src="imgs/img3.jpg" height="200"> <br><button onclick="testAttrOper()">操作标签属性</button><button onclick="testStyleOper()">操作标签样式</button><button onclick="testClassOper()">操作标签class属性</button><script type="text/javascript">function testAttrOper(){var img = ElementById("img2");// 操作标签属性// 获取属性值var s = img.src;// 设置属性值img.src = "imgs/img3.jpg";}function testStyleOper(){var img = ElementById("img2");// 操作标签样式// 设置标签的样式属性img.style.border = "2px rgba(255,0,0,0.5) solid";// 样式属性在css中以“-”分割，在js中操作要使用驼峰命名img.style.borderRadius = "50%";var m = img.style.border;console.log(m);}function testClassOper(){var img3 = ElementById("img3");// 标签对象的class属性 使用className进行操作img3.className = "imgStyle";console.log(img3.class);}</script></body>
</html>form_validate.js
function doValidate() {console.log("------doValidate");var userName = ElementById("userNameInput").value;var label1 = ElementById("userNameTipsLabel");//校验用户名if (userName == null || userName == "") {//进行提示label1.innerHTML = "请输入用户名！";lor = "red";return false;} else if (userName.length < 8 || userName.length > 20) {label1.innerHTML = "用户名长度必须为8-20个字符！"lor = "red";return false;} else if (!new RegExp("^[0-9a-zA-Z]*$").test(userName)) {label1.innerHTML = "用户名只允许包含数字和字母";lor = "red";return false;} else {label1.innerHTML = "用户名输入正确！";lor = "green";}// 校验密码var userPwd = ElementById("userPwdInput").value;var label2 = ElementById("userPwdTipsLabel");if (userPwd == null || userPwd == "") {//进行提示label2.innerHTML = "请输入密码！";lor = "red";return false;} else if (userPwd.length < 8 || userPwd.length > 16) {label2.innerHTML = "密码长度必须为8-16个字符！"lor = "red";return false;}else {label2.innerHTML = "密码输入正确！";lor = "green";}//校验重复输入密码var rePwd = ElementById("rePwdInput").value;var label3 = ElementById("rePwdTipsLabel");if (rePwd == null || rePwd == "") {//进行提示label3.innerHTML = "密码不能为空！";lor = "red";return false;} else if (userPwd != rePwd) {label3.innerHTML = "两次密码输入不一致！"lor = "red";return false;}else {label3.innerHTML = "重复密码输入正确！";lor = "green";}//校验手机号var userPhone = ElementById("userPhoneInput").value;var label4 = ElementById("userPhoneTipsLabel");if(userPhone == null || userPhone == "") {//进行提示label4.innerHTML = "手机号不能为空！";lor = "red";return false;}else if(!new RegExp("1[3579]\d{9}").test(userPhone)){label4.innerHTML = "手机号只允许1开头，且中间为3579的11位数！";lor = "red";return false;}else {label4.innerHTML = "手机号输入正确！";lor = "green";}//校验邮箱var userEmail = ElementById("userEmailInput").value;var label5 = ElementById("userEmailTipsLabel");if(userEmail == null || userEmail == "") {//进行提示label5.innerHTML = "邮箱不能为空！";lor = "red";return false;}else if(!new RegExp("^[0-9a-zA-Z]{10}@qq$").test(userEmail)){label5.innerHTML = "邮箱只允许10位数字或字母，且以@qq结尾的格式！";lor = "red";return false;}else {label5.innerHTML = "邮箱输入正确！";lor = "green";}console.log(userName);return false;
}<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单校验</title><script type="text/javascript" src="js/form_validate.js"></script></head><body><!-- onsubmit表单提交事件，如果返回false则不执行，返回true才执行 --><form action="" onsubmit=" return doValidate()"><fieldset><legend>用户注册-数据校验</legend><p>账号：<input id="userNameInput" type="text" placeholder="请输入用户名"><label id="userNameTipsLabel"></label></p><p>密码：<input id="userPwdInput" type="password" placeholder="请输入密码"><label id="userPwdTipsLabel"></label></p><p>确认密码：<input id="rePwdInput" type="password" placeholder="请再次输入密码"> <label id="rePwdTipsLabel"></label></p><p>手机号：<input id="userPhoneInput" type="text" placeholder="请输入手机号"> <label id="userPhoneTipsLabel"></label></p><p>邮箱：<input id="userEmailInput" type="text" placeholder="请输入邮箱"> <label id="userEmailTipsLabel" ></label></p><p><input type="submit" value="提交"></p></form></fieldset></body>
</html>节点：元素，属性，文本都叫做节点
节点操作：使用js完成节点的增加、插入、替换、删除
1）节点属性：
| 节点类型 | nodeType | nodeName | nodeValue |
| 标签节点 | 1 | 标签名 | null |
| 属性节点 | 2 | 属性名 | 属性值 |
| 文本节点 | 3 | #text | 文本内容 |
2）方法
| body.attributes; | 获取当前标签的属性列表 |
| div.childNodes; | 获取当前标签的子节点（包括标签节点，文本节点） |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>节点属性</title></head><body style="color: red;" bgcolor="green"><div id="div1">hello<h3>枫桥夜泊</h3><p>月落乌啼霜满天，</p><p>江枫渔火对愁眠。</p><p>姑苏城外寒山寺，</p><p>夜半钟声到客船。</p></div><input type="button" value="测试" onclick="test()"><script type="text/javascript">function test(){var body = document.body;// 所有标签对象的都可以调用attributes属性，获取当前标签的属性列表var attrsArr = body.attributes;// 属性节点var attrNode = attrsArr[0];console.deType);console.deName);console.deValue);// 所有标签对象的都可以调用childNodes属性，获取当前标签的子节点（包括标签节点，文本节点）var div = ElementById("div1");var nodesArr = div.childNodes;//文本节点 var textNode = nodesArr[0];console.deType);console.deName);console.deValue);//标签节点var tagNode = nodesArr[1];console.deType);console.deName);console.deValue);}</script></body>
</html>| 创建标签节点（元素） | |
| 创建属性节点 | |
| 创建文本节点 | |
| document.setAttributeNode(srcAttr); | 将属性节点添加到标签节点中 |
| document.setAttribute("src","imgs/img2.jpg"); | 给标签节点添加/修改属性 |
| 从标签节点上移除一个属性 | |
| document. appendChild() | 建立上下级关系 |
| document.insertBefore（） | 插入子节点 |
| document. replaceChild | 替换子节点 |
| document. removeChild() | 删除子节点 |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>创建新节点</title></head><body><input type="button" value="测试创建新节点" onclick="test()"></body><script type="text/javascript">function test(){// 创建标签节点（元素）var tagNode = ateElement("img");//打印标签的内容// console.log(tagNode.outerHTML);console.deType);console.deName);console.deValue);// 创建属性节点var attrNode = ateAttribute("name");console.deType);console.deName);console.deValue);// 创建文本节点var textNode = ateTextNode("hello world!");console.deType);console.deName);console.deValue);}</script>
</html> // 创建标签节点var imgTag = ateElement("img");// -----------------begin// 1、// 创建属性节点var srcAttr = ateAttribute("src");deValue="imgs/img1.jpg";// 将属性节点添加到标签节点中imgTag.setAttributeNode(srcAttr);// -----------------end// 2、给标签节点添加/修改属性imgTag.setAttribute("src","imgs/img2.jpg");imgTag.setAttribute("width","200");imgTag.alt = "图片无法显示";// 从标签节点上移除一个属性veAttribute("alt");// 拼接子节点 将标签节点拼接到body标签里面（最后面） var body = document.body;body.appendChild(imgTag); //插入子节点，将imgTag插入到body里面btnTag之前var btnTag = ElementById("btn_test");body.insertBefore(imgTag,btnTag);<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>替换节点</title><style type="text/css">#container{border: #F08080 2px solid;width: 400px;height: 300px;}</style></head><body><div id="container"><p>hello</p><p id="p">我是一个图片</p><p>world</p></div><img id="img3" src="imgs/img3.jpg" height="100" ><input id="btn_test" type="button" value="测试" onclick="test()"><script type="text/javascript">function test(){// 使用一个图片标签，替换div中的p标签// 创建新节点var imgTag = ateElement("img");imgTag.src = "imgs/img1.jpg";imgTag.height=100;//获取网页中已经存在的图片标签// 如果使用网页中已经存在的标签，替换的时候A会发生移动，而不是拷贝A去替换Bvar imgTag = ElementById("img3");//替换子节点// 使用imgTag替换oldChildvar parentTag = ElementById("container");var oldChild = ElementById("p");placeChild(imgTag,oldChild);}</script></body></html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>替换节点</title><style type="text/css">#container{border: #F08080 2px solid;width: 400px;height: 300px;}</style></head><body><div id="container"><p>hello</p><p id="p">我是一个图片</p><p>world</p></div><img id="img3" src="imgs/img3.jpg" height="100" ><input id="btn_test" type="button" value="测试" onclick="test()"><script type="text/javascript">function test(){var div &#ElementById("container");var p = ElementById("p");// 删除自节点// 从div中删除子标签veChild(p);}</script></body></html>在HTML标签上添加事件属性，绑定对应的js函数
<button onclick="test1()">测试按钮1</button><script type="text/javascript">function test1(){console.log("------------test1");}</script>不再HTML标签上写事件属性，通过JS获取HTML元素，调用事件属性绑定JS函数
<button id="btn2" >测试按钮2</button><script type="text/javascript">var btn2 = ElementById("btn2");lick = function(){console.log("------------test2");}</script>鼠标事件、键盘事件（表单标签）、window事件、监听事件
用户的鼠标在HTML标签上产生点击、双击、移动、放上、离开等动作
| onclick | 单击 |
| ondblclick | 双击 |
| onmouseover | 鼠标移动到HTML标签上 |
| onmouseout | 鼠标从HTML标签上移走 |
| onmousemove | 鼠标在HTML标签上移动 |
| onmousedown | 鼠标在HTML标签上左键按下 |
| onmouseup | 鼠标在HTML标签上左键松开 |
| onsubmit | 表单提交事件 |
<img src="imgs/img1.jpg" width="200" onclick="test1()" ><script type="text/javascript">function test1(){console.log("------test1");}</script>表单提交：注意 false不提交 onsubmit那里直接show07()的话都会false也会提交
<form action="index23.html" method="get" onsubmit="return show07()"><input type="text" name="uname" /><input type="submit" value="提交" /></form>function show07() {return true;}主要是针对于表单中的输入标签
| onkeydown | 键盘按下（未松开就一直加） |
| onkeyup | 键盘抬起 |
| onkeypress | 键盘按下（未松开也就一次） |
| load = function() | 当网页中body标签内容加载完毕触发 |
| unload = function() | 当前网页关闭或刷新时执行 用于回收资源 |
| scroll = function() | 当网页发生滚动时触发执行 |
| window.οnresize= function() | 窗口的尺寸发生变化时触发 |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><img src="imgs/img1.jpg" height="300"><script type="text/javascript">//当网页中body标签内容加载完毕触发load = function(){console.log("------onload");}// 当前网页关闭或刷新时执行 用于回收资源unload = function(){console.log("------onunload");}// 当网页发生滚动时触发执行scroll = function(){console.log("------onscroll");}// 窗口的尺寸发生变化时触发size= function(){console.log("------onresize");}</script></body>
</html>例如：（如果在HTML的head标签中通过js绑定事件，必须写在load = function()中，因为不然的话找不到id=btn的标签）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript"&load = function(){var btn = ElementById("btn");lick = function(){console.log("------hello");}}</script></head><body><button id="btn">测试按钮</button></body>
</html>键盘事件通常绑定在表单输入标签，但是表单输入标签支持的事件不止键盘事件
| onfocus | 当表单标签获得焦点时触发 |
| onblur | 当表单标签失去焦点时触发 |
| onchange | 当表单标签中的值发生变化触发（输入框输入完成失去焦点后判断） |
| onselect
| 当输入框中输入的内容被选中时触发 select标签也支持onchange事件 |
| onsubmit | 绑定在form元素上，当此表单被提交时触发 |
| onreset | 绑定在form元素上，当此表单被重置时触发 |
<th><input type="checkbox" id="checkall" οnchange="checkall();">全选</th>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text" id="userName"><select id="num"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><form action=""><input type="text"><input type="submit"><input type="reset"></form><script type="text/javascript">var userNameInputTag = ElementById("userName");// 当表单标签获得焦点时触发focus = function(){console.log("--------test1");}// 当表单标签失去焦点时触发blur = function(){console.log("--------test2");}// 当表单标签中的值发生变化触发（输入框输入完成失去焦点后判断&#hange = function(){console.log("--------test3");}// 当输入框中输入的内容被选中时触发select = function(){console.log("--------test5");}// select标签也支持onchange事件ElementById("num").onchange = function(){console.log("-----test4");}// 绑定在form元素上，当此表单被提交时触发document.forms[0].onsubmit = function(){console.log("---------test6");// 阻止表单提交return false;}// 绑定在form元素上，当此表单被重置时触发document.forms[0].onreset = function(){console.log("---------test7");// 阻止表单提交return false;}</script></body>
</html>js将标签发生的动作抽象为事件对象、
Event对象用来描述HTML标签与发生的动作的组合
<button ondblclick="test1()">按钮</button><img src="imgs/img1.jpg" height="100" id="img""><script type="text/javascript">function test1(){// 获取当前事件对象var ev = window.event;}</script><img src="imgs/img1.jpg" height="100" id="img""><script type="text/javascript">var img = ElementById("img");lick = function(ev){console.log(ev);}</script>| var tag = event.srcElement; | event对象调用srcElement，获得触发此事件的标签（<button οnclick="test1()">按钮</button>） |
| var type = pe; | event对象调用type属性，获取事件的类型（click） |
阻止：
| event.cancelBubble = true; | 阻止事件冒泡 |
| event.stopPropagation(); | 阻止事件冒泡 |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="div" style="padding: 50px; width: 100px; height: 100px; background: rgba(255,0,0,0.5);"><button id="btn">测试按钮</button><img src="imgs/img1.jpg" height="50"></div><script type="text/javascript">var div = ElementById("div");lick = function() {console.log("-------test1");}var arr = div.childNodes;for (var i = 0; i < arr.length; i++) {var node = arr[i];if (deType == 1) {lick = function(event){//阻止事件冒泡event.cancelBubble = true;}}}</script></body>
</html>Request对象、Response对象、out对象、session对象、application对象、PageContext对象、Config对象、Page对象、Exception对象。
47、NaN+ 任何 =NaN 无重载
48、typeof()==>用于获取变量数据类型
50、οnsubmit="return checkedLogin()" 函数里面默认true
51、css写 style js写script
（1）<input type="button" value="根据id来获取" οnclick="show01()"> 验证
（2）<input type="submit" value="提交"> 必须form里面
getElementsByClassName("max")语法getElementsByClassName() 方法返回的是一个数组，而 value 属性是只读的，所以不能直接访问。可以通过 arrays[0].value 来访问第一个元素的 value 属性。
54、样式、属性写法
（1）样式写法：（head里面）
<style>table{border: 1px red solid;}</style>（2）属性写法
<table style="border: 1px solid red; "><table border="1px" cellspacing="0px" ><!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>tr th {height: 20px;}tr td {height: 50px;text-align: center;}</style></head><body><table border="1px" cellspacing="0px" width="300px"><!-- 第一行 --><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><!-- 第二行 --><tr><td>小花</td><td>12</td><td>女</td></tr><!-- 第三行 --><tr><td>小淑</td><td>32</td><td>女</td></tr><!-- 第四行 --><tr><td>兰兰</td><td>20</td><td>男</td></tr><!-- 第五行 --><tr><td>倾听</td><td>23</td><td>男</td></tr></table><!-- //获取所有的行数 --><script>//得到所有的tr标签var arrays = ElementsByTagName("tr");for (var i = 0; i < arrays.length; i++) {//判断是否是偶数行if ((i + 1) % 2 == 0) {//是偶数行，则改变背景颜色arrays[i].style.backgroundColor = "red"}}</script></body>
</html> <style>div{background-color: gray;width: 280px;height: 60px;text-align: center;}</style></head><body><div>验证码： <input type="text" /><input type="button" value="确定" /></div>57、存入数组
var nums = [];
nums.push(letter);
var combined = nums.join('');
var letter = String.fromCharCode(num1);
60、table无样式标签
61、window.οnlοad=show() 启动时加载
62、js无equals 只有==
63、操作样式：节点对象.style.属性名=属性值
<button onclick="testFor()">我是button标签</button><input type="button" value="我是input标签下的button" />区别：
<button> 和 <input type="button"> 的主要区别在于 <button> 标签可以包含更多的HTML元素，并且通常用于更大的、可包含文本的按钮，而 <input type="button"> 则用于更小的按钮，并且通常只包含一个词或者短语。另外，<button> 标签在大多数浏览器中支持JavaScript事件处理程序，而 <input type="button"> 则不支持。
67、方法传参
function changeCitys(index){
68、字符串多维数组
var arrays = [["昌平区","海淀区","朝阳区"],["名媛区","酒吧区","小姐姐区"],["越秀区","白云区","天河区"]];
JSON格式的数组，该数组包含两个对象
[{"uid":14,"uname":"张三"},{"uid":15,"uname":"张三"}]
设置容器里面的标签的位置，先让他变成float的浮动布局
70、<input type="button" id="btn" />
btn.disabled = true; 设置未到时间前不能点击
<button onclick=&#ElementsByTagName('p')[0].lor='red'">
点击</button><input type="button" value="点击" onclick="showInfo()" /><script>function showInfo() {alert("热火2-1凯尔特人");}</script><input id="tv_btn" type="button" value="点击" /><script&ElementById("tv_btn").onclick = function() {alert("热火2-1凯尔特人")}</script>| addEventListener("事件的名称","执行函数","执行的规则(true 由内到外触发事件,false相反)") | 增加事件 |
| removeEventListener("事件的名称","执行函数","执行的规则(true 由内到外触发事件,false相反)") | 删除事件 |
A.事件没有on前缀
B.触发的函数 没有双引号 没有括号
C.addEventListener 可以给同一个标签增加相同的事件
D.addEventListener 可以给同一个标签增加多种不同的事件
E.addEventListener 可以给Windows窗口对象来增加事件
<script&ElementById("tv_but").addEventListener("click", showInfo, true);function showInfo() {alert("哈哈哈");}</script>72、设置里面的字体颜色的话需要 lor = "red"; 。不能只是color
元素的定位属性（如left、top、position等）需要结合起来使用才能实现定位效果。如果你只设置了left属性而没有设置position属性，那么浏览器将无法确定元素的定位参照点和定位方式，因此元素的位置不会发生变化
相对定位元素的left、top、right和bottom属性都应该是相对于其原始位置的偏移量，而不是相对于父元素或屏幕的偏移量。如果需要将元素相对于父元素或屏幕进行定位，需要使用其他定位方式（如绝对定位、固定定位等）
74、window.οnlοad=show01(); 一开始就生成想要的结果
HTML代码中出现了JavaScript的console.log。这个是在浏览器控制台中打印信息的方法，它并不是HTML的一部分，而是JavaScript的一部分。
如果你想在网页上看到"你好"这个信息，你需要将console.log("你好");这行代码放入一个<script>标签内
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {background-color: grey;width: 380px;text-align: center;}a:link {text-decoration: none;color: white;font-size: 10px;}a:visited {color: white;}span {color: red;}#yzm {color: white;margin-bottom: 300px;}#ndiv{margin-bottom: 0px;}#sjyzm{font-size: 20px;}</style></head><body><div><span id="sjyzm"></span><a href="#" onclick="show01()">看不清换一张</a><form action="#"><span id="yzm">验证码： </span><input type="text" id="admin"/><input type="button" value="确定" onclick="show02()"/></form></div><script&load=show01();var combined = " ";/*** 生成验证码*/function show01() {//随机生成1311avar i = 0;// var num = parseInt(Math.random() * 10 + 1);var nums = [];while (i < 6) {//生成字母if (i == 5) {var num1 = parseInt(Math.random() * 58 + 66);//截取需要的范围if ((num1 >= 65 && num1 <= 90) || (num1 >= 97 && num1 <= 122)) {//转化成字母var letter = String.fromCharCode(num1);nums.push(letter);break;}}else{//生成数字var num = parseInt(Math.random() * 10);nums.push(num);i++;}}//转为字符串combined = nums.join('');//输出到验证码位置去ElementById("sjyzm").innerText=combined;}/*** 验证输入的内容与验证码是否相同*/function show02(){// 得到输入框的内容//得到输入框的标签var admin = ElementById("admin");//得到标签的内容var content = admin.value;var combined01 = String(combined);//判断if(combined01 == content){alert("输入正确！")}else{alert("输入错误！")}}</script></body>
</html> 注意：使用String(combined)可以将combined转换为字符串类型，确保在比较时不会出现类型不匹配的问题。如果直接使用combined进行比较，可能会因为combined是数字类型而引发错误
最常见的块级元素有 <div>, <p>, <h1> 到-<h6>, <ol>, <ul>, <li>, <menu>, <form>, <section>, <article>, <header>, <footer>等
1、有默认的宽高，宽是父元素的100%，高度是内容所称起来的高度
2、宽高是可以设置的
3、独占一行
4、可以容纳其他的块状元素、行内元素、行内块元素
5、可以设置外边距、内边距、边框
注意:h标签、p标签尽量的不要去容纳块状元素
行内块元素不会开始新的一行，它和行内元素一样排成一行，但是它像块级元素一样有自己的宽度、高度、上下边距和左右边距（可以设置它的宽度、高度、上下内边距、上下边框）
常见的行内块级元素有 <img>, <input>, <textarea>, <button>, <select>, <datalist>
1、 有默认的宽高，就是自带的宽高
2、可以设置宽高
3、可以与相邻的行内元素和行内块元素在同一水平线下显示
4、外边距、内边距、边框都是可以设置的
（3）行内元素 行内元素不会开始新的一行，它会和其他元素排成一行。它只能包含文本或者其他行内元素
常见的行内元素包括<span>, <a>, <b>, <strong>, <em>, <i>, <sub>, <sup>
1）特点：
1、有默认宽高，都是内容所撑起来的
2、宽高设置无效
3、与相邻的行内元素或者行内块元素同一行上显示
4、可以去包含行内元素，但是不能包含块状元素及行内块元素
5、水平方向上的外边距和内边距是可以设置的，垂直方向无效，边框也是可以设置
注意：a标签可以去包含块状元素以及行内元素 ，链接里面不能再放链接
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
显示问题：
ElementById("menu-ul").style.display="block";这行代码找到的元素（上一步的结果）并将其display属性设置为"block"。在CSS中，display属性决定了元素如何显示。在这种情况下，"block"意味着元素将会块级显示，也就是说它会占据一整行空间，而不是与其他元素并排显示
load = show();function show() { *{/* 设置取消下划线 */text-decoration: none;/* 设置不要列表前面的. */list-style-type: none;/* 设置各自的边框为0 */margin: 0px;/* 设置所有的文字为黑色 */color: black;} ch.checked 是 JavaScript 中 checkbox 对象的一个属性，表示 checkbox 是否被选中。当 checkbox 被选中时，ch.checked的值为 true；当 checkbox 未被选中时，ch.checked 的值为 false。
本文发布于:2024-02-02 00:19:27，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170680997240141.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
