锋利的JQery学习笔记.docx
《锋利的JQery学习笔记.docx》由会员分享，可在线阅读，更多相关《锋利的JQery学习笔记.docx（40页珍藏版）》请在冰豆网上搜索。
锋利的JQery学习笔记
JQuery学习笔记
一、基础知识
1、JQuery库说明
JQuery-1.5.2.js——完整无压缩版本，用于测试、学习和开发
JQuery-1.5.2.min.js——经过JSMin等工具压缩后的版本，体积小，用于项目和产品
【注：
jQuery正确写法是j小写】
2、使用JQuery
只要将下载的JQuery库引入到页面JS脚本处即可，方法如下：
—在Head标签内引入JQuery-->
3、JQuery对象与DOM对象转换
JQuery对象是一个数组对象，可以使用两种方式转换为DOM对象
（1）var$cr=$（“#cr”）;//JQueryobject
Varcr=$cr[0];//DOMobject;
（2）var$cr=$（“#cr“）;varcr=$cr.get（0）;
对于一个DOM对象，只需用$（）将DOM对象包装起来，就可以转换为JQuery对象
Varcr=document.getElementById（“cr”）;//DOMobject
Var$cr=$（cr）;//JQueryobject
4、JQuery库与其他库的冲突解决
默认JQuery库用$作为自身的快捷方式，在先加载其他JS库时，可能出现$冲突，这时有以下几种解决方法：
（1）在任何时候都可以调用JQuery.noConflict（） 函数来将变量$的控制权移交给其他JS库。
示例：
--prototype-->
--jQuery-->
JQuery.noConflict（）;//移动变量$控制权
（2）还可以使用JQuery.noConflict（）方法自定义快捷方式，即Var新快捷方式=JQuery.noConflict（）;
（3）将变量$作为形参传递到JQuery中，在函数内部继续使用$快捷符号，示例如下：
--prototype-->
--jQuery-->
JQuery.noConflict（）;//移动变量$控制权
JQuery（function（$）{
$（“p”）.click（function（）{alet（$（this）.text（））;}）
}）
（4）将JQuery库在其他库之前导入，这时无需调用JQuery.noConfict（）函数就可以交出$控制权限。
5、常用开发工具
（1）Dreamweaver：
可以通过安装扩展管理来实现JQuery代码的自动提示。
首先下载JQuery_API.mxp插件，然后在Dreamweaver中依次选择“命令”——“扩展管理”——“安装扩展”——“JQuery_API.mxp”命令后，就可以安装插件了。
【注意：
如果Dreamweaver没有扩展管理功能，说明是简化版本，可以在Http:
//中下载相应软件。
】
（2）Aptana：
功能强大、开源、专注于JS的AJAX开的IDE
（3）JQueryWTP和Spket插件：
可以使Eclipse支持JQuery自动提示
（4）VisualStudio2008：
安装KB958502/Release/ProjectReleases.aspx?
releaseId=1736补丁后，下载JQuery-1.5.2-vsdoc.js，将其与JQuery-1.5.2.js放在同一文件夹下，就可以实现JQuery自动代码提示了。
二、JQuery选择器
1、JQuery选择器简介
JQuery选择器完全继承了CSS风格，可以非常快捷的找出特定DOM元素，然后添加相应行为，而无需担心浏览器是否支持定一选择。
JQuery选择器获取的永远是对象，即使没有此元素也不会报错，因此当要用JQuery检查某个元素在网页是否存在时，要用长度或转换为DOM对象进行判断，示例如下：
If（$（“#tt“））{…//这样是错误的}
应该这样：
if（$（“#tt”）.length>0）{….}或者if（$（“#tt”）[0]）{…}
2、常用选择器
选择器
描述
返回
示例
#id
选择匹配ID的元素
单个元素
$（“test”） 取Id为test的元素
.class
选择给定类名的元素
集合元素
$（“.test”）取所有class为test的元素
Element
选择给定元素名的元素
集合元素
$（“P”）取所有
元素
*
匹配所有元素
集合元素
略
Selector1,selector2,
…,selectorN
将每个选择器匹配的元素合并后一起返回
集合元素
$（“div,span,p.myclass“）选择所有
,
和拥有class为myclass的标签的一组元素
3、层次选择器
选择器
描述
返回
示例
$（“ancestordescendant”）
选择ancestor元素里的所有descendant（后代）元素
集合元素
$（“divspan”） 选择div里的所有span元素
$（“parent>child”）
选择parent元素下的child元素
集合元素
$（“div>span”）取div下元素名是的子元素
$（“prev+next“）
或$（“prev”）.next（）
取prev元素后的next元素
集合元素
$（“.one+div”）或$（“.one”）.next（“div”）取class为one的下一个div元素
$（“prev~siblings”）
或$（“prev”）.nextAll（）;
取prev元素后的所有siblings元素
集合元素
$（“#two~div”）取id为two元素后面的所有div兄弟元素$（“prev”）.nextAll（“div”）
$（“prev”）.siblings（）
取prev元素的所有同辈元素
集合元素
$（“#prev”）.siblings（“div”）取所有与prev同辈的元素，无论前后位置
4、过滤选择器
基本选择器
描述
返回
示例
:
first
选择第一个元素
单个元素
$（“div:
first”）取所有div中第1个div元素
:
last
选择最后一个元素
单个元素
$（“div:
last”）所有div中最后一个div元素
:
not（selector）
去除与给定选择器匹配的元素
集合元素
$（“input:
not（.myclass）”）选取class不是myclass的input元素
:
even
取索引是偶数的元素
集合元素
$（“input:
even”）取索引是偶数的input元素
:
odd
选择索引是奇数的元素
集合元素
$（“input:
odd”）
:
eq（index）
取索引等于index的元素
单个元素
$（“input:
eq
（1）”）索引等于1的元素
:
gt（index）
取索引大于index的元素
索引都从0开始计算
集合元素
$（“input:
gt
（1）”）取索引大于1而不包括1的元素
:
lt（index）
取索引小于index的元素
集合元素
$（“input:
lt
（1）”）
:
header
取所有标题元素
集合元素
$（“:
header”）
:
animated
取当前正在执行动画的所有元素
集合元素
$（“div:
animated”）取正在执行动画的div元素
内容过滤
:
contains（text）
取内容为text的元素
集合元素
$（“div:
contains（‘我’）”）
:
empty
取不包含子元素或文本的空元素
集合元素
$（“div:
empty”）
:
has（selector）
取含有选择器所匹配的元素的元素
集合元素
$（“div:
has（p）”）取含有
元素的
元素
:
parent
取含有子元素或文本元素
集合元素
$（“div:
parent”）注意与parent（）方法的区别
可见过滤
:
hidden
取所有不可见元素
集合元素
$（“:
hidden”）包括hiden和none
:
visible
取所有可见元素
集合元素
$（“div:
visible”）
属性过滤器
描述
返回
示例
[attribute]
取有此属性的元素
集合元素
$（“div[id]”）取有id属性的元素
[attribute=value]
取属性值为value的元素
集合元素
$（“div[title=test]”）
[attribute!
=value]
取值不等于value的元素
集合元素
$（“div[title!
=test]”）
[attribute^=value]
取值以value开始的元素
集合元素
$（“div[title^=test]”）
[attribute$=value]
取值以value结束的元素
集合元素
略
[attribute*=value]
取值含有value的元素
集合元素
略
[slector1]
[selector2]…..
用属性选择器合并成一个复合属性选择器
集合元素
$（“div[id][title$=’test’]取有属性id且属性title以test结束的
元素
子元素过滤
:
nth-child（index/even/odd
/equation）
取每个父元素下第index个子元素或奇偶元素，index从1开始
集合元素
注意与:
eq（index）的区别
很常用的过滤器:
nth-child（2n）;取索引值是2的倍数的元素，n从0开始
:
first-chile
取父元素下第1个子元素
集合元素
注意与:
first的区别
:
last-child
取每个父元素的最后一个子元素
集合元素
注意与:
last的区别
:
only-child
如果某个元素是它父元素的中的惟一子元素，则匹配
集合元素
$（“ulli:
only-child”）选择
中是惟一子元素的表单属性过滤
:
enabled
取所有可用元素
集合元素
$（“#form1:
enabled”）取id为form1的表单内的所有可用元素
:
disabled
取所有不可用元素
集合元素
略
:
checked
取所有被选中的元素
集合元素
$（“input:
checked”）
:
selected
取所有被选中的选项元素（下拉列表）
集合元素
$（“select:
selected”）
5、表单选择器
选择器
描述
返回
示例
:
input
所有的