1.按選擇器查詢元素:$
jquery不但支援所有css選擇器,而且還增加了一批新的jquery專屬選擇器:
包括:回顧: css中的子元素過濾:
css選擇器
:first-child 作為其父元素下第乙個子元素的所有元素
:last-child
:nth-child(i)
:only-child
總結: 根據元素在其父元素內的相對下標位置選擇元素。且序號從1開始
何時: 如果按照元素在其父元素內的相對位置選擇元素時
基本過濾: jquery新增:
:first :last
:eq(i) :lt(i) :gt(i)
:even :odd
偶數 奇數
特點: 先將符合條件的元素取出,統一放入乙個集合中。按元素在集合中的編號選擇元素。且下標從0開始。
何時: 今後希望打破父元素的界限,對所有子元素統一編號,按位置查詢元素時。
總結:今後只要能用css做的效果,一定首選css做,因為css的效率比js高,而且css沒有框架和平台的相容性問題。即使jquery中的選擇器,也必須首選css選擇器,css選擇器做不了的,才被迫選擇jquery新增的選擇器。因為jquery新增的選擇器都是用js程式在底層模擬的——效率低。
[屬性名!=值] jquery新增的
選擇不包含指定屬性的元素,以及雖然包含指定屬性但屬性值不等於指定值的元素。
等效於: :not([屬性名=值])
比如: [title!=help] 可選擇兩種:
1. 選擇不包含title屬性的元素
2. 選擇雖然包含title屬性,但title屬性值不是help的元素
2.過濾(jquery新增)
過濾:用元素的內容文字作為查詢條件
(1)內容過濾
① :contains(文字) 選擇元素內容中包含指定文字的元素
② :has(選擇器) 選擇子元素中包含符合條件的元素的父元素
(2)可見性過濾
①:visible 選擇所有可見的元素
②:hidden 選擇所有隱藏的元素(display:none和)
(3)表單元素過濾選擇器:
以表單元素的型別來選擇指定的表單元素
①:input 選擇所有表單元素——input select textarea button
input 只能選擇input元素
②:型別名 每種type值都對應著乙個專門的選擇器,比如:text :password :radio :checkbox ...
3.按節點間關係查詢
1. 父子關係:
dom: 元素.parentnode
元素.children
元素.firstelementchild
元素.lastelementchild
jq中: $元素.parent();
$元素.children(["選擇器"]);
問題: children()只能查詢直接子元素,無法在所有後代中查詢
解決: $元素.find("選擇器") 可在所有後代中查詢符合條件的元素。
強調: 要用.find()必須寫選擇器
$元素.children(":first-child")
$元素.children(":last-child")
2. 兄弟關係:
dom: 元素.nextelementsibling
元素.previouselementsibling
jq中: $元素.next() 之後乙個兄弟元素
$元素.nextall(["選擇器"]) 之後所有兄弟元素
$元素.prev() 之前乙個兄弟元素
$元素.prevall(["選擇器"]) 之前所有兄弟元素
$元素.siblings(["選擇器"]) 除當前元素外,所有平級的兄弟元素(不分前後)
jQuery2元素操作
1.對元素內容的操作 文字內容 text 設定內容 即使包含html 也將被認為是普通 text 獲取內容 html內容 html 設定內容 html 獲取內容 2.對值的操作 val 設定值 val 獲取值 對於radio按鈕 val 0,1,0 認為第二個被選中 對於select option ...
Jquery 2 基礎核心
基礎核心 function jquery function alert jquery 相等 恒等 css color red function window.onload function window.onload function window.onload function document ...
jQuery 2 選擇集過濾和轉移
選擇集過濾就是在選擇標籤的集合裡面過濾自己需要的標籤 has方法的示例 function script 這是第乙個div text id mytext div 這是第二個div text button div eq方法的示例 function eq方法的使用 var div div eq 1 設定樣...