jQuery学习笔记

1. 什么是jQuery,它能为我们做什么？
jQuery是一个javascript类库或称之为javascript框架。
它能为我们做什么：
 取得文档中的元素
 修改页面的外观
 改变文档的内容
 响应用户的交互操作
 为页面添加动态效果
 无需刷新页面从服务器获取信息
 简化常见的javascript任务
为什么会如此流行或说得到大量用户群的支持：
 利用CSS的优势
 支持扩展
 抽象浏览器不一致性
 面向集合
 多重操作集于一行（避免使用临时变量或不必要的重复代码）
2. 选择符
jQuery利用了CSS选择符的能力，在DOM中快捷而轻松地获取元素或元素集合。
1) DOM
jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务。
2) 工厂函数$()
在jQuery中，无论使用哪种类型的选择符，都要从一个美元符号和一对圆括号开始：$()。
有3种基本的选择符：标签名、ID和类。
标签名：$(‘p’)取得文档中所有的段落
ID: $(‘#some-id’)取得文档中ID为some-id的一个元素
类：$(‘.some-class’)取得文档中类为some-class的所有元素
3) CSS选择符
jQuery支持CSS规范1到规范3中的几乎所有选择符，这种对CSS选择符的支持，使得开发者在增强自己的网站时，不必为哪种浏览器(特别是IE6及更低版本)可能会不理解高级的选择符而担心，只要该浏览器启用了javascript就没有问题。
注：负责任的jQuery开发者应该在编写自己的程序时，始终坚持渐近增强和平稳退化的理念，做到在javascript禁用时，页面仍然能够与启用javascript时一样准确地呈现，即使没有那么美观。
例如：$(‘#selected-plays > li’).addClass(‘horizontal’)取得ID为selected-plays下面的子元素结点为li的所有元素并添加类horizontal
4) 属性选择符
属性选择符是CSS选择符中特别有用的一类选择符。顾名思义，属性选择符通过HTML元素的属性选择元素，例如链接的title属性或图像的alt属性。
例如，要选择带有alt属性的所有图像元素：$(‘img[alt]’)
属性选择符允许类似正则表达式的语法来标识字符串的开始(^)和结尾($)。而且，也可以使用星号(*)表示字符串中任意位置的值，使用叹号(!)表示相反的值。
为链接添加样式：
$(‘a[href^=mailto:]’).addClass(‘mailto’);为以mailto开头的链接添加mailto样式。
$(‘a[href$=.pdf]’).addClass(‘pdflink’);为以.pdf结尾的链接添加pdflink样式。
$(‘a[href^=http][href*=henry]’).addClass(‘henrylink’);为以http开头并包括henry字符串的链接添加henrylink样式。
5) 自定义选择符
除了各种CSS选择符之外，jQuery还添加了独有的完全不同的自定义选择符。可以说，jQuery中的多数自定义选择符都可以让我们基于某个标准选择特定的元素。自定义选择符的语法与CSS中的伪类选择符语法相同，即选择符以一个冒号开关。
如，我们想要从匹配的带有horizontal类的div集合中选择第2个项：
$(‘div.horizontal:eq(1)’)
注意，因为javascript数组采用从0开始的编号方式，所以eq(1)取得的是集合中的第2个元素。而CSS则是从1开始的，因此CSS选择符$(‘div:nth-child(1)’)取得的是作为其父元素第1个子元素的所有div
基于表单的选择符如下：
:text, :checkbox, :radio, :image, :submit, :reset, :password, :file, :input, :button, :enabled, :disabled, :checked, :selected
3. DOM遍历方法
很多情况下，取得某个元素的父元素或祖先元素都是基本操作，而这正是jQuery的DOM遍历方法的用武之地，有了这些方法，我们可以轻而易举地在DOM树中上、下、左、右地自由漫步。
如：$(‘tr:odd’).addClass(‘alt’)与$(‘tr’).filter(‘:odd’).addClass(‘alt’)等价。
Filter()的功能也十分强大，因为它可以接受函数参数。通过传入的函数，可以执行复杂的测试，以决定相应元素是否应该保留在匹配的集合中。
如，为所有外面链接添加一个类：
$(‘a’).filter(
Return this.hostname && this.hostname != location.hostname;
).addClass(‘external’);
为包含Henry文本的单元格下一个单元格添加样式：
$(‘td:contains(Henry)’).next().addClass(‘highlight’);
其它用法：
$(‘td:contains(Henry)’).nextAll().addClass(‘highlight’);
$(‘td:contains(Henry)’).nextAll().andSelf().addClass(‘highlight’);
$(‘td:contains(Henry)’).parent().children().addClass(‘highlight’);
连缀功能：这种能力不仅有助于保持代码简洁，而且在替代组合重新指定选择符时，还有助于提升脚本性能。在使用连缀时，为照顾到代码的可读性，还可以把一行代码分散到几行来写。
如：
$(‘td:contains(Henry)’).parent().find(‘td:eq(1)’).addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);
也可写成：
$(‘td:contains(Henry)’)//取得包含Henry的所有单元格
.parent()//取得它的父元素
.find(‘td:eq(1)’)//在父元素中查找第2 个单元格
.addClass(‘highlight’)//为该单元格添加样式
.end()//恢复到包含Henry的单元格的父元素
.find(‘td:eq(2)’)//在父元素中查找第3个单元格
.addClass(‘highlight’);//为该单元格添加样式
4. 访问DOM元素
所有选择符表达式和多数jQuery方法都返回一个jQuery对象，而这通常都是我们所希望的，因为jQuery对象能够提供隐式迭代和连缀能力。
如，可以使用下面两种方式来访问元素：
Var myTag = $(‘#my-element’).get(0).tagName;
Var myTag = $(‘#my-element’)[0].tagName;
5. 事件
Javascript内置了一些对用户的交互和其他事件给予响应的方式。为了使页面具有动态性和响应性，就需要利用这种能力，以便在适当的时候派上用场。虽然使用普通的javascript也可以做到这一点，但jQuery增强并扩展了基本的事件处理机制。它不仅提供了更加优雅的事件处理语法，而且也极大地增强了事件处理机制。
1) 代码执行的时机选择
虽然$(document).ready()和onload具有类似的效果，但是，它们在触发操作的时候上存在微妙的差异。
当一个文档完全下载到浏览器中时，会触发window.onload事件。这意味着页面上的全部元素对javascript而言都是可以操作的，这种情况对编写功能性的代码非常有利，因为无需考虑加载的次序。
另一方面，通过$(document).ready()注册的事件处理程序，则会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，却不意味着所有关联的文件都已经下载完毕。也就是说，当HTML下载完成并解析为DOM树之后，代码就可以运行。
2) 与其它库共存
在某些情况下，可能有必要在同一个页面中使用多个javascript库。由于很多库都在使用$标识符，因此就需要一种方式来避免名称冲突。
为了解决这个问题，jQuery提供了一个名叫.noConflict()的方法，调用该方法可以把对$标识符的控制权交还给其它库。如：
<script type=”text/javascript”>jQuery.noConflict();</script>
这样，在需要使用jQuery方法时，就必须要用jQuery来代替$.
在这种情况下，有一个在.ready()方法中使用$的技巧。我们传递给它的回调函数可以接收一个参数—jQuery对象本身。利用这个参数，可以重新命名jQuery为$,而不必担心造成冲突:
jQuery(document).ready(function($){
//这里可以正常使用$
});
3) 续
6. 续


已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐

• —软件人才免语言低担保 赴美带薪读研！—