jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > js jquery

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

作者:

看完jquery基础教程做的笔记,笔记并不适合所有人,觉得好,可以看,觉得不好,可以不看。
 1, :eq()和nth-child() 
看下面代码:
<SCRIPT LANGUAGE="JavaScript">
$(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)。
     })
 </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() 阻止冒泡.
具体例子:
<div id="a">aaaaaaa
<div id="b">bbbbbbbb</div>
aaaaaa</div>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#a').click(function(){
alert("A")
})
$('#b').click(function(e){
alert("B")
e.stopPropagation();//阻止冒泡, 从来不输出 “A" 。 可以去掉 ,试试对比效果。
})
})
</SCRIPT>


9, hide()show()会记住上一次的dipslay状态
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(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
})
})
</SCRIPT>
<DIV id="a" style="display:inline;">a</div>
<DIV id="b" style="display:block;">b</div>
<input type="button" id="test" value="test" />


10, hide()  show()加时间参数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(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
})
})
</SCRIPT>
<DIV id="a" style="display:inline;">a</div>
<DIV id="b" style="display:block;">b</div>
<input type="button" id="test" value="test" />


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,做动画之前 先确定位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#a').css("position","absolute");//如果把这句去掉,动画就没了。
/*
在使用.animate之前,请先把位置确定,不管你是用的 absolute 还是relative
总之要设置其中的一种,因为所有的块级元素默认是static。
其实是跟css有关。
*/
$('#test').click(function(){
$('#a').animate({ left : '300' } , 'slow' )
})
})
</SCRIPT>
<DIV id="a" >a</div>
<input type="button" id="test" value="test" />


14,width()和css('width')
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
var t1  =  $('#a').width();
var t2  =  $('#a').css('width');
alert( t1 ); //200 , 不带单位
alert( t2 ); //200px , 带单位
alert( parseInt(t2) ) //200 , 不带单位
})
})
</SCRIPT>
<DIV id="a" style="width:200px">a</div>
<input type="button" id="test" value="test" />


15:animate()做动画效果时,动画执行的顺序。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" } , "slow" )
.animate({ top : "300px" } , "slow" );
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:10px;height:10px;">a</div>
<input type="button" id="test" value="test" />
//发生上面是按照顺序来执行的。先改变left,然后再改变top


对比:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" ,  top : "300px"} , "slow" )
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:10px;height:10px;">a</div>
<input type="button" id="test" value="test" />
//发生上面是一起执行的,也就是 left和top 一起改变。

区别知道了吧。


16,同理,我们再看一个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" } , "slow" )
.fadeTo('slow',0.2)
.animate({ top : "300px" } , "slow" )
.fadeTo('slow',1);
//排队效果会一个个执行。
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div>
<input type="button" id="test" value="test" />
//当animate()跟其他动画效果执行的时候,也是排队执行的。也就是一个个来。

对比:css()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(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()
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div>
<input type="button" id="test" value="test" />


解决:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(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");
})
//我们可以把他写在 最后一个效果的 回调函数里。
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div>
<input type="button" id="test" value="test" />

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


17, 做一个实例 : 段落
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>DOM Manipulation</title>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
// $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p');//每个段落后面添加 超链接
$('<a href="#top">回到顶部</a>').insertAfter('div.chapter p:gt(2)');//(除掉前3个 )每个段落后面添加 超链接
$('<a name="top"></a>').prependTo('body');//在body后的开始位置 添加 超链接。
})
</SCRIPT>
</head>
<body>
<h1 id="excerpt">Demo</h1>
<div class="chapter">
  <p>段落1段落1段落1段落1<br/><br/><br/><br/><br/><br/></p>

  <p>段落2段落2段落2段落2<br/><br/><br/><br/><br/><br/></p>

  <p>段落3段落3段落3段落3<br/><br/><br/><br/><br/><br/><br/></p>

  <p>段落4段落4段落4段落4<br/><br/><br/><br/><br/><br/><br/></p>

  <p>段落5段落5段落5段落5<br/><br/><br/><br/><br/><br/><br/></p>

  <p>段落6段落6段落6段落6<br/><br/><br/><br/><br/><br/><br/></p>

  <p>段落7段落7段落7段落7<br/><br/><br/><br/><br/><br/><br/></p>
</body>
</html>


改进:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>DOM Manipulation</title>
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
    $(function(){
       // $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p');//每个段落后面添加 超链接
       $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p:gt(2)');//(除掉前3个 )每个段落后面添加 超链接
       $('<a name="top"></a>').prependTo('body');//在body后的开始位置 添加 超链接。

       $('div.chapter p').each(function(index){
          $(this).attr("id","node_"+(index+1) );
          //瞄点:在 标签a 上可以用name
          //在标签p上 我用name不可以,只能用id
       })

       var k ="";
       $('div.chapter p').each(function(index){
          k += "<a href='#node_"+(index+1)+"'>段落"+(index+1)+"</a> &nbsp;";
       })
       $(k).insertBefore('.chapter');//在body后的开始位置 添加 超链接。
       //用prependTo()的时候, 发现k的内容 被倒置了。我晕。。。
       //所以 改用 insertBefore()、
    })
</SCRIPT>
</head>
<body>
<h1 id="excerpt">Demo</h1>
<div class="chapter">
  <p>段落1段落1段落1段落1<br/><br/><br/><br/><br/><br/></p>

  <p>段落2段落2段落2段落2<br/><br/><br/><br/><br/><br/></p>

  <p>段落3段落3段落3段落3<br/><br/><br/><br/><br/><br/><br/></p>

  <p>段落4段落4段落4段落4<br/><br/><br/><br/><br/><br/><br/></p>

  <p>段落5段落5段落5段落5<br/><br/><br/><br/><br/><br/><br/></p>

  <p>段落6段落6段落6段落6<br/><br/><br/><br/><br/><br/><br/></p>

  <p>段落7段落7段落7段落7<br/><br/><br/><br/><br/><br/><br/></p>
</body>
</html>

18,包装元素 : wrap():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>DOM Manipulation</title>
<script src="jqurey.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
    $(function(){
        $("p").wrap("<div class='chapter'></div>");
    })
</SCRIPT>
</head>
<body>
  <p>段落1段落1段落1段落1</p>

  <p>段落2段落2段落2段落2</p>
</body>
</html>

<!--
结果为:
<div class="chapter">
<p>
段落1段落1段落1段落1
</p>
</div>

<div class="chapter">
<p>
段落2段落2段落2段落2
</p>
</div>

而不是:
<div class="chapter">
<p>
段落1段落1段落1段落1
</p>
<p>
段落2段落2段落2段落2
</p>
</div>

-->



19, 关于clone:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>DOM Manipulation</title>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
    $(function(){
        $("p").bind("click",function(){ 
        alert("cssrain test:");
        })
        $("p").clone(true).appendTo("body");
        $("p").clone(false).appendTo("body");
        //我们发现 clone(true) 会连带绑定的事件一起复制,
        //false只复制元素,而绑定的事件已经被它扔掉。
        $("p").clone().appendTo("body");//默认是 false
         /*
           这点 jquery的clone()跟dom里的clone有点区别了。
           如果想实现dom 里的clone()
           可以这么做;
           $("p").clone(true).empty().appendTo("body");
         */
    })
</SCRIPT>
</head>
<body>
  <p>段落1段落1段落1段落1</p>
</body>
</html>


20, DOM操作总结:
创建节点:
直接 $("<p>cssrain</p>")

复制节点:
.clone()

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

删除节点:
.remove()

清空节点:
.empty()

包装节点:
.wrap()

设置属性
.attr()

删除属性
.removeAttr()

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


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

您可能感兴趣的文章:
阅读全文