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("c***ain")')
        //取得 包含 字符串 c***ain 的全部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" "
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
                <html xmlns="
[url]http://www.w3.org/1999/xhtml[/url] " 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" "
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns="
[url]http://www.w3.org/1999/xhtml[/url] " 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" "
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns="
[url]http://www.w3.org/1999/xhtml[/url] " 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" "
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns="
[url]http://www.w3.org/1999/xhtml[/url] " xml:lang="zh-CN" lang="zh-CN">
<script src="
[url]http://www.c***ain.cn/demo/JQuery+API/jquery-1[/url][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" "
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns="
[url]http://www.w3.org/1999/xhtml[/url] " 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" "
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns="
[url]http://www.w3.org/1999/xhtml[/url] " 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" "
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url] " 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"
"
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns="
[url]http://www.w3.org/1999/xhtml[/url] " 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"
"
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns="
[url]http://www.w3.org/1999/xhtml[/url] " xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>DOM Manipulation</title>
<script src="
[url]http://www.c***ain.cn/demo/JQuery+API/jquery-1[/url][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> ";
})
$(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"
"
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns="
[url]http://www.w3.org/1999/xhtml[/url] " 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"
"
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns="
[url]http://www.w3.org/1999/xhtml[/url] " 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("c***ain 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>c***ain</p>")
複製節點:
.clone()
插入節點:
.append()
.appendTo()
.prepend()
.prependTo()
.after()
.insertAfter()
.before()
.insertBefore()
刪除節點:
.remove()
清空節點:
.empty()
包裝節點:
.wrap()
設置屬性
.attr()
刪除屬性
.removeAttr()
基本跟javascript中的DOM操做同樣,clone()稍微不同,前面例子說過區別了。。
相關文章
相關標籤/搜索