格式：

$(document).ready(function(){

});

$(function(){

});

事件：

$(document).ready(function(){

$("p")(function(){

$(this).hide;//隱藏

  $("p").show();//顯示

$("p").hide(1000);//隱藏延時

  $("p").toggle();//隱藏/顯示

});

});

click:單機、dblclick:雙擊、mouseenter:鼠標懸浮、mouseleave:鼠標離開、mousemove:移動時

mousedown:指定按下、mouseup：指定松開

$(selector).hover(handlerIn, handlerOut)切換

$(document).ready(function(){

  $("input").focus(function(){//獲得焦點

    $(this).css("background-color","#cccccc");

  });

  $("input").blur(function(){//失去焦點

    $(this).css("background-color","#ffffff");

  });

});

-------------------------------------------------------------------------

隱藏/顯示

$(document).ready(function(){

  $(".ex .hide").click(function(){

    $(this).parents(".ex").hide("slow");//show/toggle

  });

});

<div class="ex">

<button class="hide">點我隱藏</button>

<p>站點名: Google</p>

</div>

淡入淡出：display:none;

$("#div3").fadeIn(3000/"slow");//淡入

$("#div3").fadeOut(3000/"slow");//淡出

$("#div3").fadeToggle(3000/"slow");//淡入/淡出

$("#div3").fadeTo(3000/slow",0.1);//顏色變淡

滑動：

下滑

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

 $("#panel").slideDown("slow");});

拉起

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

 $("#panel").slideUp("slow");});

下滑/拉起

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

 $("#panel").slideToggle("slow");});

動畫：

平移

$("button").click(function(){

$("div").animate({

left/top:'250px'

 opacity:'0.1'/'show',//透明度

 height:'300px',

 width:'300px'

});});

*height/width的值:show/hide/toggle;

隊列：

var div=$("div");

    div.animate({height:'300px',opacity:'0.4'},"slow");

    div.animate({width:'300px',opacity:'0.8'},"slow");

    div.animate({height:'100px',opacity:'0.4'},"slow");

    div.animate({width:'100px',opacity:'0.8'},"slow");

停止動畫：

$("#panel").stop();

----------------------------------------------------------------------

$("#test").text()

$("#test").html()

$("#test").val()輸入框的值

$("#runoob").attr("href")獲得屬性的值

$("#runoob").attr("href","http://www.runoob.com/jquery");修改屬性的值

添加

$("p").append(" <b>追加文本</b>。");

$("p").prepend("<b>在開頭追加文本</b>。 ");

$("img").before("<b>之前</b>");/$("img").after("<i>之後</i>");

刪除

$("#div1").remove();移除div元素

$("#div1").empty();清空div元素

$("p").remove(".italic");移除所有class="italic"的 p 元素

$("p").remove(":contains('3')") //找到所有p元素中，包含了3的元素

CSS類

$("h1,h2,p").addClass("blue");//bule是css類選擇器，可用多個類選擇器用空格分開

$("h1,h2,p").removeClass("blue");刪除樣式

$("h1,h2,p").toggleClass("blue");切換樣式

$("p").css("background-color","yellow");

$("p").css({"background-color":"yellow","font-size":"200%"});

-----------------------------------------------------------------------------------------

遍歷

$("span").parent().css();父類

$("span").parents().css();所有上級

$("span").parents("div").css({);指定上級

$("span").parentsUntil("div").css();span-div之間的上級

$("div").children().css();子類

$("div").find("p").css();指定下級//"*":所有下級

$("h2").siblings().css();同級

$('.item-2').next(':first').css()//找到所有class=item-3的li

，然後篩選出第一個li，加上藍色的邊

$('.item-2').prev(':last').css('border', '1px solid blue')//找到所有class=item-2的li，然後篩選出最後一個，加上藍色的邊。

————————————————————————————————————————————————————————————————————————————————————————————————————————

獲得內容 - text()、html() 以及 val()

三個簡單實用的用於 DOM 操作的 jQuery 方法：

text() - 設置或返回所選元素的文本內容                                                                                                                                                                                  $("#btn1").click(function(){ alert("Text:" + $("#test").text()); });

html() - 設置或返回所選元素的內容（包括 HTML 標記）                                                                                                                                                         $("#btn2").click(function(){ alert("HTML:" + $("#test").html()); });

val() - 設置或返回表單字段的值                                                                                                                                                                                                 $("#btn1").click(function(){ alert("值為: " + $("#test").val()); });

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

設置內容 - text()、html() 以及 val()

text() - 設置或返回所選元素的文本內容

html() - 設置或返回所選元素的內容（包括 HTML 標記）

val() - 設置或返回表單字段的值

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

    $("#test1").text("Hello world!");});

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

    $("#test2").html("<b>Hello world!</b>");});

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

    $("#test3").val("RUNOOB");});      

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

jQuery - 添加元素

添加新的 HTML 內容

append() - 在被選元素的結尾插入內容          

prepend() - 在被選元素的開頭插入內容                                                                                                                                                                                      function appendText(){ var txt1="<p>文本。</p>"; // 使用 HTML 標簽創建文本 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 創建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}

after() - 在被選元素之後插入內容………………………$("img").after("在後面添加文本");

before() - 在被選元素之前插入內容 ……………………$("img").before("在前面添加文本");

 》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》Notice:append/prepend&after/before 區別？？？

append

<p>

  <span class="s1">s1</span>

</p>

<script>

$("p").append('<span class="s2">s2</span>');

</script>

結果是這樣的:

<p>

  <span class="s1">s1</span>

  <span class="s2">s2</span>

</p>

after

<p>

  <span class="s1">s1</span>

</p>

<script>

$("p").after('<span class="s2">s2</span>');

</script>

結果是這樣的:

<p>

  <span class="s1">s1</span>

</p>

<span class="s2">s2</span>

總結：

append/prepend 是在選擇元素內部嵌入。

after/before 是在元素外面追加。