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");//設置一個屬性
?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 + ")";
});
});
});
?
?
?
?