jQuery基础教程笔记.docx

上传人:b****5 文档编号:3294293 上传时间:2022-11-21 格式:DOCX 页数:16 大小:19.07KB
下载 相关 举报
jQuery基础教程笔记.docx_第1页
第1页 / 共16页
jQuery基础教程笔记.docx_第2页
第2页 / 共16页
jQuery基础教程笔记.docx_第3页
第3页 / 共16页
jQuery基础教程笔记.docx_第4页
第4页 / 共16页
jQuery基础教程笔记.docx_第5页
第5页 / 共16页
点击查看更多>>
下载资源
资源描述

jQuery基础教程笔记.docx

《jQuery基础教程笔记.docx》由会员分享,可在线阅读,更多相关《jQuery基础教程笔记.docx(16页珍藏版)》请在冰豆网上搜索。

jQuery基础教程笔记.docx

jQuery基础教程笔记

jQuery基础教程笔记

看完jquery基础教程做的笔记,笔记并不适合所有人,觉得好,可以看,觉得不好,可以不看。

1,:

eq()和nth-child()

看下面代码:

$(function(){

$("#selected-plays>li:

eq

(1)").addClass("a");

//等价于$("#selected-plays>li:

nth-child

(2)").addClass("a");

//注意:

js数组是从0开始的,所以eq

(1)是取第二个元素。

//而css选择器:

nth-child()是从1开始的,所以要选择第二个元素,得使用:

nth-child

(2),而不是:

nth-child

(1)。

})

 

2,:

odd和:

even

:

odd:

奇数行

:

even:

偶数行

新手经常会说,好像跟我们做的相反?

其实与:

eq()选择器一样,下标都是从0开始的,

也就是表格的第一行编号是0(偶数);

第二行编号是1(奇数);以此类推。

 

3,$("tr:

odd").addClass()

可以写成$("tr").filter(":

odd").addClass()

4,$('td:

contains("cssrain")')//取得包含字符串cssrain的所有td

5,jquery转dom:

$("td").get(0).tagName或$("td")[0].tagName

6,load():

jquery中的load()有2层意思,

第一层意思可以等价于dom中window.onload

第二层意思可以load(url)。

7:

ready简写:

1;

$(document).ready(function(){

//dosomething

})

2;

$().ready(function(){

//dosomething

})

3;

$(function(){

//dosomething

})

 

8,事件冒泡:

正常的来说:

点击B会触发a的click。

如果我们不想触发A,可以用stopPropagation()阻止冒泡.

具体例子:

aaaaaaa

bbbbbbbb

aaaaaa

$(function(){

$('#a').click(function(){

alert("A")

})

$('#b').click(function(e){

alert("B")

e.stopPropagation();//阻止冒泡,从来不输出“A"。

可以去掉,试试对比效果。

})

})

 

9,hide()show()会记住上一次的dipslay状态

$(function(){

$('#test').toggle(function(){

$('#a').hide();//display:

none,记住display为inline

$('#b').hide();//display:

none,记住display为block

},function(){

$('#a').show();//display:

inline

$('#b').show();//display:

block

})

})

inline;">a

block;">b

 

10,hide()show()加时间参数

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"xml:

lang="zh-CN"lang="zh-CN">

$(function(){

$('#test').toggle(function(){

$('#a').hide(500);//display:

none

$('#b').hide(500);//display:

none

},function(){

$('#a').show(500);//display:

inline

$('#b').show(500);//display:

block

})

})

inline;">a

block;">b

 

11,效果:

show(),hide()会同时修改多个样式属性:

高度,宽度和不透明度。

fadeIn()fadeOut():

不透明度

fadeTo():

不透明度

slideDown(),slideUp():

高度

如果都不能满意,只能用animate()了

animate()提供了更为强大的,复杂的效果。

12,animate():

之前.show('slow');//slow代表的是0.6秒内同时改变高度,宽度和透明度。

如果用时间表示是600;===.show(600);

那么我们再来看看animate()

animate({heigth:

'slow',width:

'slow'},'slow')

这里之所以可以height:

'slow'其实就跟.show('slow')类似,当然他前面规定了height。

13,做动画之前先确定位置。

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"xml:

lang="zh-CN"lang="zh-CN">

$(function(){

$('#a').css("position","absolute");//如果把这句去掉,动画就没了。

/*

在使用.animate之前,请先把位置确定,不管你是用的absolute还是relative

总之要设置其中的一种,因为所有的块级元素默认是static。

其实是跟css有关。

*/

$('#test').click(function(){

$('#a').animate({left:

'300'},'slow')

})

})

a

 

14,width()和css('width')

$(function(){

$('#test').click(function(){

vart1=$('#a').width();

vart2=$('#a').css('width');

alert(t1);//200,不带单位

alert(t2);//200px,带单位

alert(parseInt(t2))//200,不带单位

})

})

200px">a

 

15:

animate()做动画效果时,动画执行的顺序。

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"xml:

lang="zh-CN"lang="zh-CN">

$(function(){

$('#test').click(function(){

$('#a').animate({left:

"300px"},"slow")

.animate({top:

"300px"},"slow");

})

})

absolute;width:

10px;height:

10px;">a

//发生上面是按照顺序来执行的。

先改变left,然后再改变top

 

对比:

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"xml:

lang="zh-CN"lang="zh-CN">

$(function(){

$('#test').click(function(){

$('#a').animate({left:

"300px",top:

"300px"},"slow")

})

})

absolute;width:

10px;height:

10px;">a

//发生上面是一起执行的,也就是left和top一起改变。

区别知道了吧。

 

16,同理,我们再看一个例子:

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"xml:

lang="zh-CN"lang="zh-CN">

$(function(){

$('#test').click(function(){

$('#a').animate({left:

"300px"},"slow")

.fadeTo('slow',0.2)

.animate({top:

"300px"},"slow")

.fadeTo('slow',1);

//排队效果会一个个执行。

})

})

absolute;width:

40px;height:

40px;top:

100px;background:

red;">a

//当animate()跟其他动画效果执行的时候,也是排队执行的。

也就是一个个来。

对比:

css()

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"xml:

lang="zh-CN"lang="zh-CN">

$(function(){

$('#test').click(function(){

$('#a').animate({left:

"300px"},"slow")

.fadeTo('slow',0.2)

.animate({top:

"300px"},"slow")

.fadeTo('slow',1)

.css("backgroundColor","#000");

//虽然css写在最后,但点击一开始就会执行。

//排队效果并不适合.css()

})

})

absolute;width:

40px;height:

40px;top:

100px;background:

red;">a

 

解决:

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"xml:

lang="zh-CN"lang="zh-CN">

$(function(){

$('#test').click(function(){

$('#a').animate({left:

"300px"},"slow")

.fadeTo('slow',0.2)

.animate({top:

"300px"},"slow")

.fadeTo('slow',1,function(){

$(this).css("backgroundColor","#000");

})

//我们可以把他写在最后一个效果的回调函数里。

})

})

absolute;width:

40px;height:

40px;top:

100px;background:

red;">a

总结:

当在animate中以多个属性的方式应用时,效果是同时发生的。

当以连续方式应用时,是按顺序来的。

非效果方法,比如.css()方式不是按照顺序来的,解决方法是放在回调函数里。

 

17,做一个实例:

段落

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"

"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"xml:

lang="en"lang="en">

DOMManipulation

$(function(){

//$('回到顶部').insertAfter('div.chapterp');//每个段落后面添加超链接

$('回到顶部').insertAfter('div.chapterp:

gt

(2)');//(除掉前3个)每个段落后面添加超链接

$('').prependTo('body');//在body后的开始位置添加超链接。

})

Demo

段落1段落1段落1段落1





段落2段落2段落2段落2





段落3段落3段落3段落3






段落4段落4段落4段落4






段落5段落5段落5段落5






段落6段落6段落6段落6






段落7段落7段落7段落7






 

改进:

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"

"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"xml:

lang="en"lang="en">

DOMManipulation

$(function(){

//$('回到顶部').insertAfter('div.chapterp');//每个段落后面添加超链接

$('回到顶部').insertAfter('div.chapterp:

gt

(2)');//(除掉前3个)每个段落后面添加超链接

$('').prependTo('body');//在body后的开始位置添加超链接。

$('div.chapterp').each(function(index){

$(this).attr("id","node_"+(index+1));

//瞄点:

在标签a上可以用name

//在标签p上我用name不可以,只能用id

})

vark="";

$('div.chapterp').each(function(index){

k+="段落"+(index+1)+" ";

})

$(k).insertBefore('.chapter');//在body后的开始位置添加超链接。

//用prependTo()的时候,发现k的内容被倒置了。

我晕。

//所以改用insertBefore()、

})

Demo

段落1段落1段落1段落1





段落2段落2段落2段落2





段落3段落3段落3段落3






段落4段落4段落4段落4






段落5段落5段落5段落5

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 外语学习 > 法语学习

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1