学习jQuery

一.jQuery简介：
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
jQuery特点：
二．jQuery有如下特点:
1.提供了强大的功能函数
使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁.
2.解决浏览器兼容性问题
javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦, 常常一个页面在IE7,Firefox下运行正常, 在IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. 有了jQuery我们将从这个噩梦中醒来, 比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的, 从前要根据event获取事件触发者, 在ie下是event.srcElements 而ff等标准浏览器下下是event.target. jQuery则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象.
3.实现丰富的UI
jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果为例, 从前我自己写了一个可以兼容ie和ff的渐变动画, 使用大量javascript代码实现, 费心费力不说, 写完后没有太多帮助过一段时间就忘记了. 再开发类似的功能还要再次费心费力. 如今使用jQuery就可以帮助我们快速完成此类应用.
4.纠正错误的脚本知识
这一条是我提出的, 原因就是大部分开发人员对于javascript存在错误的认识. 比如在页面中编写加载时即执行的操作DOM的语句, 在HTML元素或者document对象上直接添加"onclick"属性, 不知道onclick其实是一个匿名函数等等. 拥有这些错误脚本知识的技术人员也能完成所有的开发工作, 但是这样的程序是不健壮的. 比如"在页面中编写加载时即执行的操作DOM的语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操作"的错误.jQuery提供了很多简便的方法帮助我们解决这些问题, 一旦使用jQuery你就将纠正这些错误的知识--因为我们都是用标准的正确的jQuery脚本编写方法!
三．一个简单的例子：
1.下载jQuery类库
jQuery的项目下载放在了Google Code上, 下载地址:
http://code.google.com/p/jqueryjs/downloads/list
上面的地址是总下载列表, 里面有很多版本和类型的jQuery库, 主要分为如下几类:
min: 压缩后的jQuery类库, 在正式环境上使用.如:jquery-1.3.2.min.js
vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如：jquery-1.3.2-vsdoc2.js
release包: 里面有没有压缩的jquery代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip
2.编写程序
创建一个HTML页面, 引入jQuery类库并且编写如下代码:

效果如下:

页面上有三个按钮, 分别用来控制Hello World的显示,隐藏和修改其内容.
此示例使用了:
(1) jQuery的Id选择器: $("#btnShow")
(2) 事件绑定函数 bind()
(3) 显示和隐藏函数. show()和hide()
(4) 修改元素内部html的函数html()
在接下来的教程中我们将深入这些内容的学习.
四．jQuery选择器全解：
1. 基础选择器
名称 说明 举例
#id
根据元素Id选择 $("divId") 选择ID为divId的元素
element
根据元素的名称选择, $("a") 选择所有<a>元素
.class
根据元素的css类选择 $(".bgRed") 选择所用CSS类为bgRed的元素
*
选择所有元素 $("*")选择页面所有元素
selector1,
selector2,
selectorN
可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $("#divId, a, .bgRed")
2. 层次选择器 Hierarchy
名称 说明 举例
ancestor descendant
使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input. $(".bgRed div") 选择CSS类为bgRed的元素中的所有<div>元素.
parent > child
选择parent的直接子节点child. child必须包含在parent中并且父类是parent元素. $(".myList>li") 选择CSS类为myList元素中的直接子节点<li>对象.
prev + next
prev和next是两个同级别的元素. 选中在prev元素后面的next元素. $("#hibiscus+img")选在id为hibiscus元素后面的img对象.
prev ~ siblings
选择prev后面的根据siblings过滤的元素
注:siblings是过滤器 $("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素
3. 基本过滤器 Basic Filters
名称 说明 举例
:first
匹配找到的第一个元素 查找表格的第一行:$("tr:first")
:last
匹配找到的最后一个元素 查找表格的最后一行:$("tr:last")
:not(selector)
去除所有与给定选择器匹配的元素 查找所有未选中的 input 元素: $("input:not(:checked)")
:even
匹配所有索引值为偶数的元素，从 0 开始计数 查找表格的1、3、5...行:$("tr:even")
:odd
匹配所有索引值为奇数的元素，从 0 开始计数 查找表格的2、4、6行:$("tr:odd")
:eq(index)
匹配一个给定索引值的元素
注:index从 0 开始计数 查找第二行:$("tr:eq(1)")
:gt(index)
匹配所有大于给定索引值的元素
注:index从 0 开始计数 查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)")
:lt(index)
选择结果集中索引小于 N 的 elements
注:index从 0 开始计数 查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)")
:header
选择所有h1,h2,h3一类的header标签. 给页面内所有标题加上背景色: $(":header").css("background", "#EEE");
:animated
匹配所有正在执行动画效果的元素 只有对不在执行动画效果的元素执行一个动画特效:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

4. 内容过滤器 Content Filters
名称 说明 举例
:contains(text)
匹配包含给定文本的元素 查找所有包含 "John" 的 div 元素:$("div:contains('John')")
:empty
匹配所有不包含子元素或者文本的空元素 查找所有不包含子元素或者文本的空元素:$("td:empty")
:has(selector)
匹配含有选择器所匹配的元素的元素 给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");
:parent
匹配含有子元素或者文本的元素 查找所有含有子元素或者文本的 td 元素:$("td:parent")
5. 可见性过滤器 Visibility Filters
名称 说明 举例
:hidden
匹配所有的不可见元素
注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden. 查找所有不可见的 tr 元素:$("tr:hidden")
:visible
匹配所有的可见元素 查找所有可见的 tr 元素:$("tr:visible")
6.属性过滤器 Attribute Filters
名称 说明 举例
[attribute]
匹配包含给定属性的元素 查找所有含有 id 属性的 div 元素:
$("div[id]")
[attribute=value]
匹配给定的属性是某个特定值的元素 查找所有 name 属性是 newsletter 的 input 元素:
$("input[name='newsletter']").attr("checked", true);
[attribute!=value]
匹配给定的属性是不包含某个特定值的元素 查找所有 name 属性不是 newsletter 的 input 元素:
$("input[name!='newsletter']").attr("checked", true);
[attribute^=value]
匹配给定的属性是以某些值开始的元素 $("input[name^='news']")
[attribute$=value]
匹配给定的属性是以某些值结尾的元素 查找所有 name 以 'letter' 结尾的 input 元素:
$("input[name$='letter']")
[attribute*=value]
匹配给定的属性是以包含某些值的元素 查找所有 name 包含 'man' 的 input 元素:
$("input[name*='man']")
[attributeFilter1][attributeFilter2][attributeFilterN]
复合属性选择器，需要同时满足多个条件时使用。 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:
$("input[id][name$='man']")
7.子元素过滤器 Child Filters
名称 说明 举例
:nth-child(index/even/odd/equation)
匹配其父元素下的第N个子或奇偶元素
':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！
可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2) 在每个 ul 查找第 2 个li:
$("ul li:nth-child(2)")
:first-child
匹配第一个子元素
':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 在每个 ul 中查找第一个 li:
$("ul li:first-child")
:last-child
匹配最后一个子元素
':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 在每个 ul 中查找最后一个 li:
$("ul li:last-child")
:only-child
如果某个元素是父元素中唯一的子元素，那将会被匹配
如果父元素中含有其他元素，那将不会被匹配。 在 ul 中查找是唯一子元素的 li:
$("ul li:only-child")
8.表单选择器 Forms
名称 说明 解释
:input
匹配所有 input, textarea, select 和 button 元素 查找所有的input元素:
$(":input")
:text
匹配所有的文本框 查找所有文本框:
$(":text")
:password
匹配所有密码框 查找所有密码框:
$(":password")
:radio
匹配所有单选按钮 查找所有单选按钮
:checkbox
匹配所有复选框 查找所有复选框:
$(":checkbox")
:submit
匹配所有提交按钮 查找所有提交按钮:
$(":submit")
:image
匹配所有图像域 匹配所有图像域:
$(":image")
:reset
匹配所有重置按钮 查找所有重置按钮:
$(":reset")
:button
匹配所有按钮 查找所有按钮:
$(":button")
:file
匹配所有文件域 查找所有文件域:
$(":file")
9.表单过滤器 Form Filters
名称 说明 解释
:enabled
匹配所有可用元素 查找所有可用的input元素:
$("input:enabled")
:disabled
匹配所有不可用元素 查找所有不可用的input元素:
$("input:disabled")
:checked
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) 查找所有选中的复选框元素:
$("input:checked")
:selected
匹配所有选中的option元素 查找所有选中的选项元素:
$("select option:selected")

五 jQuery选择器实验室
jQuery选择器实验室使用的是"jQuery实战"一书中的代码, 感觉对于学习选择器很有帮助.
我们的实验对象是一个拥有很多元素的页面:

在实验室页面的"Selector"输入框中输入jQuery选择器表达式, 所有匹配表达式的元素会显示红框:

如上图所示, 在输入".myList"后点击"Apply", 下面的输出框会显示运行结果, 右侧会将选中的元素用红框显示.
六.管理jQuery包装集元素
既然学会了动态创建元素, 接下来就会想要把这些元素放入我们的jQuery包装集中.
我们可以在jQuery包装集上调用下面这些函数, 用来改变我们的原始jQuery包装集, 并且大部分返回的都是过滤后的jQuery包装集.
jQuery提供了一系列的函数用来管理包装集:
1.过滤 Filtering
名称 说明 举例
eq( index )
获取第N个元素 获取匹配的第二个元素:
$("p").eq(1)
filter( expr )
筛选出与指定表达式匹配的元素集合。 保留带有select类的元素:
$("p").filter(".selected")
filter( fn )
筛选出与指定函数返回值匹配的元素集合
这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。 保留子元素中不含有ol的元素:
$("div").filter(function(index) {
return $("ol", this).size() == 0;
});
is( expr )

注意: 这个函数返回的不是jQuery包装集而是Boolean值 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合，或者表达式无效，都返回'false'. 'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。 由于input元素的父元素是一个表单元素，所以返回true:
$("input[type='checkbox']").parent().is("form")
map( callback )
将一组元素转换成其他数组（不论是否是元素数组）
你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立 把form中的每个input元素的值建立一个列表:
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
not( expr )
删除与指定表达式匹配的元素 从p元素中删除带有 select 的ID的元素:
$("p").not( $("#selected")[0] )
slice( start, end )
选取一个匹配的子集 选择第一个p元素:
$("p").slice(0, 1);
2.查找 Finding
名称 说明 举例
add( expr )
把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。 动态生成一个元素并添加至匹配的元素中:
$("p").add("<span>Again</span>")
children( [expr] )
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。 查找DIV中的每个子元素:
$("div").children()
closest( [expr] )
取得与表达式匹配的最新的父元素 为事件源最近的父类li对象更换样式:
$(document).bind("click", function (e) {
$(e.target).closest("li").toggleClass("hilight");
});
contents( )
查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容 查找所有文本节点并加粗:
$("p").contents().not("[nodeType=1]").wrap("<b/>");
find( expr )
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。 从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同:
$("p").find("span")
next( [expr] )
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。 找到每个段落的后面紧邻的同辈元素:
$("p").next()
nextAll( [expr] )
查找当前元素之后所有的同辈元素。
可以用表达式过滤 给第一个div之后的所有元素加个类:
$("div:first").nextAll().addClass("after");
offsetParent( )
返回第一个有定位的父类(比如(relative或absolute)).
parent( [expr] )
取得一个包含着所有匹配元素的唯一父元素的元素集合。
你可以使用可选的表达式来筛选。 查找每个段落的父元素:
$("p").parent()
parents( [expr] )
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。 找到每个span元素的所有祖先元素:
$("span").parents()
prev( [expr] )
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。 找到每个段落紧邻的前一个同辈元素:
$("p").prev()
prevAll( [expr] )
查找当前元素之前所有的同辈元素
可以用表达式过滤。 给最后一个之前的所有div加上一个类:
$("div:last").prevAll().addClass("before");
siblings( [expr] )
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。 找到每个div的所有同辈元素:
$("div").siblings()
3.串联 Chaining
名称 说明 举例
andSelf( )
加入先前所选的加入当前元素中
对于筛选或查找后的元素，要加入先前所选元素时将会很有用。 选取所有div以及内部的p，并加上border类:
$("div").find("p").andSelf().addClass("border");
end( )
回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。 选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素:

$("p").find("span").end()



这个原来在word中弄得，但是复制到这就成这样了，格式没有了内容也不全了。晕。
想要学习更多见这个网址：http://www.cnblogs.com/zhangziqiu/archive/2009/05/08/jquery-learn-6.html