jQuery的初步使用

1.基本選擇器:參考CSS選擇器 - $("")

  • id/class/*/標(biāo)簽選擇器
  • 群組選擇器:p,span
  • 父子選擇器:ul>li
  • 后代選擇器:ul li
  • 兄弟選擇器:
    • 單個(gè):p+span
    • 多個(gè):p~span
  • 屬性選擇器:
    1. img[title] 選擇帶有title屬性的圖片
    2. img[title="mao"] 屬性等于某個(gè)值的時(shí)候選中
    3. img[title~="mao"] mao是詞列表(一個(gè)屬性多個(gè)值)也被選中
    4. img[title^="mao"] 開頭等于某個(gè)值選中
    5. img[title$="mao"] 結(jié)尾等于某個(gè)值選中
    6. img[title*="mao"] 包含某個(gè)值就選中
    7. img[title|="mao"] 選中title值為mao或mao-的內(nèi)容

2.過濾選擇器:偽類選擇器 - $("")

  • 與CSS3偽類選擇器有區(qū)別,且有的jq提供方法
$('li:even')    // 選擇索引為偶數(shù)的元素
$('li:odd')     // 選擇索引為奇數(shù)的元素
$('li:hidden')  // 選擇不可見元素
$('li:visible') // 選擇可見元素
$('li:empty')   // 選擇內(nèi)容為空的元素
$('li:contains("ok")')  // 選擇內(nèi)容為ok的元素
$("div").find("h2") === $("div h2")      // 選擇div中所有的h2后代
$("div").children("h2") === $("div>h2")  // 選擇div中所有的h2子元素
$("li").first() === $("li:first")        // 選擇第一個(gè)li
$("li").last() === $("li:last")          // 選擇最后一個(gè)li
$("li").eq(3) === $("li:eq(3)")          // 選擇索引為3的li
$("ul").has(".aa") === $("ul:has(.aa)")  // 選擇子元素中有aa類的ul
$("li").not(".aa") === $("li:not(.aa)")  // 選擇沒有aa類的li
$("p").next("span") === $("p+span")      // 選擇下一個(gè)兄弟元素
$("p").nextAll("span") === $("p~span")   // 選擇后面所有兄弟元素
$("p").prev("span")     // 選擇上一個(gè)兄弟元素
$("p").prevAll("span")  // 選擇前面所有兄弟元素
$('li').parent()    // 選擇最近的父級(jí)元素
$('li').parents()   // 選擇所有父級(jí)元素
$('li').is('.red')  // 返回true/false
$('li').hasClass('red')  // 返回true/false

3.jQuery的動(dòng)畫

  • hide():隱藏
  • show():顯示
  • toggle():顯示/隱藏取反
  • slideUp():上拉
  • slideDown():下拉
  • slideToggle():上拉/下拉取反
  • fadeIn():淡入
  • fadeOut():淡出
  • fadeToggle():淡入/淡出取反
  • fadeTo(時(shí)間, 透明度):自定義
  • 自定義動(dòng)畫:animate()
  • animate({目標(biāo)}, 時(shí)間, cb)
  • 連綴動(dòng)畫的三種方式
    • 方法連綴:jq的DOM方法執(zhí)行結(jié)束后郊艘,返回正在操作的DOM對(duì)象损敷,不斷.animate()
    • 同步連綴:動(dòng)畫與動(dòng)畫之間是同步的审葬,按順序執(zhí)行冲粤,分開寫
    • 回調(diào)連綴:利用回調(diào)函數(shù)多次調(diào)用動(dòng)畫方法
  • 動(dòng)畫與其他方法是異步的
  • 動(dòng)畫與動(dòng)畫之間是同步的
  • 多個(gè)動(dòng)畫會(huì)產(chǎn)生動(dòng)畫隊(duì)列
  • 動(dòng)畫隊(duì)列:按順序依次執(zhí)行
  • stop():默認(rèn)停止之前的動(dòng)畫
    • 兩個(gè)參數(shù)恢着,都是布爾值途凫,默認(rèn)都為false
    • 第一個(gè)參數(shù):true清除動(dòng)畫隊(duì)列桐汤;false不清除動(dòng)畫隊(duì)列
    • 第二個(gè)參數(shù):true立即運(yùn)動(dòng)到結(jié)束而克;false立即停止當(dāng)前動(dòng)畫
  • delay(時(shí)間).animate():延時(shí)執(zhí)行
  • queue():添加回調(diào)函數(shù)
    • 默認(rèn)無返回值
    • 傳入?yún)?shù)并調(diào)用即有返回值

4.jQuery的DOM操作

  • DOM操作

    • siblings():選擇所有兄弟元素
    • eq(n):選擇當(dāng)前索引為n的元素
    • index():查找當(dāng)前元素的索引
    • $("div").eq($("li").index()):選擇當(dāng)前l(fā)i對(duì)應(yīng)的div
    • parentsUntil(x):選擇所有父級(jí)直到x,但不包括x
    • nextUntil(x):選擇后面的兄弟直到x怔毛,但不包括x
    • prevUntil(x):選擇前面的兄弟直到x员萍,但不包括x
    • end():返回上一步的對(duì)象 - A.B.end():返回A
    • html() => innerHTML
    • text() => innerText
    • val() => value
    • addClass():增加class樣式
    • removeClass():移除class樣式
    • toggleClass():取反,有則移除拣度,無則添加
    • attr()/css():設(shè)置屬性/樣式
      • 一個(gè)參數(shù):
        • 字符:獲取此屬性值
        • 數(shù)組:獲取多個(gè)屬性值
        • 對(duì)象:設(shè)置多個(gè)屬性值
      • 兩個(gè)參數(shù):字符碎绎,設(shè)置屬性值
      • arguments.length:判斷參數(shù)
      • typeof(*):判斷類型
      • *.constructor:判斷類型
    • removeAttr():刪除屬性
    • 清空css樣式:設(shè)為""或"none"
    • $.each(obj,function(key,val){}):遍歷對(duì)象
  • 尺寸類方法:返回?cái)?shù)值型

    • 以下基于標(biāo)準(zhǔn)盒模型,請(qǐng)注意怪異盒的區(qū)別
    • width()/height():可獲取可設(shè)置抗果,元素的寬/高
    • innerWidth()/innerHeight():包括padding
    • outerWidth()/outerHeight():包括邊框和padding
  • 位置類方法:offset/position返回對(duì)象筋帖,其他返回?cái)?shù)值

    • offset():可獲取可設(shè)置;傳入對(duì)象冤馏;偏移位置日麸,包括margin
    • position():只能獲取,不能設(shè)置;定位
    • scrollTop()/scrollLeft():可獲取可設(shè)置代箭;滾動(dòng)的距離
  • 節(jié)點(diǎn)操作

    • $("<div>"):創(chuàng)建元素
    • A.append(B):B插入到A最后一個(gè)子節(jié)點(diǎn)
    • B.appendTo(A):B插入到A最后一個(gè)子節(jié)點(diǎn)
    • A.prepend(B):B插入到A第一個(gè)子節(jié)點(diǎn)
    • B.prependTo(A):B插入到A第一個(gè)子節(jié)點(diǎn)
    • A.after(B):在A后面插入兄弟元素B
    • A.before(B):在A前面插入兄弟元素B
    • remove():移除節(jié)點(diǎn)
    • empty():清空內(nèi)容
    • clone():克隆節(jié)點(diǎn)
    • A.clone(true).appendTo(B):克隆A及A的事件插入到B
    • replaceWith():替換標(biāo)簽
  • 綁定事件

    • 一般事件綁定:$("#btn").click(fn)
    • 綁定事件:$("#btn").on("click.a",fn)
    • 清除事件:$("#btn").off("click.a")
    • 事件委托:$(".list").on("click","li",fn)
    • one():綁定一次性事件
    • hover():綁定移入移出事件
      • $("div").hover(fn1,fn2)
      • fn1進(jìn)入事件 => enter
      • fn2離開事件 => leave
    • trigger("click") 自動(dòng)觸發(fā)事件墩划,且有事件冒泡
    • triggerHandler() 自動(dòng)觸發(fā)事件,沒有事件冒泡
    • preventDefault() 阻止默認(rèn)行為->contextmenu
    • stopPropagation() 取消事件冒泡
    • return false 阻止默認(rèn)事件和事件冒泡嗡综,雙層阻止
  • 事件對(duì)象

    • 同原生乙帮,但不用處理兼容
    • event.type 獲取事件的類型
    • event.data 獲取事件中傳遞的數(shù)據(jù)
    • event.target 獲取綁定事件的DOM元素
    • event.which 獲取當(dāng)前鼠標(biāo)點(diǎn)擊的鍵
    • event.altKey/shiftKey/ctrlKey 返回true/false
    • event.pageX/pageY 獲取根據(jù)頁面原點(diǎn)的X,Y值
    • event.screenX/screenY 獲取根據(jù)顯示器窗口的X,Y值
    • event.offsetX/offsetY 獲取根據(jù)父元素X,Y值
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市极景,隨后出現(xiàn)的幾起案子察净,更是在濱河造成了極大的恐慌,老刑警劉巖盼樟,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件氢卡,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡恤批,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門裹赴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來喜庞,“玉大人,你說我怎么就攤上這事棋返⊙佣迹” “怎么了?”我有些...
    開封第一講書人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵睛竣,是天一觀的道長(zhǎng)晰房。 經(jīng)常有香客問我,道長(zhǎng)射沟,這世上最難降的妖魔是什么殊者? 我笑而不...
    開封第一講書人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮验夯,結(jié)果婚禮上猖吴,老公的妹妹穿的比我還像新娘。我一直安慰自己挥转,他們只是感情好海蔽,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著绑谣,像睡著了一般党窜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上借宵,一...
    開封第一講書人閱讀 52,696評(píng)論 1 312
  • 那天幌衣,我揣著相機(jī)與錄音,去河邊找鬼壤玫。 笑死泼掠,一個(gè)胖子當(dāng)著我的面吹牛怔软,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播择镇,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼挡逼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了腻豌?” 一聲冷哼從身側(cè)響起家坎,我...
    開封第一講書人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎吝梅,沒想到半個(gè)月后虱疏,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡苏携,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年做瞪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片右冻。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡装蓬,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出纱扭,到底是詐尸還是另有隱情牍帚,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布乳蛾,位于F島的核電站暗赶,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏肃叶。R本人自食惡果不足惜蹂随,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望因惭。 院中可真熱鬧糙及,春花似錦、人聲如沸筛欢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽版姑。三九已至柱搜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間剥险,已是汗流浹背聪蘸。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人健爬。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓控乾,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親娜遵。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蜕衡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 一、jQuery中的 $ 1. 頂級(jí)對(duì)象 可以使用$('DOM對(duì)象')將 DOM 對(duì)象轉(zhuǎn)換成一個(gè)jQuery對(duì)象设拟,...
    康小曹閱讀 296評(píng)論 0 1
  • 1. jQuery jQuery的字面意思其實(shí)就是JavaScript和查詢(Query)慨仿,即用于輔助開發(fā)Java...
    _凌浩雨閱讀 486評(píng)論 0 2
  • JQuery的使用jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架纳胧,是繼Prototype之后又一個(gè)優(yōu)秀的J...
    IT_小哥哥閱讀 498評(píng)論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式镰吆。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,182評(píng)論 0 1
  • jQuery: 簡(jiǎn)單易用跑慕,功能強(qiáng)大万皿,對(duì)移動(dòng)端來說,體積稍大核行。 1牢硅、回顧前面學(xué)到的js我們遇到的一些痛點(diǎn) 1.win...
    越IT閱讀 601評(píng)論 12 6