1.JavaScript的定义及特性

1.1.定义

javascript是运行在客户端的一种直译式脚本语言(程序在运行过程中逐行进行解释)，它的解释器被称为JavaScript引擎，为浏览器的一部分。

1.2.特性

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)运行在客户端。不同于服务器端脚本语言，例如PHP、ASP和JSP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。

1.3.用途

1.嵌入动态文本于HTML页面。

2.对浏览器事件做出响应。

3.读写HTML元素。

4.在数据被提交到服务器之前验证数据。

5.检测访客的浏览器信息。

6.控制cookies，包括创建和修改等。

7.基于Node.js技术进行服务器端编程。

【注】:虽然javascript与java都是基于对象的语言，但二则有着本质的区别。js是一种弱类型语言，故js函数可以返回任意类型的数据

2.DOM（文档对象模型）

2.1.整个html页面上的元素节点构成一棵树

2.2.创建新的元素节点

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

1
2
3
4
5
6
7
8
9
10
11
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

2.3.修改已有的元素节点

2.3.1.修改节点的内容

借助节点的innerHTML属性

1
2
3
4
5
6
7
8
9
10
11
语法：
document.getElementById(id).innerHTML=new HTML
实例：
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>

2.3.2.修改节点的属性

语法：

document.getElementById(id).attribute=new value

实例:

2.3.3.修改节点的样式

语法：

document.getElementById(id).style.property=new style

实例：

Hello World!

2.4.通过DOM为元素添加事件处理

向元素button添加click 事件处理

2.5.为动态创建的元素添加事件处理

2.5.1.用元素的事件属性来绑定

function show(arg){

console.log(arg);

}

var show=document.createElement(“input”);

div.appendChild(show);

show.type=”button”;

show.value=”查看”;

方式一

show.onclick=function(){

show(this)

};

方式二

show.onclick= show;注意此处不能加参数

2.5.2.jQuery为动态创建的元素绑定事件

对于动态创建并append到页面上的元素来说，不能直接用下面的方法来绑定事件

$(“.class a”).click(function(){   })  

常用on()方法并借助父选择器为动态创建的元素绑定事件

语法：$(ParentSelector).on(event,DynamicElement,data,function,map)

event：必需。规定添加到元素的一个或多个事件。事件的类型包含： blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error等，由空格分隔多个事件值。必须是有效的事件。

childSelector：需要绑定事件的标签的ID、类、属性选择器。如果没有childSelector项的话，只能给被选元素（已存在的元素）绑定事件，不能给未来元素（后续动态生成的元素）绑定事件

data：触发事件需要传入的数据，可选。规定传递到函数的额外数据。

function：必需。规定当事件发生时运行的函数。

map：可选，规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

实例：

$(“div”).on(“click”,”p”,function(){
    alert($(this).text());
})

$(“div”).off( “click”, “p”, handler );

2.5.3.循环的为元素绑定事件的几个常用方法

  

        第一个链接  

        第二个链接  

        第三个链接