JQuery学习记录(一)
上一篇 /
下一篇 2010-02-03 08:06:57
/ 个人分类：读书笔记
一.入门
1.javascript是解释型语言，所以使用它不用编译或构建，只要在使用到jquery时，在相关的html文档中简单地引用该库文件的位置。一般，jquery应用示例包括三个部分：html文档、为文档添加样式的css文件和为文档添加行为的javascript文件。
2.文件中指向另一个文件的引用，使用相对路径（../images/foo.pgn）而不是绝对路径（/images/foo.png），这样，不需要使用web服务器就能在本地运行代码。
3.使用jquery埋页面样式修改的简单例子：
只需要三行代码：
$(document).ready(function(){
$('.poem-stanza').addClass('emphasized');
}) 其中包括三个步骤
a)查找要操作的页面元素
通过$()结构来完成，这个结构需要一个字符串参数，参数中可以包含任何CSS选择符表达式。如要找所有应用了poem-stanza类的文档元素，使用$('.poem-stanza')即可。$()函数实际上是jquery对象的一个制造工厂，jquery对象会封装0个或多个dom元素。
b)指定操作，这里为添加样式
用.addClass()将一个CSS类应用到之前选择的页面元素。调用一次就可以对选择的所有元素进行修改而不是一个个的去迭代。
c)执行代码
如果将上面两步的代码放到页面头部，javascript代码在浏览器初次遇到它们时会执行，但在浏览器处理头部时，HTML还不会呈现样式。因此，我们需要将代码延迟到DOM可用时再执行。
控制javascript代码何时执行的传统机制是在事件处理函数中调用代码。如果没有jquery，需要依靠onload处理函数。先将先前代码放到一个函数中，再用<body nload="emphasizePoem();">来完成调用。这种方法的缺点在于：为了添加行为，我们修改了HTML代码，这种结构与功能紧密耦合的做法，会导致代码混乱。很多页面都可能需要重复调用相同的函数，或者在处理鼠标单击之类的事件时，页面每个元素的实例也可能需要反复调用相同的函数。这样，添加新的行为涉及到两个不同位置的改动。
jquery允许我们使用$(document).ready()结构预定DOM加载完成后（不必等待图像加载完成）触发的函数调用。这种技术不需要对HTML进行任何修改，所有行为完全从javascrpipt文件内部添加。
定义只使用一次的函数有点低效率，使用匿名函数来解决这个问题。当在另一个函数主体内使用这种语法定义了一个匿名函数时，就创建了一个闭包。
二.选择符--取得你想要的一切
1.jquery利用了CSS和Xpath选择符的能力，让我们在DOM中快捷轻松地获取元素或元素组。无论使用哪种类型的选择符（CSS、Xpath、还是自定义选择符），都要从一个美元符号和一对圆括号开始：$()。
2.常用简单例子：
标签名：$('p')会取得文档中所有的段落
ID：$('#some-id')取得文档中具有对应的some-id的一个元素
类：$（'.some-class'）取得文档中带有some-class类的所有元素
3.复杂一点的例子
$('#selected-plays > li')的含义：查找ID为selected-plays的元素(#secected-plays)的子元素（>）中所有的列表项(li)
$('#slected-plays li:not(.horizontal)')的含义：
取得的每个列表项（li）：
a)是ID为selected-plays的元素(#secected-plays）的后代元素
b)没有horiaontal类
3.XPath（XML路径语言）是在XML文档中识别不同元素或元素值的一种语言。
4.简单例子：
$('a[@title]')：选择所有带有title属性的链接。这是[]来指定属性选择符的办法，使用了@符号
$('div[ol]'):取得包含一个ol元素的所有div元素。[]的另一种用法，在不带前置@符号情况下，用来指定包含在另一个元素中的元素。
5.属性选择符允许以类似正则表达式的语法来标识字符串的开始（^）和结尾($)，而且，也可以使用(*)表示字符串的任意位置。如
$('a[@href^="mailto:"]')：寻找所有带有href属性（[@href]）且以mailto开头(^="mailto:")的锚元素。
$('a[@href$=".pdf"]'):录供所有带有href属性且以.pdf结尾的锚元素
待续.......
收藏
举报
TAG:
