参考视频:【极客学院】Web前端开发教学 - 第一部分:H5+CSS+JS
文章目录
DOM对象
HTML DOM
网页被加载时,浏览器会创建网页的文档对象模型DOM(Document Object Model)。
操作HTML
- 改变HTML输出流:通过
write()
方法:
<script>
document.write("hello");
</script>
不要在文档加载完成之后使用,会覆盖文档:
<script>
function f(str){
document.write(str);
}
</script>
<h1>内容1</h1>
<button onclick="f('内容2')">按钮</button>
- 代码结果(初始状态):
- 代码结果(点击按钮):
- 获取HTML元素:通过
get
相关方法
- 获取Tag(标签名)是"p"的元素:
document.getElementsByTagName("p");
- 获取Class(类名)是"c1"的元素:
document.getElementsByClassName("c1");
- 获取id是"i1"的元素:
document.getElementById("i1");
- 获取name是"p1"的元素:
<p name="p1"></p>
<p name="p1"></p> //同名
<script>
function getName(){
var count = document.getElementsByName("p1");
alert(count.length); //输出变量个数 结果为2
}
getName(); //调用函数
</script>
可以取到多个同名的元素。
其它get方法也都可以获取多个同值元素。
可以使用下标来索引获取到的集合:
<p name="p1"></p>
<p name="p1"></p> //同名
<script>
function getName(){
var count = document.getElementsByName("p1");
//alert(count.length); //输出变量个数
var c1 = count[0];
var c2 = count[1]; //使用下标操作
}
//getName(); //调用函数
</script>
- 改变HTML内容:通过
innerHTML
属性
<script>
function f(str){
var nv = document.getElementById("p1"); //获取元素
nv.innerHTML = str; //改变内容
}
</script>
<p id="p1">内容1</p>
<button onclick="f('内容2')">按钮</button>
- 代码结果(初始状态):
- 代码结果(点击按钮):
- 改变HTML属性:通过
.
访问属性
<script>
function f(){
document.getElementById("i1").src="image/2.jpg"; //修改属性值
}
</script>
<button onclick="f()">按钮</button><br>
<img id="i1" src="image/1.jpg">
- 代码结果(初始):
- 代码结果(点击按钮):
- 获取和设置HTML属性:
getAttribute()、setAttribute()
<a id="a1" title="t1">hello</a>
<script>
function getAttr(){
var anode = document.getElementById("a1");
var aattr = anode.getAttribute("titie"); //值为t1
anode.setAttribute("title", "t2"); //title值被修改为t2
}
</script>
- 获取父子节点:通过
childNodes、parentNode
属性
<!--父子节点:li是ul的子节点,ul是li的父节点-->
<ul>
<li>1</li>
</ul>
<script>
function getNode(){
var node = document.getElementsByTagName("ul");
var child = node[0].childNodes; //第0个该元素的子节点集合
alert(child.length); //长度,计算方式包含了空区域
alert(child[0].nodeType);
var node2 = document.getElementsByTagName("li");
var parent = node2[0].parentNode;
alert(parent.nodeName); //结果:UL
}
getNode();
</script>
- 创建元素:
createElement()
<script>
function create(){
var input = document.createElement("input"); //创建元素
input.type = "button"; //添加属性方式1:成员运算符.
input.setAttribute("value", "按钮"); //添加属性方式2:setAttribute
var body = document.body; //获取body
body.appendChild(input); //添加
}
create();
</script>
为当前HTML界面添加了按钮。
- 创建文本:
createTextNode()
<script>
function create(){
var h=document.createElement("h1") //创建元素h1
var t=document.createTextNode("Hello World"); //创建内容
h.appendChild(t);
//h.innerHTML = "Hello World"; //等价写法
var body = document.body;
body.append(h);
}
create();
</script>
为当前HTML界面添加了h1标题,内容为"hello world"。
- 插入元素:
insertBefore()
<div id="d1">
<p id="p1">内容</p>
</div>
<script>
function insert(){
var d1 = document.getElementById("d1");
var p1 = document.getElementById("p1");
var node = document.createElement("p"); //创建p元素
node.innerHTML = "添加";
d1.insertBefore(node, p1); //在当前对象中,将参数1,插入到参数2的前面
}
insert();
</script
在div标签下,p标签前面,新插入一个p标签。内容为innerHTML中设置的内容。
- 删除元素:
removeChild()
<div id="d1">
<p id="p1">内容</p>
</div>
<script>
function remove(){
var d = document.getElementById("d1");
d.removeChild(d.childNodes[1]); //删除子节点,索引1
}
remove();
</script>
p标签和内容被删除。
- 网页尺寸
<script>
function getSize(){
var width = document.documentElement.offsetWidth; //网页宽度
var height = document.documentElement.offsetHeight; //网页长度
}
getSize();
</script>
offsetHeight
不包含滚动条。
scrollHeight
包含滚动条。
操作CSS
获取HTML元素对象后,使用.style
获取其CSS对象。
随后的对象可以使用.
访问其CSS属性。
<script>
function f(){
document.getElementById("d1").style.background = "blue";
}
</script>
<style type="text/css">
div{
background-color: #b3d4fc;
width: 100px;
height: 100px;
}
</style>
<button onclick="f()">按钮</button><br>
<div id="d1">
content
</div>
- 代码结果(初始):
- 代码结果(点击按钮):
EventListener
事件句柄/监听器。
- 添加:addEventListener()
<button id="b1">按钮</button>
<script>
document.getElementById("b1").addEventListener("click", function () {
alert("hello")
});
</script>
先后顺序敏感,JS脚本放在button后面。
参数1:"click"
,表示为点击触发。
参数2:function
,调用一个函数,可以现场定义。
代码结果(点击按钮):
- 一种逻辑清楚的写法
<script>
function f(){ //定义函数
alert("hello");
}
var bt = document.getElementById("b1"); //获取对象
bt.addEventListener("click", f); //调用函数
</script>
第一种写法直接定义句柄,没有为获取元素创建对象。并且直接在创建时直接定义了函数体。类似Java匿名类。
第二种写法逻辑更清楚,代码可读性较强。更方便代码复用。
- 添加句柄具有不覆盖的特性
<button id="b1">按钮</button>
<script>
function f(str){
alert(str);
}
var bt = document.getElementById("b1");
bt.addEventListener("click", f("效果1"));
bt.addEventListener("click", f("效果2"));
</script>
- 代码结果(初始):
- 代码结果(点击确定后):
- 删除:removeEventListener()
<button id="b1">按钮</button>
<script>
function f(str){
alert(str);
}
var bt = document.getElementById("b1");
bt.addEventListener("click", f("效果1"));
bt.addEventListener("click", f("效果2"));
bt.removeEventListener("click", f("效果2"));
</script>
参数和add相同,移除单个句柄,
例子中移除了效果2,但是没有移除效果1。
事件
常用键盘事件
事件 | 描述 |
---|---|
onkeydown | 当按下按键时运行脚本 |
onkeypress | 当按下并松开按键时运行脚本 |
onkeyup | 当松开按键时运行脚本 |
常用鼠标事件
事件 | 描述 |
---|---|
onClick | 鼠标单击 |
onMouseOver | 鼠标经过 |
onMouseOut | 鼠标移出 |
onChange | 文本内容改变 |
onSelect | 文本内容选中 |
onFocus | 光标聚集 |
onBlur | 光标移出 |
onLoad | 网页加载 |
onUnload | 网页关闭 |
在HTML相应元素中使用以上事件属性,参数取值为JavaScript函数,函数内部可以进行很多操作,例如**提示、修改值、显示结果(背景颜色 文本数值)**等等。
用法详解
- 事件:
onClick
鼠标单击
<button onclick="f()">按钮</button>
<script>
function f(){
alert("hello");
}
</script>
- 代码结果(单击按钮):
- 事件:
onMouseOver
鼠标经过、onMouseOut
鼠标移出
<!--JavaScript:定义函数-->
<script>
//obj为对象名,调用时传入this关键字
//text为字符串,调用时传入字符串参数
function f(obj, text){
obj.innerHTML = text; //内置HTML显示,设置为参数text的值
}
</script>
<!--CSS:定义样式-->
<style type="text/css">
.d1{
width: 100px;
height: 100px;
background-color: #b3d4fc;
}
</style>
<!--HTML:定义内容-->
<div class="d1" onmouseover="f(this, 'in')" onmouseout="f(this, 'out')">
<!--字符串参数使用单引号,防止符号冲突-->
first
</div>
- 代码结果(初始):
- 代码结果(鼠标移入):
- 代码结果(鼠标移出):
- 事件:
onChange
文本内容改变
<script>
function f(obj){
alert("already changed!");
}
</script>
<form>
<input type="text" onchange="f(this)">
</form>
代码结果(改变输入框内容):
- 事件:
onSelect
文本内容选中
<script>
function f(obj){
obj.style.background="red"; //修改背景颜色
}
</script>
<form>
<input type="text">
</br>
<input type="text" onselect="f(this)">
</form>
- 代码结果(输入内容后,选中):
- 事件:
onFocus
光标聚集、onBlur
光标移出
<script>
function f(obj){
obj.style.background="red"; //修改背景颜色
}
function g(obj){
obj.style.background="blue"; //修改背景颜色
}
</script>
<form>
<input type="text">
</br>
<input type="text" onfocus="f(this)" onblur="g(this)">
</form>
- 代码结果(单击输入框):
- 代码结果(鼠标移出):
- 事件:
onLoad
网页加载、onUnload
网页关闭
在body
标签使用。
<script>
function f(str){
alert(str);
}
</script>
<body onload="f('打开')" onunload="f('关闭')">
</body>
- 代码结果(打开网页):
事件流
事件流:描述页面中接受事件的顺序。 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档)。
事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接受事件。
事件处理
HTML级
定义:直接添加到HTML文件结构中。
顺序:不敏感(两块代码区域可以互换,无所谓先后)。
<script>
function f() {
alert("hello");
}
</script>
<button onclick="f()">按钮</button>
优点:简单易用。
缺点:修改函数名或参数列表,就要在HTML中所有调用处修改。
DOM0级
定义:把一个函数赋值给一个事件处理程序属性。
顺序:敏感。
<div>
<button id="b1">按钮</button>
</div>
<script>
var bt = document.getElementById("b1");
bt.onclick = function () {
alert("hello");
}
bt.onclick = function () {
alert("world");
} //覆盖
bt.onclick = null; //清空
</script>
优点:在HTML文档中去掉调用过程,修改方便。
缺点:事件处理会互相覆盖。
DOM2级
定义:使用句柄。
顺序:敏感。
<button id="b1">按钮</button>
<script>
var bt = document.getElementById("b1");
bt.addEventListener("click", function () {
alert("hello");
})
bt.addEventListener("click", function () {
alert("world"); //不会覆盖
})
//bt.removeEventListener("click", f); //移除
</script>
优点:句柄不会互相覆盖,依次处理。
IE级
定义:IE8之前使用。
<button id="b1">按钮</button>
<script>
function f() {
alert("hello");
}
var bt = document.getElementById("b1");
if(bt.addEventListener) //如果支持DOM2级则执行
bt.addEventListener("click", f);
else if(bt.attachEvent){ //如果支持IE级则执行
bt.attachEvent("onclick", f);
else //都不支持,使用DOM0级
bt.onclick = f();
</script>
事件对象
在触发DOM事件时都会产生一个事件对象event。
- type:获取事件类型
<button id="b1">按钮</button>
<script>
function f(e){
alert(e.type); //获取事件类型
}
//调用时没有显式为函数添加参数
document.getElementById("b1").addEventListener("click", f); //结果:click
document.getElementById("b1").addEventListener("mouseover", f); //结果:mouseover
</script>
- target:获取事件目标
<button id="b1">按钮</button>
<script>
function f(e){
alert(e.target); //获取事件目标
}
document.getElementById("b1").addEventListener("click", f); //结果:[object HTMLButtonElement]
</script>
- stopPropagation():阻止事件冒泡
- 事件冒泡:
<div id="d1">
<button id="b1">按钮</button>
</div>
<script>
function f(e){
alert(e.target);
}
document.getElementById("b1").addEventListener("click", f); //事件1 基于button
document.getElementById("d1").addEventListener("click", f); //事件2 基于button外层div
</script>
I. 代码结果(点击按钮):
II. 代码结果(点击确定):
点击按钮时,会先触发事件1,再触发事件2,称为事件冒泡。
- 阻止事件冒泡(函数中加一行代码):
<div id="d1">
<button id="b1">按钮</button>
</div>
<script>
function f(e){
alert(e.target);
e.stopPropagation(); //阻止事件冒泡
}
document.getElementById("b1").addEventListener("click", f); //事件1 基于button
document.getElementById("d1").addEventListener("click", f); //事件2 基于button外层div
</script>
点击确定后不会再弹出冒泡。
- preventDefault():阻止默认行为
<!--href取值为默认行为-->
<a id="a1" href="http://www.baidu.com">链接</a>
<script>
function f(e){
e.preventDefault(); //阻止默认行为
}
document.getElementById("a1").addEventListener("click", f);
</script>
点击链接将不再跳转。
对象
面向对象
一切事物皆对象
对象具有封装和继承特性
信息隐藏
定义对象
- 使用Object:
/*定义对象*/
var p = new Object(); //所有类都是Object的子类
/*定义属性和方法*/
p.name = "abc";
p.age = 30;
不推荐使用new,加大内存消耗,减慢网页加载速度。
- 使用字典:
/*定义对象、属性和方法*/
var q = {name:"abc", age:30};
需要初始化。
- 使用变量:
/*对象*/
var Person={
/*属性*/
name:"abc",
age:30,
/*方法*/
echo:function(str){
alert(str);
}
}
需要初始化。
- 使用函数(构造器):
/*contructor*/
function Person(nameText, ageText) {
this.name = nameText;
this.age = ageText;
}
var p = new Person("abc", 30);
document.write(p.name);
document.write(p.age);
方便复用,推荐使用。后续可以通过原型来添加属性和方法。
- 使用函数(原型):
/*prototype*/
function Person(){
}
Person.prototype={
name:"abc",
age:30,
echo:function(str){
alert(str);
}
}
var p = new Person();
/*prototype*/
function Person(){
}
Person.prototype.echo = function(str){
alert(str);
}
var p = new Person();
- 使用函数(不使用new):
function Person(){
var _this = {};
_this.echo = function(){
alert("Person");
}
return _this;
}
继承
- 继承:
function Person(){ //父类
}
Person.prototype.echo = function(){ //父类方法,使用原型定义
alert("Persion");
}
function Student(){ //子类
}
Student.prototype = new Person(); //继承父类
var s = new Student();
s.echo(); //继承父类方法,可以调用
- 重写:
function Person(){ //父类
}
Person.prototype.echo = function(){ //父类方法,使用原型定义
alert("Person");
}
function Student(){ //子类
}
Student.prototype = new Person(); //继承父类
Student.prototype.echo = function(){ //重写父类方法
alert("Student");
}
var s = new Student();
s.echo(); //结果为子类重写方法
- 不使用new方式定义函数的继承:
function Person(){
var _this = {};
_this.echo = function(){
alert("Person");
}
return _this;
}
function Student(){
var _this = Person();
return _this;
}
var s = Student();
s.echo();
- 不使用new方式定义函数的重写:
function Person(){
var _this = {};
_this.echo = function(){
alert("Person");
}
return _this;
}
function Student(){
var _this = Person();
_this.echo = function(){ //重写方法
alert("Student");
}
return _this;
}
var s = Student();
s.echo();
封装
(
function(){
var name = "abc";
var age = 30;
}()
);
内置对象
字符串String
参考文档:JavaScript String 对象
和Java大致相似。
- 定义与索引:
/*静态定义*/
var str1 = "111"; //双引号
var str2 = '222'; //单引号,有冲突必须使用单引号
/*动态定义*/
var str3 = new String();
var str4 = new String("444");
/*索引*/
document.write(str1[0]);
- 常用属性与方法:
str = "123,456,789";
/*常用属性*/
document.write(str.length); //长度
/*常用方法*/
document.write(str.charAt(0)); //索引,同Java。但是多了一个通过数组方式索引的方式str[0]
document.write(str.indexOf("1")); //模式匹配(查找子串),成功:返回索引,失败:返回-1
document.write(str.match("1")); //模式匹配(查找子串),成功:返回参数值,失败:返回null
document.write(str.replace("1","2")); //字符串替换,将参数1替换为参数2,只替换模式匹配结果中的第一个
document.write(str.toUpperCase()); //小写变大写
document.write(str.toLowerCase()); //大写变小写
document.write(str.concat("1", "2")); //字符串拼接
var split = str.split(","); //以参数为分隔符,返回分割结果,列表形式
日期Date
参考文档:JavaScript Date 对象
- 定义:
var dt = new Date();
document.write(dt);
- 代码结果:
- 常用方法:
数组Array
参考文档:JavaScript Array 对象
/*定义*/
var arr1 = [1, 2.5, "3"];
var arr2 = [5, 6, 7];
/*索引*/
document.write(arr1[0]);
/*常用属性*/
document.write(arr1.length); //长度
/*常用方法*/
arr1.sort(); //排序 按照字母顺序 如果需要按数值大小需要接收参数函数
arr1.push("4"); //结尾添加元素 或可用arr1[arr1.length] = 4
arr1.reverse(); //翻转
arr1.concat(arr2); //拼接
数学Math(静态类)
参考文档:JavaScript Math 对象
- 方法简介:
var a1 = Math.random(); //随机数 从0-1
var a2 = Math.max(1, 2, 3); //最大值
var a3 = Math.round(1.5); //取整四舍五入 向上有ceil() 向下有floor()
var a4 = Math.abs(-1); //绝对值
浏览器对象BOM
Window对象
参考文档:JS window对象详解
指当前的浏览器窗口,BOM的核心。
所有JS全局对象函数和变量都是window
对象的成员。
document
也是window
的属性:
document.write("1"); //省略window
window.document.write("1"); //实际上
- 获取长宽:
var h1 = window.height;
var h2 = window.innerHeight;
var h3 = window.outerHeight;
- 打开关闭页面:
window.open("http://www.baidu.com"); //打开新页面
window.open("http://www.baidu.com", "window_name", "height = 200, width = 200") //url,名称,样式
window.close(); //关闭当前页面
计时器
在设定的时间间隔后实现代码。
可以用来使代码一直执行(间隔执行)、延迟代码执行(延迟执行)等。
- 间隔执行:
setInterval()
:
<h1 id="h1"></h1>
<script>
function f(){
var d = new Date(); //日期
var s = d.toLocaleTimeString(); //字符串
document.getElementById("h1").innerHTML = s; //更改HTML内容
}
var time = setInterval(f, 1000); //每间隔1000ms,执行一次函数f
</script>
代码结果:每间隔1000ms执行一次输出时间。
- 停止:
clearInterval()
:
clearInterval(time); //参数是之前定义setInterval的变量
- 延迟执行:
setTimeout()
var delay = setTimeout(f, 3000); //延迟3000ms,执行一次函数f
- 停止:
clearTimeout()
clearTimeout(delay); //清除延迟
- 例:设置一个每3秒调用一次自己的函数
<script>
function myalert(){
alert("!");
win = setTimeout(function () {
myalert();
}, 3000);
}
myalert();
</script>
history对象
windows.history
对象,包含浏览器历史url的集合。
- 跳转:
history.go(1); //前进一个页面
history.go(-1); //后退一个页面
- 跳转:后退一个界面:
history.back();
- 跳转:前进一个界面:
history.forward();
- 测试:
I. index.html
<a href="index2.html">链接</a>
<button onclick="goForward()">按钮</button>
<script>
function goForward() {
history.forward(); //前进到下一个页面
}
</script>
II. index2.html
<button id="b1" onclick="goBack()">按钮</button>
<script>
function goBack() {
history.back(); //回退到上一个界面
}
</script>
index通过链接跳转到index2,index2通过按钮退回到index,index通过按钮前进到index2。
location对象
windows.location
对象,获取当前页面的url,也可以将浏览器重定向到新的页面。
var name = location.hostname; //web主机域名
var path = location.pathname; //web的路径和文件名
var port = location.port; //web主机端口
var prot = location.protocol; //web协议
var href = location.href; //返回url
location.assign("index2.html"); //加载其他文档
//可以写为window.location
//window可省略
screen对象
windows.screen
对象,包含用户屏幕的信息。做屏幕适配常用。
var height = screen.height; //宽高
var width = screen.width;
var aheight = screen.availHeight; //可用宽高
var awidth = screen.availWidth;