jQuery基础教程笔记Word文档格式.docx
- 文档编号:16199828
- 上传时间:2022-11-21
- 格式:DOCX
- 页数:16
- 大小:19.07KB
jQuery基础教程笔记Word文档格式.docx
《jQuery基础教程笔记Word文档格式.docx》由会员分享,可在线阅读,更多相关《jQuery基础教程笔记Word文档格式.docx(16页珍藏版)》请在冰豆网上搜索。
:
odd:
奇数行
even:
偶数行
新手经常会说,好像跟我们做的相反?
其实与:
eq()选择器一样,下标都是从0开始的,
也就是表格的第一行编号是0(偶数);
第二行编号是1(奇数);
以此类推。
。
3,$("
tr:
odd"
).addClass()
可以写成$("
tr"
).filter("
4,$('
td:
contains("
cssrain"
)'
)//取得包含字符串cssrain的所有td
5,jquery转dom:
td"
).get(0).tagName或$("
)[0].tagName
6,load():
jquery中的load()有2层意思,
第一层意思可以等价于dom中window.onload
第二层意思可以load(url)。
7:
ready简写:
1;
$(document).ready(function(){
//dosomething
})
2;
$().ready(function(){
3;
$(function(){
8,事件冒泡:
正常的来说:
点击B会触发a的click。
如果我们不想触发A,可以用stopPropagation()阻止冒泡.
具体例子:
divid="
aaaaaaa
b"
bbbbbbbb<
/div>
aaaaaa<
scriptsrc="
jquery.js"
type="
text/javascript"
/script>
$('
#a'
).click(function(){
alert("
A"
)
#b'
).click(function(e){
B"
e.stopPropagation();
//阻止冒泡,从来不输出“A"
。
可以去掉,试试对比效果。
9,hide()show()会记住上一次的dipslay状态
#test'
).toggle(function(){
).hide();
//display:
none,记住display为inline
none,记住display为block
},function(){
).show();
//display:
inline
block
DIVid="
style="
display:
inline;
"
a<
block;
b<
inputtype="
button"
id="
test"
value="
/>
10,hide()show()加时间参数
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Strict//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
xml:
lang="
zh-CN"
lang="
).hide(500);
none
).show(500);
11,效果:
show(),hide()会同时修改多个样式属性:
高度,宽度和不透明度。
fadeIn()fadeOut():
不透明度
fadeTo():
slideDown(),slideUp():
高度
如果都不能满意,只能用animate()了
animate()提供了更为强大的,复杂的效果。
12,animate():
之前.show('
slow'
//slow代表的是0.6秒内同时改变高度,宽度和透明度。
如果用时间表示是600;
===.show(600);
那么我们再来看看animate()
animate({heigth:
'
width:
},'
)
这里之所以可以height:
其实就跟.show('
)类似,当然他前面规定了height。
13,做动画之前先确定位置。
).css("
position"
"
absolute"
//如果把这句去掉,动画就没了。
/*
在使用.animate之前,请先把位置确定,不管你是用的absolute还是relative
总之要设置其中的一种,因为所有的块级元素默认是static。
其实是跟css有关。
*/
).animate({left:
300'
)
>
14,width()和css('
width'
vart1=$('
).width();
vart2=$('
).css('
alert(t1);
//200,不带单位
alert(t2);
//200px,带单位
alert(parseInt(t2))//200,不带单位
width:
200px"
15:
animate()做动画效果时,动画执行的顺序。
).animate({left:
300px"
},"
slow"
.animate({top:
);
position:
absolute;
10px;
height:
//发生上面是按照顺序来执行的。
先改变left,然后再改变top
对比:
top:
},"
//发生上面是一起执行的,也就是left和top一起改变。
区别知道了吧。
16,同理,我们再看一个例子:
.fadeTo('
0.2)
1);
//排队效果会一个个执行。
40px;
top:
100px;
background:
red;
//当animate()跟其他动画效果执行的时候,也是排队执行的。
也就是一个个来。
对比:
css()
1)
.css("
backgroundColor"
#000"
//虽然css写在最后,但点击一开始就会执行。
//排队效果并不适合.css()
解决:
1,function(){
$(this).css("
//我们可以把他写在最后一个效果的回调函数里。
总结:
当在animate中以多个属性的方式应用时,效果是同时发生的。
当以连续方式应用时,是按顺序来的。
非效果方法,比如.css()方式不是按照顺序来的,解决方法是放在回调函数里。
17,做一个实例:
段落
en"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gbk"
title>
DOMManipulation<
/title>
//$('
ahref="
#top"
回到顶部<
/a>
'
).insertAfter('
div.chapterp'
//每个段落后面添加超链接
div.chapterp:
gt
(2)'
//(除掉前3个)每个段落后面添加超链接
aname="
top"
).prependTo('
body'
//在body后的开始位置添加超链接。
/head>
body>
h1id="
excerpt"
Demo<
/h1>
divclass="
chapter"
p>
段落1段落1段落1段落1<
br/>
/p>
段落2段落2段落2段落2<
段落3段落3段落3段落3<
段落4段落4段落4段落4<
段落5段落5段落5段落5<
段落6段落6段落6段落6<
段落7段落7段落7段落7<
/body>
/html>
改进:
$(function(){
//$('
$('
).each(function(index){
$(this).attr("
id"
node_"
+(index+1));
//瞄点:
在标签a上可以用name
//在标签p上我用name不可以,只能用id
vark="
;
k+="
ahref='
#node_"
+(index+1)+"
段落"
&
nbsp;
$(k).insertBefore('
.chapter'
//用prependTo()的时候,发现k的内容被倒置了。
我晕。
//所以改用insertBefore()、
b
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery 基础教程 笔记