1.jQuery简介
jQuery是继Prototype之后又一个优秀的JavaScript库。
jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。
2.配置jQuery环境
在<head>标签内引入jQuery库,即在<head>标签中添加类似如下的代码:
<script type="text/javascript" src="../resource/jquery-1.10.1.js"></script>
3.编写简单的jQuery
示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../resource/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello world.");
});
</script>
<title>First jQuery Test</title>
</head>
<body>
First jQuery Test.
</body>
</html>
注:在jQuery库中,$就是jQuery的一个简写形式,例如:$("#foo")和jQuery("#foo")是等价的。
4.jQuery对象和DOM对象
(1).jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象。
(2).DOM对象(Document Object Model ,文档对象模型)
var domObj = document.getElementById("id");//获取DOM对象
(3).jQuery对象转成DOM对象
方法一:jQuery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象
方法二:通过get(index)方法得到相应的DOM对象
var $cr = $("#cr"); //jQuery对象
var cr = $cr.get(0); //DOM对象
(4).DOM对象转成jQuery对象
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象