jQuery 是一套Javascript腳本庫，註意 jQuery 是腳本庫,而不是腳本框架。"庫"不等於"框架"。jQuery 並不能幫助我們解決腳本的引用管理和功能管理,這些都是腳本框架要做的事。腳本庫能夠幫助我們完成編碼邏輯,實現業務功能。使用 jQuery 將極大的提高編寫javascrip... ...
jQuery 是一套Javascript腳本庫，註意 jQuery 是腳本庫,而不是腳本框架。"庫"不等於"框架"。jQuery 並不能幫助我們解決腳本的引用管理和功能管理,這些都是腳本框架要做的事。
腳本庫能夠幫助我們完成編碼邏輯,實現業務功能。使用 jQuery 將極大的提高編寫javascript代碼的效率, 讓寫出來的代碼更加優雅, 更加健壯。
使用 jQuery 的這些功能函數,能夠幫助我們快速完成各種功能,而且會讓我們的代碼異常簡潔。
javascript腳本在不同瀏覽器的相容性一直是 Web 開發人員的噩夢，比如在 jQuery 中就通過統一event對象,讓我們可以在所有瀏覽器中使用event.target獲取事件對象。
總結一下，jQuery封裝了JavaScript + DOM，可以寫的更少做的更多。本文僅對常用內容做一個總結，方便日後把相關知識點快速撿起來。
jQuery語法基本格式：$(selector).action()
鏈式編程
一、選擇器（selector）
1、基本選擇器
#id
element
.class
* 包含body
selector1,selector2,selectorN 併列選擇，組合
$("p").css("color","red")
$("#div1").text("it works")
$(".div2").css("background","yellow")
2、層級選擇器
ancestor descendant 所有後代
parent > child 只有兒子
prev + next 後面緊鄰的下一個
prev ~ siblings 後面所有的兄弟同輩
3、基本篩選器
針對索引進行篩選
:first 第一個
:even 索引為偶數
:odd 索引為奇數
:eq(index) 索引等於
:gt(index) 索引大於
:lt(index) 索引小於
其他
:not(selector) 非
:header
:focus
針對內容進行篩選
:contains(text)
$("div:contains('moumou')")
:empty 選擇內容為空的
:has(selector) 如包含P標簽
$("div:has(p)").addClass("test");
針對屬性進行篩選
[attribute] 也可以自定義屬性
[attribute=value]
[attr1][attr2][attr3] 多個屬性併列
<div id="div1" selfdefine="moumou"/>
$("div[selfdefine]")
$("div[id='div1']") 重要常用
針對錶單進行篩選
:input
:checkbox
$("input")
$(":input")
$("input[type='checkbox']")
$(":checkbox")
針對錶單對象屬性篩選
:enabled
:disabled 禁用標簽
:checked
:selected
$("input:checked")
$("select option:selected")
二、篩選器
篩選
eq(index|-index)
first()
last()
hasClass(class)
$("p:eq(1)").css("fontSize","30px")
$("p").eq(1)
//優勢後者不需要字元串拼接
查找
children([expr]) 只有兒子，沒有孫子
find(e|o|e) 所有後代
next([expr]) 緊鄰的下一個
nextAll([expr]) 下麵的所有滿足條件的集合
nextUntil([e|e][,f]) 到**為止
prev([expr]) 緊鄰的上一個
prevall([expr])
prevUntil([e|e][,f])
parent([expr]) 父親
parents([expr]) 父親爺爺等祖先
parentsUntil([e|e][,f])
siblings([expr]) 後面的兄弟
// 左側下拉菜單
function show(self){
//console.log($(self).text())
$(self).next().removeClass("hide")
$(self).parent().siblings().children(".con").addClass("hide")
}
三、操作元素（action）
1、 屬性操作
//HTML代碼/文本/值
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("attr")
$(".test").attr("attr","value")
$(".test").attr("checked","checked")
$(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
$(".test").removeClass("hide")
取消全選的實例
<button onclick="selectAll();">全選</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反選</button>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>11111</td>
</tr>
</table>
<script src="jquery-1.8.2.js"></script>
<script>
function selectAll() {
$("table :checkbox").prop("checked",true)
}
function cancel() {
$("table :checkbox").prop("checked",false)
}
function reverse() {
$("table :checkbox").each(function(){
if ($(this).prop("checked")){
$(this).prop("checked",false)
}
else {
$(this).prop("checked",true)
}
})
}
</script>
each 函數需要註意的問題：
// each return 退出與外層函數無關
// each return false 提示each退出
function f1(){
var li=[11,22,23,44]
//x,y索引和值
$.each(li,function (x,y) {
console.log(y);
if (x == 1){
return false;
}
});
return
console.log("ok");
}
2、CSS操作
(樣式) css("{color:'red',backgroud:'blue'}")
(位置) offset() position() scrollTop() scrollLeft()
(尺寸) height() width()
//scrollTop距離頂部的距離
window.onscroll=function(){
var current=$(window).scrollTop();
console.log(current)
}
3、文檔處理
內部插入
append()
appendTo()
$("#c1").append("<b>hello</b>")
$("p").appendTo("div")
prepend()
prependTo()
外部插入
before() insertBefore()
after insertAfter()
replaceWith() 替換
remove() 刪除標簽
empty() 清空內容
clone() 複製某標簽
4、事件
整個文檔拓撲結構載入再執行js代碼
// 所有函數放入其中，需要等待整個文檔載入完，避免找不到
$(document).ready(function(){...})
$(function(){...})
綁定事件
//js中的寫法
<button class="result" onclick="show(this)"></button>
function show(self){
self.lalalala;
}
//jQuery的寫法
$(".result").click(function(this){
this.lalalala;
})
$("p").click(function(){})
$("p").bind("click",function(){})
//用的時候再綁定事件
$("ul").delegate("li","click",function(){}) 事件委托
