--------------------------------基本選擇器:
id .
標(biāo)簽 標(biāo)簽名
類 #
交集, 沒有符號
并集, 逗號隔開
通配符 *
--------------------------------層次選擇器:
后代符號為 空格
子選擇器 >
相鄰 +
同輩 波浪號
--------------------------------屬性選擇器:
[ ]
--------------------------------過濾器選擇器:
:last 最后
:first 第一
:odd 偶數(shù)
:even 奇數(shù)
:eq 等于
:gt 大于
:lt 小于
:not() 從匹配集合元素中刪除元素
:foucus 獲取焦點(diǎn)的元素
:header 選取所有標(biāo)題元素
:visible 選取當(dāng)前所有可見元素
:hidden 選取當(dāng)前所有隱藏元素
---------------------------------------------------------| 事件 |-------------------------------
---------------------------------------鼠標(biāo)事件
click( ) 點(diǎn)擊事件:當(dāng)鼠標(biāo)點(diǎn)擊時觸發(fā)
mouseover( ) 懸停事件:當(dāng)鼠標(biāo)懸停在元素上時觸發(fā)
mouseout( ) 鼠標(biāo)離開事件:當(dāng)鼠標(biāo)離開懸停的元素時觸發(fā)
---------------------------------------鍵盤事件
keydown( ) 當(dāng)按鍵按下時觸發(fā)
keyup( ) 當(dāng)按鍵彈起時觸發(fā)
keypress( ) 當(dāng)按鍵在按壓狀態(tài)時觸發(fā)
--------------------------------------復(fù)合事件
hover( ) 鼠標(biāo)懸停和離開時:懸停時會觸發(fā)mouseover( )
toggle( ) 當(dāng)指定元素被點(diǎn)擊時,在兩個或多個函數(shù)之間輪流切換在 顯示和隱藏之間進(jìn)行切換。
--------------------------------------表單事件
foucus( ) 當(dāng)元素獲得焦點(diǎn)時,發(fā)生 focus 事件
blur( ) 當(dāng)輸入域失去焦點(diǎn) (blur) 時改變其顏色
change( ) 當(dāng)元素的值發(fā)生改變時,會發(fā)生 change 事件。
--------------------------------------------------| 動畫 |----------------------------------------------
$("img").show(2000)
$("img").hide(2000)
$("img").fadeIn(2000)
$("img").fadeOut(2000)
$("img").slideDown(2000);
$("img").slideUp(2000)
原生js可以和jq可以同時存在
同時存在是需要注意,jq函數(shù)只能被jq節(jié)點(diǎn)使用
jq節(jié)點(diǎn)指 通過jq選擇器獲取到的節(jié)點(diǎn)
-------$(select): select 選擇
dom如果想要使用jq函數(shù)的話,需要將js節(jié)點(diǎn)轉(zhuǎn)換成jq節(jié)點(diǎn)。
-------$(element): 把js節(jié)點(diǎn)轉(zhuǎn)換成jq節(jié)點(diǎn)
element(元素)表示的是節(jié)點(diǎn)對象
點(diǎn)一次button添加一條li
原理:
先獲取原本的數(shù)據(jù),在原本的數(shù)據(jù)上添加
新建一個節(jié)點(diǎn):
原生js var li = "<li>22222</li>"
獲取原本數(shù)據(jù)
var newli = $("#ul").html()+li
插入
$("#ul").html(newli)
------------------------------------ 》》》Dom操作實(shí)現(xiàn)《《《------------------------------
------------------------------------------在元素內(nèi)部追加子節(jié)點(diǎn)------------------------------
$(a).append(b) 把b添加到a中
append 追加,在元素內(nèi)部追加新的節(jié)點(diǎn)
//append是jq函數(shù),參數(shù)嚴(yán)格意義老說也是一個jq節(jié)點(diǎn)
------新建一個節(jié)點(diǎn)
var li = $("<li>22222</li>") //把html標(biāo)簽轉(zhuǎn)換成jq節(jié)點(diǎn)
------插入
$("#ul").append(li)
可以傳入多個參數(shù)
------append(b) //把b添加到a中 在a之后追加
------appendTo(b) //把a(bǔ)添加到b中 在b之后追加
------prepend(b) //把b添加到a中 在b之前追加
------prependTo(b) //把a(bǔ)添加到b中 在a之前追加
-----------------------------------------在同輩元素外部添加----------------------------------
after(content) //$(A).after(B) 表示 將B插入到A之后。
insertAfter(content) //$(A).insertAfter(B) 表示將A插入到B之后
before(content) //$(A).before(B) 表示將將B插入A之前
insertBefore(content) //$(A).insertBefore(B) 表示將A插入B之前
----------------------------------------------| 替換節(jié)點(diǎn) |--------------------------
replaceWith( ) 和 replaceAll( ) 用于替換某個節(jié)點(diǎn) (node)節(jié)點(diǎn) replace替換
$("ul li:eq(2)").replaceWith($("newnode"))
$("newnode").replaceAll$("ul li:eq(2)")
//兩個函數(shù)效果一樣,但是前后對象順序不同
----------------------------------------------| 復(fù)制節(jié)點(diǎn) |---------------------------------
clone()用于賦值某個節(jié)點(diǎn) 參數(shù)true 表示復(fù)制除了復(fù)制節(jié)點(diǎn)意外還復(fù)制事件
對于要新建一個復(fù)雜的節(jié)點(diǎn)可以先復(fù)制一個存在的節(jié)點(diǎn) 在他的基礎(chǔ)上修改
$("ul li:eq(1)").clone(ture).appendTo("ul")//復(fù)制一個元素并添加到~~~
-----------------------------------------| 獲取元素屬性 |----------------------------------
attr() 獲取 與 設(shè)置元素屬性
attr只有一個參數(shù)的時候可以根據(jù)屬性名來獲取值
$("#img").attr("style")
兩個參數(shù)表示表示選擇一個屬性,并修改值
$("#img").attr("src","~~~")
同時設(shè)置多個屬性(1)
·$("#img").attr("src","~~~")
·$("#img").attr("src","~~~")
·$("#img").attr("src","~~~")
同時設(shè)置多個屬性(2) 組裝一個js對象,(大括號括起來的多個鍵值對)
¥("#img").attr({
width:"300",
hight:"200"
})
json字符串和js對象的區(qū)別
removeAttr() 用來刪除元素數(shù)據(jù)
-------------------------------------------| 刪除節(jié)點(diǎn) |---------------------------------------
//移除節(jié)點(diǎn) 事件沒了
remove():刪除整個節(jié)點(diǎn)
直接把節(jié)點(diǎn)在整個文檔中移除
//移除節(jié)點(diǎn),附加的 事件還在
detach():刪除整個節(jié)點(diǎn)
//清空節(jié)點(diǎn)
empty():清空 與$("#div").html("")效果類似
清空節(jié)點(diǎn)中的內(nèi)容
empty清空節(jié)點(diǎn) 不移除節(jié)點(diǎn)
remove datech 都是刪除節(jié)點(diǎn) 移除之后可以找回,
remove找回節(jié)點(diǎn)的時候只能找回標(biāo)簽 和標(biāo)簽內(nèi)容,事件丟失
datech找回節(jié)點(diǎn)的時候連事件也可以找回。
------------------------------------------------| 遍歷元素 |---------------------------------------
children() 獲取所有子元素,方法可以有參數(shù) 參數(shù)為過濾
$("body").children()獲取<body>的子元素,但是不包含子元素的元素
find() 獲取被選取元素所有的后代元素
-----------------------------| 遍歷同輩元素 []這里表示的是可選 可以填參數(shù)也可以不填
--next([expr]) 獲取緊鄰匹配元素之后的元素
nextAll
nextUntil(4)
--prev([expr]) 用于獲取緊鄰匹配元素之前的元素
prevAll()
prevUntil
--slibings([expr]) 用于獲取匹配元素前面和后面的所有的同輩元素
-----------------------------| 遍歷前輩元素
parent() 獲取父輩元素
parents() 獲取祖輩元素
parentUntil(4)
table標(biāo)簽在被瀏覽器解析的時候,瀏覽器會在table
和tbody標(biāo)簽 表示表格主體,沒有實(shí)際意義
但是代碼中有用到層級關(guān)系時需要注意下
-------------------------樣式操作、
css()、addClass()、removeClass()、toggleClass()
$("<option> </option>") .text .val