javascript笔记
1.js与html代码结合方式
(1)在head 标签中,或者在body 标签中, 使用script 标签来书写JavaScript 代码
<!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>
(2)使用script 标签引入单独的JavaScript 代码文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="路径名"></script>
</head>
<body>
</body>
</html>
2.变量
(1)变量类型:数值类型(number),字符串类型(string),对象类型(object),布尔类型(boolean),函数类型(function)
定义变量:var 变量名 ;var 变量名 = 值;
(2)特殊值:underfined(js变量未定义、未赋初值时),null(空值),NAN(not a number)
3.运算
(1)关系运算特殊情况
等于:== 简单字面值比较
全等于:=== 字面值的比较+数据类型比较
(2)逻辑运算:与或非(&& 、|| 、!)
(3)布尔运算
所有的变量,都可以作为一个boolean类型的变量去使用,其中0,null,undefined,’’’’ 都认为是false。
4.数组
定义格式:
var 数组名= []; // 空数组
var 数组名= [1 , ’abc’ , true]; // 定义数组同时赋值元素
5.函数
(1)使用function 关键字
function 函数名(形参列表){
函数体
}
(2)
var 函数名= function(形参列表) { 函数体}
注:在JS 中函数的重载会直接覆盖掉上一次的定义
6.自定义对象
(1)Object 形式的自定义对象
对象的定义:
var 变量名= new Object(); // 对象实例(空对象)
变量名.属性名= 值; // 定义一个属性
变量名.函数名= function(){} // 定义一个函数
(2){}花括号形式的自定义对象
对象的定义:
var 变量名= { // 空对象
属性名:值, // 定义一个属性
属性名:值, // 定义一个属性
函数名:function(){} // 定义一个函数
};
对象的访问:
变量名.属性
函数名();
7.Document 对象中的方法介绍
document.getElementById(elementId)
通过标签的id 属性查找标签dom 对象,elementId 是标签的id 属性值
document.getElementsByName(elementName)
通过标签的name 属性查找标签dom 对象,elementName 标签的name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签dom 对象。tagname 是标签名
document.createElement(tagName)
方法,通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名
以上三个查询方法,一定要在页面加载完成之后执行,才能查询到标签对象。
8.事件
8.1常用的事件
onload 加载完成事件: 页面加载完成之后,常用于做页面js 代码初始化操作
onclick 单击事件: 常用于按钮的点击响应操作。
onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。
8.2事件的注册
(1)静态注册:通过html 标签的事件属性直接赋于事件响应后的代码
(2)动态注册事件:是指先通过js 代码得到标签的dom 对象,然后再通过dom 对象.事件名= function(){}。
动态注册基本步骤:
1、获取标签对象
2、标签对象.事件名= fucntion(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick 事件");
}
window.onload = function () {
var btnObj = document.getElementById("btn01");
btnObj.onclick = function () {
alert("动态注册的onclick 事件");
}
}
</script>
</head>
<body>
<button onclick="onclickFun();">按钮1</button>
<button id="btn01">按钮2</button>
</body>
</html>
9.节点的常用属性和方法
9.1方法
通过具体的元素节点调用getElementsByTagName()方法,获取当前节点的指定标签名孩子节点
appendChild(ChildNode )
方法,可以添加一个子节点,ChildNode 是要添加的孩子节点
9.2属性
childNodes
属性,获取当前节点的所有子节点
firstChild
属性,获取当前节点的第一个子节点
lastChild
属性,获取当前节点的最后一个子节点
parentNode
属性,获取当前节点的父节点
nextSibling
属性,获取当前节点的下一个节点
previousSibling
属性,获取当前节点的上一个节点
className
用于获取或设置标签的class 属性值
innerHTML
属性,表示获取/设置起始标签和结束标签中的内容
innerText
属性,表示获取/设置起始标签和结束标签中的文本
使用举例:
document.getElementById("phone").firstChild.innerHTML
document.getElementById("city").childNodes.length