最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
當前位置: 首頁 - 科技 - 知識百科 - 正文

jquery中常用的函數和屬性詳細解析_jquery

來源:懂視網 責編:小采 時間:2020-11-27 21:20:42
文檔

jquery中常用的函數和屬性詳細解析_jquery

jquery中常用的函數和屬性詳細解析_jquery:Dom:Attribute:屬性$(p).addClass(css中定義的樣式類型); 給某個元素添加樣式$(img).attr({src:test.jpg,title:test Image}); 給某個元素添加屬性/值,參數是map$(input).attr({checked, checked}
推薦度:
導讀jquery中常用的函數和屬性詳細解析_jquery:Dom:Attribute:屬性$(p).addClass(css中定義的樣式類型); 給某個元素添加樣式$(img).attr({src:test.jpg,title:test Image}); 給某個元素添加屬性/值,參數是map$(input).attr({checked, checked}

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',形成新的匹配元素集合;

例子:
代碼如下:
$(document).ready(function(){
$("div").css("border", "2px solid red")
.add("p")//文檔中的P元素會應用背景色為yellow的CSS樣式;
.css("background", "yellow");
});

children(expr)從當前匹配元素集合中得到各個元素第一層子集集合,形成新的元素集合
contains(str) 匹配集合中包含str這個變量文本的元素集合,返回匹配元素集合
end()用于返回到調用 find() 或 parents() 函數(或者其它遍歷函數)之前的 jQuery 對象

例子
$("#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()方法:
var $find = $("div").find(".rain");
alert( $find.html() ) ;
將會輸出:測試1
如果使用filter()方法:
var $filter = $("div").filter(".rain");
alert( $filter.html() );
將會輸出:測試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 < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
引用jQuery:
代碼如下:
$.min(3,4); //return 3
jQuery.fn.extend(object)給jQuery對象添加方法,是對jQuery.prototype進得擴展

jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {//.... 
   //......
};

舉例
代碼如下:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});

引用jQuery:
$("#input1").alertWhileClick();

jQuery( expression, [context] ) ---$( expression, [context]); 在默認情況下,$()查詢的是當前HTML文檔中的DOM元素。

each( callback ) 以每一個匹配的元素作為上下文來執行一個函數

舉例:1
代碼如下:
$("span").click(function){
$("li").each(function(){
$(this).toggleClass("example");
});
});

舉例:2
代碼如下:
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});

jQuery Event:事件

ready(fn); $(document).ready()注意在body中沒有onload事件,否則該函數不能執行。在每個頁面中可以有很多個函數被加載執行,按照fn的順序來執行。

例子:
$(document).ready(function(){alert("aa");}

bind( type, [data], fn ) 為每一個匹配元素的特定事件(像click)綁定一個或多個事件處理器函數??赡艿氖录ype屬性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,keyup, error

例子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() 移除所有段落上的所有綁定的事件
$("p").unbind( "click" ) 移除所有段落上的click事件

例子:
代碼如下:
var foo = function () {
// 處理某個事件的代碼
};
$("p").bind("click", foo); // ... 當點擊段落的時候會觸發函數foo
$("p").unbind("click", foo); // ... 再也不會被觸發 foo

hover( over, out ) over,out都是方法, 當鼠標移動到一個匹配的元素上面時,會觸發指定的第一個函數。當鼠標移出這個元素時,會觸發指定的第二個函數。
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
}
);

元素事件列表說明
注:不帶參數的函數,其參數為可選的 fn。jQuery不支持form元素的reset事件。
事件描述,支持元素或對象
focus( ) 元素獲得焦點 a, input, textarea, button, select, label, map, area
blur( ) 元素失去焦點 a, input, textarea, button, select, label, map, area
$("#in").focus(function(){
if($("#in").val()=='關鍵字'){
$("#in").val("")};
}).blur(function(){
if($("#in").val()==''){
$("#in").val("關鍵字").css("color","#ccc")};
});
change( ) 用戶改變域的內容 input, textarea, select
change事件會在元素失去焦點的時候觸發,也會當其值在獲得焦點后改變時觸發。
$("input[type='text']").change( function() {
// 這里可以寫些驗證代碼
});
click( ) 鼠標點擊某個對象 幾乎所有元素
dblclick( ) 鼠標雙擊某個對象 幾乎所有元素
error( ) 當加載文檔或圖像時發生某個錯誤 window, img
keydown( ) 某個鍵盤的鍵被按下 幾乎所有元素
keypress( ) 某個鍵盤的鍵被按下或按住 幾乎所有元素
keyup( ) 某個鍵盤的鍵被松開 幾乎所有元素
load( fn ) 某個頁面或圖像被完成加載 window, img
mousedown( fn ) 某個鼠標按鍵被按下 幾乎所有元素
mousemove( fn ) 鼠標被移動 幾乎所有元素
mouseout( fn ) 鼠標從某元素移開 幾乎所有元素
mouseover( fn ) 鼠標被移到某元素之上 幾乎所有元素
mouseup( fn ) 某個鼠標按鍵被松開 幾乎所有元素
resize( fn ) 窗口或框架被調整尺寸 window, iframe, frame
scroll( fn ) 滾動文檔的可視部分時 window
select( ) 文本被選定 document, input, textarea
submit( ) 提交按鈕被點擊 form
unload( fn ) 用戶退出頁面 window

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("

  • Request Complete.
  • ");
    });
    ajaxError( callback ) 當一個AJAX請求失敗后,執行一個函數。這是一個Ajax事件
    $("#msg").ajaxError(function(request, settings){
    $(this).append("
  • Error requesting page " + settings.url + "
  • ");
    });
    ajaxSend( callback ) 在一個AJAX請求發送時,執行一個函數。這是一個Ajax事件
    $("#msg").ajaxSend(function(evt, 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("

  • Successful Request!
  • ");
    });

    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] ) 通過高度變化(向上減?。﹣韯討B地隱藏所有匹配的元素,在隱藏完成后可選地觸發一個回調函數。這個動畫效果只調整元素的高度,可以使匹配的元素以"滑動"的方式隱藏起來。
    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] ) 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合??蛇x的過濾器將使這個方法只匹配符合的元素(只包括元素節點,不包括文本節點)。
    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。
    代碼如下:
    var empty = {}
    var defaults = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    var settings = $.extend(empty, defaults, options);
    jQuery.grep( array, callback, [invert] ) 通過一個篩選函數來去除數組中的項
    $.grep( [0,1,2], function(n,i){
    return n > 0;
    });

    jQuery.makeArray( obj ) 將一個類似數組的對象轉化為一個真正的數組
    將選取的div元素集合轉化為一個數組
    var arr = jQuery.makeArray(document.getElementsByTagName("div"));
    arr.reverse(); // use an Array method on list of dom elements
    $(arr).appendTo(document.body);
    jQuery.map( array, callback ) 使用某個方法修改一個數組中的項,然后返回一個新的數組
    jQuery.inArray( value, array ) 返回value在數組中的位置,如果沒有找到,則返回-1
    jQuery.unique( array ) 刪除數組中的所有重復元素,返回整理后的數組

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    jquery中常用的函數和屬性詳細解析_jquery

    jquery中常用的函數和屬性詳細解析_jquery:Dom:Attribute:屬性$(p).addClass(css中定義的樣式類型); 給某個元素添加樣式$(img).attr({src:test.jpg,title:test Image}); 給某個元素添加屬性/值,參數是map$(input).attr({checked, checked}
    推薦度:
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    国产精品久久久久精品…-国产精品可乐视频最新-亚洲欧美重口味在线-欧美va免费在线观看