中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JQuery常用方法總結

發布時間:2020-06-01 13:35:39 來源:網絡 閱讀:258 作者:binghun307 欄目:web開發
Attribute: $(p).addClass(css中定義的樣式類型); 給某個元素添加樣式 $(img).attr({src:test.jpg,alt:test Image}); 給某個元素添加屬性 / 值,參數是map $(img).attr(src,test.jpg); 給某個元素添加屬性 / 值 $
Attribute:
$(”p”).addClass(css中定義的樣式類型); 給某個元素添加樣式
$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 給某個元素添加屬性/值,參數是map
$(”img”).attr(”src”,”test.jpg”); 給某個元素添加屬性/值
$(”img”).attr(”title”, function() { return this.src }); 給某個元素添加屬性/值
$(”元素名稱”).html(); 獲得該元素內的內容(元素,文本等)
$(”元素名稱”).html(”<b>new stuff</b>”); 給某元素設置內容
$(”元素名稱”).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)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
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]) 在當前頁面的第一個表單中查找所有的單選按鈕
$.extend(prop) prop是一個jquery對象,
舉例:
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
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的順序來執行。
bind( type, [data], fn ) 為每一個匹配元素的特定事件(像click)綁定一個或多個事件處理器函數。可能的事件屬性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
keyup, error
one( type, [data], fn ) 為每一個匹配元素的特定事件(像click)綁定一個或多個事件處理器函數。在每個對
象上,這個事件處理函數只會被執行一次。其他規則與bind()函數相同。
trigger( type, [data] ) 在每一個匹配的元素上觸發某類事件。
triggerHandler( type, [data] ) 這一特定方法會觸發一個元素上特定的事件(指定一個事件類型),同時取消瀏覽器對此事件的默認行動
unbind( [type], [data] ) 反綁定,從每一個匹配的元素中刪除綁定的事件。
$(”p”).unbind() 移除所有段落上的所有綁定的事件
$(”p”).unbind( “click” ) 移除所有段落上的click事件
hover( over, out ) over,out都是方法, 當鼠標移動到一個匹配的元素上面時,會觸發指定的第一個函數。當鼠標移出這個元素時,會觸發指定的第二個函數。
$(”p”).hover(function(){
$(this).addClass(”over”);
},
function(){
$(this).addClass(”out”);
}
);
toggle( fn, fn ) 如果點擊了一個匹配的元素,則觸發指定的第一個函數,當再次點擊同一元素時,則觸發指定的第二個函數。
$(”p”).toggle(function(){
$(this).addClass(”selected”);
},
function(){
$(this).removeClass(”selected”);
}
);
元素事件列表說明
注:不帶參數的函數,其參數為可選的 fn。jQuery不支持form元素的reset事件。
事件 描述 支持元素或對象
blur( ) 元素失去焦點 a, input, textarea, button, select, label, map, area
change( ) 用戶改變域的內容 input, textarea, select
click( ) 鼠標點擊某個對象 幾乎所有元素
dblclick( ) 鼠標雙擊某個對象 幾乎所有元素
error( ) 當加載文檔或圖像時發生某個錯誤 window, img
focus( ) 元素獲得焦點 a, input, textarea, button, select, label, map, area
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(”<li>Request Complete.</li>”);
});
ajaxError( callback ) 當一個AJAX請求失敗后,執行一個函數。這是一個Ajax事件
$(”#msg”).ajaxError(function(request, settings){
$(this).append(”<li>Error requesting page ” + settings.url + “</li>”);
});
ajaxSend( callback ) 在一個AJAX請求發送時,執行一個函數。這是一個Ajax事件 $(#msg).ajaxSend( function (evt, request, settings){ $( this ).append( li Starting request at + settings
ajaxSend( callback ) 在一個AJAX請求發送時,執行一個函數。這是一個Ajax事件
$(”#msg”).ajaxSend(function(evt, request, settings){
$(this).append(”<li<Starting request at ” + settings.url
+ “</li<”);
});
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(”<li>Successful Request!</li>”);
});
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,用于實現多個條件篩選
filter( 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類屬性
向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

那坡县| 横山县| 井冈山市| 晋中市| 新河县| 玛纳斯县| 贡山| 漳浦县| 石柱| 南昌县| 深泽县| 原阳县| 商都县| 瑞昌市| 绥宁县| 谢通门县| 昔阳县| 南昌市| 新乡县| 丰顺县| 德保县| 三亚市| 洛南县| 射洪县| 临桂县| 休宁县| 抚宁县| 元阳县| 甘孜县| 池州市| 镇沅| 确山县| 大安市| 建宁县| 嘉峪关市| 宝兴县| 满城县| 庆云县| 石河子市| 高安市| 江津市|