|
目录
一、JavaScript与HTML结合?
方式一：
方式二：?
二、变量
三、关系运算
四、逻辑运算
五、数组
六、函数
1、定义方式
二、隐性参数
七、自定义对象
1、Object形式的自定义对象
2、{}花括号形式的自定义对象
八、事件
1、定义：电脑输入设备与页面进行交互的响应，称之为事件
2、事件的注册（绑定）
3、onload事件
4、onclick事件
5、onblur事件
6、onchange事件
7、onsubmit事件
九、DOM模型
一、Document对象中的方法介绍
二、节点的常用属性与方法
一、JavaScript与HTML结合?
方式一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
alert("hello javaScript")
</script>
</head>
<body>
</body>
</html>
方式二：?
<script type="text/javascript" src="1.js"></script>
要点总结：
script标签可以用来定义js代码，也可以用来引入js文件，
但是两个功能二选一使用，不能同时使用
二、变量
数值类型：????????number
字符串类型：????string
对象类型：? ? ? ? object
布尔类型：? ? ? ? boolean
函数类型：? ? ? ? function
?undefined:未定义，所有js变量为赋予初始值得时候，默认值都是undefined
null:? ? ? ? 空值
NAN:? ? ?Not a Number 非数字，非数值
三、关系运算
等于? ? ? ? ==：简单的作字面值的比较
全等于? ? ? ? ===：除了字面值的比较之外，还会比较变量的类型
四、逻辑运算
且运算：&&
或运算：||
取反运算：！
在js中，所有的变量都可以作为一个boolean类型的变量去使用
0、null、undefined、""(空串)都认为是false
&& 与运算
当表达式全为真时，返回最后一个表达式的值
当表达式有一个为假时，返回第一个为假的表达式的值
|| 或运算
当表达式全为假时，返回最后一个表达式的值
当表达式有一个为真时，返回第一个为真的表达式的值
五、数组
格式：
var 数组名=[];//空数组
var 数组名=[1,"abc",true];
定义时只要我们通过下标赋值，就会自动的作数组扩容操作
六、函数
1、定义方式
定义方式一：
function 函数名（形参列表）{
? ? ? ? 函数体
}
若需要返回值，只需要在函数体内直接使用return语句返回值即可
定义方式二：
var 函数名=function 函数名（形参列表）{
? ? ? ? 函数体
}
注意：js中函数的重载会直接覆盖之前函数的定义
二、隐性参数
<script type="text/javascript">
function f(num1,num2) {
var result=0;
for(var i=0;i<arguments.length;i++){
if(typeof (arguments[i])=="number"){
result+=arguments[i];
}
}
return result;
}
alert( f(1,2,3,"abc",4,5,6,7,8,9));
</script>
七、自定义对象
1、Object形式的自定义对象
对象的定义：
var 变量名=new Object();//对象实例（空对象）
变量名.属性名=值;//定义一个属性
变量名.函数名=function(){? ? ? ? //定义一个函数
。。。
}
对象的访问：
变量名.属性名|函数名（）；
2、{}花括号形式的自定义对象
对象的定义：
var 变量名={
? ? ? ? 属性名：值，
????????属性名：值，
????????函数名：function（）{}
}；
对象的访问：
? ? ? ? 变量名.属性|函数名（）；
八、事件
1、定义：电脑输入设备与页面进行交互的响应，称之为事件
常用的事件：? ? ? ? ? ? ? ?
onload加载完成事件：? ? ? ?????????页面加载完成之后，常用于做页面js代码初始化的操作
onclick单击事件：? ? ? ? ? ? ? ????????常用于按钮的点击响应操作
onblur失去焦点事件：? ? ? ? ????????常用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件:?????常用于下拉列表和输入框内容发生改变后的操作
onsubmit表单提交事件：? ? ? ? ? ? ?常用于表单提交前，验证所有表单项是否合法
2、事件的注册（绑定）
定义：告诉浏览器，当事件响应后要执行哪些操作代码
静态注册事件：通过html标签的事件属性
动态注册事件：1、获取标签对象
??????????????????????????2、标签对象.事件名=function（）{}
3、onload事件
静态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onloadFun() {
alert("静态注册onload事件，所有代码")
}
</script>
</head>
<body onload="onloadFun()">
</body>
</html>
动态注册
<script type="text/javascript">
window.onload=function () {
alert("动态注册的onload事件")
}
</script>
4、onclick事件
静态注册：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick事件");
}
</script>
</head>
<body>
<button onclick="onclickFun()">按钮1</button>
<button>按钮2</button>
</body>
</html>
动态注册：
var btnObj=document.getElementById("btn01");
btnObj.onclick=function () {
alert("动态注册的onclick事件");
}
<button id="btn01">按钮2</button>
5、onblur事件
静态与动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onblurFun() {
//console是控制台对象，是由JavaScript语言提供，
// 专门用来向浏览器的控制器打印输出，用于测试使用
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 id="password" type="text" /><br/>
</body>
</html>
6、onchange事件
静态注册与动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun(){
alert("女神已经改变了");
}
window.onload=function () {
var selObj=document.getElementById("oass");
selObj.onchange=function () {
alert("男神已经改变了")
}
}
</script>
</head>
<body>
请选择你心中的女神：
<select onchange="onchangeFun()">
<option>--女神--</option>
<option>刘诗诗</option>
<option>倪妮</option>
<option>杨幂</option>
</select><br/>
请选择你心中的男神：
<select id="oass">
<option>--男神--</option>
<option>胡歌</option>
<option>张艺兴</option>
<option>靳东</option>
</select>
</body>
</html>
7、onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onsubmitFun() {
alert("静态注册表单提交事件----发现不合法");
return false;
}
window.onload=function () {
var formObj = document.getElementById("form01");
formObj.onsubmit=function () {
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<form action="http://localhost:8080" method="get"
onsubmit="return onsubmitFun()">
<input type="submit" value="静态注册"/>
</form><br/>
<form action="http://localhost:8080" method="get"
id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>
九、DOM模型
一、Document对象中的方法介绍
1、document.getElementById(elementId)????????????????????????通过标签的id属性查找标签dom对象
2、doucument.getElementsByName(elementName)???????通过标签的name属性查找标签dom对象
3、document.getElementsByTagName(tagname)? ? ? ? ? ? 通过标签名查找标签dom对象?
4、document.creatElement(tagName)? ? ? ? ? ? ? ? ? ? ? ? ??????通过给定的标签名创建一个标签对象
1、document.getElementById(elementId)????????????????????????通过标签的id属性查找标签dom对象
两种校验方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
var usernameObj = document.getElementById("username");
var usernameText=usernameObj.value;
var patt=/^\w{5,12}$/;
var usernameSpanObj=document.getElementById("usernameSpan")
if(patt.test(usernameText)){
usernameSpanObj.innerHTML="用户名合法";
}else {
usernameSpanObj.innerHTML="用户名不合法";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value="wzg"/>
<span id="usernameSpan" style="color:red"></span>
<button onclick="onclickFun()">校验</button>
</body>
</html>
if(patt.test(usernameText)){
//usernameSpanObj.innerHTML="用户名合法";
usernameSpanObj.innerHTML=
"<img src=\"right.png\" width=\"18\" height=\"18\" >";
}else {
//usernameSpanObj.innerHTML="用户名不合法";
usernameSpanObj.innerHTML=
"<img src=\"right.png\" width=\"18\" height=\"18\" >";
}
2、doucument.getElementsByName(elementName)???????通过标签的name属性查找标签dom对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function checkAll() {
var hobbies = document.getElementsByName("hobby");
for(var i=0;i<hobbies.length;i++){
hobbies[i].checked=true;
}
}
function checkNone() {
var hobbies = document.getElementsByName("hobby");
for(var i=0;i<hobbies.length;i++){
hobbies[i].checked=false;
}
}
function checkRevers() {
var hobbies = document.getElementsByName("hobby");
for(var i=0;i<hobbies.length;i++){
hobbies[i].checked=!hobbies[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="js"/>JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNone()">全不选</button>
<button onclick="checkRevers()">反选</button>
</body>
</html>
3、document.getElementsByTagName(tagname)? ? ? ? ? ? 通过标签名查找标签dom对象?
<script type="text/javascript">
function checkAll() {
var tags = document.getElementsByTagName("input");
for(var i=0;i<tags.length;i++){
tags[i].checked=true;
}
}
</script>
要点总结：?
?（1）以上三个方法最好先用 id 再用name 再用 标签
（2）这些方法在页面加载完成之后执行，才能查询到标签对象
4、document.creatElement(tagName)? ? ? ? ? ? ? ? ? ? ? ? ??????通过给定的标签名创建一个标签对象
<script type="text/javascript">
window.onload=function () {
var divObj=document.createElement("div");
divObj.innerHTML="国哥，我爱你";
document.body.appendChild(divObj);
}
</script>
二、节点的常用属性与方法
方法:
1、getElementsByTagName()? -->获取通过当前节点的指定标签名孩子节点
2、appendChild(name)? ? ? ? -->添加子节点
属性：
1、childNodes? ? ? ? ????-->获取当前节点的所有子节点
2、firstChild? ? ? ? ????????-->获取当前节点的第一个子节点
3、lastChild? ? ? ? ? ? ? ?? -->获取当前节点的最后一个子节点
4、parentNode? ? ? ? ??? -->获取当前节点的父节点
5、nextSibling? ? ? ? ? ? ??-->获取当前节点的下一个节点
6、previousSibling? ? ? ?-->获取当前节点的上一个节点
7、className? ? ? ? ? ? ? -->用于获取和设置标签的class属性值
8、innerHTML? ? ? ? ? ? ? ?-->用于获取/设置起始标签和结束标签中的内容
9、innerText? ? ? ? ? ? ? ? -->用于获取/设置起始标签和结束标签中的文本
|