jQuery Study.docx
- 文档编号:29088412
- 上传时间:2023-07-20
- 格式:DOCX
- 页数:24
- 大小:74.37KB
jQuery Study.docx
《jQuery Study.docx》由会员分享,可在线阅读,更多相关《jQuery Study.docx(24页珍藏版)》请在冰豆网上搜索。
jQueryStudy
jQuery入门汇总
jQuery入门[1]-构造函数
jQuery优点
◦体积小(v1.2.315kb)
◦丰富的DOM选择器(CSS1-3+XPath)◦跨浏览器(IE6,FF,Safari,Opera)
◦链式代码
◦强大的事件、样式支持
◦强大的AJAX功能
◦易于扩展,插件丰富
jQuery的构造函数接收四种类型的参数:
jQuery(expression,context)
jQuery(html)
jQuery(elements)
jQuery(fn)
第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档中的元素,并组装成一个jQuery对象返回。
DEMO:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
.selected
{
background-color:
Yellow;
}
style>
head>
jQuery构造函数h3>
- jQuery(expression,context)li>
- jQuery(html)li>
- jQuery(elements)li>
- jQuery(fn)li>
ul>
script>
body>
html>
将以下jQuery代码加入文末的脚本块中:
jQuery("ul>li:
first").addClass("selected");
页面运行效果如下:
其中jQuery()可替换为快捷方式$(),如果$被其它对象占用,可使用jQuery.noConflict()函数取消快捷方式。
"ul>li:
first"中ul>li表示所有位于ul下的li元素(为CSS表达式,XPath方式可用ul/li),:
first表示其中的第一个。
addClass()为jQuery对象用来添加CSS样式类的函数,相反的函数为removeClass()。
再加入以下代码:
$('ul').append($('
newitem'));
运行效果如下:
其中$('
newitem
')将其中的字符串转换为DOM对象,然后通过append()函数加入ul对象的最后。
接下来:
$(document).ready(function(){
$('ul').css('color','red');
});
则效果如:
jQuery构造函数中还可以真接传入DOM对象,如document,或jQuery对象(当然就没什么意义)。
ready()函数为document添加事件处理函数,将ul的颜色设为红色。
$(document).ready()由于应用场景众多,所以可以直接用$(fn)来代替,fn表示处理函数。
(ready处理函数貌似在文档内容载入完成后执行,无需等待相关其它图片等资源载入完成,所以比load事件要更早执行,对于这点,没有具体证实)
$(function(){
alert('welcometojQuery');
});
以上代码的效果是页面一载入,就弹出一个对话框。
jQuery1.2选择器
jQuery1.2选择器
以下的文档根据官网1.2选择器汉化,并做相应的调整及加入了部份示例。
由于实际使用中选择器在IE和非IE下会有不同的效果,请参照红色的字样。
如有错误请及时联系我。
绯雨汉化:
基本选择器
#myid
返回:
对象>
匹配一个id为myid的元素。
element
返回:
对象>数组
匹配所有的element元素
.myclass
返回:
对象>数组
匹配所有class为myclass的元素
*
返回:
对象>数组
匹配所有元素。
该选择器会选择文档中所有的元素,包括html,head,body
selector1,selector2,selectorN
返回:
对象>数组
匹配所有满足selector1或selector2或selectorN的元素
层次选择
elementParentelementChild
返回:
对象>数组
匹配elementParent下的所有子元素elementChild。
例如:
$("divp")选择所有div下的p元素
elementParent>elementChild
返回:
对象>数组
匹配elementParent下的子元素elementChild。
例如:
$("div>p")选择所有上级元素为div的p元素
prev+next
返回:
对象>数组
匹配prev同级之后紧邻的元素next。
例如:
$("h1+div")选择所有div同级之前为h1的元素()
prev~siblings
返回:
对象>数组
匹配prev同级之后的元素siblings。
例如:
$("h1~div")可以匹配()
基本滤镜
:
first
返回:
对象>
匹配第一个元素
:
last
返回:
对象>
匹配最后一个元素
:
not(selector)
返回:
对象>数组
匹配不满足selector的元素
:
has(selector)
返回:
对象>数组
匹配包含满足selector的元素。
此选择器为1.2新增
:
even
返回:
对象>数组
从匹配的元素集中取序数为偶数的元素。
:
odd
返回:
对象>数组
从匹配的元素集中取序数为奇数的元素。
:
eq(index)
返回:
对象>数组
从匹配的元素集中取第index个元素
:
gt(index)
返回:
对象>数组
从匹配的元素中取序数大于index的元素
:
lt(index)
返回:
对象>数组
从匹配的元素中取序数小于index的元素
:
header
返回:
对象>数组
匹配所有的标题元素,例如h1,h2,h3……hN。
此选择器为1.2新增
:
animated
返回:
对象>数组
匹配正在执行动画的元素。
此选择器为1.2新增
:
empty
返回:
对象>数组
匹配所有没有子元素(包括文本内容)的元素
:
parent
返回:
对象>数组
匹配包含子元素(包含文本内容)的所有元素
:
contains(text)
返回:
对象>数组
匹配所有含有text的元素
:
hidden
返回:
对象>数组
匹配所有隐藏的元素,包含属性type值为hidden的元素
:
visible
返回:
对象>数组
匹配所有非隐藏的元素
子元素滤镜
E:
nth-child(index/even/odd/equation)
返回:
对象>数组
匹配所有E在其父元素下满足(index/even/odd/equation)条件的集合。
注:
下标从1开始
E:
first-child
返回:
对象>数组
匹配所有E在其父元素下是第一个子元素的集合。
例如:
HTML("),使用$("p:
first-child"),选取:
E:
last-child
返回:
对象>数组
匹配所有E在其父元素下是最后一个子元素的集合。
例如:
同上的HTML,使用$("p:
last-child"),选取:
E:
only-child
返回:
对象>数组
匹配所有E是其父元素的唯一子元素的集合。
例如:
同上的HTML,使用$("p:
only-child"),选取:
表单滤镜
:
input
返回:
对象>数组
匹配所有的input、textarea、select、button
:
text
返回:
对象>数组
匹配文本域。
注:
在IE浏览器下,选择的对象是所有type属性为text的元素,在非IE浏览器下,选择的对象是input元素type属性为text的元素
:
password
返回:
对象>数组
匹配密码域。
注:
在IE浏览器下,选择的对象是所有type属性为password的元素,在非IE浏览器下,选择的对象是input元素type属性为password的元素
:
radio
返回:
对象>数组
匹配单选按钮。
注:
在IE浏览器下,选择的对象是所有type属性为radio的元素,在非IE浏览器下,选择的对象是input元素type属性为radio的元素
:
checkbox
返回:
对象>数组
匹配复选框。
注:
在IE浏览器下,选择的对象是所有type属性为checkbox的元素,在非IE浏览器下,选择的对象是input元素type属性为checkbox的元素
:
submit
返回:
对象>数组
匹配提交按钮。
注:
在IE浏览器下,选择的对象是所有type属性为submit的元素,在非IE浏览器下,选择的对象是input元素type属性为submit的元素和button元素type属性为空或为submit的元素
:
image
返回:
对象>数组
匹配图像域。
注:
在IE浏览器下,选择的对象是所有type属性为image的元素,在非IE浏览器下,选择的对象是input元素type属性为image的元素
:
reset
返回:
对象>数组
匹配重置按钮。
注:
在IE浏览器下,选择的对象是所有type属性为reset的元素,在非IE浏览器下,选择的对象是input或button元素type属性为reset的元素
:
button
返回:
对象>数组
匹配按钮。
注:
在IE浏览器下,选择的对象是所有type属性为button的元素和元素名为button的元素,在非IE浏览器下,选择的对象是input元素type属性为button的元素和元素名为button的元素
:
file
返回:
对象>数组
匹配文件域。
注:
在IE浏览器下,选择的对象是所有type属性为file的元素,在非IE浏览器下,选择的对象是input元素type属性为file的元素
:
enabled
返回:
对象>数组
匹配所有可用的元素。
注:
即:
not(:
disabled),参考:
disabled的注释
:
disabled
返回:
对象>数组
匹配所有禁用的元素。
注:
在非IE浏览器下,选择的对象是禁用的表单元素
:
checked
返回:
对象>数组
匹配所有被选中的表单。
注:
在IE浏览器下,选择的对象是含有checked属性的所有元素
:
selected
返回:
对象>数组
匹配所有选择的表单。
注:
在IE浏览器下,选择的对象是含有selected属性的所有元素
属性滤镜
[attribute]
返回:
对象>数组
匹配拥有attribute属性的元素
[attribute=value]
返回:
对象>数组
匹配属性attribute为value的元素
[attribute!
=value]
返回:
对象>数组
匹配属性attribute不为value的元素
[attribute^=value]
返回:
对象>数组
匹配属性attribute的值以value开始的元素
[attribute$=value]
返回:
对象>数组
匹配属性attribute的值以value结尾的元素
[attribute*=value]
返回:
对象>数组
匹配属性attribute的值包含value的元素
[selector1][selector2][selectorN]
返回:
对象>数组
匹配满足属性选择器selector1、selector2、selectorN的元素
热榜
这个热榜展示了最常用选择器的排名,数据是根据使用jQuery的著名网站分析得来的。
热榜中的选择器已被归类(如,'divspan'和'ulli'都是'tagtag'形式)。
红色部分表示与W3C规范不兼容。
%Used一栏表示选择器使用百分比(#ofUses一栏表示选择器使用次数)。
只用过一次的选择器没在热榜中罗列。
Selector
%Used
#ofUses
#id
51.290%
1431
.class
13.082%
365
tag
6.416%
179
tag.class
3.978%
111
#idtag
2.151%
60
tag#id
1.935%
54
#id:
visible
1.577%
44
#id.class
1.434%
40
.class.class
1.183%
33
*
0.968%
27
#idtag.class
0.932%
26
#id:
hidden
0.789%
22
tag[name=value]
0.645%
18
.classtag
0.573%
16
[name=value]
0.538%
15
tagtag
0.502%
14
#id#id
0.430%
12
#idtagtag
0.358%
10
tag[name$=value]
0.323%
9
#id:
checkbox
0.323%
9
#id#id:
selected
0.287%
8
.classtag.class
0.287%
8
tag#id>tag
0.287%
8
tag,tag
0.251%
7
tag.classtag
0.251%
7
tag.class
0.215%
6
:
radio
0.215%
6
#id,#id,#id
0.215%
6
#id.classtag
0.215%
6
:
text
0.215%
6
tag,tag,tag
0.215%
6
.class.class.class
0.215%
6
#idtag[name=value]
0.179%
5
:
checkbox
0.179%
5
tag[name*=value]
0.179%
5
#id,#id
0.179%
5
tag.classtag.classtag
0.143%
4
tag.class.class
0.143%
4
tag:
selected
0.143%
4
.class.class.classtag
0.143%
4
.class.class
0.143%
4
tag:
file
0.143%
4
tag,tag[name=value]
0.143%
4
#id,tag[name$=value]
0.143%
4
tag[name!
=value]
0.143%
4
.class.classtag+.class
0.108%
3
.class.classtag:
gt
(2)
0.108%
3
tag:
submit,tag:
image,tag:
submit
0.108%
3
tag.classtag.classtag.classtag.classtag.classtag.class
0.108%
3
#idtagtag.classtag.classtag
0.108%
3
:
input
0.108%
3
tag.classtag.class
0.108%
3
.class.classtag:
has(tag[name^=value])
0.108%
3
#idtag.classtag
0.108%
3
tag:
eq(0)
0.108%
3
#id:
input
0.108%
3
tag#idtag#idtag
0.108%
3
.class,.class
0.108%
3
tag:
eq
(1)
0.108%
3
tag#idtag
0.108%
3
.classtag#id
0.072%
2
#idtag:
first
0.072%
2
#idtagtag[name!
=value]
0.072%
2
.class#idtagtag
0.072%
2
tag#idtag.class
0.072%
2
tag:
filled
0.072%
2
tag:
first
0.072%
2
.classtagtag.class
0.072%
2
#idtag.classtagtag.class
0.072%
2
tag.classtag.classtag.class
0.072%
2
#id#id#idtag.class
0.072%
2
tag[name$=value],#id
0.072%
2
tagtagtag
0.072%
2
:
submit,tag:
image
0.072%
2
.class.classtag
0.072%
2
[name=value]:
first
0.072%
2
.class.class,#id
0.072%
2
#id.classtag.class
0.072%
2
.class#id.class
0.072%
2
#id#idtagtag
0.072%
2
tag[name]
0.072%
2
tag,tag,tag,tag
0.072%
2
tag#idtag#idtag.class
0.072%
2
tag:
unchecked
0.072%
2
#id.class.class
0.072%
2
#idtag.classtag>tag
0.072%
2
.classtagtagtag
0.072%
2
tag.class:
first
0.072%
2
.classtag.classtag
0.072%
2
tag#idtag.class:
first
0.072%
2
#idtag.classtag.classtag
0.072%
2
.classtagtag
0.072%
2
#id.classtagtag
0.072%
2
#idtagtag#id
0.072%
2
tag.class>tag
0.072%
2
#id.class*
0.072%
2
:
input:
visible
0.072%
2
#id.class.class
0.072%
2
#id>tag>tag>tag>tag>tag
0.072%
2
#idtag.classtagtag:
gt(0)
0.072%
2
.class,.class,.class
0.072%
2
#id#id*
0.072%
2
#id>*:
not(#id)
0.072%
2
#idtag[name^=value]
0.072%
2
.classtag.class
0.072%
2
tag:
blank
0.072%
2
jQuery入门[2]-选择器
jQuery之所以令人爱不释手,在于其强大的选择器表达式令DOM操作优雅而艺术。
jQuery的选择符支持id,tagName,css1-3expressions,XPath,参见:
DEMO:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
Selectortitle> script> head>
+ $("input[type='button']").click(function(){
vari=0;
$("input[type='text']").each(function(){
i+=parseInt($(this).val());
});
$('label').text(i);
});
$('input:
lt
(2)')
.add('label')
.css('border','none')
.css('borderBottom','solid1pxnavy')
.css({'width':
'30px'});
script>
body>
html>
运行效果如下:
代码分解:
$("input[type='button']")用于找到type属性为button的input元素(此为CSS表达式,IE7才开始支持,所以在IE6中通常用jQuery的这种表达式代替CSS代码设置样式)。
click()函数为button添加click事件处理函数。
在button_click时,$("input[type='text']")找出所有输入框,each()函数遍历找出来的数组中的对象的值,相加后设到label中。
$('input:
lt
(2)')
.add('label')
两行代码意为:
所有input中的前面两个(lt表示序号小于)再加上label对象合并成一个jQuery对象。
.css('border','none')
.css('borderBottom','solid1pxnavy')
.css({'width':
'30px'});
以上三行代码都是针对之前的jQuery对象设置CSS样式,如果一次需要设置多个CSS值,可用另一种形式,如:
.css({'border':
'none','borderBottom':
'soli
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery Study