JQuery_1_選擇器什麼是JQuery JQuery實際上就是一個javascript文件，它是一堆由javascript寫好的工具程式，一個被封裝好的js工具庫。它在js基礎之上做了很多的優化，讓網頁腳本的編寫過程更加的便捷高效。 JQuery有很多的版本，但各版本之間的差異都不是太大，基礎 ...

JQuery_1_選擇器

什麼是JQuery

JQuery實際上就是一個javascript文件，它是一堆由javascript寫好的工具程式，一個被封裝好的js工具庫。它在js基礎之上做了很多的優化，讓網頁腳本的編寫過程更加的便捷高效。

JQuery有很多的版本，但各版本之間的差異都不是太大，基礎語法的通用。

如何使用JQuery

1、首先，我們必須下載或複製JQuery的庫文件，也就是文件名”jquery-版本號[.min].js”的腳本文件，（其中包含min的是沒有換行、製表符和空格的壓縮版本）。

2、在網頁中引用JQuery文件：

<script type="text/javascript" src= "js/jquery-1.7.1.min.js" > </script>

選擇器

選擇器的意義，就是確定代碼執行的對象，就是確定代碼執行的目標對象。

選擇器的基本格式

$符號代表選擇器，它的作用類似於javascript如下指令：

document.getElementByID

document.getElementsByClassName

document.getElementsByTagName

語法：

$(表達式)

表達式可以是一個字元串，也可以是一個變數或html代碼。

註意：JQuery語句通常都是以$開頭的。

$(document)

獲取當前網頁的文檔對象。

$(document.body)代表網頁的<body>部分

$(document.body).css({"background-color":"green"});

HTML標簽選擇器

就是在選擇器的表達式中直接使用html標簽名，示例：

<p>天氣涼了</p>

<div id="box1">魂牽夢縈</div>

<div id="box2">朝秦暮楚

<p>註意添衣</p>

</div>

 

//$("p").css({"font-size":"88px"});

$("div p").css({"font-size":"88px"});

選擇器的find()方法

意思是在選擇器選定的集合之中，再次進行二次篩選，在選擇器選定的結果里，再次按條件進行查找。

$(document).find("div p").css({"font-size":"88px"});

//在網頁正文中尋找第一個div里的p標簽。

ID選擇器

$("#box1").css({"font-size":"88px"});

在選擇器的表達式中用#以及其後的ID名稱來獲取這個ID所指向的元素對象。

Class樣式類選擇器

$(".style1").css(

{

"font-size":"38px",

"background-color":"yellow"

}

);

針對所有class屬性為.style1的元素。

css之中包含的實際上是一個JSON對象。

$(“*”)
選擇所有元素

$("*").css({

"font-size":"38px",

"background-color":"orange"

});

小練習

將一個span中的div通過jquery的css方法，設置其樣式為高200像素寬300像素背景為蘭色字體為40px。

併列選擇：

$("#box1,.style1").css({

"font-size":"38px",

"background-color":"orange"

});

在表達式中，用逗號來分隔多個選擇器。

父子層級關係選擇

按照元素之間的包含關係來進行選擇，父與子元素用空格或>來分割。

$("#box2>p").css({

"font-size":"38px",

"background-color":"orange"

});

相鄰選擇器

選擇下一個元素

當jquery匹配選擇器的時候，會首先找到+左邊的元素，然後從該元素開始向後查找+右邊的元素，直到找到第一個符合的元素為止。

$(“#box1+div”) //查找box1後面的第一個div

$(".style1+p") //註意：包含層級必須是同一級別的才可以

選擇之後所有匹配的元素

$(".style1~p")

首先找到~左邊的元素，然後從該元素開始向後查找~右邊的元素，找到所有符合條件的元素為止。

選擇符合條件的第一個/最後一個元素

$("p:first")

$("p:last")

在選擇結果中排除

$("p:not(.style1)").css({"background-color":"orange"});

//在<p>中排除樣式類名為style1的元素。

選擇查詢結果中的排列次序為偶數/奇數的元素

$("p:even").css({"background-color":"orange"});

//選擇偶數次序的元素

$("p:odd").css({"background-color":"#aaa"});

//選擇奇數次序的元素

選擇指定次序的元素

$("p:eq(0)").css({"background-color":"orange"});

//選擇頁面上的第一個<p>段落（第一個元素的序號為0）

選擇大於/小於指定序號的元素

$("p:lt(3)").css({"background-color":"orange"});

//結果集的第3個元素之前的所有元素

$("p:gt(3)").css({"background-color":"orange"});

//結果集的第3個元素之後的所有元素

選擇包含指定文本的元素

$("p:contains('Hello')").css({"background-color":"orange"});

//在結果集中查找包含了指定內容的元素。

選擇不包含任何子元素或內容的標簽

$("p:empty").css({"background-color":"orange","height":"30px"});

//在選擇器的查找結果中篩選內部為空的元素

包含指定的子元素的父元素

$("div:has('.style1')")

在所有div中查找，包含使用了.style1的子元素的div。

選擇指定元素的父元素

$(".style1:parent").css({

"background-color":"orange",

"height":"30px"

});

選擇所有的隱藏元素

$("p:hidden").css({

"background-color":"red",

"display":"block"

});

小練習：

製作一個顯示學生姓名的表格，然後設置奇數行的背景色為淡灰色，偶數行的背景色為憕色，如果單元格中沒有內容，背景色為紅色。

JQurey元素的屬性

Html()方法

獲取或設置一個容器類元素內部包含的內容，也就是其開始標簽與閉合標簽中間的內容。

示例：

alert( $("#box1").html()); //獲取內容

$("#box1").html("今天<p>星期五</p>"); //修改box1中的內容

Text()方法

與Html相似，獲取元素的內容，但是會對內容中的html標簽進行一定的處理。

 

$("#box1").text("今天<p>星期五</p>"); //寫入內容時，html元素會被轉義，從而不會被瀏覽作為html標簽來解析。

$("#box1").text(); //獲取內容時清除掉其中的html

小練習：

1、在網頁中加入一個5行以上的表格。用JQuery向表格的第三行寫入文字“雲深不知處，身在此山中”。

2、手動在第四行寫入“明日復明日，明日何其多。”。然後用JQuery查找包含“明日”的行，將其文本內容改為“雷令風行”。

3、給表格第一行加入id為tr1，用jquery匹配tr1的下一行，併在寫一行寫入文本：“山中自有黃金屋”

通過JQuery操作hmtl元素及其屬性

Ready事件

$(document).ready();

通常JQuery的選擇器都需要在其指定的HTML元素載入完成之後再來執行，因此我們一般都是在頁面全部載入完畢之後再業執行JQuery代碼，否則很可能元素還沒有被瀏覽器構建入DOM模型，我們就去提前使用元素，會造成程式錯誤。

ready()事件的意思就是指頁面全布載入完畢觸發，DOM模型構建完成之後。

它相當於是body的onload()事件。

語法：

$(document).ready( function(e){

//需要在頁面載入之後運行的代碼;

} );

示例：

<body onload=" $('#box1').text('今天<p>星期五</p>');">

相當於：

<script type="text/javascript">

$(document).ready(function(e) {

    $("#box1").text("今天<p>星期五</p>");

});

</script>

註意：

Ready()事件可以包含絕大多數的javascript和jquery代碼，但是要註意作用域的問題，在ready()中內部定義的變數和函數，是無法在外部訪問到的。

JQuery操作html元素

length屬性和.size()方法

代表選擇器所匹配到的元素的個數。

比如：

$("div").length;

$("div:lt(3)").size(); //第三個元素之前的元素個數

$("div:lt(3)").length;

Get( )方法

它類似於$(“div:eq(n)”)，作用是在選擇器匹配到的元素集合中得到指定次序的元素。

但是它同時有另一個功能，就是將JQuery對象轉換為javascript對象。也就是不再支持html()或css()這類JQuery方法，而是可以支持innerHTML或style這類javascript的系統函數。

示例：

$("div").get(3).innerHTML //得到第四個元素的內容

each( )方法

它的作用是遍歷選擇器得到的集合中的每個元素。

each方法的參數

示例：

//each所執行的函數包含兩個參數，index代表當前元素在集合中的次序，element代表當前元素對象

    $("div").each(function(index, element) {

        alert(index +"----"+ element.innerHTML);

});

attr( ) 元素屬性集合

獲取、設置或添加html元素的屬性或屬性的集合。

示例：

alert($("#box1").attr("title")) //顯示提示內容

$("#img1").attr("src","22.jpg"); //修改圖片路徑

 

$("#img1").attr(

{

"width":"700",

"height":"550",

"src":"22.jpg"

}

); //同時修改圖片的寬、高和路徑

remove()刪除元素

清除選擇器指定的元素

示例：

alert(1);

$("div:eq(3)").remove();

為元素添加css樣式類

addClass()將已存在的css樣式類添加到指定的html元素上。

示例：

alert(1);

$("div:eq(3)").addClass("boxStyle");

去除html元素的樣式類

removeClass()清除指定元素上已有的樣式類。

示例：

alert(1);

$("div:eq(0)").removeClass("boxStyle");

獲取或設置表單元素的值

val()用於獲取或設置表單元素的value屬性的值。

示例：

alert($("input:eq(1)").val());

$("input:eq(0)").val("明天是星期六");

小練習：

1、在頁面上添加5個div，並且定義一個數組，這個數組包含5個元素“登黃鶴樓”，“白日依山盡”，“黃河入海流”，“欲窮千里目”，“請上二樓”。用JQuery的each()，遍歷頁面上的5個div，將這個5條詩句分別加入5個div中。

2、定義兩個css樣式類，一個為背景淡黃色，一個為背景淡綠色，奇數行使用淡黃樣式類，偶數行使用淡綠樣式類。

3、用css()方法，定義字體：為華文行楷，字型大小30px。

4、在頁面上定義9個div，裡邊輸入1-9的數字，用css()和addClass()方法將這9個div以9宮格方式排列，在頁面上添加一個文本框和按鈕，當我在文本框中輸入1-9的數字並按按鈕之後，其相應的數字的div就消失不見。

DOM文檔處理

向html元素的內部的末尾添加內容

append()方法，向指定的容器類元素的內部的最後面添加內容。

示例：

alert(1);

    $("div:first").append("快樂");

alert(1);

    $("div:eq(3)").append("<b style='color:red'>快樂</b>");

將html元素移動到另一個元素的內部的末尾

appendTo()方法，示例：

alert(1);

$("#img1").appendTo("div:eq(1)");

//將圖片移動到div內部的最後的位置

向html元素內部的開始位置添加內容

prepend()將字元或html代碼添加到指定元素內部的最前方，比如：

$("div:eq(2)").prepend("<input type='text' value='1月1日'  />");

$("div:first").prepend("<img src='img/22.jpg' width='100' />");

將html元素移動到內部的最開始的位置

prependTo()方法，示例：

alert(1);

$("#img2").prependTo("div:eq(3)");

//將圖片移動到第四個div的內部最開始的位置。

添加內容到指定的元素之後

after()方法：比如：

$("#img1").after("<select><option>中國</option><option>南韓</option></select>");

將元素移動到指定的元素之後

有兩種方法可以達到這個效果

$("#img1").after($("div:first"));

$("div:eq(1)").insertAfter($("#img2"));

這兩種方法都可以讓div出現在圖片的後面，但是要註意他們的寫法和順序。

移動時這兩個方法的參數應該是選擇器選中的元素對象。

添加內容到指定元素之前

before()方法，向元素之前添加文本和html代碼

示例：

$("div:first").before("<input type='button' value='按鈕'  />");

移動元素到另一個元素的前面

也是有兩種方法：

alert(1);

$("div:first").before($("#img1"));

//將圖片移動到div的前面去

alert(1);

$("div:eq(1)").insertBefore($("#img1"));

//將div移動到圖片前面去

為指定的html元素添加一個容器標簽將其包裹起來

wrap()，在元素的外層添加一個容器元素。

$("span:first").wrap("<b></b>");

$("span:first").wrap("<font color=\"red\"></font>");

wrapAll()對所有匹配的元素外側添加父級元素

$("div").wrapAll("<font color=\"red\"></font>");

清除指定html元素的父級標簽

unwrap()方法

$("span:first").unwrap()

用新元素或內容替換指定的html元素

replaceWith()

$("div:first").replaceWith("<p>明天星期天呀</p>");

替換所有匹配的元素

$("div").replaceWith("<p>明天星期天呀</p>");

清除一個元素的內容

empty()清空一個元素開始與結束標簽之間的所有內容

$("font:first").empty();

清除選擇器得到的元素集合中的指定元素

detach()二次查找並刪除

$("div").detach(".box2");

複製一個html元素

clone()方法

$("#img2").clone().appendTo("div:eq(3)");

//將圖片複製到div中

$("#img1").clone().prependTo("div:first");

小練習：

1、在不寫html的情況，用JQuery構建一個網頁的新聞列表，要求至少6行，每一行的p段落都有一個id屬性:p1、p2。。。p6(要求使用迴圈來實現)。
$(“body”).append(“<p id=p”+i+”></p>”);

2、向p1到p6之間的列表中添加新聞的標題。

3、向p1到p6之間的列表的最前面添加序號。

4、向p1到p6之間的列表的最後面添加日期。

5、所有p標簽外側用div包裹起來。

6、定義一個css樣式類，寬度700px，居中，字體微軟雅黑紅色，然後將這個樣式類添加到div之上。

7、將最後一條新聞移動到最上方。

8、將第二條新聞複製一份到最下方。

JQuery中的樣式和事件

用Jquery控制元素的css樣式

css方法

用於獲取和設置頁面上的元素的樣式屬性。

獲取css樣式的值：

alert($("div:first").css("height"));

css方法中只有一個傳入值時是獲取css的值。（width、height、top、left等等值是包含”px”的字元串）。

修改元素的單個css值：

$("div:first").css("width","500px");

css方法中有兩個傳入參數時：第一個是css屬性名，第二個是css屬性值。

修改元素的多個樣式屬性：

    $("div:first").css(

{

"height":"600px",

"width":"500px",

"background-color":"blue"

}

);

獲取或修改一個元素的位置：Offset方法

獲取元素的位置

offset獲取元素位置的時候，它返回的是一個對象，這個對象包含top和left兩個數值屬性（單位是像素）示例：

var p = $("div:first").offset();

alert("這個元素的位置是高："+p.top+"橫向距離："+p.left);

讓元素變為浮動層並改變位置

<p style=" width:50px; height:50px; position:absolute; top:150px; left:250px;"></p>

 

var p = $("p:first").offset({top:400,left:300});

//讓一個元素變成浮動層，並且按照指定的top和left位置來移動這個元素。（top和left相對於網頁的左上角）

獲取元素相對於父元素的相對位置

position()方法返回一個位置對象，這個對象包含了top和left兩個屬性。

$(document).ready(function(e) {

//var p = $("div>div").offset();

var p = $("div>div").position();

alert("元素相對於其父元素的位置的縱向是："+p.top+"橫向："+p.left);

});

滾動條相對於頁面頂部的位置

scrollTop方法：獲取和設置滾動條相對於頁面頂部的距離。

示例：

alert($(document).scrollTop()); //獲取滾動條目前的位置

$(document).scrollTop(100); //修改滾動條的位置

height()方法獲取或修改一個元素的高度

示例：

$("div>div").height(100); //修改沒元素的高度

alert($("div>div").height()); //獲取元素的高度

width()方法獲取或修改一個元素的寬度

示例：

$("div>div").width(200);  //修改沒元素的寬度

alert($("div>div").width()); //獲取元素的寬度

元素內部的高度和寬度

innerWidth和innerHeight

獲取元素內部的高度和寬度，內部寬高是指加上padding的高度，而不包括border和margin的。

<div style="background:#F00; width:50px; height:50px; top:70px; left:30px; border:30px solid green; margin:10px; padding:13px;"></div>

 

alert($("div>div").innerWidth());

小練習：

1、在頁面上定義一個寬50高50的紅色div，讓它自動向右上方移動。

2、接上題，移動到橫向500縱向500的時候，再向上移動。

3、用css方法設置一個寬600px高50px的標題欄，用offset方法設置其浮動位置在頁面的頂部，要求當你拖動浮動條的時候，這個標題欄始終在顯示區域的最上方。（提示：可以setInterval方法）。

JQuery中的事件綁定

頁面載入事件

Ready(function(e){ })，當網頁內容全部載入到瀏覽器中，並且完成dom模型構建之後觸發的事件。它與<body>的onload事件作用一樣。

事件綁定函數

Bind函數：把指定的事件，綁定到選擇器指定的元素上。

    $("#littleButton").bind(

"click",

function(){

alert("我是一個按鈕");

}

 );

綁定僅執行一次的事件

One函數：為選擇器指定的html元素綁定一個僅會執行一次的事件，之後這個事件就不會再被觸發了。

示例：

$("#littleButton").one("click",function(){

alert("今天星期四");

});

自動觸髮指定元素的指定事件

trigger()方法：自動觸發執行指定元素上的指定事件，而不需要用戶手動操作。

$("#littleButton").trigger("click");

取消指定元素上的指定的事件

unbind():取消指定html元素的指定事件的綁定，令其不再生效。（只能取消通過jquery上的bind綁定的事件，html元素上本身的事件無效，比如：onClick）

示例：

$("#littleButton").bind("click",function(){

alert(111);

});

$("#littleButton").unbind("click");

事件委派：給還不存在的元素綁定事件

live()方法

示例：

$(".btn1").live("click",function(){

alert("這是在按鈕出現之間綁定的事件");

});

alert(1);

$("body").append("<input type='button' value='被追加的按鈕' class='btn1' /> ");

解除live方法委派的事件

die()方法示例：

$(".btn1").live("click",function(){

alert("這是在按鈕出現之間綁定的事件");

});

$("body").append("<input type='button' value='被追加的按鈕' class='btn1' /> ");

$(".btn1").die("click");

為一個html元素的一個事件切換多個動作

toggle():可以為指定的html元素的指定事件綁定多個會依次切換的函數。比如：

$("#littleButton").toggle(

function(){  alert("你好呀，吃了麽？") },

function(){  alert("還沒吃？") },

function(){  alert("那趕快回家去吃吧！") },

function(){  alert("你媽喊你回家吃飯") }

);

常用事件

單擊Click()

綁定單擊事件

$("#littleButton").click(function(){

alert("哎呀");

});

自動觸發單擊事件，而不需要用戶手動點擊

$("#littleButton").click();

雙擊dblclick()

綁定雙擊事件

$("#littleButton").dblclick(function(){

alert("哎呀");

});

自動觸發雙擊事件，而不需要用戶手動點擊

$("#littleButton").dblclick();

在文本框中選中文字

select()方法，綁定選中文字時所要執行的函數。

示例：

$("#ttBox").select(function(e){

alert("哎呀，我被選中了。");

});

自動觸發在文本框中選中文字的事件，並且自動選中文字：

$("#ttBox").select();

獲取焦點

focus()

滑鼠懸停

hover()

失去焦點

blur()

滑鼠按下

mousedown()是指滑鼠按下還沒有抬起時觸發，並且其函數可以接收到一個事件參數，這個參數中包含當前滑鼠的橫坐標與縱坐標，示例：

$("#littleButton").mousedown(function(e){

alert("當前按下的位置是x："+e.clientX+"---Y:"+e.clientY);

});

這裡得到的是點擊位置相對於整個頁面的左上角的位置。

滑鼠移出時

mouseout()

它的用法和語法與mousedown一樣。

滑鼠移動時

mousemove()

它的用法和語法與mousedown一樣。

鬆開抬起滑鼠鍵時

mouseup()

它的用法和語法與mousedown一樣。

表單提交事件

submit() 綁定表單提交時要執行的動作。

鍵盤事件

keydown 按下一個鍵時

keyup 鬆開抬起一個鍵時

keyPress 按下並鬆開一個鍵時

示例：

$(document).keydown(function(e){

alert("您剛纔按下的是:"+e.keyCode);

});

JQuery與javascript中有差異的事件

scroll()當滾動條滑動時所觸發的事件

嚴格的說應該是瀏覽器視窗中顯示的網頁的位置發生改變時。

$(document).scroll(function(){

alert($(document).scrollTop());

});

mouseenter()當滑鼠進入到元素所占的區域範圍內時

與mouseover()，在較簡單的情況下我們是看不出這兩種事件的區別的，但是當在執行一些動畫效果或者其他較複雜的情況下，就會發現。mouseenter()事件只會被執行一次，mouseover()事件會在你的滑鼠停留在元素之上的過程中一直重覆執行。

mouseleave()當滑鼠離開一個元素的顯示範圍時

它與mouseout()類似，但是它需要與mouseenter()搭配在一起使用的，也就是進入元素範圍時用mouseenter()，離開元素時用mouseleave

小練習：

1、用bind()向頁面上的一個按鈕添加滑鼠移入事件，移入按鈕範圍時，按鈕文字變成“歡迎光臨”，移出按鈕文字變成“後會有期”。

2、用toggle()綁定多個函數給一個按鈕，就是當你第一次單擊這個按鈕時，它提示“你為什麼要點我”，第二次提示“說了你還點”，第三次提示“你再點一下試試”，第四次提示“好吧，你贏了。”

3、實現一個做選擇題的功能，在頁面上有一個P段落和四個單選按鈕，當你選擇四個單選按鈕中的任意一個時，會提示用戶是否回答正確。其中的事件綁定必須要用JQuery實現。

4、設置一個寬600px高50px的標題欄，背景色為橙色，用offset方法設置其浮動位置，要求當拖動頁面滾動條時，這個標題欄始終位於當前顯示區域的最上方（提示：要求使用scroll()事件）

5、定義一個長度都是50px的紅色div，要求在屏幕任意位置點擊滑鼠時，這個div立刻移動到當前滑鼠點擊的位置。

JQuery_動作與效果

基本效果

隱藏一個元素

Hide()方法：

語法：

選擇器.hide(速度,fn);

示例：

$("#box1").hide(); //直接隱藏沒有任何動畫

$("#box1").hide(2000); //在2秒之內逐漸向左上角縮小隱藏

//隱藏過程的動畫結束之後，執行這個包含alert的函數

$("#box1").hide(2000, function(){

alert("我隱藏起來了，你看不到");

});

說明：

速度代表隱藏過程的時間，單位毫秒。

Fn代表隱藏動畫結束之後自動執行的函數。

顯示已經被隱藏的元素

Show()方法

語法：

選擇器.show(速度,fn);

說明：

無論是被css的display:none屬性隱藏的元素，還是被上面的hide()方法隱藏的對象，都可以使用show()來令其顯形。

示例：

$("#box1").show();

$("#box1").show(3000);

$("#box1").show(3000,function(){alert("我又回來了")});

顯示或者隱藏一個元素

Toggle

語法：

Toggle(速度,fn)

說明：

如果這個元素是可見的就執行隱藏操作，如果不可見就執行顯示操作。

示例：

function hide_show(){

$("#box1").toggle(300,function(){

alert("我來了，又走了");

});

}

<input type="button" onclick="hide_show()"  value="hide_show" />

<div style="width:400px; display:none;" id="box1">

    <img src="img/aa.jpg" width="400" />

</div>

滑動效果

滑動隱藏一個元素

slideUp()方法：

示例：

$("#box1").slideUp(2000,function(){

alert("圖像收起來了");

});

滑動顯示一個元素

slideDown()方法：

示例：

$("#box1").slideDown (2000,function(){

alert("圖像拉下來了");

});

滑動隱藏或顯示一個元素

sildeToggle()方法：

元素可見就滑動隱藏，反之則滑動顯示。

function hide_show(){

$("#box1").slideToggle(100,function(){

alert("隱藏則顯示，顯示則隱藏。");

});

}

<input type="button" onclick="hide_show()"  value="hide_show" />

淡入淡出效果

以淡出效果隱藏一個元素

fadeOut()方法

示例：

$("#box1").fadeOut(3000,function(){

alert("我走了");

});

以淡入效果顯示一個元素

fadeIn()方法

示例：

$("#box1").fadeIn(3000,function(){

alert("我又來了");

});

改變元素的透明度

fadeTo方法()

在指定的時間內以動畫的形式修改一個元素的透明度。

語法：

選擇器.fadeTo(速度,透明度,fn);

其中：

我的ASP.NET學習筆記07JQuery基礎知識

什麼是JQuery

如何使用JQuery

選擇器

選擇器的基本格式

語法：

$(document)

$(document.body)代表網頁的<body>部分

HTML標簽選擇器

選擇器的find()方法

ID選擇器

Class樣式類選擇器

小練習

併列選擇：

父子層級關係選擇

相鄰選擇器

選擇下一個元素

選擇之後所有匹配的元素

選擇符合條件的第一個/最後一個元素

在選擇結果中排除

選擇查詢結果中的排列次序為偶數/奇數的元素

選擇指定次序的元素

選擇大於/小於指定序號的元素

選擇包含指定文本的元素

選擇不包含任何子元素或內容的標簽

包含指定的子元素的父元素

選擇指定元素的父元素

選擇所有的隱藏元素

小練習：

JQurey元素的屬性

Html()方法

Text()方法

小練習：

Ready事件

$(document).ready();

語法：

示例：

註意：

JQuery操作html元素

length屬性和.size()方法

Get( )方法

each( )方法

attr( ) 元素屬性集合

remove()刪除元素

為元素添加css樣式類

去除html元素的樣式類

獲取或設置表單元素的值

小練習：

DOM文檔處理

向html元素的內部的末尾添加內容

將html元素移動到另一個元素的內部的末尾

向html元素內部的開始位置添加內容

將html元素移動到內部的最開始的位置

添加內容到指定的元素之後

將元素移動到指定的元素之後

添加內容到指定元素之前

移動元素到另一個元素的前面

為指定的html元素添加一個容器標簽將其包裹起來

wrapAll()對所有匹配的元素外側添加父級元素

清除指定html元素的父級標簽

用新元素或內容替換指定的html元素

replaceWith()

替換所有匹配的元素

清除一個元素的內容

清除選擇器得到的元素集合中的指定元素

複製一個html元素

小練習：

用Jquery控制元素的css樣式

css方法

獲取css樣式的值：

修改元素的單個css值：

修改元素的多個樣式屬性：

獲取或修改一個元素的位置：Offset方法

獲取元素的位置

讓元素變為浮動層並改變位置

獲取元素相對於父元素的相對位置

滾動條相對於頁面頂部的位置

height()方法獲取或修改一個元素的高度

width()方法獲取或修改一個元素的寬度

元素內部的高度和寬度