當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery学习笔记2

發布時間：2023/12/9 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery学习笔记2 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、獲取并設置CSS類：

　　1、addClass( ) 方法：可以選取多個元素，也可以在該方法中規定多個類。

1 $("#div1").addClass("important blue"); 2 $("h1,h2,p").addClass("blue");

　　2、removeClass( )方法：addClass( )方法類似

　　3、toggleClass( )方法：該方法對被選元素進行添加/刪除類的切換操作

　　4、css( )方法：可以返回指定的css屬性、設置css屬性(可以設置多個)

1 console.log($("p").css("background-color")); // 輸出css屬性 2 $("p").css("background-color","yellow"); // 設置css屬性 3 css({"propertyname":"value","propertyname":"value",...}); //設置多個css屬性

二、尺寸（width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()、）

　　1、width() 返回元素的寬度（不包括內邊距、邊框或外邊距）。

　　2、innerWidth()返回元素的寬度（包括內邊距）。 padding

　　3、outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。?padding、border

　　4、outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。padding、border、margin

　　5、高度與寬度類似.

三、遍歷

　　1、祖先（parent()、parents()、parentsUntil()）

　　　　parent() 方法返回被選元素的直接父元素。

　　　　parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)。

　　　　parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。

　　2、后代（child()、find()）

　　　　child()方法只會向下一級DOM樹遍歷，返回被選元素所有直接子元素。

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

　　　　下面的例子返回屬于 <div> 后代的所有 <span> 元素：$("div").find("span");

　　3、同胞（siblings()、next()、nextAll()、nextUntil()、）

　　　　siblings() 方法返回被選元素的所有同胞元素。

　　　　$("h2").siblings(); ? ?//返回<h2>的所有同胞元素

　　　　$("h2").siblings("p"); //返回<h2>的同胞元素的所有<p>元素

　　　　next() 方法返回被選元素的下一個同胞元素，該方法只返回一個元素。

　　　　nextAll() 方法返回被選元素的所有跟隨的同胞元素。

　　　　nextUntil() 顧名思義，該方法返回介于兩個給定參數之間的所有同胞元素。

　　4、過濾（first()、last()、eq()、filter()、not()）

　　　　?first() 方法返回被選元素的首個元素。下面的例子選取首個 <div> 元素內部的第一個 <p> 元素：

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

　　　　last() 方法返回被選元素的最后一個元素。下面的例子選擇最后一個 <div> 元素中的最后一個 <p> 元素：

　　　　$("div p").last();　　　　
　　　　
　　　　eq()方法返回被選元素中帶有指定索引號的元素,索引號從0開始。
　　　　$("p").eq(1); //選取第二個 <p> 元素（索引號 1）
　　　　
　　　　filter()方法過濾掉不符合標準的元素
　　　　（"p").filter(".intro").css("background-color","yellow"); //p元素中class為intro的元素背景色會變黃。
　　　　
　　　　not()方法過濾掉符合標準的元素
　　　　（"p").not(".intro").css("background-color","yellow"); //p元素中class為intro的元素背景色不會變黃。

參考w3school

轉載于:https://www.cnblogs.com/qianlihorse/p/4058539.html

總結

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

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