jquery:(庫(kù)，插件，封裝)
目標(biāo)：使用
好處： 寫(xiě)的少蓄喇，做的多
庫(kù)： 別人寫(xiě)好，你拿來(lái)用
下載： http://jquery.com/
版本：
v1.x 亞非拉 兼容所有瀏覽器
v2.x 歐美 高
v3.x
jquery3.0-compat ~~ 1.x IE8+
jquery3.0 ~~ 2.x 高
基本使用:
<b>公共特性：</b>
1)交掏、賦值（事件) --> 函數(shù)調(diào)用(執(zhí)行方法)
2)妆偏、window.onload=fn --> $(fn)
3)、obj.屬性=值fn --> jqObj.屬性(值fn)
4)耀销、抓對(duì)象: getXxx--> $('CSS選擇器')
5)楼眷、一件事可以有很多實(shí)現(xiàn)方法
jqObj.css()/show()/fadeInt/slideDown
6)、jq的動(dòng)畫(huà)其實(shí)都是隊(duì)列動(dòng)畫(huà)
想插隊(duì) ,需要停止前面的動(dòng)畫(huà)
jqObj.stop().slideDown/slideUp/fadeIn/fadeOut()
7)熊尉、動(dòng)畫(huà)會(huì)卡頓:
推薦用 animate 不卡
其他的，要求不高可以用（! a--b>b-->a）掌腰，快
8)狰住、css 辦不到的，jq可以
9)齿梁、jq很少報(bào)錯(cuò)
10)催植、jq很少循環(huán)，可以一堆操作
11)勺择、修改樣式的時(shí)候创南，單位沒(méi)所謂：推薦加上單位(px)
12)、jq很少賦值,有的都是方法
jqObj.innerHTML=值 jqObj.html()
13)省核、在jq里面this都是原生
14)稿辙、jq的事件都是綁定
15)、jq也還是js寫(xiě)的,js辦不到的气忠，jq一樣辦不到
<b>動(dòng)畫(huà):</b>
jqObj.animate({},{}) ~~ move({},{})
<b>事件:</b>
jqobj.事件名(fn)
jqObj.hover(fn1,fn2)
jqObj.toggle(fn1,fn2,fn3)
....
<b>選擇器:</b> $('css選擇器');
* 統(tǒng)配
#div1 ID
.active 類(lèi)class
div tagname
#div .mini 后代
#div > p 一級(jí)子
#one , #two 分組
屬性:
div[title] 找的是div邻储，但要有屬性名title
div[title=test] 找的是div，但要有屬性名title=test
div[title^=te] 以什么開(kāi)頭
div[title$=st] 以什么結(jié)尾
div[title*=ss] 包含
偽類(lèi):
div:first 第0個(gè)
div:last 最后1個(gè)
div:eq(index) 第幾個(gè)
div:gt(n) 大于n
div:lt(n) 小于n (不含n)
div:odd 單
div:even 雙
div:has(選擇器) 找的是div,動(dòng)的是div,含有末個(gè)選擇器
div:contains(文本) 含有某段文本的
<b>樣式:</b>
jqObj.css(屬性旧噪，值) 修改
jqObj.css(屬性) 獲取
- 一堆對(duì)象吨娜，獲取的是第0個(gè)
jqObj.css({屬性1：值1，屬性2：值2,..,..}) 批量修改
屬性:
jqObj.attr(屬性淘钟，值) 修改
jqObj.attr(屬性) 獲取
- 一堆對(duì)象宦赠，獲取的是第0個(gè)
jqObj.attr({屬性1：值1，屬性2：值2,..,..}) 批量修改 - 無(wú)法獲取js自定義屬性,沖著頁(yè)面去的
innerHTML obj.innerHTML=值
jqObj.html(值) 修改
jqObj.html() 獲取
class操作: 不會(huì)覆蓋原有樣式
添加: jqObj.addClass(類(lèi)名)
移除: jqObj.removeClass(類(lèi)名)
判斷有沒(méi)有樣式: jqObj.hasClass(類(lèi)名) 返回true/false
*一堆判斷，只要有一個(gè)有勾扭，就是個(gè)true
<b>選項(xiàng)卡:</b>
this 都是原生
原生對(duì)象.jq方法() 有問(wèn)題
$(this) --> o o 包一下(目標(biāo)：為了使用jq 的方法)
jqObj.index() 索引 jq對(duì)象自帶索引
eq既是偽類(lèi)缤骨，也是方法
$('div:eq(n)') jqObj.eq(n).xx()
自動(dòng)播放選項(xiàng)卡:
定時(shí)器
取元素的高: jqObj.height()
- 一堆的高，取的是第0個(gè)
<b>DOM:</b>
創(chuàng)建：$('html標(biāo)簽')
添加：
b 到 a的過(guò)程
jq js
a.append(b) a.appendChild(b) 內(nèi)尾部
b.appendTo(a) -
a.prepend(b) a.insertBefore(a[0],b) 內(nèi)頭部
b.prependTo(a) -
a.insertBefore(b) - 前方 插入
a.insertAfter(b) - 后方 插入
*** 操作的dom元素已存在(頁(yè)面),所有的操作都是移動(dòng)
刪除:
jq js
jqObj.remove() obj.parentNode.removeChild(obj)
jqObj.parent() obj.parentNode 父級(jí)
jq表單元素.val() 取表單元素的value值
.val(值) 修改
<b>事件:</b>
click/mouseover/mouseout/mousedown/mouseup/....
綁定:
老版本
bind/unbind 綁定/解綁定
jqObj.bind('事件名',函數(shù))
新版本:
on / off ('事件名',函數(shù))
委托：
未來(lái)jqObj.live('事件名',函數(shù)) 老
事件加給了document 父定死了
父.delegate('未來(lái)的子','事件名',函數(shù)) 新
事件加給了 父 性能高 ,可以傳參
取消委托:
未來(lái)jqObj.die('事件名',函數(shù)) 老
父.undelegate('未來(lái)的子','事件名',函數(shù)) 新
mouseover... 都會(huì)冒泡
mouseenter/mouseleave/hover 不冒泡
hover 推薦
阻止冒泡:
jq js
return false 事件對(duì)象.cancelbubble=true;
阻止默認(rèn):
jq js
return false return false;
事件對(duì)象(ev): 無(wú)需做兼容
只阻止冒泡：
ev.stopPropagation()
只阻止默認(rèn):
ev.preventDefault();
<b>大小:</b>
jq js
寬尺借、高
jqObj.height()/width()不帶 getStyle 帶著單位
jqObj.outerWidth()/outerHeight() offsetWidth/offsetHeight
盒模型： css寬+padding+border W3C
MS: css寬+padding+border+margin MS
<b>位置:</b>
jq js
jqObj.position().left offsetLeft/top
jqObj.offset().left getPos()
<b>鏈?zhǔn)讲僮?</b>
對(duì)象.方法1().方法2().xx().oo() 連綴
jqObj.stop().animate() 成功
obj.split('-').reverse().join() 成功
jqObj.html().xx() //獲取操作,常常會(huì)導(dǎo)致連綴
obj.innerHTML.xx()
<b>連綴菜單思路：尋路</b>
jqObj.next() 下一個(gè)兄弟
jqObj.children('選擇器') 找選擇器指定的子
jqObj.siblings() 兄弟們
<b>轉(zhuǎn)換：</b>
js --> jq
obj $(obj)
jq --> js
jqObj jqObj.get(0)/jqObj[0]
<b>循環(huán)：</b>
jqObj.each(function(index,element){
index == 索引
element == this == 循環(huán)的每一個(gè)對(duì)象
});
$.browser.內(nèi)核名稱(chēng) true/undefined
$.browser.version
*** 沒(méi)辦法判斷360
去除前后空格: $.trim(字符)
<b>插件:</b> 滿(mǎn)足軟件绊起，庫(kù)，的一些不足
插件網(wǎng)： http://www.jq22.com/
自定義:
$.fn.方法名=fn 單個(gè)插件定義
$.fn.extend({ 批量定義
方法名1:fn1,
方法名2:fn2,
方法名N:fnN,
})
<b>幻燈片：</b>
$('class').drag()
$.fn.drag=function(){
this == jq對(duì)象
this == 多個(gè)class this.li.操作 ,10個(gè)
this.each(function(index,element){
element 每一個(gè)幻燈片
element.li 5個(gè)
})
}
例子：
input:checked 選擇已選中的 input
文檔滾動(dòng)距離 $(document).scrollTop()
窗口高度 $(window).height()
div:not(:last) 所有的div,不含最后一個(gè)
div:hidden 找的是隱藏div
div:visible 找的是顯示div
jqObj.is(':hidden') 返回 true/false
is 判斷jqObj是不是選擇器所描述的狀態(tài)
jqObj.toggleClass(類(lèi)名) 切換樣式
