JavaScript简称JS,是一种嵌入到HTML页面中的编程语言,由浏览器一边解析一边执行
JS的引入方式
外部引用
外部引用JS的时候,可以在head中引入,也可以在body里面引用
同样,内部引用也可以在head或body里面引用
语法基础
- 常量与变量
- 数据类型
- 运算符
- 表达式与语句
- 类型转换
- 转义字符
- 注释(这就省略了吧)
JS每一条语句,都以;结尾
常量与变量
var变量
const常量
数据类型
基本数据类型:数字、字符串、布尔值、未定义值、空值
引用类型:数组、对象
未定义值
已经使用var声明了,但是没有进行赋值,此时就是undefined
运算符
常见的运算符有5种:
- 算术运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
- 条件运算符
流程控制
一般有三种流程控制方式:
- 顺序结构
- 选择结构
- 循环结构
在JS中,常用的内置对象有四种:
String、Array、Date、Math
字符串类型
str.length
获取字符串的长度
str.toLowerCase()
将大写字符串转换为小写字符串
str.toUpperCase()
将小写字符串转换为大写字符串
str.charAt(index)
获取第inde(从0开始)个字符
str.substring(start, end)
start开始位置(从0开始),end结束位置[start, end)
end省略的话,则到结尾
str.replace(原字符串, 替换的新字符串)
str.split("分割符x")
将字符串以分隔符x,分割为数组
str.indexOf(指定字符串)
返回指定字符串首次出现的下标
str.lastIndexOf(指定字符串)
返回指定字符串最后出现的下标
var str = "abcabc";
alert(str.indexOf("ab"));//0
alert(str.lastIndexOf("ab"));//3
DOM基础
DOM操作,可以理解为“元素操作”
DOM采用“树形结构”
每一个元素就是一个节点,而每一个节点就是一个对象。
我们在操作元素时,其实就是把这个元素看成一个对象,然后使用这个对象的属性和方法来进行相关操作
节点类型
DOM节点有12种类型,常见的有三种:
- 元素节点 nodeType1
- 属性节点 nodeType2
- 文本节点 nodeType3
在JS中,使用nodeType属性来判断一个节点的类型
DOM对象可以以o开头,这样,一眼就看出是一个DOM对象
获取元素
创建元素
在JS中,可以使用createElement()
来创建一个元素节点
也可以使用createTextNode()
来创建一个文本节点
然后,可以将元素节点与文本节点“组装”成:“有文本内容的元素”
这种方式,被称为 动态DOM操作
也就是,元素是由JS创建的,一开始在HTML中不存在的
举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function()
{
// 创建一个strong标签(元素节点)
var e1 = document.createElement("strong");
// 创建一个文本节点
var text = document.createTextNode("文本内容");
// 将文本节点插入到元素节点中
e1.appendChild(text);
console.log(e1);
//获取id为box的节点
var oDiv = document.getElementById("box");
console.log(oDiv);
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
// 将e1节点插入到oDiv中
oDiv.appendChild(e1);
}
</script>
</head>
<body>
<div id="box">
123
</div>
</body>
</html>
操作动态DOM,在实际开发用得非常多
再来个小练习:
如果动态创建带有属性的复杂节点?像这样:<input type="button" id="submit" value="提交1" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function()
{
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交2";
var oDiv = document.getElementById("box");
oDiv.appendChild(oInput);
}
</script>
</head>
<body>
<div id="box">
<input type="button" id="submit" value="提交1" />
</div>
</body>
</html>
插入元素
创建好了元素,如果不插入到HTML中,将没有意义
插入元素有两种方法:
A.appendChild(B)
将B插入到A父元素的内部子元素的“尾部”
A.insertBefore(B, ref);
将B这个新元素,插入到父元素A中,ref子元素的前面
删除元素
A.removeChild(B)
将B从父元素A中删除
复制元素
obj.cloneNode(bool)
obj表示被复制的元素
bool:true,表示复制元素本身以及该元素下的所有子元素
bool:false,表示仅仅复制元素本身,不复制该元素下的子元素
替换元素
A.replaceChild(new, old);
A表示父元素,new表示新子元素,old表示旧子元素
DOM进阶
HTML属性操作(对象属性)
HTML属性操作,指的是使用JS来操作元素的HTML属性,例如:
<input type="button" id="submit" value="提交" />
操作id、type、value等
JS中,有两种操作HTML元素属性的方式:
- 对象属性
- 对象方法
obj.attr
obj是元素名,是一个DOM对象
所谓DOM对象,指的是getElementById()
、getElementsByTagName()
等方法获取到的元素节点
attr是属性名
想要获得某个属性的值,首先需要找到这个元素节点,然后才可以获取到该属性的值
获取一个元素的class,不能使用obj.class
,应该使用obj.className
obj.attr
不仅可以获取HTML元素的属性值,还可以获取动态创建的DOM元素中的属性值
HTML属性操作(对象方法)
JS提供了4种方法:
getAttribute()
setAttribute()
removeAttribute()
hasAttribute()
obj.getAttribute("attr");
obj是元素名,attr是属性名。
getAttribute()只有一个参数,并且参数是双引号括起来的
obj.getAttribute("attr");
与obj.attr
都可以获取HTML或动态DOM的属性值
obj.getAttribute("attr");
可以获取自定义属性,而obj.attr
不可以
obj.setAttribute("attr", "值")
CSS属性操作
HTML属性操作完后,来学下操作CSS属性
获取CSS属性值
getComputedStyle(obj).attr
get computed style:获取计算后的样式
设置CSS属性值
obj.style.attr = "值";
在JS中,可以使用cssText属性来同时设置多个CSS属性
obj.style.cssText = "值";
例如:
oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";
DOM遍历
DOM遍历,可以理解为“查找元素”的意思
查找哪些元素呢?一般是三种:
- 查找父元素
- 查找子元素
- 查找兄弟元素
查找父元素
obj.parentNode
查找子元素
childNodes、firstChild、lastChild
children、firstElementChild、lastElementChild、children[i]
childNodes:获取所有的子节点,包括元素节点以及文本节点
childNodes:获取所有元素节点(不包括文本节点)(常用)
查找兄弟元素
previousSibling、nextSibling
previousElementSibling、nextElementSibling
如果只希望操作元素节点,建议使用后两个
innerHTML和innerText
innerHTML属性获取和设置一个元素的“内部元素”
innerText属性获取和设置一个元素的“内部文本”
document.body.innerHTML = '<img class="pic" src="images/haizei.png" style="border:1px solid silver"/>';
事件基础
什么是事件?
鼠标点击onclick就是一个事件
在JS中,事件一般有三部分
- 事件主角:是按钮还是div元素或是其他?
- 事件类型:是点击还是移动或是其他?
- 事件过程:这个事件都发生了些什么?
JS常见的事件有五种:
鼠标事件、键盘事件、表单事件、编辑事件、页面事件
事件调用方式:
- 在script标签中调用
- 在元素中调用
// 为元素添加点击事件
oBtn.onclick = function ()
{
alert("...");
};
鼠标事件
键盘事件
键盘按下:onkeydown
键盘松开:onkeyup
表单事件
- onfocus和onblur
- onselect
- onchange
onfocus 表示获取焦点时触发的事件
onblur 表示失去焦点时触发的事件,两者是相反操作。
编辑事件
在JS中,常用的编辑事件有三种:
- oncopy
- onselectstart
- oncontextmenu
oncopy:一般用来做,不准复制
document.body.oncopy = function ()
{
return false;
}
onselectstart:一般用来做,不准选中
语法:
document.body.onselectstart=function()
{
return false;
}
onselectstart:一般用来做,不准鼠标右键
语法:
document.body.oncontextmenu=function()
{
return false;
}
页面事件
常用的页面事件有两个:
- onload
- onbeforeunload
在JS中,onload表示文档加载完成后再执行的一个事件
浏览器从上到下解析到 window.onload 时,就会先不解析window.onload 里面的代码,而是继续往下解析,直到把整个 HTML 文档解析完了之后才会回去执行window.onload 里面的代码。
onbeforeunload 离开页面之前触发的一个事件
事件阶级
在JS中,要给元素添加一个事件,可以使用:
- 事件处理器
- 事件监听器
当想为同一个元素添加多个相同的事件,就需要事件监听器了
事件监听器
所谓事件监听器,指的是使用addEventListener()方法来为一个元素添加事件,又称为“绑定事件”
obj.addEventListener(type, fn, false)
type是字符串,指的是事件类型。例如单击事件用“click”;鼠标移入用“mouseover”,需要注意的是:这个事件类型不需要加上on前缀的
fn是一个函数名,或者是一个匿名函数
false 表示在事件冒泡阶段调用
解绑事件
obj.removeEventListener(type, fn, false);
fn必须是函数名,而不能是匿名函数
此方法只可以解除“事件监听器”添加的事件,不可以解除“事件处理器”添加的事件
“事件处理器”添加的事件的解除,可以使用obj.事件名 = null;
event对象
当一个事件发生的时候,这个事件有关的详细信息都会临时保存到一个指定的地方,这个地方就是event对象。
每一个事件,都有一个对应的event对象
event对象常用属性:
每次调用事件的时候,JS都会默认给这个事件函数加上一个隐藏的参数,这个参数就是event对象。一般来说,event对象是作为事件函数的第一个参数传入的
在使用的时候,可以使用:e、ev、event、a等多可以接收event对象
this
哪个DOM对象(元素节点)调用了this所在的函数,那么this指向的就是哪个DOM对象
在事件函数中,想要使用当前元素节点,尽量使用this
window对象
在JS中,一个浏览器窗口,就是一个window对象
也就是,把窗口看成对象
一个窗口就是一个window对象
这个窗口里面的HTML文档就是一个document对象
document对象是window对象的子对象
window对象及下面location、navigator等子对象,由于都是操作浏览器窗口的,所以我们又称之为 BOM
BOM:browser object module(浏览器 对象 模型)
窗口操作
在JS中,窗口操作常见的有两种:打开窗口、关闭窗口
打开窗口
window.open(url, target)
window可以省略,但一般不省略
open(url, target)
target就是当前界面打开,还是新窗口,与a标签中的target类似
关闭窗口
window.close();
无参数
定时器
在JS中,有两组定时器的实现:
- setTimeout()和clearTimeout()
- setInterval()和clearInterval()
interval:间隔
setTimeout()和clearTimeout
setTimeout()方法,一次性调用函数
clearTimeout()方法,取消执行setTimeout()
setTimeout(code, time);
code可以是一段代码,可以是一个函数,或者函数名
time是时间,单位ms,表示过多久时间才执行code代码
叫delay不是更好?
setInterval()和clearInterval()
setInterval()可以重复调用函数
setInterval(code, delay);
为避免累加,在每次“开始”前,清一下定时器
location对象
在JS中,可以使用window对象下的location子对象来操作当前窗口的URL
window.location.href
window.location.search
window.location.hash
navigator对象
window.navigator.userAgent
获取浏览器的相关信息
document对象
document对象是window对象下面的一个子对象,它操作的是HTML文档里所有的内容
浏览器操作BOM browser
文档操作DOM document
BOM包含DOM
document对象属性
常用的属性:
document.URL
也可以获取当前文档的URL,不可以设置
只不过,window的url不仅可以获取,还可以设置
document.referrer
获取上一个页面的地址
document对象方法
常用的对象方法:
document.write(“内容”);