【2】js语法
【2.2.4】数据类型
类型1)字符串var mood = 'happy';
var moood = "happy";
类型2)数值;
var age = 33.24;
类型3)布尔值;
var married = true;
【2.2.5】数组
1)填充方式填充方式1)
var beatles = Array();
var beatles = Array(4);
beatles[0] = "0";
填充方式2)
var beatles = ["0", "1"];
填充方式3)可以填入3种类型的混合数据;
var beatles = ["0", 0, true];
2)二维数组
var lennon = ["0", "1"];
var beatles = [];
beatles[0] = lennon;
3)关联数组:下标是字符串;
var lennon = Array();
lennon["name"]="john";
【2.2.6】对象
var lennon = new Object();
lennon.name = "john";
lennon.year = 1999;
lennon.living = false;
还可以这样:
var lennon = {name:"1", age:2};
【2.6】函数
1)变量作用域
全局变量:可以在脚本的任意位置使用;
局部变量:只可以在声明它的那个函数内部使用;
注意:如果在函数内部不小心使用了全局变量,即使本意是使用局部变量,javascript 还是会认为引用那个全局变量;
2)如何声明全局变量和局部变量:
在某个函数中使用var,那个变量是局部变量;如果没有使用var,则该变量是全局变量;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>p29</title>
</head>
<body>
<script src="p29.js"></script>
</body>
</html>
function square(num) {
total = num * num;
return total;
}
var total = 50;
var number = square(20);
alert(total);
【2.7】对象:由属性和方法组合在一起的数据实体;
var num = 7.1;
var num = Math.round(num);
alert(num);
var current_date = new Date();
var today = cur_date.getDay();
【2.7.2】 宿主对象
1)定义:由浏览器提供的预定义对象被称为宿主对象;
2)宿主对象有:Form, Image 和 Element 等;
补充:宿主的含义: 指为寄生生物提供生存环境的生物;
【3】dom
【3.0】写在前面:
1)5个常用的DOM方法: getElementById, getElmentsByTagName, getElementsByClassName, getAttribute 和 setAttribute 等;
【3.1】 文档: DOM中的 D: document, 把网页文档转换为一个文档对象;
【3.2】对象:DOM中的O:
1)js的3种对象,如下:用户定义对象;由程序员自行创建的对象;
内建对象;内建在js里的对象; 如Array, Math 和 Date;
宿主对象;如 Form, Image 和 Element , window 等;
window对象对应着浏览器窗口本身;这个对象的属性和方法称为 BOM 浏览器对象模型,提供了 windom.open 和 windom.blur 等方法;
【3.3】模型:Model, DOM把一个网页文档当做一棵树;
![](https://i-blog.csdnimg.cn/blog_migrate/0e862378d6cc12592a701610ae19d4c9.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>p34</title>
</head>
<body>
<h1>what to buy</h1>
<p title="a gentel reminder"> dont forget to buy this stuff.</p>
<ul id="purchases">
<li>a tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
<script src="p29.js"></script>
</body>
</html>
【3.4】3种节点类型1)元素节点:dom的原子; 如 <body> <p> <ul>
2)文本节点:<p>元素节点包含的文本 dont forget to buy this stuff 就是文本节点;
3)属性节点:<p>元素中的 title="a gentel reminder" 就是属性节点;
【3.4.4】CSS
cascading style sheet 层叠样式表;
1)设置样式如下:
body {
color:white;
background-color:black;
}2) class属性 和 id属性如下:
![](https://i-blog.csdnimg.cn/blog_migrate/9cdcb023036396269ac425cdddf50e36.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>p34</title>
<style>
body {
color:white;
background-color:black;
}
</style>
<link rel="stylesheet" href="p37.css" />
</head>
<body>
<h1 class="special">what to buy</h1>
<p class="special" title="a gentel reminder"> dont forget to buy this stuff.</p>
<ul id="purchase">
<li>a tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
<script src="p29.js"></script>
</body>
</html>
body {
color:white;
background-color:black;
}
.special {
font-style:italic;
}
h1.special {
text-transform:uppercase;
}
#purchase {
border:1px solid white;
background-color:#333;
color:#ccc;
padding:1em;
}
#purchase {
font-weight:bold;
}
【3.4.5】获取元素:有3种dom方法获取元素节点,通过元素id, 标签名字和类名类获取;
1) getElementById
![](https://i-blog.csdnimg.cn/blog_migrate/b069d42a373b8ba463d0fead1ba3173e.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>p39</title>
<link rel="stylesheet" href="p39.css" />
</head>
<body>
<h1 class="special">what to buy</h1>
<p class="special" title="a gentel reminder"> dont forget to buy this stuff.</p>
<ul id="purchase">
<li>a tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
<script>
alert(typeof document.getElementById("purchase"));
</script>
</body>
</html>
2)getElementsByTagName 返回一个对象数组;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>p39</title>
<link rel="stylesheet" href="p39.css" />
</head>
<body>
<h1 class="special">what to buy</h1>
<p class="special" title="a gentel reminder"> dont forget to buy this stuff.</p>
<ul id="purchase">
<li>a tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
<script>
alert(typeof document.getElementById("purchase"));
var items = document.getElementsByTagName("li");
for (var i=0; i<items.length; i++) {
alert(typeof items[i])
}
</script>
</body>
</html>
2.2)如果想知道某个元素包含多少个列表项,用如下方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>p39</title>
<link rel="stylesheet" href="p39.css" />
</head>
<body>
<h1 class="special">what to buy</h1>
<p class="special" title="a gentel reminder"> dont forget to buy this stuff.</p>
<ul id="purchase">
<li>a tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
<script>
alert(typeof document.getElementById("purchase"));
var items = document.getElementsByTagName("li");
for (var i=0; i<items.length; i++) {
alert(typeof items[i])
}
items = document.getElementsByTagName("*");
alert(items.length);
</script>
</body>
</html>
3)getElementsByClassName: 通过类名来获取元素;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>p39</title>
<link rel="stylesheet" href="p39.css" />
</head>
<body>
<h1 class="special">what to buy</h1>
<p class="special" title="a gentel reminder"> dont forget to buy this stuff.</p>
<ul id="purchase">
<li>a tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
<script src="p42.js">
</script>
</body>
</html>
// 找出node 的名为 className的元素;
function getElementsByClassName(node, className) {
if (node.getElementsByClassName) {
return node.getElementsByClassName(className);
} else {
var results = new Array();
var elements = node.getElementsByTagName("*");
for (var i=0; i<elements.length; i++) {
if (elements[i].className.indexOf(className) != -1) {
results[results.length] = element[i];
}
}
}
return results;
}
var shopping = document.getElementById("purchase");
var sales = getElementsByClassName(shopping, "sale");
alert(sales.length);
【3.5】获取和设置属性
【3.5.1】getAttribute 方法;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>p44</title>
<link rel="stylesheet" href="p39.css" />
</head>
<body>
<h1 class="special">what to buy</h1>
<p class="special" title="a gentel reminder"> dont forget to buy this stuff.</p>
<ul id="purchase">
<li>a tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
<script>
var param = document.getElementsByTagName("p");
for (var i=0; i<param.length; i++) {
var title_text = param[i].getAttribute("title"); // 获取属性
if (title_text) alert(title_text);
}
</script>
</body>
</html>
【3.5.2】setAttribute 设置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>p45</title>
<link rel="stylesheet" href="p39.css" />
</head>
<body>
<h1 class="special">what to buy</h1>
<p class="special" title="a gentel reminder"> dont forget to buy this stuff.</p>
<ul id="purchase">
<li>a tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
<script>
var param = document.getElementsByTagName("p");
for (var i=0; i<param.length; i++) {
var title_text = param[i].getAttribute("title"); // 获取属性
if (title_text){
param[i].setAttribute("title", "brand new title text"); // 设置属性
alert(param[i].getAttribute("title"));
}
}
</script>
</body>
</html>
补充:查找带有多个类名的元素,中间使用空格分隔,如下:
document.getElementsByClassName("class1 class2");
【4】案例研究:javascript图片库
【4.1】标记![](https://i-blog.csdnimg.cn/blog_migrate/e7ce8a4765d2e00ca328302cf73d51e3.png)
(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li> <a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
</li>
<li> <a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a>
</li>
<li> <a href="images/rose.jpg" title="A red, red rose">Rose</a>
</li>
<li> <a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
</li>
</ul>
</body>
</html>
【4.2】 javascript【4.2.1】 非dom解决方案
1)改变属性值的方法,如下:
element.value = "the new value";
element.setAttribute("value", "the new value");
2)运行结果:
![](https://i-blog.csdnimg.cn/blog_migrate/de5a883f9add0a716595cfcf1f89eea9.png)
(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li> <a href="images/fireworks.jpg" οnclick="showPic(this);return false"
title="A fireworks display">Fireworks</a>
</li>
<li> <a href="images/coffee.jpg" οnclick="showPic(this);return false"
title="A cup of black coffee">Coffee</a>
</li>
<li> <a href="images/rose.jpg" οnclick="showPic(this);return false"
title="A red, red rose">Rose</a>
</li>
<li> <a href="images/bigben.jpg" οnclick="showPic(this);return false"
title="The famous clock">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="imges/placeholder.jpg" alt="my image gallery" />
<script>
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
}
</script>
</body>
</html>
分析: 在 onclick 事件处理函数所触发的 javascript代码里增加一条return false , 就可以防止用户被带到 目标链接窗口;,即不访问href属性值的url地址;
【4.4】对这个函数进行扩展
【4.4.1】childNodes属性: 获取body元素的全部子元素;
var body_element = document.getElementsByTagName("body")[0];
body_element.childNodes 获取body元素的全部子元素;
function countBodyChildren() {
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
}
window.onload = countBodyChildren;
我想让 countBodyChildren 这个函数在页面加载时就执行, 这需要使用 onload 事件处理函数;
![](https://i-blog.csdnimg.cn/blog_migrate/fc220ef8ce913980f8e911df03e18b42.png)
(3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li> <a href="images/fireworks.jpg" οnclick="showPic(this);return false"
title="A fireworks display">Fireworks</a>
</li>
<li> <a href="images/coffee.jpg" οnclick="showPic(this);return false"
title="A cup of black coffee">Coffee</a>
</li>
<li> <a href="images/rose.jpg" οnclick="showPic(this);return false"
title="A red, red rose">Rose</a>
</li>
<li> <a href="images/bigben.jpg" οnclick="showPic(this);return false"
title="The famous clock">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="imges/placeholder.jpg" alt="my image gallery" />
<script>
function countBodyChildren() {
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
}
window.onload = countBodyChildren;
</script>
</body>
</html>
【4.4.2】nodeType属性
1)childNodes属性返回的数组包含所有类型的节点,不仅仅是元素节点;
2)nodeType总共有12种可取值,但其中仅3种具有使用价值:
元素节点的nodeType属性值为1;
属性节点的nodeType属性值为2;
文本节点的nodeType属性值为3;
【4.4.5】nodeValue属性
1)改变一个文本节点的值,使用dom提供的 nodeValue属性,来得到节点的值;
【4.4.6】firstChild 和 lastChild 属性:第一个元素和最后一个元素;
node.firstChild 等价于 node.childNodes[0];
node.lastChild 等价于 node。childNodes[node.childNodes.length-1]
【4.4.7】利用 nodeValue属性刷新这段描述
1)
![](https://i-blog.csdnimg.cn/blog_migrate/b7f9fad25043edcd8b2d548e98fdd5f2.png)
(4)
源码:
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
// 利用nodeValue属性刷新这段描述
description.firstChild.nodeValue = text;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/fireworks.jpg" title="A fireworks display" οnclick="showPic(this); return false;">Fireworks</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" οnclick="showPic(this); return false;">Coffee</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose" οnclick="showPic(this); return false;">Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock" οnclick="showPic(this); return false;">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
【5】最佳实践
【5.1】
1)js使用window对象的open()方法来创建新的浏览器窗口,
window.open(url, name, features),
【荔枝】
function popup(url){
window.open(url, "popup", "width=320,height=480");
}
【5.2.2】内嵌的事件处理函数
<a href="#" οnclick="popup('http://www.baidu.com')">;
return false;"> example </a>
更加简单的写法是:
<a href="https://www.baidu.com/" οnclick="popUp(this.href);return false;">baidu</a>
【5.4】分离js 与 html;
1)当window对象触发onload事件时,document对象已经存在;
【html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Example</title>
<script type="text/JavaScript" src="p69.js">
</script>
</head>
<body>
<a href="https://www.baidu.com/" class="popup">baidu</a>
</body>
</html>
【js】
window.onload = prepareLinks;
function prepareLinks() {
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
if (links[i].getAttribute("class") == "popup") {
links[i].onclick = function() {
popUp(this.getAttribute("href"));
return false;
}
}
}
}
function popUp(url){
window.open(url, "baidu", "width=320, height=480");
}
2)脚本压缩工具:
工具1) JSMin
工具2)YUI Compressor
工具3)Closure Compiler
【6】图片库改进版
【6.3.1】添加事件处理函数
(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" >Coffee</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
// 改变占位符的图片和标题
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
// 添加事件处理函数,当点击的时候
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}
// 添加函数func 到 window.onload 函数的执行列表;
// onload 函数会在 document加载完毕后执行;
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
【6.3.2】共享onload事件
1)addLoadEvent函数: 计划在页面加载完毕时执行传入参数表示的函数;
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
2)
![](https://i-blog.csdnimg.cn/blog_migrate/fe11d8a569aab8e0a9f6562102a4d8c1.png)
(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" >
<img src="images/thumbnail_coffee.jpg" alt="Coffee" />
</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">
<img src="images/thumbnail_rose.jpg" alt="Rose" />
</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">
<img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
// 加载函数
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
// 具体点击事件的响应函数
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}
// 把函数func 添加到 页面加载完毕时执行的函数列表中;
// window.onload 用于绑定点击事件与响应函数;
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
【6.5】 js的优化版本
// 【荔枝】用到了firstChild 和 nodeType的js
// 鼠标点击响应函数
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
// 用到了 firstChild 和 nodeType;
if (description.firstChild.nodeType == 3) { // 3 表示文本节点
description.firstChild.nodeValue = text;
}
return false;
}
// 被加载的函数
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick; // 不推荐使用 onkeypress 属性
}
}
// 在页面加载完成后,被加载函数。
//
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);