Jquery

--------------------------------基本選擇器:
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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費(fèi)時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,274評論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費(fèi)時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,505評論 0 2
  • 一)jQuery九類選擇器【參見jQueryAPI.chm手冊】 目的:通過九類選擇器,能定位web頁面(HTML...
    奮斗的老王閱讀 1,083評論 0 51
  • Chapter 2 : Selecting the elements upon which to act 1. $...
    Azur_wxj閱讀 480評論 0 1
  • 開始寫博客啦,準(zhǔn)備一點(diǎn)一點(diǎn)將云筆記上面的總結(jié)轉(zhuǎn)移到這個上面來.本菜鳥希望大家多多監(jiān)督我. 什么是jquery?JQ...
    盒小飯stone閱讀 572評論 0 0

友情鏈接更多精彩內(nèi)容