jQuery学习笔记

标签: jquery 学习 笔记 | 发表时间:2012-03-14 08:01 | 作者:
出处:http://www.iteye.com
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推荐



相关 [jquery 学习 笔记] 推荐:

jQuery学习笔记

- - ITeye博客
什么是jQuery,它能为我们做什么. jQuery是一个javascript类库或称之为javascript框架. 无需刷新页面从服务器获取信息. 简化常见的javascript任务. 为什么会如此流行或说得到大量用户群的支持:. 多重操作集于一行(避免使用临时变量或不必要的重复代码). jQuery利用了CSS选择符的能力,在DOM中快捷而轻松地获取元素或元素集合.

shell 学习笔记

- tiger - 游戏人生
将脚本目录加到 PATH 中. 在 dash 中如何进行字符串替换. 将 rst 格式文档转换为 blog 可用的 html 代码. shell 脚本虽然不是非常复杂的程序, 但对于首次接触的我来讲, 多少还是有些忌惮. 不过, 接触任何新事物都需要勇敢面对, 逐步树立信心. 我是冲着把脚本写好去的, 所以, 我的目标是能够写出友好, 健壮, 优美的脚本..

OAuth学习笔记

- 宋大妈 - FeedzShare
来自: 标点符 - FeedzShare  . 发布时间:2011年08月29日,  已有 2 人推荐. OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. OAuth允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据.

Vim学习笔记

- 临池学书 - C++博客-首页原创精华区
最近在学习Vimtutor中的相关内容,Vim的使用博大精深,很多命令一旦不使用就会忘记,下面把其中的没有使用到的相关命令做一个简单的总结,供以后复习使用. 至于常见的保存,插入等等命令,则不予记录,在以后的使用中加深练习即可. To change until the end of a word, type  ce (ce + 修正的单词).

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言( 英文:HyperText Markup Language,HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全,超赞.

JdbcTemplate学习笔记

- - SQL - 编程语言 - ITeye博客
1、使用JdbcTemplate的execute()方法执行SQL语句. 2、如果是UPDATE或INSERT,用update()方法.    JdbcTemplate将我们使用的JDBC的流程封装起来,包括了异常的捕捉、SQL的执行、查询结果的转换等等. spring大量使用Template Method模式来封装固定流程的动作,XXXTemplate等类别都是基于这种方式的实现.

Activiti学习笔记

- - 企业架构 - ITeye博客
第一个Activiti的HelloWorld. 获取核心ProcessEngine对象 2. 根据需求,获取对应的服务实例 3. 使用服务方法,做事情 * * @author Administrator * */ public class HelloWorld {. // 加载核心API ProcessEngine.

Disruptor 学习笔记

- - 开源软件 - ITeye博客
Disruptor 是一个高性能异步处理框架,也可以认为是一个消息框架,它实现了观察者模式. Disruptor 比传统的基于锁的消息框架的优势在于:它是无锁的、CPU友好;它不会清除缓存中的数据,只会覆盖,降低了垃圾回收机制启动的频率. Disruptor 为什么快. 通过内存屏障和原子性的CAS操作替换锁.

Elasticsearch 学习笔记

- - 研发管理 - ITeye博客
安装  Elasticsearch. 1:解压下载的安装包 elasticsearch-1.7.2.zip. 修改  node.name: es(集群状态名字一致). 2:在https://github.com/elasticsearch/elasticsearch-servicewrapper下载该插件后,解压缩.