Dom:
Attribute:屬性
$("p").addClass(css中定義的樣式類型); 為某個元素加上樣式
$("img").attr({ src:"test.jpg",title:"test Image"}); 為某個元素新增屬性/值,參數是map
$("input").attr({"checked", "checked"} );
$("img").attr("title", function() { return this.src }); 為某個元素加上屬性/值
$("元素名稱").html( ); 取得該元素內的內容(元素,文字等)
$("元素名稱").html("new stuff"); 為某元素設定內容
$( "元素名稱").removeAttr("屬性名稱") 將某元素刪除指定的屬性以及該屬性的值
$("元素名稱").removeClass("class") 將某個元素刪除指定的樣式
$("元素名稱").text(); 取得該元素的文字
$("元素名稱").text(value); 設定該元素的文字值為value
$("元素名稱").toggleClass(class) 當元素存在參數中的樣式的時候取消,如果不存在就設定此樣式
$("input元素名稱").val(); 取得input元素的值
$("input元素名稱").val(value); 設定input元素的值為value
Manipulation:
$("元素名稱").after(content); 在匹配元素後面加入內容
$("元素名稱").append(content); 將content作為元素的內容插入到該元素的後面
$("元素名稱").appendTo(content); 在content後接元素
$("元素名稱").before(content); 與after方法相反
$ ("元素名稱").clone(布林表達式) 當布林運算式為真時,複製元素(無參時,當作true處理)
$("元素名稱").empty() 將該元素的內容設為空白
$("元素名稱").insertAfter(content); 將該元素插入到content之後
$("元素名稱").insertBefore(content); 將該元素插入到content之前
$("元素").prepend(content); 將content作為該元素的一部分,放到該元素的最前面
$("元素").prependTo(content); 將該元素作為content的一部分,放content的最前面
$("元素").remove(); 刪除所有的指定元素
$("元素").remove("exp"); 刪除所有含有exp的元素
$("元素").wrap("html"); 用html來包圍該元素
$("元素").wrap(element); 用element來包圍該元素
Traversing:
add(expr)目前符合元素集合增加新的匹配元素集合‘expr',形成新的匹配元素集合;
範例:
範例
$("#div1").find("p").hide().end().hide()
第一個hide()是p標籤的然後用end ()結束p標籤的參考而回到#div1標籤
所以第二個hide()是對於#div1起作用的
如果不加end() 則兩個hide()都是對p標籤起作用
filter(expression)
find(expr)
filter和find的差別:
filter會在一組已經選取的元素裡面選擇;
find將在一組已經選取的元素的子節點裡面選擇;
測試1
測試2
差別在於:
find()會在div元素內 尋找 class為rain 的元素。
而filter()則是篩選div的class為rain的元素。
一個是對它的子集操作,一個是對自身集合元素篩選。
is(expr)//判斷現有集合是否屬於‘expr'集合中的一部分或相等。如果是則回傳true,否則回傳false
next(expr)//取得一個包含符合的元素集合中每一個元素緊鄰的後面兄弟元素集合。
not(el)//匹配集合中沒有滿足過濾要求的元素集合
範例:
$("div").not(".green, #blueone")
$("input:not(:checked) span")
$('tr:not ([th]):odd')
parent(expr)取得一個包含著所有匹配元素的唯一父元素的元素集合
parents(expr)//得到匹配元素集合中各個元素的所有祖先元素集合
prev(expr)得到匹配元素集合中各個元素緊鄰的前一個兄弟元素集合
siblings(expr)得到所有匹配元素集合中各個元素的所有兄弟元素集合
Core:
$(html).appendTo("body") 相當於在body中寫了一段html程式碼
$(elems) 取得DOM上的某個元素
$(function( ){……..}); 執行一個函式
$("div > p").css("border", "1px solid gray"); 找出所有div的子節點p,新增樣式
$("input:radio", document.forms[0]) 在目前頁面的第一個表單中找到所有的單選按鈕
jQuery為開發插件提拱了兩個方法,分別是:
jQuery.extend(object) 為擴展jQuery類別本身.為類別新增新的方法。
舉例
jQuery.extend({
min: function(a, b) { return a max: function(a, b) { return a > b ? a : b; }
});
引用jQuery:
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
}; 🎜>
舉例
舉例:1
ready(fn); $(document).ready()注意在body中沒有onload事件,否則函數不能執行。在每個頁面中可以有很多個函數被載入執行,按照fn的順序來執行。
範例:
$(document).ready(function(){alert("aa");}
bind( type, [data], fn ) 為每一個符合元素的特定事件(像click)綁定一個或多個事件處理器函數。可能的事件type屬性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,mouseover, mouseout, mouseenter, mouseleave, change, seerrlect, submit, keydown, press,key, key,error, submit, keydown, press,key, key.
範例1:
$('#myBtn').bind("click",function(){
alert('click');
});
範例2:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
one( type, [data], fn ) 為每一個符合元素的特定事件(像click)綁定一個或多個事件處理器函數。在每個物件上,這個事件處理函數只會被執行一次。其他規則與bind()函數相同。
type(String) : 事件類型。
data(Object) : (可選) 作為event.data屬性值傳遞給事件物件的額外資料物件。
fn(Function) : 綁定到每個符合元素的事件上面的處理函數。
trigger( type, [data] ) 在每一個符合的元素上觸發某一類事件。
$("p").click( function (event, a, b) {
// 當一個普通的點擊事件時,a和b是undefined類型
// 如果用下面的語句觸發,那麼a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]); toggle( fn, fn ) 如果點擊了一個符合的元素,則觸發指定的第一個函數,當再次點擊相同元素時,則觸發指定的第二個函數。
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this) .removeClass("selected");
}
);
例:
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 ' ' message2);
});
;
$("p").trigger("myEvent", ["Hello","World!"]);
triggerHandler( type, [data] ) 這個特定方法會觸發一個元素上特定的事件(指定一個事件類型),同時取消瀏覽器對此事件的預設行動
unbind( [type], [data] ) 反綁定,從每一個匹配的元素中刪除綁定的事件。
$("p").unbind() 移除所有段落上的所有綁定的事件
範例:
hover( over, out ) over,out都是方法, 當滑鼠移到一個符合的元素上面時,會觸發指定的第一個函數。當滑鼠移出這個元素時,會觸發指定的第二個函數。
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .addClass("out");
}
);
JQuery Ajax 方法说明:
load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$("#feeds").load("feeds.html"); 将feeds.html文件载入到id为feeds的div中
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
});
jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
jQuery.getScript( url, [callback] ) 使用GET请求JavaScript文件并执行。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。
ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
$("#msg").ajaxComplete(function(request, settings){
$(this).append("
ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件
当AJAX请求开始(并还没有激活时)显示loading信息
$("#loading").ajaxStart(function(){
$(this).show();
});
ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件
当所有AJAX请求都停止时,隐藏loading信息。
$("#loading").ajaxStop(function(){
$(this).hide();
});
ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。这是一个Ajax事件
当AJAX请求成功完成时,显示信息。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("
jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
设置默认的全局AJAX请求选项。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。
从form中取得一组值,显示出来
function showValues() {
var fields = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
JQuery Effects 方法说明
show( ) 显示隐藏的匹配元素。
show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
hide( ) 隐藏所有的匹配元素。
hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,
切换为可见的。
slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以
"滑动"的方式显示出来。
slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏起来。
slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏或显示。
fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。
queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数
queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
dequeue( ) 执行并移除动画序列前端的动画
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
animate( params, options ) 创建自定义动画的另一个方法。作用同上。
JQuery Traversing 方法说明
eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始
filter( expr ) 返回与指定表达式匹配的元素集合,可以使用","号分割多个expr,用于实现多个条件筛选.
ilter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的
表达式就返回true。
map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。
not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。
add( expr ) 把与表达式匹配的元素添加到jQuery对象中。
children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。
contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点,不包括文本节点),如果元素为iframe,则取得其中的文档元素
find( expr ) 搜索所有与指定表达式匹配的元素。
next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
andSelf( ) 将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素,添加border类属性。取得所有div元素中的p元素,
添加background类属性
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
end( ) 结束当前的操作,回到当前操作的前一个操作
找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性
$("p").find("span").end().css("border", "2px red solid");
JQuery Selectors选择器方法说明
基本选择器
$("#myDiv") 匹配唯一的具有此id值的元素
$("div") 匹配指定名称的所有元素
$(".myClass") 匹配具有此class样式值的所有元素
$("*") 匹配所有元素
$("div,span,p.myClass") 联合所有匹配的选择器
层叠选择器
$("form input") 后代选择器,选择ancestor的所有子孙节点
$("#main > *") 子选择器,选择parent的所有子节点
$("label + input") 临选择器,选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器
$("tr:first") 匹配第一个选择的元素
$("tr:last") 匹配最后一个选择的元素
$("input:not(:checked) + span")从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器)
$("tr:even") 匹配集合中偶数位置的所有元素(从0开始)
$("tr:odd") 匹配集合中奇数位置的所有元素(从0开始)
$("td:eq(2)") 匹配集合中指定位置的元素(从0开始)
$("td:gt(4)") 匹配集合中指定位置之后的所有元素(从0开始)
$("td:gl(4)") 匹配集合中指定位置之前的所有元素(从0开始)
$(":header") 匹配所有标题
$("div:animated") 匹配所有正在运行动画的所有元素
内容过滤选择器
$("div:contains('John')") 匹配含有指定文本的所有元素
$("td:empty") 匹配所有空元素(只含有文本的元素不算空元素)
$("div:has(p)") 从原元素集合中再次匹配所有至少含有一个selector的所有元素
$("td:parent") 匹配所有不为空的元素(含有文本的元素也算)
$("div:hidden") 匹配所有隐藏的元素,也包括表单的隐藏域
$("div:visible") 匹配所有可见的元素
屬性過濾選擇器
$("div[id]") 符合所有具有指定屬性的元素
$("input[name='newsletter']") 符合所有具有指定屬性值的元素
$("input[name!='newsletter']") 符合所有不具有指定屬性值的元素
$("input[name^='news']") 符合所有指定屬性值以value開頭的元素
$("input[name$='letter']") 符合所有指定屬性值以value結尾的元素
$("input[name*='man']") 符合所有指定屬性值含有value字元的元素
$("input[id][name$='man']") 符合同時符合多個選擇器的所有元素
子元素過濾選擇器
$("ul li:nth-child(2)"),
$("ul li:nth-child(odd)"), 符合父元素的第n個子元素
$("ul li:nth-child(3n 1)")
$("div span:first-child") 符合父元素的第1個子元素
$("div span:last-child") 符合父元素的最後1個子元素
$(" div button:only-child") 符合父元素的唯一1個子元素
表單元素選擇器
$(":input") 匹配所有的表單輸入元素,包括所有類型的input, textarea, select 和button
$(":text") 匹配所有類型為text的input元素
$(":password") 匹配所有類型為password的input元素
$(":radio") 匹配所有類型為radio的input元素
$(":checkbox") 匹配所有類型為checkbox的input元素
$(":submit") 匹配所有類型為submit的input元素
$(":image") 匹配所有類型為image的input元素
$(": reset") 符合所有類型為reset的input元素
$(":button") 符合所有類型為button的input元素
$(":file") 符合所有類型為file的input元素
$(":hidden") 符合所有類型為hidden的input元素或表單的隱藏域
表單元素過濾選擇器
$(":enabled") 匹配所有可操作的表單元素
$(":disabled") 匹配所有不可操作的表單元素
$(":checked ") 符合所有已點選的元素
$("select option:selected") 符合所有已選取的元素
JQuery CSS 方法說明
css( name ) 存取第一個符合元素的樣式屬性。
css( properties ) 把一個"名/值對"物件設定為所有符合元素的樣式屬性。
$("p").hover(function () {
$(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: "#ddd",
fontWeight: "",
color: "rgb(0,40,244)"
}
$(this). css(cssObj);
});
css( name, value ) 在所有符合的元素中,設定一個樣式屬性的值。
offset( ) 取得符合的第一個元素相對於目前視覺視窗的位置。傳回的物件有2個屬性,
top和left,屬性值為整數。這個函數只能用於可見元素。
var p = $("p:last");
var offset = p.offset();
p.html( "left: " offset.left ", top: " offset.top ) ;
width( ) 取得目前第一個符合的元素的寬度值,
width( val ) 為每個符合的元素設定指定的寬度值。
height( ) 取得目前第一個符合的元素的高度值,
height( val ) 為每個符合的元素設定指定的高度值。
JQuery Utilities 方法說明
jQuery.browser
.msie 表示ie
jQuery.browser.version 讀取使用者瀏覽器的版本資訊
jQuery.boxModel 偵測使用者瀏覽器針對目前頁面的使用者瀏覽器針對目前頁面的顯示是否基於W3C CSS的盒模型
jQuery.isFunction( obj ) 檢測傳遞的參數是否為function
function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
"function"
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$("span:eq( " i ")").text(isFunc);
});
jQuery.trim( str )清除字串兩端的空格,使用正規表示式來清除給定字元兩端的空格
jQuery.each( object, callback ) 一個通用的迭代器,可以用來無縫迭代物件和陣列
jQuery. extend( target, object1, [objectN] ) 擴展一個對象,修改原來的對象並返回,這是一個強大的實現繼承的工具,這種繼承是採用傳值的方法來實現的,而不是JavaScript中的原型鏈方式。
合併settings和options對象,回傳修改後的settings物件
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
合併defaults和options對象,defaults對象並沒有被修改。 options物件中的值取代了defaults物件的值傳遞給了empty。