jQuery的學習日記

jq的本質

就是封裝的js函數

jq對象獲取&設置

類似數組的對象,通過length屬性可進行遍歷,每個數組成員是一個dom對象,可以使用dom原生方法;
需要注意的是,jq對象只可用jq方法,dom對象只可用dom方法。jq對象通過下標進行數組訪問可獲得dom對象,dom對象可通過$(dom對象名)轉換爲jq對象(謹慎轉換)。
所以在參數列表中最後一個參數爲帶有兩個參數(第一個爲的對象的下標,第二個爲當前對象的某個值)的函數,
而這個函數中的this指的是當前這個下標的dom對象(具體應該用了call或bind方法)

html()和text()方法

html獲取和設置內容與innerHTML一致;text獲取內容方法是在html方法獲取的內容作出了去標籤的處理,
設置內容時瀏覽器不會翻譯內容中的任何標籤(慎用)

遍歷

①長輩
parent()//爸爸
parents()//爸爸爺爺...
parentsUntil()//爸爸爺爺..到某個標籤結束
例:
jq(“span”).parent(“div”).css({"background-color":"blue"})//span的爸爸並且還得是div的背景爲blue
jq(“span”).parents().css({"background-color":"blue"})//span的所有直系長輩的背景爲blue
jq(“span”).parentsUntil(“div”).css({"background-color":"blue"})//span的爸爸爺爺..到div結束的背景爲blue
②晚輩
children()//兒子
find()//所有後代
③同胞
siblings()//所有同胞元素
next()//下一個同胞元素
nextAll()//下一個和後面所有同胞元素
nextUntil(“元素1”)//到元素1之間的所有同胞

盒子位置

scroll().top/scroll().left
offset()// 獲取或設置座標值(相對文檔)設置值後變成相對定位,返回一個座標對象,設置也傳對象
屬性是left和top //offset().top    offset({left:100})
position()  // 獲取座標值(相對父親)只能讀取不能設置//readOnly
scrollTop()//設置或獲取元素滾動條垂直捲去的距離:設置scrollTop(100)
scrollLeft()//設置或獲取元素滾動條水平捲去的距離
data()方法
用處不大,給對象添加屬性使用(可能是爲了方便沒學js的人)
改變文檔結構
append()//在被選元素的內容結尾插入n個元素:$(‘#div’).append(‘你好’,’666’)
prepend() //在被選元素的內容開頭插入n個元素
after() //在被選元素之後插入n個元素
before()//在被選元素之前插入n個元素
replaceWith()//把被選元素替換掉
remove()//刪除被選元素和他的後代
empty()//刪除被選元素的後代

jq事件

三種方式:
直接調用:形如xxx.click(function(e){})

bind調用:形如xxx.bind('click mousedown mouseover',function(e){});

delegate調用(先輩元素事件傳給字輩):形如$('ul').delegate('li','click……',function(e){})

on調用:形如$('ul').on('click……','li',function(e){})


這裏的函數如果瞭解dom操作則很容易理解,是一個具體的dom對象在調用函數,
this指代內容和函數參數e與dom一致(就是相同的東西)
解除事件綁定的方法分別爲unbind(也適用於直接調用綁定事件)、undelegate、off

jq的等待加載完畢執行方法

window.onload = function(){}//dom方法
$(function(){})//jq方法,與ready一致
$(document).ready(function(){})//jq方法,當dom結構加載完執行
$(document).load(function(){})//jq方法,當整個頁面加載完執行,加載完所有連接和引用(比如圖片資源)。支持度較差,不推薦大量使用

jq動畫

隱藏/顯示
xxx.hide(v,fn)//hide的速度,回調函數,都可不填
xxx.show(v,fn)
xxx.toggle(v,fn)//如果hide則執行show,反之亦是如此
淡入淡出
xxx.fadeIn(v,fn)//淡入已經隱藏的元素
xxx.fadeOut(v,fn)//淡出已經顯示的元素
xxx.fadeToggle(v,fn)//淡出入開關
xxx.fadeTo(v,alpha,fn)//自定義透明度
//參數都是可選的,v是速度可填slow fast normal或數字(ms),alpha是透明度,fn是回調函數
滑動隱藏
 xxx.slideUp(v,fn)//向上滑動隱藏
 xxx.slideDown(v,fn)//向下滑動顯示
 xxx.slideToggle(v,fn)//上下滑動隱藏顯示開關
//參數都是可選的,v是速度可填slow fast normal 或數字(ms) fn是回調函數
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章