jquery理解
下载好后引用这个jQuery库就可以了我们的jQuery开发了，在页面的<head></head>区插入<script type="text/javascript" src="jquery-1.3.2/jquery-1.3.2.min.js"></script>就可以了。我们的第一个jQuery程序
我们写一个弹出Hello 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=utf-8" />
<title>我们的第一个jQuery程序</title>
<script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello jQuery!");
});
</script>
</head>
<body>
</body>
</html>
jQuery对象和DOM对象：这是我第一个碰到的问题。jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如：$(”#img”).attr(”src”,”test.jpg”); 这里的$(”#img”)就是获取jQuery对象；DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法，但是不能使用jQuery里的方法。例如：document.getElementById(”img”).src=”test.jpg”;这里的document.getElementById(”img”)就是DOM对象；$(”#img”).attr(”src”,”test.jpg”); 和document.getElementById(”img”).src=”test.jpg”;是等价的，是正确的但是$(”#img”).src=”test.jpg”;或者document.getElementById(”img”).attr(”src”,”test.jpg”); 都是错误的。再说一个例子：就是this，我在写jQuery的时候经常这样写：
this.attr(”src”,”test.jpg”);
可是就是出错。其实this是DOM对象，而
.attr(”src”,”test.jpg”)
是jQuery方法，所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象，例如：
$(this).attr(”src”,”test.jpg”);
1.DOM对象转成jQuery对象:
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
如：var v=document.getElementById(”v”); //DOM对象
var $v=$(v); //jQuery对象
转换后，就可以任意使用jQuery的方法了。
2.jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象：和.get(index);
(1)jQuery对象是一个数据对象 ，可以通过的方法，来得到相应的DOM对象。
如：
var $v =$(”#v”) ; //jQuery对象
var v=$v; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var $v=$(”#v”); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。
jQuery选择器是我们学jQuery的真正的开始也是我们必须做的第一件事情，jQuery选择能让我们取得我们想要的几乎所有的页面DOM对象（如果你不知道什么是DOM元素，google一下“什么是DOM”）。确切的说我们获取的应该是jQuery对象，这在上面的章节中我已经说过两者的区别和转换。
大家知道javascript变成中很大一块是对DOM的操作，当我们获取了DOM元素后，我们就可以对改元素绑定事件，增删属性等操作，通过这些操作可以实现很多绚丽的页面效果和富因特网的应用，但是我们在做这些事情之前首相要通过DOM元素的钩子找到该DOM元素，javascript是非常灵活的语言，查找DOM元素和DOM元素的钩子方法非常多，再者由于各个浏览器对js dom属性解析的少许区别，也给我们带来了不少麻烦。jQuery的选择器就解决了这些问题，而且功能非常强大。
jQuery选择器函数–$()
大家可以去很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素，所以$()函数获取的DOM元素其实是一个DOM元素组成的数组。
简单的$()
这些是最常用的几个例子：
[*]$(”div”)：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合；
[*]$(”#nickName”)：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；
[*]$(”.user”)：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；
我们来看一个简单的例子：
< !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=utf-8" /><title>jQuery简单的选择器</title><script type="text/javascript" src="jquery-1.3.2/jquery-1.3.2.min.js"></script><style type="text/css">.txt-color1{ color:#FF0000}.txt-color2{ color:#666600}.txt-color3{ color:#000066}</style></head><body><h1>jQuery简单的选择器</h1><div>大家可以去很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素</div><div><ol><li>$("div")：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合；</li><li id="nickName">$("#nickName")：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；</li><li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li><li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li></ol></div><script type="text/javascript">$(document).ready(function(){$("h1").addClass("txt-color1");//给标签为h1的加上txt-color1样式$(".user").addClass("txt-color2");$("#nickName").addClass("txt-color3");});</script></body></html>
$(”h1″).addClass(”txt-color1″);表示给标签为h1的加上txt-color1样式，
这里你要注意jQuer库的引用路径。我这里使用的是本地的。
jQuery选择器有很大一部分的写法和css选择器的写法非常相识，
我们先来看看css选择器的写法 ;这些对于你应该不是很陌生，呵呵。那么我们开始学习jQuery选择器。
一、简单的jQuery选择器
首先看看最简单的jQuery选择器 ,再次说明jQuery选择器获取的DOM元素返回的是一个数组，及时他只返回一个元素：
查看上一篇jQuery选择器入门【jQuery入门三】 中的$("div")：标签名，$("#nickName")：ID属性，$(".user")：样式名及例子，
[*]$("div")：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合，$(".user")：样式名：
[*]$("#nickName")：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；
[*]$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；
这里再补充1个通配符，即*：
$(”*”):通配符，取得DOM文档中所有节点元素；例如：$(”*”).css(”color”,”#FF3300″);则整个文档的文字颜色都会显示红色。至于.css(”color”,”#FF3300″)给元素加上color:#FF3300的css样式，我们会在后面再给大家详细解释。
大家可以看看这个我们写的css选择器非常的相似，下面的例子也是一样，这样我们就非常容易理解jQuery选择器的含义了
二、jQuery的组合选择器：
$(”selector1,selector2,selectorN”)：多元素组合选择器，将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。例如：$(”h1,div,li#nickName”)，并查看一下代码：
<div class="runcode">
< !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=utf-8" /><title>jQuery简单的选择器</title><script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script></head><body><h1>jQuery简单的选择器</h1><div>大家可以去很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素</div><ol> <li>$("div")：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合；</li> <li id="nickName">$("#nickName")：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；</li> <li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li> <li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li></ol><script type="text/javascript">$(document).ready(function(){$("h1,div,li#nickName").css("color","#FF3300")});</script></body></html>
页:
[1]