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 + ")";
});
});
});

?

?

?

?

轉載于:https://www.cnblogs.com/Lxiaojiang/p/5929397.html

總結

以上是生活随笔為你收集整理的Jquery 学习之基础一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。