Jquery 學習之基礎一

標籤：

1.添加一個CSS類

$("button").click(function(){
  $("#div1").addClass("important blue");
});

==============================

2.移除一個類

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

==============================

3.切換類

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

==============================

4.Jquery 設定CSS屬性

$("p").css("background-color","yellow");//設定一個屬性

$("p").css({"background-color":"yellow","font-size":"200%"});//設多個屬性 ==============================5.清空子項目$("#div1").empty();//所有在div1塊中的內容均被移除==============================

 6.設定元素的父類屬性

$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});//parent() 方法返回被選元素的直接父元素

});

 $("span").parents()//parents() 方法返回被選元素的所有父元素

==============================

7.返回每個div的直接子類元素

$(document).ready(function(){
 $("div").children().css({"color":"red","border":"2px solid red"});
});

==============================

8.find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。

 $("div").find("span").css({"color":"red","border":"2px solid red"});

==============================

9.next（）方法返回下一個同胞元素

$("h2").next().css({"color":"red","border":"2px solid red"})；

==============================

10.過濾

$("p").filter(".url");//返回帶有類名 "url" 的所有 <p> 元素

==============================

11.first() 方法返回被選元素的首個元素

$("div p").first();//選取首個 <div> 元素內部的第一個 <p> 元素：

==============================

12.last() 方法返回被選元素的最後一個元素。

$("div p").last();

==============================

13. eq() 方法返回被選元素中帶有指定索引號的元素。

$("p").eq(1);

==============================

14.not() 方法與 filter() 相反。

 $("p").not(".url");//返回不是類url的P元素

==============================

15.三個操作dom的方法、DOM = Document Object Model（文件物件模型）

• text() - 設定或返回所選元素的常值內容
• html() - 設定或返回所選元素的內容（包括 HTML 標籤）
• val() - 設定或返回表單欄位的值

例子：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

$("#btn1").click(function(){ 
    $("#test1").text("Hello world!"); 
}); 

$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

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

註：id=test，這一塊是常值內容<p>名稱: <input type="text" id="test" value="練習easyUI"></p>

通過 jQuery val() 方法可以獲得輸入欄位的值

$("#btn1").click(function(){
  alert("值為: " + $("#test").val());//擷取值
});

$("#btn3").click(function(){ 
    $("#test3").val("RUNOOB"); //設定值
});

==============================

16. jQuery attr() 方法用於擷取屬性值。

$("button").click(function(){
  alert($("#runoob").attr("href"));//擷取id=“runoob”中連結的href屬性

$("#runoob").attr("href","http://www.runoob.com/jquery");//設定href屬性
});

==============================

17.text()中的參數是回呼函數，參數為索引和內容

$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "舊文本: " + origText + " 新文本:雷明軒 (index: " + i + ")";
});
});
});

 

 

 

 

Jquery 學習之基礎一