JavaScript DOM编程艺术第二版摘要

最新推荐文章于 2022-07-18 19:30:07 发布

我叫阿狸猫

最新推荐文章于 2022-07-18 19:30:07 发布

阅读量810

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/world_java/article/details/8553017

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.基础语法

var mood="happy",age=20;
//等同于
var mood,age;
mood = "happy";
age=20;

2.JavaScript语法不允许变量名中包含空格或标点符号(美元符号"$"例外)

var my mood = "happy";//这样写是错误的

3.JavaScript变量名允许包含字母,数字,下划线(但第一个字符不允许是数字)。为了让比较长的变量名更容易阅读,可以在变量名中的适当位置插入下划线,例如:

var my_mood = "happy";

另一种方式是使用驼峰格式(camel case),删除中间的空白(下划线),后面的每个新单词改用大写字符开头:

var myMood = "happy";

通常驼峰格式是函数名,方法名和对象属性名命名的首选格式。

4.必须明确类型声明的语言称为强类型(strongly typed)语言。JavaScript不需要进行类型声明,因此它是一种弱类型(weakly typed)语言。
5.数组:

在JavaScript中,数组可以用关键字Array声明。声明数组的同时还可以指定数组的初始元素个数,也就是这个数组的长度(length):

var beatles = Array(4);

如果不知道数组的长度,也可以不声明

var beatles = Array();

如果需要向数组中添加元素

array[index] = element;

还有一种相对简单的方式:在声明数组的同时对它进行填充。这种方式要求用逗号把各个元素隔开:

var beatles = Array("John","Paul","George","Ringo");

上面这条语句会为每个元素自动分配一个小标:第一个下标是0,第二个是1,以此类推。

还有一种甚至用不着明确地表明我们是在创建数组。

var lennon = ["John",1940,false];

数组的元素的值还可以是另一个数组的元素。例如:

var beatles = [];
var names = ["xxc1","xxc2","xxc3"];
beatles[0] = names[2];

数组还可以包含其他的数组!数组中的任何一个元素都可以把一个数组作为它的值:

var beatles = [];
var names = ["xxc1","xxc2","xxc3"];
beatles[0] = names;//取值的话beatles[0][0]--->xxc1

var lennon = Array();
lennon["name"] = "John";
lennon["year"] = 1940;
lennon["living"] = false;
alert(lennon.length);//返回的是0
lennon[0]="xxc";
alert(lennon.length);//返回的是1

像以上这样的数组叫做关联数组。由于可以使用字符串来代替数字值,因而代码更具有可读性。但是,这种用法并不是一个好习惯,不推荐使用。本质上,在创建关联数组时,你创建的是Array对象的属性。在JavaScript中,所有的变量实际上都是某种类型的对象。比如,一个布尔值就是一个Boolean类型的对象,一个数组就是一个Array类型的对象。在上面这个例子中,你实际上是给lennon数组添加了name,year,living三个属性。理想情况下,你不应该修改Array对象的属性,而应该使用通用的对象(Object)。

6.对象:

一般的声明对象

var lennon = Object();
lennon.name = "xxc";
lennon.year = 1943;
lennon.living = true;

创建对象还有一种更简洁的语法,即花括号法:

{propertyName:value,propertyName:value}

var lennon = {name:"xxc",year:1943,living:true};
alert(lennon.living);//true

7.首先区分if(a==1){}和if(a=1){}的区别,前者是比较,后者是赋值,大部分情况下后者都是true,但是当if(a=false){alert("111");}是不会执行alert的代码的。

8.""==false 返回的是true 因为相等操作符==认为空字符串与false的含义相同。如果需要进行严格比较,就要使用另一种(===)。这个全等操作符会执行严格的比较,不仅比较值,而且会比较变量的类型。(!==也是如此)

if(""==false){
	alert("ssss");//执行
}
if(""===false){
	alert("ssss");//不执行   这样就是false,因为===不仅比较值,而且还会比较类型,返回false的原因是===还比较了类型   
}

9.变量的作用域：

如果在某个函数中使用了var,那个变量就将被视为一个局部变量,它只存在于这个函数的上下文中;反之,如果没有使用var,那个变量就将被视为一个全局变量。

var total = 50;
var number = square(20);
	alert(total);
function square(num){
	total = num*num;
	return total;//返回400
}

二.DOM

JavaScript语言里的对象可以分为三种类型：

（1）用户定义对象(user-defined object)：由程序员自行创建的对象。

（2）内建对象(native object)：内建在JavaScript语言里的对象,如Array,Math和Date等。

（3）宿主对象(host object)：由浏览器提供的对象。

有3种DOM方法可获取元素节点,分别是通过元素ID,通过标签名字和通过类名字来获取。

（1）getElementById()

（2）getElementsByTagName() 返回的是一个数组,即使在整个文档里这个标签只有一个元素,getElementsByName()返回的也是一个数组,长度为1

getElementsByTagName允许把一个通配符作为它的参数,而这意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。

通配符（星号字符"*"）必须放在引号里,这是为了让通配符与乘法操作符有所区别。如果你想知道某份文档里总共有多少个元素节点可以这么做：

alert(document.getElementsByTagName("*").length);

例如想知道以下代码table标签中子标签<tr>的个数(不会包含嵌套子标签)

<script type="text/javascript">
	alert(document.getElementById("table").getElementsByTagName("tr").length);//返回的是3,因为有3个tr标签
</script>
<table id="table">
    <tr>
    	<td></td>
    </tr>
    <tr></tr>
    <tr></tr>
</table>

（3）getElementsByClassName()

HTML5 DOM中新增的方法。这个方法让我们能够通过class属性中的类名来访问元素。但是需要注意的是,由于这个方法比较新,某些DOM实现里可能还没有。

这个方法的返回值与getElementsByTagName()类似,都是一个具有相同类名的元素的数组。

例如：

document.getElementsByClassName("xxc").length;//获取class属性等于xxc的标签的个数

使用这个方法还可以查找那些带有多个类名的元素。要指定多个类名,只要在字符串中用空格分隔类名即可。例如：

<li class="sale important">Milk</li>

获取这个标签只需要：

alert(document.getElementsByClassName("important sale"));//里面的参数顺序颠倒无所谓。就算再多类名也无所谓。

组合使用getElementsByClassName和getElementById。例如：如果想要获取在id为"purchases"的元素中包含多少个类名包含"sale"的子元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<script type="text/javascript">
		window.οnlοad=function(){
			var shopping = document.getElementById("purchases");
			var sales = shopping.getElementsByClassName("important sale");
			alert(sales.length);//返回1
		}
	</script>
  </head>
  <body>
  	<h1>What to buy</h1>
  	<p title="a gentle reminder">Don't 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>
  </body>
</html>

当我们检查某项数据是否是null值时候,我们其实是在检查它是否存在。if(something)与if(something != null)完全等价。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<script type="text/javascript">
		window.οnlοad=function(){
			document.getElementsByClassName("sale")[0].setAttribute("title","xxc");
			alert(document.getElementsByClassName("sale")[0].title);
		}
	</script>
  </head>
  <body>
  	<h1>What to buy</h1>
  	<p title="a gentle reminder">Don't 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>
  </body>
</html>

上面这段代码先从文档里获取class=sale数组的第一个元素,然后把这个元素的title属性改为xxc。

这里有一个非常值得关注的细节：通过setAttribute对文档做出修改后,再通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍然是改变前的属性值,也就是说

setAttribute做出的修改不会反映在文档本身的源代码里。这种"表里不一"的现象源自DOM的工作模式：先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。

四.

1.在onclick事件处理函数所触发的JavaScript代码里增加一条return false;语句,就可以防止用户被带到目标链接窗口。

<a href="http://www.baidu.com" οnclick="return false;">百度</a>

2.利用nodeType可以获取节点的类型。nodeType属性总共有12种可取值,但其中仅有3种具有实用价值。

（1）元素节点的nodeType属性值是1。

（2）属性节点的nodeType属性值是2。

（3）文本节点的nodeType属性值是3。

3.nodeValue属性：如果想改变一个文本节点的值,那就需要使用DOM提供的nodeValue属性。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<script type="text/javascript">
	window.οnlοad=function(){
		alert(document.getElementById("test").childNodes[0].nodeValue);//需要注意的是,在P节点里还包含一个文本节点,hahah是文本节点里的内容所以要注明。
	}
	</script>
  </head>
  <body>
  	<p id="test">hahah</p>
  </body>
</html>

4.JavaScript使用window对象的open()方法来创建新的浏览器窗口。window.open(url,name,features)

这三个参数都是可选的。

第一个参数是想在新窗口里打开的网页的RUL地址。如果省略这个参数,屏幕上将弹出一个空白的浏览器窗口。

第二个参数是新窗口的名字。可以字代码里通过这个名字与新窗口进行通信。

第三个参数是一个以逗号分隔的字符串,其内容是新窗口的各种属性。包括高宽,工具条,菜单栏,初始显示位置等。

5."javascript:"伪协议

"真"协议用来在因特网上的计算机之间传输数据包,如HTTP协议(http://),FTP协议(ftp://)等,伪协议则是一种非标准化的协议。"javascript"伪协议让我们通过一个链接来调用JavaScript函数。例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<script type="text/javascript">
		function test(obj){
			alert(obj);
		}
	</script>
  </head>
  <body>
  	<a href="javascript:test('xxc')">测试</a>
  </body>
</html>

上面代码a标签这句代码在支持"javascript:"伪协议的浏览器中运行正常,较老的浏览器则会去尝试打开那个链接但失败,支持这种伪协议但禁用了"JavaScript"功能的浏览器会什么也不做。

总之,在HTML文档里通过"javascript:"伪协议调用JavaScript代码的做法非常不好。

五.JavaScript性能

if(document.getElementById){//这个if代码用来检测浏览器是否支持getElementById这个方法
	alert("支持");
}

addLoadEvent(func)函数：

这个函数的功能：我个人总结了下，当页面一加载需要执行多个函数的话，那么window.onload就不能满足需求了。

这个函数不是javascript内部的。代码如下：

function addLoadEvent(func){//这里的参数func是指你需要传入的也表示你需要调用的函数的函数名。
        var oldonload = window.onload;//定义一个变量,接收window.onload调用到了什么函数
        if (typeof window.onload != "function") {//这里是用来判断window.onload是否是一个函数类型   如果window.onload没有赋值 alert(typeof window.onload)返回的是object,反之是"function"字符串
            window.onload = func;//如果不是function类型的话，也就是说之前没有给window.onload赋值过，则把参数赋值给它
        }
        else {//如果是function类型的话，就表示window.onload已经被赋值过，那么前面的oldonload变量已经记录下window.onload的函数体了 var oldonload = window.onload;表示将页面一加载就执行的函数体赋值给这个变量，而不是函数的返回值。
            window.onload = function(){
                oldonload();//执行原本window.onload;需要执行的函数
                func();//执行传递进来的需要执行的函数
            }
        }
    }

这里的参数func是指你需要传入的也表示你需要调用的函数的函数名。

window.setTimeout("test()", 3000);//表示打开网页后每隔3000毫秒后执行test()函数
window.setInterval("test()", 3000);//表示打开网页3000毫秒后执行test()函数  只执行一次
function test(){
	alert("1");
}

parseInt("20 px");返回20 把以数字开头的字符串传递给这个函数，它将返回一个数值

parseFloat("30.2 px");返回30.2 parseFloat("30.2s px");返回30.2 parseFloat("30.x2 px");返回30 parseFloat("30.0 px");返回30