Web | jQuery快速上手

jQuery伴隨前端走過一段輝煌的時光,雖然如今已經慢慢的走下頂峯,可是過去的不少項目都是用jQuery寫的,它的一些封裝思想也很是值得借鑑,懂得jQuery是前端必不可少的.

jQuery頂級對象

DOM頂級對象是document

BOM的頂級對象是window

而jQuery的頂級對象是$

凡是對象都要用$()包裝起來

jQuery調用的習慣是使用點語法和小括號結合的方式.

頁面加載事件

$(window).load(function(){
    //該方法要等頁面內容所有加載完
})
$(document).ready(function(){
    //該方法等標籤加完,略快一點
})
$(function(){
    //等同第二種方式
})

引入jQuery注意事項

1. jQuery當前最高版本不兼容IE的低版本
2. 在引入開發的時候通常使用普通版本,打包上線的時候使用壓縮版本.

DOM對象和jQuery對象互轉

注意點:雙方不能使用對方的方法

jQuery對象 ===> DOM對象

1. $("#id")[0]
2. $("#id").get(0)

jQuery實操

選擇器

• 標籤選擇器

  $("標籤名")

• 類選擇器

  $(".類名")

• ID選擇器

  $("#ID名")

• 類+標籤

  $("標籤名.類名")//交集選擇器

• 多條件選擇器

  $(",")//和css並集同樣,能夠多個,用','號隔開.

• 層次選擇器

  $("div  p")//後代選擇器同樣
  $("div>p")//子代選擇器
  $("div+p")//獲取後面第一個兄弟元素
  $("div~p")//獲取後面全部的兄弟元素

• 其餘

  $("ul>li:even")//選擇偶數的標籤
  $("ul>li:odd")//選擇奇數的標籤
  $("ul>li:eq(4)")//選擇索引爲4的標籤
  $("ul>li:gt(4)")//選擇索引大於4的標籤
  $("ul>li:lt(4)")//選擇索引小於4的標籤

常見方法

.text()//至關於innerText.
.val() //若是不寫參數,則是獲取值,寫就是設置值,就是元素的value屬性.
.css()//該方法若是隻寫一個屬性,就只寫兩個參數.若是是多個屬性,就用鍵值對錶示.
.siblings()//當前標籤的全部兄弟元素
.next()//當前元素的下一個兄弟元素
.nextAll()//當前元素後面的全部兄弟元素
.prev()//當前元素的上一個兄弟元素
.prevAll()//當前元素的前面的全部的兄弟元素

元素樣式設置

//經過這種方式來設置樣式
$("#ul>li").css("backgroundColor","red")
//設置類樣式
.hasClass("類名")//是否有調用該類
.addClass("類名")//不須要加"."
.removeClass("類名")//若是都不寫,則移除所有類
.toggleClass("類名")//自動切換,無則調用,有則移除

鏈式編程

鏈上的每一次調用必須返回一個對象才能繼續後面的調用.

jQuery動畫

.hide()//隱藏,第一個參數能夠是毫秒,字符串("slow","normal","fast")
.show()//顯示,第一個參數能夠是毫秒,字符串("slow","normal","fast")
//還能夠用arguments.callee做爲第二個參數,相似遞歸的效果.

.slideUp();//上滑
.slideDown()//下滑
.slidetoggle()//自動上下滑動
//這幾個能夠寫參數,也是毫秒

.fadeIn()//淡入
.fadeOut()//淡出
.fadeToggle()//自動切換
//這幾個能夠寫參數,也是毫秒
.fadeTo(毫秒數,透明度)

.animate()//第一個參數鍵值對修改,第二個參數是時間(毫秒值),第三個參數是回調函數
.top()中止動畫效果

jQuery應用

動態建立元素

//1.
$("標籤的代碼") ==> $("<p>hhh</p>")
//2.
對象.html("標籤的代碼")

添加元素

對象.append(元素)//$("#d").append($("<p></p>"))把元素添加到元素中
對象.prepend(元素)//把元素插入到當前元素前面
對象.after(元素)//把元素插入到當前元素的後面
對象.before(元素)//把元素添加當前元素的前面
元素.appendTo()//主動添加到元素中

移除內容

$(元素).html("")//清空元素中內容
$(元素).empty()//清空元素中內容
$(元素).remove();//將自身所有移除

克隆元素

$(元素).clone()//複製元素

自定義屬性和值

//若是隻寫了參數,沒寫參數值,則是認爲在獲取參數值.
對象.attr("參數一","參數值")

偏離

$().offset(參數)

元素綁定事件

//鼠標進入
$().mouseover()
//鼠標離開
$().mouseout()
//點擊事件
$().click()
//綁定事件
$().bind()
//綁定事件,三個參數,綁定的元素,綁定事件,匿名函數
$().delegate()
//綁定事件,三個參數,事件類型,子級元素,事件處理函數
$().on()
//解綁事件,參數爲事件類型
$().off()
$().unbind()

觸發事件

//1.
$().click();
//2.
$().trigger("事件類型")
//3.
$().triggerHandler("事件類型")