jQuery

====什麼是jquery
1.Jquery是一個js函數庫,又常常被叫做jq,裏面代碼很多,但是用的時候代碼很少,是目前js的主流框架
2.使用JQ就可以做出我們前面做過的所有效果,那爲何還要學習js? Js是語言基礎,jq是js的代碼庫的封裝,比如在jq中我們不可能看到基本數據類型有哪些,因爲js有哪些jq中使用得就是這些,不管js還是jq,都是我們做項目使用得工具而已,要做出漂亮並且高性能的界面,主要還是看個人的靈活運用工具的能力(項目經驗)

====下載地址
兩個版本,開發測試用的,實際網站用的(都一樣) http://jquery.com/
然後在代碼裏面引入後就可以用了

常用的CDN:又拍雲,新浪,谷歌(不要用谷歌,請支持國產,主要是谷歌的服務器在國外)

====＄() , jQuery(),自定義名字
jq函數庫中定義了一個全局函數:jQuery(),這個函數的使用是最多的,因此,爲了敲代碼快,還給它定義了一個快捷名:＄
var div1=jQuery(‘div’)//得到所有div標籤
var div2=＄(‘div’)//得到所有div標籤
每次都寫＄不爽,而且萬一有其他框架也用的＄開頭咋辦?
自定義名字:
var hq = ＄.noConflict()
var div3=hq(‘div’)//得到所有div標籤

====＄()查詢
＄()方法有兩個參數:
第一個參數可以是選擇器,可以是對象:
＄(‘#div1’)//所有id爲div1的元素.
＄(document) //所有document 其實只有一個
第二個參數是可選的,代表範圍不寫默認就是document,就是在全文檔下查找
＄(‘p’,’#div2’)//所有id爲div2下的p元素

＄()方法的返回值
＄()返回的是一個jq對象,jq對象是一個類數組,跟querySelecterAll()方法返回的nodelist類似
比如:
＄(‘div’)返回值是一個裝有所有(大於等於0)div標籤的類數組.
＄(document)返回值是一個裝有當前doucument對象的類數組

====jq對象
屬性:
＄()方法返回的jq對象有四個屬性
length:返回的元素個數
//＄(document).length 爲1

selector:創建jq對象(不是DOM對象)的選擇器字符串(前提是創建時有選擇器的字符串)
//＄(‘p’,’#div2’)對象的selector屬性爲”#div2 p”

context:上下文,元素所在document對象
//＄(‘p’,’#div2’)對象的context屬性爲document

jquery:jq的版本號,是否存在,主要爲了跟其他類庫做區分
//＄(‘p’,’#div2’)對象的jquery屬性爲2.1.4

方法:
＄()方法返回的jq對象的方法有許多,我們主要就是學習這些方法

====元素屬性attr()
更改:傳對象或者下面第二種方式,按照鍵值對更改,類數組中所有的元素都更改

$(".bt").attr({'value':'123','style':'background:red'})
$(".bt").attr('style','background:red')

獲取:只傳屬性名,沒有設置過獲得的是undefined,只獲取類數組中第一個元素的

$(".bt").attr(‘style’)

獲取和更改:
$(“.bt”).attr(“屬性”,function(index,oldValue){return newValue})
//回調函數:第一個參數是屬性,index代表所選多個標籤的第幾個 oldValue代表獲取到的舊值 newValue代表新值
例:

$('p','#div2').attr('style',function(index,oldValue){
    console.log(oldValue)
    if(index==0){
    return 'background-color:red'
    }else{return 'background-color:yellow'}
    })

====元素的樣式css()
跟attr()方法類似,只不過這個方法作用於css的樣式,而不是元素的html屬性

獲取:只獲取類數組中第一個元素的,樣式名可以用連字符也可以用駝峯法,不能獲取複合樣式,(按照版本來,以實際爲準)只能獲取單個樣式值,獲取數值時會轉化爲有單位的字符串//10px

$('p').css('background-color')
$('div').css('backgroundColor')

設置:設置類數組中所有元素,可以設置複合樣式,一個樣式可以不用傳對象,直接寫樣式名和設置值

$('p').css('background-color','red')//一個樣式
$('p').css({'background-color':'red','textColor':'blue'})//一個或者多個,傳對象
$('p').css({'border':'1px solid red'})//設置複合樣式
$('p').css('font-size',function(index,old){
if(index>1){return  2*parseInt(old)}
else{return old}
})//第二個p元素以後的元素的字體放大2倍

====元素內容
val()
獲取:類數組第一個元素的value值

$('input').val()//獲取第一個input的value值

設置:設置所有元素的value值(參數爲值或者函數) //得到val和設置val返回值不一樣

$('input').val(1)//把所有input的value值設爲1
$('input').val(function(index,old){
    if(index>0){return 10}
    else{return 100}
    })//第一個input的value值設爲100,其他設爲10

html()
獲取:類數組第一個元素的HTML內容,包括子元素的標籤名
$(‘div’).html()//第一個div元素的尖括號裏面的內容

設置:設置所有元素的HTML內容,標籤會做解析,跟DOM中的innerHTML一樣會格式化替換調內部的內容(jq裏就是用的它實現的)

$('div').html('<p>250</p>')//把所有div的內容改爲250,p標籤的功能渲染
$('div').html(function(index,old){
    console.log(old)
    if(index>0){return '<h5>666</h5>'}
    else{return '<h1>111</h1>'}
    })//第一個div的HTML內容設爲111,用<h1>標籤的功能解釋,其他設爲666,用<h5>標籤的功能解

text()
獲取:獲取類數組中所有元素的所有子孫文本節點的純文本內容

$('div').text()//所有div的所有內部文本

設置:設置所有元素的本文內容,內容內部的標籤不會做解析

$('div').text('<h1>666</h1>')//把所有div的文本內容換爲<h1>666</h1> 注:標籤也會展示出來
$('div').text(function(index,old){
    if(index>0){return 'hello'}
    else{return 'hq'}
    })//第一個div的展示內容設爲hq,其他爲hello

====遍歷
①長輩
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之間的所有同胞

====盒子尺寸
width()//這裏獲得的寬高跟css()數據類型不一樣
innerWidth()
outerWidth()
outerWidth(true)

height()
innerHeight()
outerHeight()
outerHeight(true)
///這八個方法有的不能設置(沒有setter方法),根據實際情況來:比如width(100)

====盒子位置
offset()// 獲取或設置座標值(相對文檔)設置值後變成相對定位,返回一個座標對象,設置也傳對象屬性是left和top //offset().top offset({left:100})
position() // 獲取座標值(相對父親)只能讀取不能設置//readOnly
scrollTop()//設置或獲取元素滾動條垂直捲去的距離:設置scrollTop(100)
scrollLeft()//設置或獲取元素滾動條水平捲去的距離

====data() //這個方法可以設定一個無所謂的值，然後進行判斷滿足一些交互行爲。（點擊button 2次後不能再進行變化，但是其他button可以）；
data()方法可以給jq元素設置和獲取數據,以鍵值對的方式

$('div').data('a',100)//存了一個{‘a’:100}//如果已經存過key爲’a’的值,這裏就是更改
$('div').data('a')//獲取存的值
$('div').removeData('a')//刪除值(這裏的刪除跟賦值爲null不一樣)

====修改文檔結構
append()//在被選元素的結尾插入n個元素:$(‘#div’).append(‘你好’,’666’)
prepend() //在被選元素的開頭插入n個元素
after() //在被選元素之後插入n個元素
before()//在被選元素之前插入n個元素
replaceWith()//把被選元素替換掉
remove()//刪除被選元素和他的後代
empty()//刪除被選元素的後代

上面的增改方法的參數可以是這5種

var txt1=’我就是個純文本’
var txt2="<p>文本</p>"// HTML 標籤字符串
var txt3=$("<p></p>").text("文本") // 使用 jQuery 創建的對象
var $(“#div1”).after(txt3)
var txt4=document.createElement("p");txt4.innerHTML="文本" //DOM 創建的對象
var $(“#div1”).after(txt4)

var txt5=$(‘#p1’)//文檔中已經存在的,它自己會被從文檔的原來位置移除
//例:$(‘#div1’).replaceWith(txt5)//把id爲div1的元素替換成id爲p1的元素

clone()//克隆元素(包括後代),返回的對象不在文檔中//var cp1=$(‘#p1’)
clone(true)//淺克隆—-深克隆

====事件(return false阻止冒泡)
鼠標//基礎好的:123次點擊,右鍵點擊
click 單擊對象(按下鬆開)
dblclick 雙擊對象
mousedown 在對象上按下時
mouseup 按下,在對象上鬆開時
mousemove 鼠標在對象上移動時
mouseover 鼠標指針穿過被選元素區域觸發,穿過其子元素區域也觸發
mouseout 鼠標指針離開被選元素或者子元素區域
mouseenter 鼠標指針穿過被選元素區域
mouseleave 鼠標指針離開被選元素區域

鍵盤:焦點在哪裏哪個控件的鍵盤事件才觸發
keypress 鍵盤按鍵被按下並鬆開。
keydown 鍵盤按鍵被按下。
keyup 鍵盤按鍵被鬆開。

表單
focus節點獲得焦點後觸發
blur節點失去焦點後觸發

focusin將要獲得焦點時觸發，發生在focus事件之前
focusout將要失去焦點時觸發，發生在blur事件之前
change內容改變時
//input jQuery的on（）事件中不支持input，用change代替

reset 表單重置時
submit 表單提交時

加載(圖片文檔等)
load 完成加載
abort加載被中斷
error 加載發生錯誤

懸浮
hover//注:hover(fn1,fn2) hover事件要求有兩個回調函數,分別是移入和移出,只寫一個回調函數時,兩個狀態都觸發同一個函數

====事件對象
事件觸發時會傳入回調函數一個事件對象,這個對象的屬性包含了事件觸發時的一些信息
鼠標
altKey 鼠標事件發生時，是否按下alt鍵,返回一個布爾
ctrlKey 鼠標事件發生時，是否按下ctrl鍵,返回一個布爾
metaKey 鼠標事件發生時，是否按下windows/commond鍵,返回一個布爾
shiftKey 鼠標事件發生時，是否按下shift鍵,返回一個布爾
clientX，clientY返回鼠標位置相對於瀏覽器窗口左上角的座標，單位爲像素
screenX，screenY返回鼠標位置相對於屏幕左上角的座標，單位爲像素
鍵盤
altKey，ctrlKey，metaKey，shiftKey返回一個布爾值，表示是否按下對應的鍵
key屬性返回一個字符串，表示按下的鍵名。如果同時按下一個控制鍵和一個符號鍵，則返回符號鍵的鍵名。比如，按下Ctrl+a，則返回a。如果無法識別鍵名，則返回字符串Unidentified

====綁定事件mouseleave(fn)

回調函數返回值爲false時阻止冒泡

①

jq(“button”).click(fn)
jq(“button”).mouseenter(fn)
jq(“button”).
jq(“button”).click(fn).mouseenter(fn).mouseleave(fn) //因爲返回的也是就jQuery對象，所以能方法連用（專業術語：鏈式調用）

②bind(“events”,fn);//多事件用空格隔開

jq(“button”).bind(“click  mouseenter mouseleave”,fn)

③不同的事件想觸發不同的方法,傳一個對象進去

jq(“button”).bind({“click”:fn,”mouseenter ”:fm,”mouseleave”:fo})

④觸發一次one(“event”,fn)

jq(“button”).one(“click”,fn)

====多元素綁定事件
①原始的//每個li都綁定了一個事件

jq(“li”).bind(“click”,function(){alert(jq(this).html())})
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

②代理//只給ul(一定要綁父親)綁定了事件(冒泡)

jq(“ul”).delegate(“li”,”click”,function(){alert(jq(this).html())})

③前面所有的方式都忘掉,用這種:on(“events”,”selector”,fn)（“事件”，“兒子”，function）

jq(“ul”).on(“click”,”li”,function(){alert(jq(this).html())})

！！！！！This指代的對象：看｛｝
//ul 是on方法第二個參數li的爸爸,on第一個參數是事件,第二個參數是選擇器,第三個參數是回調,回調裏面的this關鍵字是個指針,指向觸發click事件的對象.

事件解綁
對應的unbind undelegate off
例子:

jq(“ul”).on(“click  mouseenter”,”li”,function(){alert(jq(this).html())})
     jq(“ul”).off(“click”)

現象:鼠標移入觸發,點擊卻不觸發

====事件觸發
事件的觸發有兩種方式
1.真事件觸發:真的用鼠標點了
2.假事件觸發:用代碼讓事件觸發(2種方式):
①事件名調用時不傳參數(不傳回調函數):

$(‘#div’).click()

②

$(‘#div’).trigger(‘click’)

====動畫
1.隱藏
hide(sd,fn)隱藏元素
show(sd,fn)顯示元素
toggle(sd,fn)隱藏顯示開關(來回掉用)
//參數都是可選的,sd是速度可填slow fast normal 或數字(ms),fn是回調函數
//jq(“p”).hide(2000,function(){alert(666)})
2.淡入淡出
fadeIn(sd,fn)//淡入已經隱藏的元素
fadeOut(sd,fn)//淡出已經顯示的元素
fadeToggle(sd,fn)//淡出入開關
fadeTo(sd,alpha,fn)//自定義透明度
//參數都是可選的,sd是速度可填slow fast normal或數字(ms),alpha是透明度,fn是回調函數
3.滑動隱藏
slideUp(sd,fn)//向上滑動隱藏
slideDown(sd,fn)//向下滑動顯示
slideToggle(sd,fn)//上下滑動隱藏顯示開關
//參數都是可選的,sd是速度可填slow fast normal 或數字(ms) fn是回調函數
4.自定義//幀動畫,補間動畫
animate({屬性},sd,fn)//動畫
//要讓元素實現動畫,必須設置定位
//參數:{}必填,sd可選動畫時間,fn可選,回調函數
//屬性必須用駝峯命名法寫,不能用原始的css屬性:margin-left改爲marginLeft
動畫隊列,隊列按照順序依次執行:

 jq("button").click(function(){
             jq(".div").animate({ width:'200px'});//隊列1
             jq(".div").animate({ width:'2000px'});//隊列2
             jq(".div").animate({ width:'200px'});//隊列3
            })

5.停止屬性改變
jq(“.div”).stop(bool,bool)//停止動態改變屬性的現象:比如動畫 滑動(參數:都可選布爾值,第一個是否停止所有隊列,第二個是否立即執行完所有效果)（默認都是false？？）