看完jquery基础教程做的笔记，笔记并不适合所有人，觉得好，可以看，觉得不好，可以不看。
1, ：eq()和nth-child()
看下面代码：
<script> <br/>$(function(){ <br/>$("#selected-plays > li:eq(1)").addClass("a"); <br/>//等价于 $("#selected-plays > li:nth-child(2)").addClass("a"); <br/><br/>//注意：js数组是从 0 开始的，所以eq（1）是取第二个元素。 <br/>//而css选择器:nth-child（）是从 1 开始的， 所以要选择第二个元素， 得使用 :nth-child(2) ，而不是:nth-child(1)。 <br/> }) <br/> </script>
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
<script></script>
<script> <br/>$(function(){ <br/>$('#a').click(function(){ <br/>alert("A") <br/>}) <br/>$('#b').click(function(e){ <br/>alert("B") <br/>e.stopPropagation();//阻止冒泡， 从来不输出 “A" 。 可以去掉 ，试试对比效果。 <br/>}) <br/>}) <br/></script>
9, hide()show()会记住上一次的dipslay状态
<script></script>
<script> <br/>$(function(){ <br/>$('#test').toggle(function(){ <br/>$('#a').hide();//display : none ，记住display 为 inline <br/>$('#b').hide();//display : none ，记住display 为 block <br/>},function(){ <br/>$('#a').show(); //display : inline <br/>$('#b').show(); //display : block <br/>}) <br/>}) <br/></script>
a
b
10, hide() show()加时间参数
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script></script>
<script> <br/>$(function(){ <br/>$('#test').toggle(function(){ <br/>$('#a').hide(500);//display : none <br/>$('#b').hide(500);//display : none <br/>},function(){ <br/>$('#a').show(500); //display : inline <br/>$('#b').show(500); //display : block <br/>}) <br/>}) <br/></script>
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,做动画之前 先确定位置。
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script></script>
<script> <br/>$(function(){ <br/>$('#a').css("position","absolute");//如果把这句去掉，动画就没了。 <br/>/* <br/>在使用.animate之前，请先把位置确定，不管你是用的 absolute 还是relative <br/>总之要设置其中的一种，因为所有的块级元素默认是static。 <br/>其实是跟css有关。 <br/>*/ <br/>$('#test').click(function(){ <br/>$('#a').animate({ left : '300' } , 'slow' ) <br/>}) <br/>}) <br/></script>
a
14，width()和css('width')
<script></script>
<script> <br/>$(function(){ <br/>$('#test').click(function(){ <br/>var t1 = $('#a').width(); <br/>var t2 = $('#a').css('width'); <br/>alert( t1 ); //200 ， 不带单位 <br/>alert( t2 ); //200px ， 带单位 <br/>alert( parseInt(t2) ) //200 ， 不带单位 <br/>}) <br/>}) <br/></script>
a
15：animate()做动画效果时，动画执行的顺序。
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script></script>
<script> <br/>$(function(){ <br/>$('#test').click(function(){ <br/>$('#a').animate({left : "300px" } , "slow" ) <br/>.animate({ top : "300px" } , "slow" ); <br/>}) <br/>}) <br/></script>
a
//发生上面是按照顺序来执行的。先改变left，然后再改变top
对比:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script></script>
<script> <br/>$(function(){ <br/>$('#test').click(function(){ <br/>$('#a').animate({left : "300px" , top : "300px"} , "slow" ) <br/>}) <br/>}) <br/></script>
a
//发生上面是一起执行的，也就是 left和top 一起改变。
区别知道了吧。
16,同理，我们再看一个例子：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script></script>
<script> <br/>$(function(){ <br/>$('#test').click(function(){ <br/>$('#a').animate({left : "300px" } , "slow" ) <br/>.fadeTo('slow',0.2) <br/>.animate({ top : "300px" } , "slow" ) <br/>.fadeTo('slow',1); <br/>//排队效果会一个个执行。 <br/>}) <br/>}) <br/></script>
a
//当animate()跟其他动画效果执行的时候，也是排队执行的。也就是一个个来。
对比：css()
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script></script>
<script> <br/>$(function(){ <br/>$('#test').click(function(){ <br/>$('#a').animate({left : "300px" } , "slow" ) <br/>.fadeTo('slow',0.2) <br/>.animate({ top : "300px" } , "slow" ) <br/>.fadeTo('slow',1) <br/>.css("backgroundColor","#000"); <br/>//虽然css写在最后，但点击一开始就会执行。 <br/>//排队效果并不适合 .css() <br/>}) <br/>}) <br/></script>
a
解决：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script></script>
<script> <br/>$(function(){ <br/>$('#test').click(function(){ <br/>$('#a').animate({left : "300px" } , "slow" ) <br/>.fadeTo('slow',0.2) <br/>.animate({ top : "300px" } , "slow" ) <br/>.fadeTo('slow',1 ,function(){ <br/>$(this).css("backgroundColor","#000"); <br/>}) <br/>//我们可以把他写在 最后一个效果的 回调函数里。 <br/>}) <br/>}) <br/></script>
a
总结：
当在animate 中以多个属性的方式应用时， 效果是同时发生的。
当以 连续方式 应用时， 是按顺序来的。
非效果方法，比如.css()方式不是按照顺序来的，解决方法是 放在回调函数里。
17, 做一个实例 ： 段落
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DOM Manipulation
<script></script>
<script> <br/>$(function(){ <br/>// $('<a href="#top">回到顶部').insertAfter('p.chapter p');//每个段落后面添加 超链接 <br/>$('<a href="#top">回到顶部').insertAfter('p.chapter p:gt(2)');//（除掉前3个 ）每个段落后面添加 超链接 <br/>$('<a name="top">').prependTo('body');//在body后的开始位置 添加 超链接。 <br/>}) <br/></script>
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
改进：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DOM Manipulation
<script></script>
<script> <br/> $(function(){ <br/> // $('<a href="#top">回到顶部').insertAfter('p.chapter p');//每个段落后面添加 超链接 <br/> $('<a href="#top">回到顶部').insertAfter('p.chapter p:gt(2)');//（除掉前3个 ）每个段落后面添加 超链接 <br/> $('<a name="top">').prependTo('body');//在body后的开始位置 添加 超链接。 <br/><br/> $('p.chapter p').each(function(index){ <br/> $(this).attr("id","node_"+(index+1) ); <br/> //瞄点：在 标签a 上可以用name <br/> //在标签p上 我用name不可以，只能用id <br/> }) <br/><br/> var k =""; <br/> $('p.chapter p').each(function(index){ <br/> k += "<a href='#node_"+(index+1)+"'>段落"+(index+1)+" "; <br/> }) <br/> $(k).insertBefore('.chapter');//在body后的开始位置 添加 超链接。 <br/> //用prependTo（）的时候， 发现k的内容 被倒置了。我晕。。。 <br/> //所以 改用 insertBefore（）、 <br/> }) <br/></script>
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():
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DOM Manipulation
<script></script>
<script> <br/> $(function(){ <br/> $("p").wrap("<p class='chapter'>"); <br/> }) <br/></script>
段落1段落1段落1段落1
段落2段落2段落2段落2
19, 关于clone：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DOM Manipulation
<script></script>
<script> <br/> $(function(){ <br/> $("p").bind("click",function(){ <br/> alert("cssrain test:"); <br/> }) <br/> $("p").clone(true).appendTo("body"); <br/> $("p").clone(false).appendTo("body"); <br/> //我们发现 clone(true) 会连带绑定的事件一起复制， <br/> //false只复制元素，而绑定的事件已经被它扔掉。 <br/> $("p").clone().appendTo("body");//默认是 false <br/> /* <br/> 这点 jquery的clone（）跟dom里的clone有点区别了。 <br/> 如果想实现dom 里的clone（） <br/> 可以这么做; <br/> $("p").clone(true).empty().appendTo("body"); <br/> */ <br/> }) <br/></script>
段落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章的笔记，差不多就这些了。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
934
