JQuery學習筆記（2）

時間 2019-11-08

標籤 jquery 學習筆記欄目 JQuery 简体版

原文原文鏈接

//---------------------------- 第四章 JQuery中的事件和動畫 -------------------------------
css

·加載DOM
html

$(window).load() 等價於 window.onload 事件
ajax

$(document).ready() 至關於window.onload事件，但有些區別：
json

(1)執行時機：
數組

window.onload 是在網頁中全部元素（包括元素的全部關聯文件）徹底加載後才執行
瀏覽器

$(document).ready() 是在DOM徹底就緒時就能夠被調用，此時，並不意味着這些元素關係的文件都已經下載完畢
服務器

(2)屢次使用：能夠在同一個頁面註冊多個$(document).ready()事件
app

(3)簡寫方式：能夠縮寫成 $(function(){ }) 或 $().ready()
ide

·事件綁定
函數

當文檔裝載完成後，能夠經過bind()方法，爲特定的元素進行事件的綁定，可重複屢次使用

bind( type, [data, ] fn );

type：指事件的類型:

blur（失去焦點）、focus（得到焦點）

load（加載完成）、unload（銷燬完成）

resize（調整元素大小）、scroll（滾動元素）

click（單擊元素事件）、dbclick（雙擊元素事件）

mousedown（按下鼠標）、mouseup（鬆開鼠標）

mousemove（鼠標移過）、mouseover（鼠標移入）、mouseout（鼠標移出）

mouseenter（鼠標進入）、mouseleave（鼠標離開）

change（值改變）、select（下拉框索引改變）、submit（提交按鈕）

keydown（鍵盤按下）、keyup（鍵盤松開）、keypress（鍵盤單擊）

error（異常）

data：指事件傳遞的屬性值，event.data 額外傳遞給對象事件的值

fn：指綁定的處理函數，在此函數體內，$(this)指攜帶相應行爲的DOM元素

·合併事件

hover(enter,leave)：鼠標移入執行enter、移出事件執行leave

$("#myDiv").hover( function(){

$(this).css("border", "1px solid black");0

}, function(){

$(this).css("border", "none");

});

toggle(fn1,fn2,...fnN)：鼠標每點擊一次，執行一個函數，直到最後一個後重復

$("#myDiv").toggle( function(){

$(this).css("border", "1px solid black");0

}, function(){

$(this).css("border", "none");

});

·事件冒泡

下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分別將三種元素都註冊click事件。

那麼，click事件會按照DOM的層次結構，像水泡同樣不斷向上直到頂端，因此稱之爲事件冒泡。

<body><div><span>我是SPAN我怕誰</span></div></body>

$("span").bind("click", function(){ alert('span click'); });

$("div").bind("click", function(){ alert('div click'); });

$("body").bind("click", function(){ alert('body click'); });

·阻止冒泡

解決這個問題的辦法是：在SPAN執行完click事件後，中止事件冒泡。

$("span").bind("click", function(event){

alert('span click');

event.stopPropagation(); //中止冒泡

});

·阻止默認行爲

提交按鈕在提交前作相應的邏輯判斷，當不知足時

$("#btnSubmit").bind("click", function(event){

event.preventDefault(); //阻止默認行爲至關於return false;

});

·事件對象的屬性

$("#myDiv").bind("click", function(event){ });

event.type() //返回：click

event.target() //獲取當前元素

event.relatedTarget() //引起事件的元素

event.pageX()/event.pageY() //獲取鼠標相對於頁面的X和Y座標

event.which() //在單擊事件中獲取到對應的按鍵鼠標左中右分別是123

event.metaKey() //獲取操做中的相關功能鍵（ctrl/alt/shift）

·移除事件

$("#myDiv").bind("click", fn1 = function(){

alert("function1");

}).bind("click", fn2 = function(){

alert("function2");

}).bind("click", fn3 = function(){

alert("function3");

});

$("#myDiv").unbind(); //移除id爲myDiv的元素的全部事件

$("#myDiv").unbind("click"); //移除id爲myDiv的元素的全部click事件

$("#myDiv").unbind("click",fn1); //移除id爲myDiv的元素的名稱爲fn1的click事件

·一次性事件：綁定的事件執行一次後自動移除

$("#myDiv").one("click", [data], function(){

alert("function1");

});

·觸發事件

$("#btn").trigger("click", [data]); //代碼方式觸發click事件

$("#btn").click(); //另外一種簡寫方式

·事件命名空間

$("#myDiv").bind("click.hello", function(){

alert("function1");

});

$("#myDiv").bind("click", function(){

alert("function1");

})

$("div").unbind("click"); //兩個事件都被移除

$("div").unbind(".hello"); //只移除第一個

$("div").unbind("click!"); //只移除第二個（注意感嘆號，指沒有名字空間的）

·JQuery中的動畫

$("div").hide(); //隱藏全部DIV元素，至關於sytle="display:none"

$("div").show(); //顯示全部DIV元素

$("div").hide(1000); //一秒內隱藏全部DIV元素，其它參數還有：slow(600) normal(400) fast(200)

$("div").show(1000); //一秒內顯示全部DIV元素

$("div").fadeOut(); //下降元素的不透明度，直至消失（支持速度參數，不會改變寬高）

$("div").fadeIn(); //升高元素的不透明度，直至顯示

$("div").slideUp(); //由下至上收縮元素，直至消失（支持速度參數）

$("div").slideDown(); //由上至下展開元素，直至顯示

·自定義動畫animate

$(elem).animate(params, speed, callback);

params：樣式屬性及值的映射 {protected:"value", protected:"value"}

speed: 速度參數

callback: 動畫完成後執行函數，可選

$("#myDiv").animate({left:"500px"}, 2000); //兩秒內ID爲myDiv的元素移至左邊距500px的位置

$("#myDiv").animate({left:"+=500px"}, 2000); //同上，支持累加、累減

$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上，多重動畫，同時執行

$("#myDiv").animate({opacity:"0.5"}, 1000) //先變成50%透明

.animate({top:"500px"}, 500) //移至離頂端500px

.animate({left:"500px"}, 500) //移至離左邊500px

.fadeOut(1000); //顯示出來（四個動做爲隊列，一步步執行）

$("#myDiv").stop([cleanQuene] [,gotuEnd]); //中止動畫，參數爲boolean

$("#myDiv").is(":animate") //判斷元素是否在執行動畫

·其它動畫

$("#myDiv").toggle(); //顯示與隱藏元素

$("#myDiv").slideToggle(); //展開與收縮元素

$("#myDiv").fadeTo(1000, 0.2); //一秒內將元素透明度調整到20%

//-------------------- 第五章 JQuery對錶單、表格的操做及更多應用 ------------------------

·單選文本框應用（得到焦點時，加了個特殊的樣式，失去焦點時還原，兼容全部瀏覽器）

$(":input").focus(function(){ this.addClass("inputFocus"); })

.blur(function(){ this.removeClass("inputFocus"); });

·多行文本框的應用（放大、縮小多行文本框的高度，限制最大500px，兼容全部瀏覽器）

var $txt = $("#textArea");

$(".bigger").click(function(){

if( $txt.height() < 500) $txt.height( $txt.height() + 50 );

//if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );

});

$(".smaller").click(function(){
if( $txt.height() > 100) $txt.height( $txt.height() - 50 );
//if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );
});
·複選框的應用（實現全選、全不選、反選）
$("#btnCheckedAll").click(function(){ //全選
$("[name=items]:checkbox").attr("checked", true);
});
$("#btnCheckedNone").click(function(){ //全不選
$("[name=items]:checkbox").attr("checked", false);
});
$("#btnCheckedRev").click(function(){ //反選
$("[name=items]:checkbox").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
//this.checked = !this.checked;
}
});
·下拉框的應用（將一個下拉列表的選中項搬至另外一個下拉列表）
$("#btnAdd").click(function(){ //將選中選項搬過去
$("#mySelect1 option:selected").appendTo("#mySelect2");
});
$("#btnAddAll").click(function(){ //將所有選項搬過去
$("#mySelect1 option").appendTo("#mySelect2");
});
$("#mySelect1").dblclick(function()[ //雙擊項搬過去
$("#mySelect1 option:selected").appendTo("#mySelect2");
}
·表單驗證
<form>
<div>
<label>用戶名：</label>
<input type="text" id="txtUid" class="required" value="" />
</div>
</form>
$("form :input.required").each(function(){ //往每一個class有required樣式的input元素後面添加*號
$(this).parent().append( $("<span class='star'>*</span>") );
});
$("form :input.required").blur(function(){ //失去焦點時驗證域
if( this.value == "" ){
$(this).parent().append( $("<span class='error'>必填字段</span>") );
}
else{
$(this).parent().append( $("<span class='success'>驗證正確</span>") );
$(this).parent().find(".error").remove();
}
}).keyup(function(){ //用戶每點一個鍵觸發
$(this).triggerHandler("blur");
}).focus(function(){ //控制有焦點時觸發
$(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
$("form :input.required").trigger("blur"); //讓全部須要驗證的域失去焦點
var errNum = $("form .error").length;
if( errNum ){
alert("有驗證字段失敗，請從新填寫");
return false;
}
});
·表格應用
$("tr:odd").addClass("oddTr"); //給奇數行添加oddTr樣式
$("tr:even").addClass("evenTr"); //給偶數行添加evenTr樣式
$("tr:contains('王五')").addClass("highlightTr"); //查找包含「王五」的行，添加highlightTr樣式
$("tr").click(function(){
$(this).addClass("selectedTr") //給當前行添加選中樣式
.siblings().removeClass("selectedTr") //反選移除選中樣式
.end() //結束，返回$(this)，不然則是反選的行
.find(':radio").attr("checked",true); //在當前行查找單選框，選中它
});
//-------------------- 第六章 JQuery與Ajax的應用 ------------------------
·load( url [,data] [,callback] )方法
url：要請求的頁面的地址
data：要發送的相關參數
callback：回調函數
$("#myDiv").load("hello.html"); //向myDiv元素加載hello.html的內容
$("#myDiv").load("hello.html .myClass"); //篩選，只加載hello.html中myClass樣式的內容
$("#myDiv").load("hello.html", function(){} ); //沒參數的，使用GET方式
$("#myDiv").load("hello.html", {id:'123', name:'dier'}, function(){} ); //有參數的，使用POST方式
$("#myDiv").load("hello.html", function(responseText, textStatus, XMLHttpRequest){ //回調函數
//responseText : 請求返回的內容
//textStatus : 請求狀態 success error notmodified timeout
//XMLHttpRequest : Ajax對象
});
·$.get( url [,data] [,callback] [,type])和$.post( url [,data] [,callback] [,type])方法
url：要請求的頁面的地址
data：要發送的相關參數
callback：回調函數
type：指定服務器返回內容的格式 xml html script json text _default
$.get( "test.aspx", {id:"123", name:"dier"}, function(data,textStatus){ //回調函數只有當狀態是success才觸發
//data : 請求返回的內容
//textStatus : 請求狀態 success error notmodified timeout
//當data是HTML時，直接加載
$("#myDiv").html(data);
//當data是XML時，可篩選 <user id="123" name="dier" age="27" />
var age = $(data).find("user").attr("age");
//當data是JSON時，可直接點出屬性來 {id:"123", name:"dier", age:"27"}
var age = data.age;
});
·getScript(url [,callback])方法
$(function(){ //動態加載JS腳本
$.getScript("test.js");
$.getScript("test.js", function(){ //回調函數
//do something..
});
});
·getJSON(url [,callback])方法
$(function(){ //動態加載JS腳本
$.getJSON("test.js");
$.getJSON("test.js", function(data){ //回調函數
//do something..
//data : 返回的數據
$.each( data, function(index, item){ //遍歷，至關於foreach
//index : 索引
//item : 當前項內容
//return false; 退出循環
});
});
});
·ajax(options)方法
url : 請求的地址
type : 請求的方式 GET POST 默認爲GET
timeout : 請求超時時間(單位：毫秒）
data : 請求時發送的參數（String,Object）
dataType : 預期返回的數據類型 xml html script json jsonp text
bdforeSend : 發送請求前觸發事件，若是return false則取消發送 function(XmlHttpRequest){}
complete : 請求完成後觸發事件，無論成功與否 function(XmlHttpRequest, textStatus){}
success : 請求完成而且成功時觸發事件 function(data, textStatus){}
error : 請求完成而且失敗時觸發事件 function(XmlHttpRequest, textStatus, errorThrown){}
global : 是否爲全局請求，默認爲true，可以使用AjaxStart、AjaxStop控制各類事件
$.ajax({
url : "test.aspx",
type : "POST",
timeout : "3000",
data : {id:"123", name:"dier"},
dataType : "HTML",
success : function(data,textStatus){
$("#myDiv").html( data );
}
error : function(XmlHttpRequest, textStatus, errThrown){
$("#myDiv").html( "請求失敗：" + errThrown );
}
});
·序列化字符串 serialize()
$.get( "test.aspx", $("#form1").serialize(), function(data,textStatus){
//將form1整個表單中的全部域序列化成提交的參數，支持自動編碼
});
·序列化數組 serializeArray()
var arr = $(":checkbox, :radio").serializeArray();
·對象序列化 param()
var obj = {id:"123", name:"dier", age:"27"};
var kv = $.param(obj); //id=123&name=dier&age=27
·JQuery中的全局Ajax事件
ajaxStart(callback) //請求開始時觸發
ajaxStop(callback) //請求結束時觸發
ajaxComplete(callback) //請求完成時觸發
ajaxSuccess(callback) //請求成功時觸發
ajaxError(callback) //請求失敗時觸發
ajaxSend(callback) //請求發送前觸發
$("#loading").ajaxStart(function(){ //當有AJAX請求時顯示，完成時隱藏
$(this).show();
}.ajaxStop(function(){
$(this).hide();
}
);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。