jQuery 語法實例

$(this).hide()
演示 jQuery hide() 函數桃犬，隱藏當前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函數垛孔，隱藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函數施敢，隱藏所有 <p>元素周荐。
$(".test").hide()
演示 jQuery hide() 函數，隱藏所有 class="test" 的元素僵娃。

jQuery 元素選擇器

jQuery 使用 CSS 選擇器來選取 HTML 元素概作。
$("p") 選取<p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p>元素默怨。
$("p#demo") 選取所有 id="demo" 的 <p>元素讯榕。

jQuery 屬性選擇器

jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素匙睹。
$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素愚屁。
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素垃僚。

jQuery CSS 選擇器

jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性集绰。
下面的例子把所有 p 元素的背景顏色更改為紅色：
$("p").css("background-color","red");

更多的選擇器實例

jQuery 效果

1、隱藏和顯示

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

$("#hide").click(function(){
  $("p").hide();
});
$("#show").click(function(){
  $("p").show();
});
$("button").click(function(){
  $("p").toggle();
});

jQuery (chaining)允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）

$("#p1").css("color","red").slideUp(350).slideDown(350);
獲取元素 text()、html() 以及 val()
獲取屬性 attr()

添加元素

append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之后插入內容
before() - 在被選元素之前插入內容

實例：

function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 創(chuàng)建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 創(chuàng)建新元素
var txt3=document.createElement("p");  // 以 DOM 創(chuàng)建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
$("p").after("Some text after");      //追加到前面
$("p").before("Some text before");//追加到后面
}

刪除元素

remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素

remove() 方法也可接受一個參數改淑，允許您對被刪元素進行過濾碍岔。
實例：

//刪除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");

獲取并設置 CSS 類

addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作
css() - 設置或返回樣式屬性

//設置
$("p").css("background-color","yellow");
css({"propertyname":"value","propertyname":"value",...});
//獲取
$("p").css("background-color");

AJAX get() 和 post() 方法

$.get(URL,callback);
$.post(URL,data,callback);

實例

//get方法
$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
//post方法
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

方法|描述