首页 > web前端 > js教程 > jQuery基础教程笔记适合js新手_jquery

jQuery基础教程笔记适合js新手_jquery

PHP中文网
发布: 2016-05-16 19:03:13
原创
1034 人浏览过

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

 1, :eq()和nth-child() 
看下面代码:



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(){   
   //do something
})
2;
$().ready(function(){   
   //do something
})
3;
$(function(){   
   //do something
})


8,事件冒泡:
正常的来说:点击B  会触发a的click。
如果我们不想触发A,可以用stopPropagation() 阻止冒泡.
具体例子:

aaaaaaa

bbbbbbbb


aaaaaa






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


a


b





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




a


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,做动画之前 先确定位置。




a





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


a





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




a



//发生上面是按照顺序来执行的。先改变left,然后再改变top


对比:




a



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

区别知道了吧。


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




a



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

对比:css()




a





解决:




a




总结:
当在animate 中以多个属性的方式应用时, 效果是同时发生的。
当以 连续方式 应用时, 是按顺序来的。
非效果方法,比如.css()方式不是按照顺序来的,解决方法是 放在回调函数里。


17, 做一个实例 : 段落
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



DOM Manipulation




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











改进:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



DOM Manipulation




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










18,包装元素 : wrap():
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



DOM Manipulation




  

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



  

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









19, 关于clone:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



DOM Manipulation




  

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






20, DOM操作总结:
创建节点:
直接 $("

cssrain

")

复制节点:
.clone()

插入节点:
.append()
.appendTo()
.prepend()
.prependTo()
.after()
.insertAfter()
.before()
.insertBefore()

删除节点:
.remove()

清空节点:
.empty()

包装节点:
.wrap()

设置属性
.attr()

删除属性
.removeAttr()

基本跟javascript中的DOM操作一样,clone()稍微不一样,前面例子说过区别了。。


前6章的笔记,差不多就这些了。

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板