jQuery学习之入门

最新推荐文章于 2024-08-09 02:16:38 发布

最新推荐文章于 2024-08-09 02:16:38 发布 · 101 阅读

文章标签：

#jquery #ViewUI

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

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