什么是jQuery對象?
jQuery 對象就是通過jQuery包裝DOM對象后產生的對象。
jQuery 對象是 jQuery 獨有的. 如果一個對象是 jQuery 對象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
比如:
$("#test").html()?? 意思是指:獲取ID為test的元素內的html代碼。其中html()是jQuery里的方法
這段代碼等同于用DOM實現代碼:
document.getElementById(" test ").innerHTML;
雖然jQuery對象是包裝DOM對象后產生的,但是jQuery無法使用DOM對象的任何方法,同理DOM對象也不能使用jQuery里的方法.亂使用會報錯
約定:如果獲取的是 jQuery 對象, 那么要在變量前面加上 $.
var $variable = jQuery 對象
var variable = DOM 對象
DOM對象轉成jQuery對象
對于已經是一個DOM對象,只需要用$()把DOM對象包裝起來,就可以獲得一個jQuery對象了。$(DOM對象)
轉換后就可以使用 jQuery 中的方法了
jQuery對象轉成DOM對象
兩種轉換方式將一個jQuery對象轉換成DOM對象:[index]和.get(index);
(1) jQuery對象是一個數組對象,可以通過[index]的方法,來得到相應的DOM對象
(2) jQuery本身提供,通過.get(index)方法,得到相應的DOM對象
css()
1.可以直接使用css()方法獲取元素的樣式屬性。
Eg:$('#p1').css('backgroundColor');
2.使用css()方法設置某個元素的單個樣式。
Eg:$('#p1').css('backgroundColor','yellow');
3.使用css()方法同時設置多個樣式屬性
Eg:$('#p1').css({'color:'red','backgroundColor':'yellow'})
(屬性可以寫成如:fontSize,'font-size','fontSize')
html()
此方法類似js的innerHTML屬性,可以用來讀取或設置某個元素中的HTML內容。
Eg:讀取:p.html()
設置:p.html('new');
val()
概述:獲得匹配元素的當前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選,將返回一個數組,其包含所選的值。
示例:
1.無參數 - 描述:獲取文本框中的值
jQuery 代碼: $("input").val();
基本選擇器
基本選擇器是 jQuery 中最常用的選擇器, 也是最簡單的選擇器, 它通過元素 id, class 和
標簽名來查找 DOM 元素(在網頁中 id 只能使用一次, class 允許重復使用).
1、#id? ? 用法: $(”#myDiv”);? ? 返回值? 單個元素的組成的集合
說明: 這個就是直接選擇html中的id=”myDiv”
2、Element? ? ? 用法: $(”div”)? ? 返回值? 集合元素
說明: element的英文翻譯過來是”元素”,所以element其實就是html已經定義的標簽元素,例如 div, input, a 等等.
3、class? ? ? ? ? 用法: $(”.myClass”)? ? ? 返回值? 集合元素
說明: 這個標簽是直接選擇html代碼中class=”myClass”的元素或元素組(因為在同一html頁面中class是可以存在多個同樣值的).
4、*? ? ? ? ? 用法: $(”*”)? ? ? 返回值? 集合元素
說明: 匹配所有元素,多用于結合上下文來搜索
5、selector1, selector2, selectorN? ? ? 用法: $(”div,span,p.myClass”)? ? 返回值? 集合元素
說明: 將每一個選擇器匹配到的元素合并后一起返回.你可以指定任意多個選擇器, 并將匹配到的元素合并到一個結果內.其中p.myClass是表示匹配元素
層次選擇器
如果想通過 DOM 元素之間的層次關系來獲取特定元素, 例如后代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使用層次選擇器.
1 、ancestor descendant
用法: $(”form input”) ;? 返回值? 集合元素
說明: 在給定的祖先元素下匹配所有后代元素.這個要下面講的”parent > child”區分開.
2、parent > child?用法: $(”form > input”) ;? ? 返回值? 集合元素
說明: 在給定的父元素下匹配所有子元素.注意:要區分好后代元素與子元素
3、prev + next
用法: $(”label + input”) ;? 返回值? 集合元素
說明: 匹配所有緊接在 prev 元素后的 next 元素
4、prev ~ siblings
用法: $(”form ~ input”) ;? ? 返回值? 集合元素
說明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含該元素在內,并且siblings匹配的是和prev同輩的元素,其后輩元素不被匹配。
每天的進步都代表你的成長,你努力,你奮斗,你堅持,你成長!