jQuery学习之入门

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对象



 

你可能感兴趣的:(jquery)