初识JavaScript和jQuery

JavaScript

---

1.特性

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

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

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

④动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。

⑤跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

2.编写位置

①编写到HTML中<script>标签中。

<script type="text/javascript"</script>

②写在外部的.js文件中。然后通过script标签引入。

<script type="text/javascript" src="script.js"></script>

3.JavaScript的事件驱动

①用户事件：用户操作，例如单击、鼠标移入、鼠标移出等

②系统事件：由系统触发的事件，例如文档加载完成。

③常用的事件:

onload

onclick

onblur

onfocus

onmouseover

onmouseout

4.BOM

①Borwser Object Model 浏览器对象模型

②浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象

③常用的对象(window的子对象)

document history location screen navigator frames

5.DOM

①Document Object Model 文档对象模型

②document对象: window对象的一个属性，代表当前HTML文档，包含了整个文档的树形结构。获 取document对象的本质方法是：window.document，而“window.”可以省略。

③DOM树

④元素查询

功能 API 返回值

根据id值查询:document.getElementById(“id值”) 一个具体的元素节点

根据标签名查询:document.getElementsByTagName(“标签名”) 元素节点数组

根据name属性值查询:document.getElementsByName(“name值”) 元素节点数组

jQuery

---

jQuery是当前比较主流的 JavaScript 库，封装了很多预定义的对象和实现函数，帮助使用者建立有高难度交互的页面，并且兼容大部分主流的浏览器。

通过一个小例子对比一下jQuery和JavaScript。比如同样的，要求在输入文本框获取焦点的同时将span标签中的文本置为空。

JavaScript：

window.onload = function(){
	document.getElementById("username").onfocus = function(){
		//清空span标签中的内容
		document.getElementById("msgSpan").innerHTML = "";
	};
};

jQuery:

$(function(){
		//给文本框绑定获取焦点的事件
		$("#username").focus(function(){
			//清空span标签中的文本值，即将span标签中的文本值设置为空串
			/*
				text()方法：获取或设置成对出现的标签中的文本值
				对象.text()：获取文本值
				对象.text("new value")：设置文本值
			*/
			$("#msgSpan").text("");
		});
});

另外，在jQuery中，text()方法在某些场合下可以替换成html()方法，html()方法和text()方法的唯一区别是html()方法可以解析文本中的HTML标签，如：$("#msgSpan").html("<font color='green'>冲冲冲</font>");

常用方法：

val()方法:获取或设置input标签中的value属性值

对象.val():获取value值

对象.val("new value")：设置value属性值

如：$("#username").val();