JS(决定了网页中标签的功能及动态效果)

1、JS （1）特点：（实现网页的交互）

1）基于对象：(区别于面向对象)，可以通过对象调用方法 obj.fn()

2）事件驱动：网页文档中的HTML标签事件触发JS代码执行

3）解释型：边解释边执行(不会先对网页进行编译生成中间文件)

4）脚本语言：JS不会独立运行，依赖于网页文件(HTML文件)

（2）作用：

1）动态改变网页中HTML标签的属性

2）动态改变网页中HTML标签的样式

3）对用户输入的数据进行合法性校验(格式检查)

4）动态操作网页中的HTML标签（增、删、改）

5）实现页面数据的异步通信(在不阻塞页面加载和用户交互的情况下，与服务器进行数据交换)

不能做什么：

1）虽然JS是在用户的浏览器中执行，但是JS不能访问用户的本地文件

2）JS不能操作来自不同服务的网页文档

（3）位置：

1）写在body中(常用)、body后、head中

2）在外写个js文件，在head里面调用

2、标签可以引用一个js标签，也可以自定义js代码实现

1）引用js文件的话必须是双标签

2）标签用来引用js文件之后，当前标签就不能再自定义js代码

3）如果引用js文件，还要进行自定义js代码实现，需要重新写一个标签

3、js需要通过事件触发才执行 6、变量用var，可以存任何类型 7、引用数据类型： {} 对象、 []数组 (1)对象可以随时添加

{}表示对象类型，js对象的属性名可以直接定义，并且对象的属性支持扩展

var stu = {:"1001",:"王二狗"};

stu. = "男";

(2)定义学生数组

数组 var arr1 = new Array();

var =[{"uid":14,"uname":"张三"},{"uid":15,"uname":"张三"}]

8、null用于清空一个变量的值 9、=== 表示绝对等于(值和类型都相同) 10、for循环、for(v in stu)循环

测试for循环测试forIn

11、throw创建自定义错误/错误信息

测试错误处理

12、js中如果是局部变量的话他会变量提升，将变量的声明提升至最前面 13、创建对象 （1）通过{}创建

通过{}创建js对象

(2)自定义JS构造函数

使用构造函数创建js对象

14、扩展属性

对象扩展属性：s1. = “男”，

构造器扩展属性：..="男"：//（ 需要另外输出

.log(s1.);因为没照顾到新的属性）

15、提供的构造器：

16、:

var str1 = "Hello,World";

var str2 = new ("你好");

("str")、split、、、、(起始，个数)、、、正则表达式

正则表达式：

                var str3 = "13030303300";var reg = "^1[3,5,7,9]\\d{9}$";var b = str3.match(reg);console.log(b);

注意：利用的match函数进行正则校验，b匹配的话返回本身，不匹配返回null

17、正则表达式：

1）test

        function testRegExp(){var str = "13030303300";var reg = new RegExp("^1[3,5,7,8]\\d{9}$");var b = reg.test(str);console.log(b);}

注意：test匹配返回true，不匹配返回false

/d匹配任意数字、/s 空白字符、/b单词边界、/u???? 匹配字符

a+至少一个a、a* 0-n个a、a？ 0-1个a、a{m}m个a、a{m,n} m-n个a

18、Math:

1）常量var e = Math.E、var p = Math.PI;

2）静态数学函数：Math.、Math.round(四舍五入)、Math.floor(只舍不入，获取比参数小的最大整数)、Math.ceil（只入不舍，获取大于等于参数的最小整数）、Math.abs获取绝对值、Math.sqrt获取平方根

19、Array：长度可变，可以存储多种数据类型

数组的定义：

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)

截取数组，起末，左闭右开

arr.()

反转数组

20、Date

var date = new Date();.log(date);

不好理解的时间

var year = date.();

距离1900年的时间

var year = date.()+1900;

正确的2023

var year1 = date.();

2023

var month = date.()+1;

月份

var d = date.();

20号

var hour = date.();

21点

var min = date.();

59分

var sec = date.();

2秒

var ms = date.();

获取毫秒

var day = date.();

获取星期几 星期五

date.(2029);

date.(11);

date.(28);

set设置时间:2029年12月28号

测试Date

21、：

全局对象（预定义的对象）,全局函数直接调用，也可以用调用

将字符串转整数

将字符串转为浮点数

对网址的参数部分进行编码（特殊符号和中文）

对编码后的网址进行解码

对字符串中的特殊符号和中文进行编码

对字符串中的特殊符号和中文进行解码

var = "{:'1001',:'张三'}";

eval("("++")");

将满足json格式的字符串转换成JS对象

对象：var s1 = {:'1001',:'张三'};

测试按钮

22、clog快速打出.log 23、BOM浏览器对象模型

24、BOM对象模型 （1）BOM对象属性：

.

看浏览器类型（、）

.

设备的屏幕

.

地址栏

.

历史记录

.

文档内容 JS代码

                //看浏览器类型（safari、chrome）var v = window.navigator;//设备的屏幕var s = window.screen;//地址栏var  l = window.location;//历史记录var h = window.history;//文档内容 JS代码var a = window.document;

25、BOM-对象 （1）属性： 1）浏览器窗口属性：

.name = "w1";

设置当前浏览器窗口的名字

.="";

设置当前浏览器窗口的状态栏

.

获取当前窗口是否关闭

var h = .;

var w = .;

获取浏览器的内部高/宽度

var oh = .;

var ow = .;

获取浏览器的外部高/宽度

                //设置/获取当前浏览器窗口的名字window.name = "w1";//设置/获取当前浏览器窗口的状态栏window.status="";//获取当前窗口是否关闭window.closed//获取浏览器的内部高/宽度var h = window.innerHeight;var w = window.innerWidth;//获取浏览器的外部高/宽度var oh = window.outerHeight;var ow = window.outerWidth;

2）窗口对象属性：

.self

指的是自己

.

父容器

祖先容器

26、弹窗函数

alert("请注意，倒车！");

弹窗，无返回值

("确定删除吗？");

有返回值，点击确定才返回true，其他false

("请输入生日：");

var s =.("请输入生日：","2023");

有返回值，点击确定返回内容,否则返回null，2023这个是设置默认值

                //无返回值window.alert("请注意，倒车！");//有返回值，点击确定才返回true，其他falsevar s = window.confirm("确定删除吗？");//有返回值，点击确定返回内容,否则返回null// var s =window.prompt("请输入生日：");//2023这个是设置默认值var s =window.prompt("请输入生日：","2023");console.log(s);

27、窗口函数 2）关闭打开窗口函数：

var w = .open(URL,"度",,true);

参数1：新打开的窗口显示的网址

参数2：新打开的窗口的名字

参数3：新打开的窗口的属性

参数4：是否替换当前窗口 Tru为替换

返回值：打开的窗口对象

	var URL = "https://www.baidu.com";//参数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);

3）窗口操作函数：

var w = window.open("https://www.baidu.com","百度官网","width=300,height=300",true);

w.(800,600);

把宽高修改为800，600

w.(800,600);

把宽高额外增加800，600

w.(200,100);

将窗口移动到指定位置 距左200 距上100

w.(200,100);

将窗口在原基础上再移动 左200 上100

.(200,300);

滚动滚动条(针对当前窗口的滚动条操作)

.(-100,-200);

滚动滚动条在原基础上再移动 右100 下300

var w = window.open("https://www.baidu.com","百度官网","width=300,height=300",true);//把宽高修改为800，600w.resizeTo(800,600);// 把宽高增加800，600w.resizeBy(800,600);// 将窗口移动到指定位置 距左200 距上100w.moveTo(200,100);// 将窗口在原基础上再移动 左200 上100w.moveBy(200,100);//滚动滚动条(针对当前窗口的滚动条操作)window.scrollTo(200,300);// 滚动滚动条在原基础上再移动 右100 下300window.scrollBy(-100,-200);

28、延时函数：（重）

var task1 = (, 3000);

设置延迟3秒显示

(task1);

关闭未执行的延时任务

29、循环任务：

var task2 = (, 3000);

设置每3秒显示一次

(task2);

关闭循环任务

注意：可删 直接： task2 = ("()", 3000);

（1）两种表示：

        var task = setInterval("show()", 1000);var task = setInterval(show, 1000);

30、 BOM-：只读对象

.;.width;

获取屏幕宽度和高度（分辨率）

.;.

获取屏幕宽度和高度（除掉状态栏）

.;.

获取屏幕硬件一英寸的物理像素点

                //获取屏幕宽度和高度（分辨率）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);

31、BOM-对象：只读对象

.;

返回浏览器的名称

.;

返回浏览器的代码名

.;

返回浏览器的平台及版本信息

.;

返回浏览器的语言环境（看浏览器支持）

.;

检查当前浏览器是否启用（重）

                //返回浏览器的名称var name = navigator.appName;// 返回浏览器的代码名var code = navigator.appCodeName;// 返回浏览器的平台及版本信息var version = navigator.appVersion;// 返回浏览器的语言环境（看浏览器支持）var lang = navigator.browserLanguage;// 检查当前浏览器是否启用Cookie（重）var b = navigator.cookieEnabled;console.log(b);

32、BOM-对象（多）

.href;

获取地址栏完整的网址:8848/demo3/-BOM-.html

.href = "";

修改地址栏完整的网址（可以实现页面跳转）（多）

.;

获取地址栏网址的协议 http

.port;

获取地址栏网址的端口 8848

.host;

获取主机和端口号：127.0.0.1:8848

.;

/获取主机号：127.0.0.1

.;

获取路径参数demo3/-BOM-.html

.();

重新载入当前网页（刷新网页）

.("http:");

使用网址替换当前地址栏的网址（实现页面跳转）

            //获取地址栏完整的网址  http://addr:port/aa?key=nalue// 					协议		主机	  端口	  端口// http://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 = "http://www.baidu.com";// location函数// 重新载入当前网页（刷新网页）location.reload();//使用网址替换当前地址栏的网址（实现页面跳转）location.replace("http:www.baidu.com");console.log(s6);

33、BOM-对象：（多）

.back();

返回上一个页面

.();

切换到下一个页面

.go(num);

正前进负后退

var len = .;

获取历史记录中网址的个数

注意：go数字代表跳几个页面，前提是有过历史记录

34、DOM对象模型：

35、概念 （1）元素：标签以及标签所包含的内容元素的属性：标签的属性 （2）节点：元素，属性，文本都叫做节点

（元素——标签节点，属性——属性节点，文本——文本节点）

（3）节点名称：标签节点的节点名就是标签名，属性节点的节点名就是属性名，文本节点的节点名是test 36、DOM 对象：

指代的就是一个网页文档，他提供的属性、函数大多是为了获取网页文档中的元素

（1）集合属性：

.all;

获取当前文档所有元素

.;

获取当前网页文档中所有图片

.forms;

获取当前网页文档中的form元素

var arr4 = .links;

获取当前网页文档中所有的链接（a,area）

1）其他属性：

.body;

获取当前网页文档中的body元素

.title;

.title = "千锋Java";

获取当前网页文档中的标题内容

设置当前文档的标题

.URL;

获取当前网页文档的URL

. = "key=value";

. = "key2=";

向中添加新的数据（累加）

.;

获取中缓存的内容

37、获取节点对象：.

("img2");

根据标签的id属性获取一个标签

("m1");

根据标签的name属性获取多个标签（数组）

me("cc");

根据标签的class属性获取一组标签（数组）

("p");

根据标签名获取一组标签（数组）

        


p1
p3
p3

38、改变HTML

.write("从前有座山

");

.write("山里有座庙");

.("山里有座庙");

如果执行多次write函数用的是同一个流，则输出的数据会追加

如果执行多次write函数用的是不同的流，后面write的内容会覆盖之前的内容

换行输出（依靠浏览器支持）

.open();

打开并使用一个新的流

.close();

关闭当前网页的输出流，关闭之后如果执行write，则会打开新的流

.().

获取与设置标签中间的内容(可以识别标签)

.().

获取与设置标签中间的内容(不可以识别标签)

.().value

获取与设置input标签输入框中值

38、获取节点对象：. 39、对HTML标签的操作 （1）操作标签属性

            // 操作标签属性// 获取属性值var s = img.src;// 设置属性值img.src = "imgs/img3.jpg";

（2）操作标签样式

            // 操作标签样式// 设置标签的样式属性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);

（3）操作标签对象的class属性

        var img3 = document.getElementById("img3");// 标签对象的class属性 	使用className进行操作img3.className = "imgStyle";console.log(img3.class);

 
 
 
操作标签属性操作标签样式操作标签class属性

40、表单校验

.js

function doValidate() {console.log("------doValidate");var userName = document.getElementById("userNameInput").value;var label1 = document.getElementById("userNameTipsLabel");//校验用户名if (userName == null || userName == "") {//进行提示label1.innerHTML = "请输入用户名！";label1.style.color = "red";return false;} else if (userName.length < 8 || userName.length > 20) {label1.innerHTML = "用户名长度必须为8-20个字符！"label1.style.color = "red";return false;} else if (!new RegExp("^[0-9a-zA-Z]*$").test(userName)) {label1.innerHTML = "用户名只允许包含数字和字母";label1.style.color = "red";return false;} else {label1.innerHTML = "用户名输入正确！";label1.style.color = "green";}// 校验密码var userPwd = document.getElementById("userPwdInput").value;var label2 = document.getElementById("userPwdTipsLabel");if (userPwd == null || userPwd == "") {//进行提示label2.innerHTML = "请输入密码！";label2.style.color = "red";return false;} else if (userPwd.length < 8 || userPwd.length > 16) {label2.innerHTML = "密码长度必须为8-16个字符！"label2.style.color = "red";return false;}else {label2.innerHTML = "密码输入正确！";label2.style.color = "green";}//校验重复输入密码var rePwd = document.getElementById("rePwdInput").value;var label3 = document.getElementById("rePwdTipsLabel");if (rePwd == null || rePwd == "") {//进行提示label3.innerHTML = "密码不能为空！";label3.style.color = "red";return false;} else if (userPwd != rePwd) {label3.innerHTML = "两次密码输入不一致！"label3.style.color = "red";return false;}else {label3.innerHTML = "重复密码输入正确！";label3.style.color = "green";}//校验手机号var userPhone = document.getElementById("userPhoneInput").value;var label4 = document.getElementById("userPhoneTipsLabel");if(userPhone == null || userPhone == "") {//进行提示label4.innerHTML = "手机号不能为空！";label4.style.color = "red";return false;}else if(!new RegExp("1[3579]\\d{9}").test(userPhone)){label4.innerHTML = "手机号只允许1开头，且中间为3579的11位数！";label4.style.color = "red";return false;}else {label4.innerHTML = "手机号输入正确！";label4.style.color = "green";}//校验邮箱var userEmail = document.getElementById("userEmailInput").value;var label5 = document.getElementById("userEmailTipsLabel");if(userEmail == null || userEmail == "") {//进行提示label5.innerHTML = "邮箱不能为空！";label5.style.color = "red";return false;}else if(!new RegExp("^[0-9a-zA-Z]{10}@qq\.com$").test(userEmail)){label5.innerHTML = "邮箱只允许10位数字或字母，且以@qq.com结尾的格式！";label5.style.color = "red";return false;}else {label5.innerHTML = "邮箱输入正确！";label5.style.color = "green";}console.log(userName);return false;
}

用户注册-数据校验
账号：
密码：
确认密码： 
手机号： 
邮箱： 

41、节点操作 （1）说明

节点：元素，属性，文本都叫做节点

节点操作：使用js完成节点的增加、插入、替换、删除

1）节点属性：

节点类型

标签节点

标签名

null

属性节点

属性名

属性值

文本节点

#text

文本内容

2）方法

body.;

获取当前标签的属性列表

div.;

获取当前标签的子节点（包括标签节点，文本节点）

hello
枫桥夜泊
月落乌啼霜满天，
江枫渔火对愁眠。
姑苏城外寒山寺，
夜半钟声到客船。

(2)常用方法

.("img");

创建标签节点（元素）

.("name");

创建属性节点

.("hello world!");

创建文本节点

.();

将属性节点添加到标签节点中

.("src","imgs/img2.jpg");

给标签节点添加/修改属性

.("alt");

从标签节点上移除一个属性

.()

建立上下级关系

.（）

插入子节点

.

替换子节点

.()

删除子节点

(2)创建节点: .

（3）节点的属性操作

            // 创建标签节点var imgTag = document.createElement("img");// -----------------begin// 1、// 创建属性节点var srcAttr = document.createAttribute("src");srcAttr.nodeValue="imgs/img1.jpg";// 将属性节点添加到标签节点中imgTag.setAttributeNode(srcAttr);// -----------------end// 2、给标签节点添加/修改属性imgTag.setAttribute("src","imgs/img2.jpg");imgTag.setAttribute("width","200");imgTag.alt = "图片无法显示";// 从标签节点上移除一个属性imgTag.removeAttribute("alt");

2）建立上下级关系()

//  拼接子节点  将标签节点拼接到body标签里面（最后面） var body = document.body;body.appendChild(imgTag);

3）插入子节点（）

        //插入子节点，将imgTag插入到body里面btnTag之前var btnTag =  document.getElementById("btn_test");body.insertBefore(imgTag,btnTag);

（3）替换子节点

hello
我是一个图片
world

（4）删除子节点()

hello
我是一个图片
world

42、事件绑定 （1）内联绑定：

在HTML标签上添加事件属性，绑定对应的js函数

        测试按钮1

（2）脚本外联绑定(推荐):

不再HTML标签上写事件属性，通过JS获取HTML元素，调用事件属性绑定JS函数

		测试按钮2

43、HTML常用事件

鼠标事件、键盘事件（表单标签）、事件、监听事件

44、鼠标事件：

用户的鼠标在HTML标签上产生点击、双击、移动、放上、离开等动作

单击

双击

鼠标移动到HTML标签上

鼠标从HTML标签上移走

鼠标在HTML标签上移动

鼠标在HTML标签上左键按下

鼠标在HTML标签上左键松开

表单提交事件

表单提交：注意 false不提交 那里直接()的话都会false也会提交

function show07() {return true;}

45、键盘事件（表单标签）：

主要是针对于表单中的输入标签

键盘按下（未松开就一直加）

键盘抬起

键盘按下（未松开也就一次）

46、事件

. = ()

当网页中body标签内容加载完毕触发

. = ()

当前网页关闭或刷新时执行 用于回收资源

. = ()

当网页发生滚动时触发执行

.ο= ()

窗口的尺寸发生变化时触发

例如：（如果在HTML的head标签中通过js绑定事件，必须写在. = ()中，因为不然的话找不到id=btn的标签）

测试按钮

47、监听事件:

键盘事件通常绑定在表单输入标签，但是表单输入标签支持的事件不止键盘事件

当表单标签获得焦点时触发

当表单标签失去焦点时触发

当表单标签中的值发生变化触发（输入框输入完成失去焦点后判断）

.("num"). = ()

当输入框中输入的内容被选中时触发

标签也支持事件

绑定在form元素上，当此表单被提交时触发

绑定在form元素上，当此表单被重置时触发

全选

123

44、Event事件对象：

js将标签发生的动作抽象为事件对象、

Event对象用来描述HTML标签与发生的动作的组合

(1)获取Event对象： 1)内联获取：使用对象调用event属性获取触发当前JS函数的event对象

按钮

2）js脚本获取：如果使用JS脚本绑定函数，也可以使用函数的参数直接获取

（2）event对象属性：

var tag = event.;

event对象调用，获得触发此事件的标签（按钮）

var type = event.type;

event对象调用type属性，获取事件的类型（click）

45、事件冒泡：子标签发生的事件触发了当前标签上层父标签绑定的函数

阻止：

event. = true;

阻止事件冒泡

event.();

阻止事件冒泡

测试按钮

46、JSP的内置对象：

对象、对象、out对象、对象、对象、对象、对象、Page对象、对象。

47、NaN+ 任何 =NaN 无重载

48、()==>用于获取变量数据类型

49、增强for里面的每个值是索引

50、ο=" ()" 函数里面默认true

51、css写 style js写

52、两种按钮

（1） 验证

（2） 必须form里面

53、me("max")语法

.me("max").value 这个语句是错误的，因为 me() 方法返回的是一个数组，而 value 属性是只读的，所以不能直接访问。可以通过 [0].value 来访问第一个元素的 value 属性。

54、样式、属性写法

（1）样式写法：（head里面）

（2）属性写法

55、table标签举例

姓名
年龄
性别
小花
12
女
小淑
32
女
兰兰
20
男
倾听
23
男

        
验证码： 

我是button标签

点击