jquery基礎知識點總結

2021-10-10 17:25:51 字數 3125 閱讀 4346

方式一

$

(function()

)

方式二

$

(document)

.ready

(function()

)

注意:使用jquery獲取的物件叫做jquery物件,只能使用jquery的方法,使用原生js獲取的物件叫做dom物件,只能使用原生方法,兩者不能混用

因此可以讓jquery物件跟dom物件相互轉換

dom物件轉換為jquery 物件: $(dom物件) 注意括號中傳入dom物件,不要加引號

jquery 物件轉換為dom物件(兩種方式)

( 『d

iv』)

[ind

ex]=

=ind

ex是索

引號==

(『div』)[index]== index是索引號 ==

(『div』

)[in

dex]

==in

dex是

索引號=

=(『div』).get(index) index是索引號

由於jquery物件是乙個偽陣列,偽陣列的概念有length的乙個物件,一般獲取的是單個jquery物件,因此index為0

jquery 基礎選擇器

​ id選擇器 $("#id") 獲取指定id元素

​ 全選選擇器 $("*") 匹配所有元素

​ 類選擇器 $(".class") 獲取同一類選擇器

​ 標籤選擇器 $(「div」) 獲取同一類標籤的所有元素

​ 並集選擇器 $(「div,p,li」) 獲取多個元素

​ 交集選擇器 $(「li.current」) 交集元素

篩選選擇器

$(「div」).css(『background-color』, 『pink』);

$(『ul li』).css(『color』, 『blue』);

$(『ul li:first』).css(『color』, 『red』);

$(『ul li:last』).css(『color』, 『red』);

$(『div:eq(2)』).css(『background-color』, 『yellow』); 選擇器方式

$(「div」).eq(2).css(「background-color」,「yellow」); 方法的方式

$(『div:odd』).css(『background-color』, 『yellow』); 選出奇數

$(『div:even』).css(『background-color』, 『yellow』); 選出偶數

​ 3.jquery 篩選方法(重點!!!)

​ parent() $(「li」).parent(); 查詢父級

children(selector) $("ul").children("li")     ==相當於$(ul>li) 最近一級(親兒子)==

find(selector) $("ul").find("li") ==相當於$("ul>li") 後代選擇器==

​ siblings(selector) $(".first").siblings(「li」) 查詢兄弟節點,不包括自己本身

nextall([expr])   $(".first").nextall       ==查詢當前元素之後所有的同輩元素==
​ prevtall([expr]) $(".last").prevall 查詢當前元素之前所有的同輩元素

hasclass(class)   $("div").hasclass("protected") ==檢查當前的元素是否含有某個特定的類,如果有返回true==
​ eq(index) ("l

i").

eq(2

)==相

當於

("li").eq(2) ==相當於

("li")

.eq(

2)==

相當於(「li:eq(2)」),index從0開始==

重點記住:parent() children() find() siblings() eq()

隱式迭代就是把匹配的所有元素內部進行遍歷迴圈,給每個元素新增乙個css這個方法!!!!!jquery預設內部可以隱式迭代

jquery中的排他思想

案例// 2. 需要得到當前小li的索引號, 就可以顯示對應索引號的

// 3. jquery得到當前元素索引號$(this).index()

// 4. 中間對應的, 可以通過eq(index) 方法去選擇

// 5. 顯示元素show() 隱藏元素hide()$(

function()

)})

鏈式程式設計:$(this).css('color','red').sibling().css('color','');

jquery可以使用css方法來修改簡單元素樣式;也可以操作類,修改多個樣式。

引數只寫屬性名,則返回屬性值

$(this).css(「color」) 【 返回的是個字串 】

引數是屬性名,屬性值,逗號分隔,是設定一組樣式,屬性必須加引號,值如果是數字可以不用跟單位和引號

$(this).css(「color」,」red」)

引數可以是物件形式,方便設定多組樣式,屬性名和屬性值用冒號隔開,屬性可以不用加引號,如果是復合屬性必須採取

駝峰命名法,去掉『-』值是數字可以去掉引號,不是數字可以去掉引號

$(this).css()

設定類樣式方法

// 1.新增類

$(『div』).click(function() ,function()

);第乙個引數是索引,第二個引數是dom元素物件

語法二:

$.each(object,function(index,element))

1.$.each()方法可用於遍歷任何物件,主要用於資料處理,比如陣列,物件

2.裡面的函式有2個引數:index是每個元素的索引號;element遍歷內容

建立元素

語法:

jQuery基礎知識點(二)

一 jquery 獲得內容和屬性 1.jquery擁有可操作html元素和屬性的強大方法。2.jquery dom操作 jquery中非常重要的部分,就是操作dom的能力。jquery提供一系列與dom相關的方法,這使訪問和操作元素和屬性變得很容易。提示 dom document object mo...

Jquery基礎知識點梳理

1 第乙個jq程式 a jq物件和dom物件的方法不能混用 b dom物件轉換成jq物件 dom jq物件轉換成dom物件jq 0 轉換之後方法就可以使用了 2 jq選擇器 基本選擇器 body 標籤選擇器 btn id選擇器 class 類選擇器 p odd 奇偶行選擇器 p even p fir...

jQuery基礎知識點(上)

jquery是乙個優秀的 輕量級的js庫 它相容css3,還相容各種瀏覽器 ie js入口函式只能出現一次,出現多次會存在事件覆蓋的問題。jquery的入口函式,可以出現任意多次,並不會存在事件覆蓋問題。區別二 執行時機不同 js入口函式是在所有的檔案資源載入完成後,才執行。這些檔案資源包括 頁面文...