1. 什么是JavaScript
- JavaScript是被设计用来向HTML页面添加交互行为
- JavaScript是一种脚本语言
- JavaScript由数行可执行计算机代码组成
- JvaScript通常被直接嵌入HTML页面
- JavaScript是一种解释性语言
- 所有的人无需购买许可证均可使用JavaScript
1.1 JavaScript的变量
统一使用var定义
- Array对象
- 数组的特点:
长度可变!数组的长度=最大角标+1
- Boolean对象
- 如果value 不写,那么默认创建的结果为false
1.2 JavaScript数据类型
原始数据类型有:string
/number
/boolean
/null
/undefined
引用数据类型:Array
/Boolean
/Date
/Math
/Number
/String
/ReqExp
注意:JavaScript并不区分浮点数和整数,都是用number来表示。
###1.3 获取元素内容
获取元素:
document.getElementById(“id名称”);
获取元素里面的值
document.getElementById(“id名称”).value;
1.4 JavaScript 语句
// 构造函数
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
// 原型
Person.prototype = {
constructor: Person,
sayName: function() {
return this.name;
}
}
// 实例化
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //输出"Shelby,Count,Van"
alert(person2.friends); //输出"Shelby,Count"
alert(person1.friends === person2.friends); //输出false
alert(person1.sayName === person2.sayName); //输出true
###1.5 JavaScript事件
- onfocus/onblur:聚焦离焦事件,用于表单校验的时候比较合适。
- onclick/ondblclick:鼠标单击和双击事件
- onkeydown/onkeypress:搜索引擎使用较多
- onload:页面加载事件,所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称,那么在html页面中只能写一个。
- onmouseover/onmouseout/onmousemove:购物网站商品详情页。
- onsubmit:表单提交事件 ,有返回值,控制表单是否提交。
- onchange:当用户改变内容的时候使用这个事件(二级联动)
1.6 JavaScript的引入方式
- 内部引入方式
直接将javascript代码写到 - 外部引入方式
需要创建一个.js文件,在里面书写javascript代码,然后在html文件中通过script标签的src属性引入该外部的js文件
2. JS Window
2.1 Window对象的方法
- setInterval():它有一个返回值,主要是提供给clearInterval使用。
- setTimeout():它有一个返回值,主要是提供给clearTimeout使用。
- clearInterval():该方法只能清除由setInterval设置的定时操作
- clearTimeout():该方法只能清除由setTimeout设置的定时操作
2.1.1 使用JS完成页面定时弹出广告的代码
<script type="text/javascript">
var time;
function init(){
//设置显示图片的定时操作
time = setInterval("showAd()",3000);
}
//显示图片的函数
function showAd(){
//获取广告图片的
var imgEl = document.getElementById("img1");
//设置图片的属性(display)让其显示
imgEl.style.display="block";
//清除显示图片的定时操作
clearInterval(time);
//设置隐藏广告图片的定时操作
time = setInterval("hiddenAd()",3000);
}
//书写隐藏广告图片的函数
function hiddenAd(){
//获取广告图片并设置隐藏的属性
2.2 Location对象
Location 对象包含有关当前 URL 的信息。
href:该属性可以完成通过JS代码控制页面的跳转。
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script>
function tiao(){
window.location.href="http://www.itcast.cn";
}
</script>
</head>
<body>
<a href="#" onclick="tiao()">跳转到传智播客首页</a>
</body>
</html>
2.3 History对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History页面代码:
<input type="button" value="返回上一个页面" onclick="javascript:history.back()"/>
go(参数)
参数:-1 返回上一个历史记录页面;-2返回上上一个历史记录页面,1进入下一个历史记录页面。
3. DOM对象
3.1 DOM介绍
- Document:整个html文件都成为一个document文档
- Element:所有的标签都是Element元素
- Attribute:标签里面的属性
- Text:标签中间夹着的内容为text文本
- Node:document、element、attribute、text统称为节点node.
3.2 Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
- 创建文本节点:document.createTextNode()
- 创建元素节点:document.createElement()
3.3 Element对象
我们所认知的html页面中所有的标签都是element元素
//向元素添加新的子节点,作为最后一个子节点。
element.appendChild()
//返回元素的首个子节点。
element.firstChild
//返回元素节点的指定属性值。
element.getAttribute()
//设置或返回元素的内容。
element.innerHTML
//在指定的已有的子节点之前插入新节点。
element.insertBefore()
//返回元素的最后一个子元素。
element.lastChild
//把指定属性设置或更改为指定值。
element.setAttribute()
//从元素中移除子节点。
element.removeChild()
//替换元素中的子节点。
element.replaceChild()
3.4 Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute
3.5 Demo
//我们希望点击一个按钮实现动态添加城市。
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
//1.获取ul元素节点
var ulEle = document.getElementById("ul1");
//2.创建城市文本节点
var textNode = document.createTextNode("深圳");//深圳
//3.创建li元素节点
var liEle = document.createElement("li");//<li></li>
//4.将城市文本节点添加到li元素节点中去
liEle.appendChild(textNode);//<li>深圳</li>
//5.将li添加到ul中去
ulEle.appendChild(liEle);
}
}
</script>
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>