JQuery 15

什么是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”區(qū)分開.

2、parent > child?用法: $(”form > input”) ;? ? 返回值? 集合元素

說明: 在給定的父元素下匹配所有子元素.注意:要區(qū)分好后代元素與子元素

3、prev + next

用法: $(”label + input”) ;? 返回值? 集合元素

說明: 匹配所有緊接在 prev 元素后的 next 元素

4、prev ~ siblings

用法: $(”form ~ input”) ;? ? 返回值? 集合元素

說明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含該元素在內,并且siblings匹配的是和prev同輩的元素,其后輩元素不被匹配。

每天的進步都代表你的成長,你努力,你奮斗,你堅持,你成長!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • (續(xù)jQuery基礎(1)) 第5章 DOM節(jié)點的復制與替換 (1)DOM拷貝clone() 克隆節(jié)點是DOM的常...
    凜0_0閱讀 1,370評論 0 8
  • DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲取DOM節(jié)點,從而進行一系列的DOM操作。但實際上...
    阿r阿r閱讀 1,043評論 0 9
  • 1:jQuery節(jié)點創(chuàng)建與屬性的處理 創(chuàng)建元素節(jié)點:可以有幾種方式,后面會慢慢接觸。常見的就是直接把這個節(jié)點的結構...
    碼農小楊閱讀 625評論 0 1
  • 第1章 簡介 第2章 DOM節(jié)點的創(chuàng)建 2-1 DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲...
    mo默22閱讀 838評論 0 8
  • 一、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進入官方網站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,466評論 0 44