JavaScript
JavaScrip
JS介绍
JS和html代码的第一种结合方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javaScript和html的第一种结合方式</title>
<script type="text/javascript">
// alert是javaScript提供的警告框函数
//他可以接收任意的数据类型的参数，这个参数就是警告框的提示信息
alert("hello JavaScript")
</script>
</head>
<body>
</body>
</html>
JS的第二种使用方式
和前面的一样这样的方式可以提高代码的复用性
-
JS文件
-
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的第二种使用方式</title>
<!-- script代码可以用来引入js文件，也可以用来定义JS代码
此时用来引入JS文件，但是一个script标签中也2种功能只能使用一种
src用来指定JS文件所在的路径（相对路径和绝对路径都可以）
-->
<script type="text/javascript" src="1.js">
alert("hello")//此时定义的JS代码将无效
</script>
</head>
<body>
</body>
</html>
JS的变量和数据类型介绍
没有赋初始值的变量值都是undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的变量和数据类型介绍</title>
<script type="text/javascript">
var i;
// alert(i)//undefined（此时还没赋值，值为未定义）
i=10;//给她赋值
// alert(i)
//typeof()是javaScrip语言提供的一个函数，可以返回该数据的数据类型
// alert(typeof(i))
// i="abc";//类型可变
//alert(i)//abc
var b=12;
var c ="ccc";
var d = b*c;
alert(d)//NAN此时的结果，非数字，非数值
</script>
</head>
<body>
</body>
</html>
JS的关系运算
- 和java的关系运算基本相同，下面的是和java中不同的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的关系运算符（和java不同的部分）</title>
<script type="text/javascript">
var a =10;
var b="10";
alert(a==b);//true
alert(a===b);//false(除了比较数值，还有比较类型)
</script>
</head>
<body>
</body>
</html>
JS的逻辑运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑运算</title>
<script type="text/javascript">
/*
在javascript中,所有的变量，都可以作为一个boolean类型的变量区使用
0,null,undefined,""(空串)都认为是false
*/
/*var a=0;//output:0为真
if(a){
alert("0为假");
}else {
alert("0为真")
}*/
/* var b = null;ouptput:null为假
if(b){
alert("null为真");
}else{
alert("null为假");
}*/
/* var c = undefined;ouptput:undefined为假
if(c){
alert("undefined为真");
}else {
alert("undefined为假");
}*/
/* var d = "";
if(d){
alert("空串为真");
}else{
alert("空串为假");
}*/
</script>
</head>
<body>
</body>
</html>
- 和java相比的特殊情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑运算</title>
<script type="text/javascript">
/*
&&运算
2种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值
第二种：当表达式中，有一个为假的时候，返回第一个为假表达式的值
*/
var a ="abc";
var b =true;
var d =false;
var c =null;
//alert(b&&a);//abc
//alert(a&&b); //true
//alert(a&&d);//false
//alert(a&&c);//null
//alert(a&&d&&c);//false
/*
||运算
第一种情况：当表达式都为假时，返回最后一个表达式的值
第二种情况：当表达式有一个为真时，返回第一个为真的表达式的值
*/
//alert(d||c);//null
//alert(c||d);//false
alert(a||b);//abc
alert(a||c);//abc
</script>
</head>
<body>
</body>
</html>
JS的数组（重点）
- 和java中数组使用上的区别
- 1.JS中的数组可以放不同类型的数据
- 2.JS中的数组可以进行自动扩容，定义长度为0的数组，a[0],a[2]等等都可以使用
- 3.javascript语言的数组中，只要我们通过数组下标赋值，那么最大的下标值，就会自动给数组做扩容操作
当我们的代码出现问题，运算不了的时候，可以在浏览器中按F12+(Fn)来看到底出现了什么问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
<script type="text/javascript">
var arr=[];//定义一个空数组
//alert(arr.length)//0
// alert(arr[0]);
arr[0]=12;//数组将自动扩容为1
// alert(arr.length);//1
arr[2]="hello";
alert(arr.length);//3
//遍历数组
for(int i=0;i<arr.length;i++){
alert(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
JS函数的第一种定义方式（重点）
- 在java中函数的参数是确定的类型，所有需要写上数据类型用于限定所传入的参数。而js中不需要限定数据类型，所有不需要在定义函数时写类型（var也不用）也变量即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的第一种定义方式</title>
<script type="text/javascript">
//1.定义一个无参函数
function fun(){
alert("无参函数fun被调用了");
}
fun();//函数需要调用才会被执行
//2.定义一个有参函数
function fun2(a,b) {
alert("有参函数fun2被调用了a->"+a+"b->"+b);
}
fun2(12,"abc");
//3.定义带有返回值的函数
function fun3(){
return 1+2;
}
alert(fun3())//3
</script>
</head>
<body>
</body>
</html>
函数的第二种定义方式
- 感觉和前面的方式差别不大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的第二种定义方式</title>
</head>
<body>
<script type="text/javascript">
//1.无参函数
var fun = function (){
alert("无参函数被调用了");
}
//2.有参函数
var fun1 = funtion(a,b){
alert("有参函数被调用了a->"+a+"b->"+b);
}
//3.有返回值的函数
var fun2 = function () {
return 1+2;;
}
</script>
</body>
</html>
JS中的函数不允许重载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS不允许函数重载</title>
<script type="text/javascript">
function fun(){
alert("无参函数fun()")
}
function fun(a,b){
alert("有参函数fun(a,b)"+a+b);
}
//上面的2个 fun函数进行了重载
fun();//有参函数fun(a,b)
// fun(2,"hello");//有参函数fun(a,b)
</script>
</head>
<body>
</body>
</html>
我们从运算的结果可以发现：fun()和fun(2,"hello")都是执行的第二个函数。即第一个函数被第二个函数覆盖掉了。fun()没有传递参数，a,b的值用undefined替代了
隐形参数arguments
arguments相当于java中的变长参数（本质上也是数组），但是他是隐藏在JS函数中的参数列表中的。参数名即为数组名，可以直接当成数组用
- 1.隐形参数接收参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐形参数</title>
<script type="text/javascript">
function fun(){//存在隐形参数arguments
alert(arguments.length)//查看数组长度
//遍历数组
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
}
}
fun(2,"hello","world");
</script>
</head>
<body>
</body>
</html>
- 发现问题：
经过验证：JS的可变参数和java中类似，当也出现普通参数时，将对应的参数传递给普通参数（相同），只是会将所有的参数都传递给隐形可变参数
在JS中数值和字符串相加也是做字符串拼接
- 应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐形参数</title>
<script type="text/javascript">
//需求：编写一个函数。用于计算所有参数相加并返回
function sum(){
var result = 0;
for (var i = 0; i < arguments.length ; i++) {
if(typeof (arguments[i])=="number"){//过滤字符串类型
result += arguments[i];
}
}
return result;
}
alert( sum(1,"hello",3,4,5,6,7,8,9,10));//字符串和数值相加直接拼接
</script>
</head>
<body>
</body>
</html>
object形式的自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>object形式的自定义对象</title>
<script>
var obj = new Object();//创建一个实例对象
//定义属性
obj.name = "周润发";
obj.age = 18;
//定义函数
obj.fun= new function () {
alert("姓名："+this.name+"年龄"+this.age);
}
//对象访问
alert(obj.name);
</script>
</head>
<body>
</body>
</html>
注意：对object对象的运算还不是很理解与熟悉
花括号形式的自定义对象
- 定义空对象
- 属性的定义以及访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>花括号形式定义对象</title>
<script type="text/javascript">
var obj = {
name:"张三",
age:18,
fun:function (){
alert("姓名："+this.name+"年龄"+this.age);
}
}
//对象的访问
alert(obj.fun());
</script>
</head>
<body>
</body>
</html>
感觉这一种对象的对象和java中对象的定义更像，更能通俗易懂
事件的介绍
2种事件注册（绑定）的介绍
onload事件
** onload事件当浏览器解析完页面之后自动触发**
- 静态注册
但是如果我们将需要执行的js代码都写在标签里面，这样代码的可读性将会很差
- 解决方法--将需要执行的所有代码写成一个方法，然后在标签中只写一个方法即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload事件</title>
<!--
onload事件:当页面加载完成之后，常用于做页面js代码初始化操作
onload事件当浏览器解析完页面之后自动触发
-->
<script type="text/javascript">
//onoload事件的方法
function onLoadFun(){
alert("静态注册onload事件1");
alert("静态注册onload事件2");
alert("静态注册onload事件3");
}
</script>
</head>
<!-- 静态注册onload事件-->
<body onload="onLoadFun()"><!--此时这里的事件里面就只用写一个函数就可以了-->
</body>
</html>
- 动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload事件</title>
<!--
onload事件:当页面加载完成之后，常用于做页面js代码初始化操作
onload事件当浏览器解析完页面之后自动触发
-->
<script type="text/javascript">
window.onload=function () {
alert("页面加载完成1");
alert("页面加载完成2");
alert("页面加载完成3");
}
</script>
</head>
<body >
</body>
</html>
和静态加载相比，动态加载不用依赖标签，写法也更加简单
onclick事件（单击事件）
-
onclick一般和按钮一起用的比较多，故用button进行演示
-
静态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击事件onclick</title>
<!--onclick常用于按钮点击后的响应操作-->
<script type="text/javascript">
function onclickFun(){
alert("你是谁啊");
}
</script>
</head>
<body>
<!--静态注册-->
<button onclick="onclickFun()">按钮一</button>
<button>按钮二</button>
</body>
</html>
- 动态注册
onclick的动态注册和onload的动态注册有点不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击事件onclick</title>
<!--onclick常用于按钮点击后的响应操作-->
<script type="text/javascript">
window.onload=function(){
//onclick事件动态注册
//1.获取标签对象
/*
document是JS提供的一个对象，表示当前这个页面（html文件）的对象
getElementById()方法通过标签的id来返回该标签的对象（element元素：表示的就是标签）
*/
var buobj = document.getElementById("bu001");
//2.通过标签对象.时间名=function(){}
buobj.onclick = function () {
alert("按钮被点击了");
}
}
</script>
</head>
<body>
<!--onclick的动态注册-->
<button id="bu001">按钮二</button>
</body>
</html>
onblur事件（失去焦点事件）
- onblur事件常用于表单的输入框中
- 对于焦点和失去焦点的理解
- 静态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
常用于输入框失去焦点后，验证其输入的内容是否合法
-->
<title>onblur事件</title>
<script type="text/javascript">
//失去焦点事件的静态注册
//console是由javaScript提供的一个对象，专门用来向浏览器的控制台打印输入，用于测试使用
//log()是打印的方法(相当于sout)
function onblurFun(){
alert("密码错误");
console.log("动态注册失去焦点事件");
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun()" ><br>
密码：<input type="password" ><br>
</body>
</html>
- 动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
常用于输入框失去焦点后，验证其输入的内容是否合法
-->
<title>onblur事件</title>
<script type="text/javascript">
//失去焦点动态注册
window.onload=function (){
//1.获取标签对象
var buobj = document.getElementById("in001");
//2.通过标签对象.时间名=function(){}
buobj.onblur = function (){
alert("密码错误")
}
}
</script>
</head>
<body>
用户名：<input type="text" id="in001" ><br>
密码：<input type="password" ><br>
</body>
</html>
- 运行结果和前面一样
onchange事件（内容发生改变）
- 常用于下拉列表和输入框内容发生改变后操作
- 静态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange事件</title>
<!--onchange事件常用于下拉列表-->
<script type="text/javascript">
//静态注册
function onchangeFun(){
alert("女神已经改变了")
}
</script>
</head>
<body>
请选择你心中的女神：
<select onchange="onchangeFun()" >
<option>--女神--</option>
<option>--芳芳--</option>
<option>--佳佳--</option>
<option>--甜甜--</option>
</select>
</body>
</html>
- 动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange事件</title>
<!--onchange事件常用于下拉列表-->
<script type="text/javascript">
//动态注册
window.onload = function(){
//1.获取标签对象
var buobj = document.getElementById("se001");
//2.通过标签对象.事件=function(){}
buobj.onchange = function (){
alert("女神发生改变了");
}
}
</script>
</head>
<body>
请选择你心中的女神：
<select id ="se001" >
<option>--女神--</option>
<option>--芳芳--</option>
<option>--佳佳--</option>
<option>--甜甜--</option>
</select>
</body>
</html>
- 运算结果和前面的一样
onsubmit事件（表单提交事件）
- 常用于表单提交之前，验证所有表单项是否合法
- 错误演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit事件</title>
<script type="text/javascript">
//静态注册
function onsubmitFun(){
alert("静态注册表单提交事件");
}
</script>
</head>
<body>
<!--这个事件一般用于表单，所有用表单来演示-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="静态注册" />
</form>
</body>
</html>
从运行结果可以看到，当我们点击提交后，即使表单项不合法，也进行了表单项的提交。即并没有阻止表单的提交
从上面的尝试中我们可以知道,当我们的函数返回false，将会阻止我们的表单的提交
- 静态注册的return 不能省略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit事件</title>
<script type="text/javascript">
//静态注册
function onsubmitFun(){
alert("静态注册表单提交事件---发现不合法");
return false;
}
</script>
</head>
<body>
<!--这个事件一般用于表单，所有用表单来演示-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="静态注册" />
</form>
</body>
</html>
此时当我们的数据出现不合法时，将不会进行提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit事件</title>
<script type="text/javascript">
//动态注册
window.onload=function (){
//1.获取标签的对象
var buobj=document.getElementById("in001");
//2.通过标签对象.事件=function(){}
buobj.onsubmit=function (){
alert("动态注册表单提交事件---发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--这个事件一般用于表单，所有用表单来演示-->
<form action="http://localhost:8080" method="get" id="in001">
<input type="submit" value="静态注册" />
</form>
</body>
</html>
- 结果和前面的一样
- 感悟：要想提交不成功，不管是动态还是静态函数都要返回false
doucument对象概念介绍
-
对于document对象的理解
-
什么是标签对象化
标签对象化即将一个标签看成是一个对象，标签的属性内容等内容看成是这个标签的属性
验证用户名是否有效
分析：验证输入框的内容是否合法
- 1.需要获取输入框的内容
- 1.1.通过DOM获取对应标签的对象
- 1.2.通过标签对象获取其值（即输入框的内容）
**并且当我们输入框的值进行了填写了，相当于改变了value属性的值，其获取的值也会相应的发送改变（变成修改后的值） - 2.验证内容是否合法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementById（验证用户名是否有效）</title>
<script type="text/javascript">
/*
需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
*/
//因为是点击按钮后才进行操作的，所有需要绑定点击事件
function onclickFun(){
//1.当我们需要操作一个标签的时候，一定要线获取这个标签的对象
var obj = document.getElementById("username");
//2.通过标签对象获取获取输入框的值
var usernametext =obj.value;
//3.验证字符串，符合某个规则，需要使用正则表达式技术
var patt = /^[\w_]{5,12}$/;
/*
test()方法用户测试某个字符串，是不是匹配我的规则
匹配返回true，不匹配返回false
*/
if(patt.test(usernametext)){
alert("用户名合法");
}else{
alert("用户名不合法");
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="www" \>
<button onclick="onclickFun()">校验</button>
</body>
</html>
正则表达式对象
关于正则表达式，和java中的很像，用的时候查一下啊即可
2种常见的验证提示效果
- 在前面的代码中，我们所有的功能都实现了，但是我们的校验提示太垃圾了
第一种提示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementById（验证用户名是否有效）</title>
<script type="text/javascript">
/*
需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
*/
//因为是点击按钮后才进行操作的，所有需要绑定点击事件
function onclickFun(){
//1.当我们需要操作一个标签的时候，一定要线获取这个标签的对象
var obj = document.getElementById("username");
var usernameSpanObj = document.getElementById("usernameSpan");//获取span标签的对象
//2.通过标签对象获取获取输入框的值
var usernametext =obj.value;
//3.验证字符串，符合某个规则，需要使用正则表达式技术
var patt = /^[\w_]{5,12}$/;
/*
test()方法用户测试某个字符串，是不是匹配我的规则
匹配返回true，不匹配返回false
*/
if(patt.test(usernametext)){
//innnerHTML是标签的一个属性，表示起始标签到结束标签中间的内容
usernameSpanObj.innerHTML = "用户名合法";
}else{
usernameSpanObj.innerHTML = "用户名不合法";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="www" \>
<span id="usernameSpan" style="color:red">1234</span>
<button onclick="onclickFun()">校验</button>
</body>
</html>
- 这样的提示效果更好
第二种提示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementById（验证用户名是否有效）</title>
<script type="text/javascript">
/*
需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
*/
//因为是点击按钮后才进行操作的，所有需要绑定点击事件
function onclickFun(){
//1.当我们需要操作一个标签的时候，一定要线获取这个标签的对象
var obj = document.getElementById("username");
var usernameSpanObj = document.getElementById("usernameSpan");//获取span标签的对象
//2.通过标签对象获取获取输入框的值
var usernametext =obj.value;
//3.验证字符串，符合某个规则，需要使用正则表达式技术
var patt = /^[\w_]{5,12}$/;
/*
test()方法用户测试某个字符串，是不是匹配我的规则
匹配返回true，不匹配返回false
*/
if(patt.test(usernametext)){
//innnerHTML是标签的一个属性，表示起始标签到结束标签中间的内容
//用户名合法
//在src地址里面需要用到JS里面的转义字符
usernameSpanObj.innerHTML = "<img src=\"对勾.jpg\" width=\"18\" height=\"18\">";
}else{
//用户名不合法
usernameSpanObj.innerHTML = "<img src=\"差.jpg\" width=\"18\" height=\"18\">"
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="www" \>
<span id="usernameSpan" style="color:red">
<img src="对勾.jpg" width="18" height="18">
</span>
<button onclick="onclickFun()">校验</button>
</body>
</html>
- 第二种提示就是将第一种的字变成了图片了，这样更生动明了
getElementsByName方法
需求：当我们点击下面的按钮时，通过事件的绑定，可以实现上面多选对应的操作
- 思路分析：
，通过点击按钮后依次操作，我们需要同时对多个多选框进行操作，即我们需要通过获取多个标签的对象，即通过getElementByName方法获得对象数组（即获取多个标签的对象）。
然后通过标签的选中属性，依次对多个标签进行操作 - 通过getElementByName获取的对象数组，数组里面对象的顺序就和标签的排列顺序一样（从前往后）
- checked这个属性表示选中框的选中状态，true表示选中，false表示不选中，这个属性可读可写(可以在输入时改变)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByName方法</title>
<script type="text/javascript">
//全选方法(让所有的复选框都选中)
function clickAll(){
//1.操作标签需要获取标签的对象
//hobby的操作就和数组一样
var hobby = document.getElementsByName("hobby");//获取所有input标签的对象数组
//2.遍历对象集合将所有input对象的checked属性的值都改成true
for(var i=0;i<hobby.length;i++){
hobby[i].checked = true;
}
}
//全都不选方法
function clickNo(){
//1.获取标签的对象数组
var hobby = document.getElementsByName("hobby");
//2.遍历数组将标签的checked属性赋值为false
for(var i=0;i<hobby.length;i++){
hobby[i].checked = false;
}
}
//反选方法
function clickReverse(){
//1.获取标签的对象数组
var hobby = document.getElementsByName("hobby");
//2.遍历数组将checked为false的标签的checked属性赋值为true
//将为false的赋值为true
for(var i=0;i<hobby.length;i++){
hobby[i].checked = !hobby[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp" > c++
<input type="checkbox" name="hobby" value="java" >java
<input type="checkbox" name="hobby" value="python">python
<br>
<button onclick="clickAll()">全选</button>
<button onclick="clickNo()">全不选</button>
<button onclick="clickReverse()">反选</button>
</body>
</html>
运行结果不好演示，自己演示
getElementsByTagName方法
- TagName标签名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByName方法</title>
<script type="text/javascript">
//全选方法(让所有的复选框都选中)
function clickAll(){
//1.操作标签需要获取标签的对象
//hobby的操作就和数组一样
//此时我们没有name这个属性，我们可以按照标签名来创建标签的对象数组
let hobby = document.getElementsByTagName("input");
//2.遍历对象集合将所有input对象的checked属性的值都改成true
for(var i=0;i<hobby.length;i++){
hobby[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp" > c++
<input type="checkbox" value="java" >java
<input type="checkbox" value="python">python
<br>
<button onclick="clickAll()">全选</button>
</body>
</html>
获取的对象数组的使用和对象数组的顺序和之前的一样
document对象的三个查询方法的使用注意事项
浏览器执行html页面的代码，是从上往下执行的
因为代码是从上到下执行的，当执行到alert(document.getElementById(“id001”))时，还没有执行到button标签，所有执行结果为null
- 注意事项
dom对象查询练习(JS综合练习)
- 就是咋演示一个标签对象，他有哪些方法可以使用
- 需求概述
-
- 需要理解文档对象模型，即一个文档在解析的时候要知道将会被解析成几个对象，哪些是对象，有几个对象（参考前面的文档解析树）
- 2.innerText和innnerHTML有什么区别：innerText仅仅会取文本，而innnerHTML还会取到标签
需求分析
1.我们需要先根据效果图，根据html和css样式来达到效果图，然后JS代码来实现具体的事件响应功能
：内容划分元素:div是一个内容划分标签，将网页中不同部分的内容进行分组划分，如果不添加css，对内容和布局没有任何影响
1.通过html和css完成效果图
- 注意：最后一个不是一个下拉框，而是一个普通的文本输入框
- 感觉分析的不好
- html代码（构建出网页的内容和结构）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom练习</title>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul>
<li>北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<p>
你喜欢哪款单机游戏?
</p>
<ul>
<li>红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<p>
你手机的操作系统是?
</p>
<ul>
<li>IOS</li>
<li>Android</li>
<li>Windows Phone</li>
</ul>
</div>
<div class="inner">
<!--多选框-->
gender: <input type="checkbox">Male <input type="checkbox">Female <br>
<!--文本输入框-->
name: <input type="text" name="name" id="username" value="abcde">
</div>
</div>
<!--第二大部分：按钮部分-->
<div id="btList">
<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>
- 运行效果图
- 加上css样式
- css样式文件(根据效果图查找)
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
- html+css后的运行截图
使用JS代码完成响应需求 - 注意：需求按钮上的#表示id的意思
最终实现版本 - html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom练习</title>
<link rel="stylesheet" type="text/css" href="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节点
document.getElementById("btn02").onclick = function () {
var liObj = document.getElementsByTagName("li");
alert(liObj.length);
}
//3.查找name=gender的所有节点
document.getElementById("btn03").onclick = function () {
var genderObj = document.getElementsByName("gender");
alert(genderObj.length);
}
//4.查找id为city下所有li节点
document.getElementById("btn04").onclick = function () {
//4.1获取id为city的标签对象
var lis = document.getElementById("city")
//4.2通过标签对象.getElementsByTagName，获取该标签对象的所有标签名为li的子对象集合
liObj = lis.getElementsByTagName("li");
alert(liObj.length);
}
//5.返回id为city的所有子节点
document.getElementById("btn05").onclick = function () {
alert(document.getElementById("city").childNodes.length);
}
//6.返回id为phone的第一个子节点
document.getElementById("btn06").onclick = function () {
alert( document.getElementById("phone").firstChild.innerHTML );
}
//7.返回id为bj的父节点
document.getElementById("btn07").onclick = function () {
var bjObj = document.getElementById("bj");
alert( bjObj.parentNode.innerHTML );
}
//8.返回id为android的前一个兄弟节点
document.getElementById("btn08").onclick = function () {
var androidObj = document.getElementById("android");
alert( androidObj.previousSibling.innerHTML );
}
//9.读取#username 的 value 属性值
document.getElementById("btn09").onclick = function () {
var usernameObj = document.getElementById("username");
alert(usernameObj.value);
}
//10.设置#username 的 value 属性值
document.getElementById("btn10").onclick = function () {
var usernameObj = document.getElementById("username");
usernameObj.value = "hello";
}
//11.返回#bj 的文本值
document.getElementById("btn11").onclick = function () {
var bjObj = document.getElementById("bj");
alert(bjObj.innerHTML);
}
}
</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>
</body>
</html>
- css样式文件
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
- 运行效果
document对象的补充内容
-
补充内容（2个方法）
-
关于window.load的解释
在JavaScript中，window.onload 是一个事件处理程序，它用于指定在整个 HTML 文档加载完毕后执行的代码。具体来说，它会在所有的 HTML 元素、样式、脚本以及其他资源都被下载并完全加载到浏览器之后触发。window.onload 是一种确保在页面完全加载后执行代码的有效方法。 -
错误示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document补充内容</title>
<script type="text/javascript">
//要求：需要我们使用js代码来创建html标签，并显示在页面上
//createElement()和appendChild()方法
//标签的内容就是:<div>国哥，我爱你</div>
//1.使用creatElement()方法创建标签
var divobj = document.createElement("div");//<div></div>在内存中
divobjinnerHTML ="国哥,我爱你";//<div>国哥,我爱你</div>，仅仅存在与内存中
//2.我们将创建的div标签，添加作为body的子标签
//appendChild(ChildNode)方法，用于为一个标签添加子标签
document.body.appendChild(divobj);
alert(divobj)
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document补充内容</title>
<script type="text/javascript">
window.onload = function (){
//要求：需要我们使用js代码来创建html标签，并显示在页面上
//createElement()和appendChild()方法
//标签的内容就是:<div>国哥，我爱你</div>
//1.使用creatElement()方法创建标签
var divobj = document.createElement("div");//<div></div>在内存中
divobj.innerHTML ="国哥,我爱你";//<div>国哥,我爱你</div>，仅仅存在与内存中
//2.我们将创建的div标签，添加作为body的子标签
//appendChild(ChildNode)方法，用于为一个标签添加子标签
document.body.appendChild(divobj);
}
</script>
</head>
<body>
</body>
</html>
- 从运行结果看是否添加成功
- 文本也是一个结点
