jquery:(庫，插件，封裝)
目標：使用
好處： 寫的少，做的多
庫： 別人寫好，你拿來用
下載： http://jquery.com/
版本：
v1.x 亞非拉 兼容所有瀏覽器
v2.x 歐美 高
v3.x
jquery3.0-compat ~~ 1.x IE8+
jquery3.0 ~~ 2.x 高
基本使用:
<b>公共特性：</b>
1)、賦值（事件) --> 函數調用(執行方法)
2)、window.onload=fn --> $(fn)
3)、obj.屬性=值fn --> jqObj.屬性(值fn)
4)、抓對象: getXxx--> $('CSS選擇器')
5)、一件事可以有很多實現方法
jqObj.css()/show()/fadeInt/slideDown
6)、jq的動畫其實都是隊列動畫
想插隊 ,需要停止前面的動畫
jqObj.stop().slideDown/slideUp/fadeIn/fadeOut()
7)、動畫會卡頓:
推薦用 animate 不卡
其他的，要求不高可以用（! a--b>b-->a），快
8)、css 辦不到的，jq可以
9)、jq很少報錯
10)、jq很少循環，可以一堆操作
11)、修改樣式的時候，單位沒所謂：推薦加上單位(px)
12)、jq很少賦值,有的都是方法
jqObj.innerHTML=值 jqObj.html()
13)、在jq里面this都是原生
14)、jq的事件都是綁定
15)、jq也還是js寫的,js辦不到的，jq一樣辦不到
<b>動畫:</b>
jqObj.animate({},{}) ~~ move({},{})
<b>事件:</b>
jqobj.事件名(fn)
jqObj.hover(fn1,fn2)
jqObj.toggle(fn1,fn2,fn3)
....
<b>選擇器:</b> $('css選擇器');
* 統配
#div1 ID
.active 類class
div tagname
#div .mini 后代
#div > p 一級子
#one , #two 分組
屬性:
div[title] 找的是div，但要有屬性名title
div[title=test] 找的是div，但要有屬性名title=test
div[title^=te] 以什么開頭
div[title$=st] 以什么結尾
div[title*=ss] 包含
偽類:
div:first 第0個
div:last 最后1個
div:eq(index) 第幾個
div:gt(n) 大于n
div:lt(n) 小于n (不含n)
div:odd 單
div:even 雙
div:has(選擇器) 找的是div,動的是div,含有末個選擇器
div:contains(文本) 含有某段文本的
<b>樣式:</b>
jqObj.css(屬性，值) 修改
jqObj.css(屬性) 獲取
- 一堆對象，獲取的是第0個
jqObj.css({屬性1：值1，屬性2：值2,..,..}) 批量修改
屬性:
jqObj.attr(屬性，值) 修改
jqObj.attr(屬性) 獲取
- 一堆對象，獲取的是第0個
jqObj.attr({屬性1：值1，屬性2：值2,..,..}) 批量修改 - 無法獲取js自定義屬性,沖著頁面去的
innerHTML obj.innerHTML=值
jqObj.html(值) 修改
jqObj.html() 獲取
class操作: 不會覆蓋原有樣式
添加: jqObj.addClass(類名)
移除: jqObj.removeClass(類名)
判斷有沒有樣式: jqObj.hasClass(類名) 返回true/false
*一堆判斷，只要有一個有，就是個true
<b>選項卡:</b>
this 都是原生
原生對象.jq方法() 有問題
$(this) --> o o 包一下(目標：為了使用jq 的方法)
jqObj.index() 索引 jq對象自帶索引
eq既是偽類，也是方法
$('div:eq(n)') jqObj.eq(n).xx()
自動播放選項卡:
定時器
取元素的高: jqObj.height()
- 一堆的高，取的是第0個
<b>DOM:</b>
創建：$('html標簽')
添加：
b 到 a的過程
jq js
a.append(b) a.appendChild(b) 內尾部
b.appendTo(a) -
a.prepend(b) a.insertBefore(a[0],b) 內頭部
b.prependTo(a) -
a.insertBefore(b) - 前方 插入
a.insertAfter(b) - 后方 插入
*** 操作的dom元素已存在(頁面),所有的操作都是移動
刪除:
jq js
jqObj.remove() obj.parentNode.removeChild(obj)
jqObj.parent() obj.parentNode 父級
jq表單元素.val() 取表單元素的value值
.val(值) 修改
<b>事件:</b>
click/mouseover/mouseout/mousedown/mouseup/....
綁定:
老版本
bind/unbind 綁定/解綁定
jqObj.bind('事件名',函數)
新版本:
on / off ('事件名',函數)
委托：
未來jqObj.live('事件名',函數) 老
事件加給了document 父定死了
父.delegate('未來的子','事件名',函數) 新
事件加給了 父 性能高 ,可以傳參
取消委托:
未來jqObj.die('事件名',函數) 老
父.undelegate('未來的子','事件名',函數) 新
mouseover... 都會冒泡
mouseenter/mouseleave/hover 不冒泡
hover 推薦
阻止冒泡:
jq js
return false 事件對象.cancelbubble=true;
阻止默認:
jq js
return false return false;
事件對象(ev): 無需做兼容
只阻止冒泡：
ev.stopPropagation()
只阻止默認:
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>鏈式操作:</b>
對象.方法1().方法2().xx().oo() 連綴
jqObj.stop().animate() 成功
obj.split('-').reverse().join() 成功
jqObj.html().xx() //獲取操作,常常會導致連綴
obj.innerHTML.xx()
<b>連綴菜單思路：尋路</b>
jqObj.next() 下一個兄弟
jqObj.children('選擇器') 找選擇器指定的子
jqObj.siblings() 兄弟們
<b>轉換：</b>
js --> jq
obj $(obj)
jq --> js
jqObj jqObj.get(0)/jqObj[0]
<b>循環：</b>
jqObj.each(function(index,element){
index == 索引
element == this == 循環的每一個對象
});
$.browser.內核名稱 true/undefined
$.browser.version
*** 沒辦法判斷360
去除前后空格: $.trim(字符)
<b>插件:</b> 滿足軟件，庫，的一些不足
插件網： http://www.jq22.com/
自定義:
$.fn.方法名=fn 單個插件定義
$.fn.extend({ 批量定義
方法名1:fn1,
方法名2:fn2,
方法名N:fnN,
})
<b>幻燈片：</b>
$('class').drag()
$.fn.drag=function(){
this == jq對象
this == 多個class this.li.操作 ,10個
this.each(function(index,element){
element 每一個幻燈片
element.li 5個
})
}
例子：
input:checked 選擇已選中的 input
文檔滾動距離 $(document).scrollTop()
窗口高度 $(window).height()
div:not(:last) 所有的div,不含最后一個
div:hidden 找的是隱藏div
div:visible 找的是顯示div
jqObj.is(':hidden') 返回 true/false
is 判斷jqObj是不是選擇器所描述的狀態
jqObj.toggleClass(類名) 切換樣式
