文章目录
- 一、IDEA创建HTML
- 1、创建HTML文件
- 2、iframe标签
- 3、iframe和a标签组合使用
- 4、target标签
- 5、创建JS文件
- 二、JS
- 1、数组
- 2、函数定义的两种方式
- 3、JS函数不允许重载
- 4、隐形参数arguments
- 5、参数求和
- 6、自定义对象
- 7、事件
- 8、两种事件注册的介绍
- 9、onload事件
- 10、onclick事件
- 11、onblur事件
- 12、onchange事件
- 13、onsubmit事件
- 14、DOM对象介绍
- 15、验证用户名是否有效
- 16、正则表达式
- 17、两种常见的验证效果
- 【1】显示是否合法的文字
- 【2】√或×表示是否合法
- 18、getElementsByName方法
- 19、getElementsByTagName方法
- 20、createElement方法
- 21、节点的常用属性和方法
一、IDEA创建HTML
1、创建HTML文件
1、创建一个web工程(静态的)
2、在工程下创建HTML文件
右键运行HTML文件:
<!DOCTYPE html><!-- 约束,声明 -->
<html lang="en"><!-- html标签表示HTML的开始,lang="en"表示英语 -->
<head><!-- 表示头部信息,一般包含title标签,css样式,js代码 -->
<meta charset="UTF-8"><!-- 表示当前界面使用UTF-8字符集 -->
<title>Title</title><!-- 表示标题 -->
</head>
<body><!-- body标签是整个html页面显示的主体内容 -->
hello
</body>
</html>
2、iframe标签
iframe
标签可以在页面上开辟一个小区域来显示单独的一个页面
<iframe src="3.html" width="500" height="400"/>
3、iframe和a标签组合使用
<iframe src="http://www.baidu.com"></iframe>
<a href="http://qq.com">QQ</a>
<a href="http://github.com">github</a>
需求:点击下面的两个链接让该链接的页面在上面的iframe标签页面显示。
做法:可将代码改成如下形式,即a标签要在name为xxx的页面打开。
<iframe src="#" name="xxx"></iframe>
<a href="http://qq.com" target="xxx">QQ</a>
<a href="http://github.com" target="xxx">github</a>
4、target标签
在HTML中target(目标)的四个参数的用法:
- 1、target="_self"表示:将链接的画面内容,显示在目前的视窗中。(内定值) 。 即:同窗口打开。
- 2、target="_parent"表示:将链接的画面内容,当成文件的上一个画面。即:当前窗口打开。
- 3、target="_top"表示:将框架中链接的画面内容,显示在没有框架的视窗中(即除去了框架)。即:顶端打开窗口。
- 4、target="_blank"表示:将链接的画面内容,在新的浏览视窗中打开。即:打开新窗口。
当网页没有框架时,target=“_self"和target=”_parent"以及target="_top"三种方式的显示方式几乎相同。
5、创建JS文件
二、JS
1、数组
- 在JS当中,所有的变量都可以当成是一个boolean类型的变量来去使用。
- 0,null,undifined,“”(空串)都认为是false
<script>
var arr=[];//定义一个数组
arr[0]=12;
arr[2]="abc";
//JS语言中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动给数组扩容
alert(arr.length);
alert(arr[1]);//结果为undefined,因为JS当中只要未赋值默认就是undefined
</script>
2、函数定义的两种方式
- 第一种定义方式:
//1、定义无参函数
function fun(){
alert("无参函数被调用");
}
//2、定义有参函数
function fun1(a,b){
alert("有参函数被调用");
}
//3、定义带有返回值的函数
function fun2(a,b) {
return a+b;
}
alert(fun2(10,30));
- 第二种定义方式:
//1、定义无参函数
var fun=function (){
alert("无参函数");
}
//2、定义有参函数
var fun2=function (){
alert("有参函数a="+a+",b="+b);
}
//3、定义带有返回值的函数
var fun3=function (num1,num2) {
return num1+num2;
}
3、JS函数不允许重载
虽然在Java当中允许函数重载,但是在JS当中函数的重载会直接覆盖掉上一次的定义:
function fun(a,b){
alert("有参函数fun(a,b)");
}
function fun(){
alert("无参函数fun()");
}
fun(1,"ad");
上面的代码当中尽管fun有传参,但是结果依然是无参的fun函数。
4、隐形参数arguments
- arguments:在function函数当中不需要定义,却可以直接用来获取所有参数的变量,即为隐形参数。
- JS的隐形参数也和java的可变长参数一样,操作类似。
<script>
function fun(){
alert(arguments);
}
fun(1,"ad");
</script>
- arguments.length:查看参数个数
alert(arguments.length);
- 查看参数的值:
alert(arguments[0]);
alert(arguments[1]);
alert(arguments[2]);
- 遍历参数:
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
5、参数求和
- 需求:编写函数,用于计算所有参数相加的和并返回:
<script>
function sum(num1,num2){
var result=0;
for(var i=0;i<arguments.length;i++){
result+=arguments[i];
}
return result;
}
alert(sum(1,2,3,4,5,6,7));
</script>
如果有传入,字符串,则字符串之后的数字都变成字符串拼接的形式:
alert(sum(1,2,3,4,5,"ac6f",7));
6、自定义对象
- 1、Object形式的自定义对象
//对象的定义:
var a=new Object(); //对象实例(空对象)
a.name="susie-wen"; //定义一个属性
a.age=21;
a.fun=function (){
alert("姓名:"+this.name+",年龄:"+this.age);
}; //定义一个函数
a.fun();//调用函数
- 2、花括号形式的自定义对象
var obj={
name:"susie-wen",
age:21,
fun:function (){
alert("姓名:"+this.name+",年龄:"+this.age);
}
};//定义一个对象
obj.fun();
7、事件
- 事件是是电脑输入设备与页面进行交互的响应。
- 常用的事件:
-
onload
:加载完成时间——常用于做页面JS代码初始化操作 -
onclick
:单击事件——常用于按钮点击响应操作 -
onblur
:失去焦点事件——常用于输入框失去焦点后验证其输入内容是否合法 -
onchange
:内容发生改变事件——常用于下拉列表和输入框内容发生改变后的操作 -
onsubmit
:表单提交事件——常用于表单提交之前,验证所有表单项是否合法
8、两种事件注册的介绍
- 事件的注册又分为:静态注册和动态注册
- 事件的注册:指的是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。
1、静态注册事件:通过HTML标签的事件属性直接赋予事件响应后的代码,这种方式叫静态注册。
2、动态注册事件:通过JS代码得到标签的dom对象,然后通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码。
- 动态注册基本步骤:
- 1、获取标签对象
- 2、标签对象.事件名=function( ){ }
9、onload事件
onload:浏览器解析完页面之后自动触发
onload
:加载完成时间——常用于做页面JS代码初始化操作
1、静态写法
<body onload="alert('静态注册onload事件')">
</body>
- 一般以上的代码只能在标签当中写一句代码,如果有很多代码要执行,则可以单独在JS当中写一个函数,然后在标签当中引用函数即可。如下:
<script>
function onloadFun(){
alert("静态注册onload事件,所有代码");
}
</script>
<body onload="onloadFun();">
</body>
2、动态事件
- 只有一种固定的写法:
<script>
window.onload=function (){
alert("动态注册onload事件")
}
</script>
10、onclick事件
onclick
:单击事件——常用于按钮点击响应操作
下面代码当中,按钮1是静态写法,按钮2是动态写法:
<script>
function onclickFun(){
alert("静态注册onclick事件");
}
window.onload=function(){
//1.获取标签对象
/**
* document是JS语言提供的一个对象(文档)
* getElementById:通过ID属性获取标签对象
*/
var btnobj=document.getElementById("btn01");
//2.通过标签对象.事件名=function(){}
btnobj.onclick=function(){
alert("动态注册onclick事件")
}
}
</script>
<body>
<button onclick="onclickFun();">按钮1</button>
<button id="btn01">按钮2</button>
</body>
11、onblur事件
-
onblur
:失去焦点事件——常用于输入框失去焦点后验证其输入内容是否合法 -
console
:是控制台对象,由JS语言提供,专门向浏览器的控制器打印输出,用于测试 -
log
:是打印方法
1、静态事件
<script>
function onblurFun(){
console.log("静态注册失去焦点事件");
}
</script>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input type="text"><br/>
</body>
2、动态事件
下面的代码当中,用户名使用的是静态注册事件,密码是动态注册事件。
<script>
function onblurFun(){
console.log("静态注册失去焦点事件");
}
window.onload=function (){
var passwordobj=document.getElementById("password");
passwordobj.onblur=function (){
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input type="text" id="password"><br/>
</body>
12、onchange事件
onchange
:内容发生改变事件——常用于下拉列表和输入框内容发生改变后的操作
1、静态事件
<script>
function onchangeFun(){
alert("女神已经改变了");
}
</script>
<body>
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>--小美--</option>
<option>--小花--</option>
<option>--小兰--</option>
</select>
</body>
2、动态事件
下面的代码当中男神是动态注册事件:
<script>
function onchangeFun(){
alert("女神已经改变了");
}
</script>
<script>
window.onload=function (){
var selObj=document.getElementById("sel01");//这是一个对象
selObj.onchange=function (){
alert("男神已经改变了");
}
}
</script>
<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>
13、onsubmit事件
onsubmit
:表单提交事件——常用于表单提交之前,验证所有表单项是否合法form标签的action属性
:是一个表单当中必须的属性,action属性规定当提交表单时,向何处发送表单数据。Get
:将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接。
1、静态事件
<script>
function onsubmitFun(){
//要验证所有表单项是否合法,如果有一个不合法则阻止表单提交
alert("静态注册表单提交事件——发现不合法");
return false;
}
</script>
<body>
<form action="http://locolhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
</body>
onsubmit="return onsubmitFun();"
:注意这里要写成return,不能单单只写一个函数,如果只写一个函数,则当发现表单不合法之后,仍然会跳转到action所写的页面。如果加return,则当表单不合法的时候,不会进行页面的跳转。
- 如果不想阻止的话,则只要不是return false即可。
2、动态事件
<script>
function onsubmitFun(){
//要验证所有表单项是否合法,如果有一个不合法则阻止表单提交
alert("静态注册表单提交事件——发现不合法");
return false;
}
</script>
<script>
window.onload=function (){
var formObj= document.getElementById("form01");
formObj.onsubmit=function(){
alert("动态注册表单提交事件——发现不合法");
return false;
}
}
</script>
<form action="http://locolhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://locolhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>
14、DOM对象介绍
- DOM:全称是Document Object Model 文档对象模型。可以把文档中的标签,属性,文本转换成对象来管理。
- Document对象的理解:
- 1、Document管理了所有的HTML文档的内容。
- 2、Document是一种树结构的文档,有层级关系。
- 3、它让我们把所有的标签都对象化。
- 4、我们可以通过Document访问所有的标签对象。
- 标签的对象化:就是用类去记录标签的所有信息。
Document中重要且常用的几个查询方法:
1.document.getElementById(elementId)
:通过标签的id属性查找标签dom对象,elementId是标签的id属性。
2.document.getElementsByName(elementName)
:通过标签的name属性查找标签dom对象,elementName是标签的name属性值。
3.document.getElementsByTagName(tagname)
:通过标签名查找标签dom对象,tagname是标签名。
4.document.createElement(tagname)
:通过给定的标签名,创建一个标签对象,这个对象创建完成后还是在内存里面,我们需要把它放在指定的标签里面所有我们一般要配合appendChild() 或 insertBefore()方法使用,tagname是标签名。
15、验证用户名是否有效
- 需求:当用户点击了校验按钮,要获取输出框的内容,然后验证其是否合法
- 验证的规则:必须由字母,数字,下划线组成,并且长度是5到12位。
<script>
function onclickFun(){
//当我们要操作一个标签的时候,一定要先获取这个标签对象
var usernameObj=document.getElementById("username");
// alert( usernameObj);得到的结果:[object HTMLInputElement],就是一个dom对象
var usernameText=usernameObj.value;//这里得到的值是随着输入框里的值变化而变化的
//验证字符串符合某个规则,需要使用正则表达式
var patt=/^\w{5,12}$/;
/**
* test()方法:用于测试某个字符串是否匹配我的规则
* 匹配就返回true,不匹配就返回false
*/
if(patt.test(usernameText)){
alert("用户名合法!");
}else{
alert("用户名不合法!");
}
}
</script>
<body>
用户名:<input type="text" id="username" value="susie"/>
<button onclick="onclickFun()">校验</button>
</body>
16、正则表达式
1、判断字符串当中是否包含字母e:
//方法一:
var patt=new RegExp("e");
var str="abcd";
alert(patt.test(str));
//方法二:
var patt1=/e/;
var str="abcd";
alert(patt1.test(str));
注:方法二也是正则表达式对象,只不过写法不同。
2、表示要求字符串中是否包含字母a或b或c
var patt1=/[abc]/;
var str="1234d";
alert(patt1.test(str));
- 方括号:
- 元字符:
- 量词:
//表示要求字符串从头到尾都匹配,即从头到尾至少包含三个到五个连续的a
var patt=/^a{3,5}$/;
var str="aaaaaaaa";
alert(patt.test(str));
//表示要求字符串包含至少包含三个到五个连续的a,由于此处是包含,因此只要有三个连续的a就会返回true
var patt1=/a{3,5}/;
var str="aaaaaaaa";
alert(patt1.test(str));
上面两种代码的结果对于字符串“aaaaaaa”
来说结果不同。第一个结果为false,第二个结果为true。
17、两种常见的验证效果
【1】显示是否合法的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onclickFun(){
//当我们要操作一个标签的时候,一定要先获取这个标签对象
var usernameObj=document.getElementById("username");
// alert( usernameObj);得到的结果:[object HTMLInputElement],就是一个dom对象
var usernameText=usernameObj.value;//这里得到的值是随着输入框里的值变化而变化的
//验证字符串符合某个规则,需要使用正则表达式
var patt=/^\w{5,12}$/;
var usernameSpanObj=document.getElementById("usernameSpan");
//innerHTML:表示起始标签和结束标签里面的内容
//innerHTML:这个属性可读可写
// alert(usernameSpanObj.innerHTML);
usernameSpanObj.innerHTML="你dbcwiwb";
/**
* test()方法:用于测试某个字符串是否匹配我的规则
* 匹配就返回true,不匹配就返回false
*/
if(patt.test(usernameText)){
usernameSpanObj.innerHTML="用户名合法!";
}else{
usernameSpanObj.innerHTML="用户名不合法!";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="susie"/>
<span id="usernameSpan" style="color:red;"></span>
<button onclick="onclickFun()">校验</button>
</body>
</html>
【2】√或×表示是否合法
将打钩与打叉的图片直接粘贴到项目底下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onclickFun(){
//当我们要操作一个标签的时候,一定要先获取这个标签对象
var usernameObj=document.getElementById("username");
// alert( usernameObj);得到的结果:[object HTMLInputElement],就是一个dom对象
var usernameText=usernameObj.value;//这里得到的值是随着输入框里的值变化而变化的
//验证字符串符合某个规则,需要使用正则表达式
var patt=/^\w{5,12}$/;
var usernameSpanObj=document.getElementById("usernameSpan");
//innerHTML:表示起始标签和结束标签里面的内容
//innerHTML:这个属性可读可写
// alert(usernameSpanObj.innerHTML);
usernameSpanObj.innerHTML="你dbcwiwb";
/**
* test()方法:用于测试某个字符串是否匹配我的规则
* 匹配就返回true,不匹配就返回false
*/
if(patt.test(usernameText)){
usernameSpanObj.innerHTML="用户名合法!";
usernameSpanObj.innerHTML="<img src=\"right.jpg\" width=\"18\" height=\"18\">";
}else{
usernameSpanObj.innerHTML="用户名不合法!";
usernameSpanObj.innerHTML="<img src=\"wrong.jpg\" width=\"18\" height=\"18\">";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="susie"/>
<span id="usernameSpan" style="color:red;">
</span>
<button onclick="onclickFun()">校验</button>
</body>
</html>
18、getElementsByName方法
getElementsByName
方法:根据指定的name属性,返回多个标签对象集合。
- 这个集合的操作和数组一样,且集合当中的每个元素都是dom对象。
- 这个集合中的元素顺序是他们在HTML页面中从上到下的顺序。(根据name属性来查)
-
getElementById
方法:返回拥有指定ID的第一个对象的引用。(根据ID属性来查) - 注意两者的区别:前一个有加s,后一个没有加s,说明
getElementsByName
返回的是多个值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//全选
function checkAll(){
//让所有复选框都选中,先要查找到所有的复选框
//getElementsByName是根据name属性来查询返回多个标签对象的集合
//这个集合的操作和数组一样
//集合当中的每个元素都是dom对象
var hobbies=document.getElementsByName("hobby");
for(var i=0;i<hobbies.length;i++){
hobbies[i].checked=true;//将所有的复选框改成选中状态
}
// alert(hobbies.length);
}
//全不选
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;
/* if(hobbies[i].checked){
hobbies[i].checked=false;
}else{
hobbies[i].checked=true;
}*/
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp" checked="checked">C++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="python">python
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>
- checked表示复选框的选中状态,如果选中是
true
,如果不选中是false
。这个属性可读可写。
19、getElementsByTagName方法
getElementsByTagName()
:方法可返回带有指定标签名的对象的集合。
- 这个集合的操作和数组一样。
- 并且集合当中都是dom对象。
- 这个集合中的元素顺序是他们在HTML页面中从上到下的顺序。
- 提示:如果把特殊字符串
"*"
传递给getElementsByTagName()
方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkAll(){
var input=document.getElementsByTagName("input");
for(var i=0;i<input.length;i++){
inputs[i].checked=true;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">java
<input type="checkbox" value="python">python
<br/>
<button onclick="checkAll()">全选</button>
</body>
document对象的三个查询方法:
- 如果有ID属性,就优先使用
getElementById
方法来进行查询。 - 如果没有ID属性,就优先使用
getElementsByName
方法来进行查询。 - 如果ID属性和Name属性都没有,则最后使用标签名查询。
- 以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。
20、createElement方法
通过下面的代码可以看出,JS的createElement方法可以创建HTML标签,并显示在页面上
<script>
window.onload=function (){
//需求:使用JS来创建HTML标签,并显示在页面上
//例如,标签的内容是<div>today is today</div>
var divObj=document.createElement("div");//此时在内存当中创建了<div></div>
//添加子元素
divObj.innerHTML="today is today";//此时已经有文字了,但是是显示在内存当中
document.body.appendChild(divObj);//这是一个语句,当按顺序读取的使用会比body里面的内容先读,因此要将其变成放到页面
}
</script>
21、节点的常用属性和方法
- 节点就是标签对象。
方法:
1、通过具体的元素节点调用getElementsByTagName()
方法,获取当前节点的指定标签名
2、appendChild( oChildNode )
方法,可以添加一个子节点, oChildNode
就是要添加的孩子节点。
属性:
字符 | 属性 |
childNodes | 获取当前节点的所有子节点 |
firstChild | 获取当前节点的第一个子节点 |
lastChild | 获取当前节点的最后一个子节点 |
parentNode | 获取当前节点的父节点 |
nextSibling | 获取当前节点的下一个节点 |
previousSibling | 获取当前节点的上一个节点 |
className | 获取或设置标签的class属性值 |
innerHTML | 表示获取/设置起始标签和结束标签的内容 |
innerText | 表示获取/设置起始标签和结束标签中的文本 |