一、环境配置
1、从jquery官网下载jquery.js如果这个找不到就不用学了。
2、在普通的html文件 引入jQuery环境,如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>.</title>
<!---引入jquery包 -->
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
</body>
</html>
3、接下来我们编写一个helloWord
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>.</title>
<!---引入jquery包 -->
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
//在这里进行jquery的测试 $符号是jQuery的简写形式
$(document).ready(function(){//等待dom元素加载完毕,自认为是和extjs的 Ext.onready()是相同的
alert("hello jquery !!!");
})
</script>
</head>
<body>
</body>
</html>
显示如下结果,我们只是alert一个弹出框,很简单
二、基本语法
1、DOM对象和jQuery对象简介
第一次学习jQuery,经常分不清哪些是jQuery对象,哪些是DOM对象,,因此需要重新了解下这两者对象及它们之间的关系。
1)DOM对象:每一个dom对象都可以表示成一棵树,下面来构建一个基本的网页,网页代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>dom</title>
</head>
<body>
<h3>dom例子</h3>
<p title="选择你最喜欢的水果">你最喜欢的水果是什么?</p>
<ul>
<li>鸭梨</li>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜 </li>
<li>菠萝</li>
</ul>
</body>
</html>
我们可以通过js中的的getElementByTagName或者getElementById来获取元素的节点。这样得到的DOM 元素就是DOM对象,例如:
var domObj=document.getElementById("id");
var ObjHTML=domObj.innerHTML;
2)jQuery对象:其实就是通过jQuery包装DOM对象后产生的对象,是jQuery特有的,如果一个对象时jQuery对象,那么就可以用到jQuery里面。
2、jQuery对象和DOM 对象的相互转换
注意:如果获取的是jQuery对象,那么需要在变量前面加上$,例如:
var $variable=jQuery对象;
如果获取的是DOM对象:
var dom=dom对象;