方式一
$
(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入口函式是在所有的檔案資源載入完成後,才執行。這些檔案資源包括 頁面文...