jquery 常用方法總結
jQuery頂級對象 縮寫$ window.jQuery window.$
第一部分，找對象
其本選擇器
$("#id")
$(".class")
$("input")
復合選擇器 $("#id,.class,input")
層次選擇器
$("div p") 包含選擇器 div中所有的p 子元素 子子元素..
$("div > p") 子后代選擇器 div中直接子后代
$("div + p")第一個兄弟p
簡單選擇器
:first 選取第一個元素 $("div:first")
:last 選取最后一個元素
:not(選擇器) 選取不滿足“選擇器”條件的元素$("div:not(#id)")
:even、:odd，選取索引是奇數、偶數的元素
:eq(索引序號)、:gt(索引序號)大于、:lt(索引序號)小于
表單對像選擇器
$(":input")匹配所有 input, textarea, select 和 button 元素
$(":text")匹配所有 匹配所有的單行文本框
$(":checkbox")匹配所有復選框
etc.....查看幫助
表單對象屬性選擇器
$(":checkbox:checked")
$("select option:selected") 這個比較特別不不可以使用:
$("input:disabled")
$("input:enabled")
內容選擇器
$("div:contains('John')") 匹配包含給定文本的元素
屬性過濾選擇器
$("div[id]")選取有id屬性
$("div[title=test]")選取title屬性為test的元素
$("div[title!=test]")選取title屬性不為test的元素
兄弟節點，子節點
.siblings()所有兄弟節點。沒有自己
.next()下一個兄弟節點
.nextall()查找當前元素之后所有的同輩元素。
.nextAll("div")
.prev()之前的一個節點
.prevAll()
.end返回上一次jQ對像被破壞之前的狀態
$("#d4").nextAll().css("background-color", "red").end().css("background-color", "black");
這時的end()返回的是$("#d4")對像
andself 我和我之后的節點
$("#d4").nextAll().andSelf().css("background-color", "red"); 我和我之后的兄弟節點變紅
$("#d4").nextAll().andSelf().end().css("background-color", "red"); 我之后的兄弟節點變紅
第二部分，改變對像
設置樣式
css() 設置行內樣式 設置標簽的style屬性
css({ "width": width, "height": height,"top":0,"left":0 }); 可以采用json格式
addClass("myclass")(不影響其他樣式) class="c1 c2"
removeClass("myclass")移除樣式
toggleClass("myclass")如果存在樣式則去掉樣式，如果沒有樣式則添加樣式 .例子，做開關燈的時候
hasClass("myclass")判斷是否存在樣式
設置屬性
attr("class","c1") 對class屬性賦值 設置標簽的所有屬性
設置內容或值
html() text() val()
移動，創建，增加，刪除dom對像
var $link = $("<a href='
加到對像內
.append($link);向后追加
appendTo將一個元素移動到另一個元素的最后面
prepend向前追加
prependTo將一個元素移動到另一個元素的最前面
加到對像外
after 在結束標簽之前添加元素
before在開始標簽前添加元素
remove() 刪除當前節點
empty() 清空當前節點之間的內容，節點保留
第三部分，事件,方法
$(funtion(){}); 當面頁加載完成時調用,只加載一次.一般寫jq都寫在里面
.each(funtion(){}) 每個對像都要執行的函數
.map(funtion(){})將一個數組中的元素轉換到另一個數組中。.map([1,2,3]funtion(n){return n+1;}
.click(funtion(){})
.mouseover(funtion(){})
.mouseout(funtion(){})
.resize(funtion(){})
阻止事件冒泡 關于哪些事件冒泡，我沒有記，反正，出問題了，你就用下面這個就OK，沒必要記住
$("#d1").click(function(e){ e.stopPropagation();})
取消后續內容
e.preventDefault(); 這個我不知道，是什么意思，平時好像也沒有用到
綁定事件 $("#id").bind("click":function(){},"mouseover": function () { })
解除綁定 $("#id").unbind("click")
讓事件只執行一次 $("#id").one("click",function(){}) //評分控件
合成事件hover toggle
hover(enterfn,leavefn) 當鼠標放上時執行enterfn，當鼠標離開時執行leavefn
toggle(fn1,fn2) 當鼠標第一次點擊時執行fn1，第二次點擊執行fn2，以后依次執行
事件參數
pageX、pageY
target 獲得觸發事件的元素 個人覺得沒什么用，就相當于this
altKey、shiftKey、ctrlKey
keyCode 鍵盤碼、 獲取按下的是哪個鍵 $(document).keydown(funtion(e){alert(e.keyCode)});
altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which
其它常用的方法
focus();blur();得到焦點。失去焦點 [搜索文本框效果]
獲取對像的寬度和高度
var width = $(對像).width();
var height = $(對像).height();
第四部分,動畫 復雜動畫可以解決其它動畫實現的效果，所以個人覺得，只須記住復雜動畫就可以了
show()、hide()
toggle() 切換顯示隱藏
slideDown、slideUp、 fadeOut、fadeIn
animate 復雜動畫 $("img").animate({ "bottom": 0, "right": 0 }, 2000).animate({ "opacity": 0 }, 4000);
$("#d1").animate({ "left": 300, "top": 300 }, 5000).animate({ "width": 300, "height": 300, "opacity": 1 }, 3000, function () {
});
$("#d1").animate({ "left": "-=80" }, 1000);
第五部分，自定義插件
$.extend({ "xhc1": function (x, y) {
return x > y ? x : y;
}
});
$.fn.extend({ "xhc1": function (x, y) {
alert(x > y ? x : y);
}
});
$(function () {
alert($.xhc1(6, 3)); 對應第一種
$(":button").xhc1(6, 3); 對應第二種
});
第六部分。調用插件
cookie插件
<script src="jquery.cookie.js" type="text/javascript"></script>
var tim = $.cookie("tim");
$.cookie("tim", new Date(), { expires: 30 });
驗證表單插件
<script src="../../js/jquery.validate.js" type="text/javascript"></script>
具體看查JQValidate.txt
提交表單插件
<script src="../../js/MyAjaxForm.js" type="text/javascript"></script>
$("#from1").ajaxSubmit({
success: function (str) {
if (str == "ok") {
if (confirm("增加成功，是否繼續")) {
$(json.add.form).resetForm();
var id = $(".cpb").attr("title").replace("第", "").replace("頁", "");
pagejson(json, id);
}
else {
var id = $(".cpb").attr("title").replace("第", "").replace("頁", "");
$(json.add.divid).dialog('close');
pagejson(json, id);
}
}
},
error: function (error) {
alert(error);
},
url: json.add.addurl,
type: "post"
});
時間插件
<script src="../../js/datapattern.js" type="text/javascript"></script>
(eval(data.replace(/\/Date(\d+)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd")
easyui插件
<link href="../../Content/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="../../js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../../js/easyui-lang-zh_CN.js" type="text/javascript"></script>
$(json.add.divid).dialog({
title: json.add.addTitle,
width: json.add.W,
height: json.add.H,
maximizable: true,
resizable: true,
modal: true,
border: false,
resizeable: true,
collapsible: true,
buttons: [{
text: '確定',
iconCls: 'icon-ok',
handler: function () {
//驗證表單
if (frmflag.form()) {
$(json.add.form).ajaxSubmit({
success: function (str) {
if (str == "ok") {
if (confirm("增加成功，是否繼續")) {
$(json.add.form).resetForm();
var id = $(".cpb").attr("title").replace("第", "").replace("頁", "");
pagejson(json, id);
}
else {
var id = $(".cpb").attr("title").replace("第", "").replace("頁", "");
$(json.add.divid).dialog('close');
pagejson(json, id);
}
}
},
error: function (error) {
alert(error);
},
url: json.add.addurl,
type: "post"
});
};
}
}, {
text: '關閉',
handler: function () {
$(json.add.divid).dialog('close');
}
}]
});
問題
$(who).when(what)
$().get(0)
得到一個jq對像集合后，最好用 for 不要用forin
append和appendTo
appendTo的真正用途是。將一個現存的元素移動到一個元素中。
<p>I would like to say: </p><div id="foo"></div>
$("p").appendTo("#foo");
<div id="foo"><p>I would like to say: </p></div>
如果將一個元素追加進去的話，用append就可以了，雖然appendTo也可以。
：的有簡單選擇器和表單選擇器和表單對像選擇器 還有一個內容選擇器，$("div:contains('John')")
這里有一個特別的表單元素。select 不可以用: 只有他的option 里的屬性才支持: $("select option:selected")