jQuery (二)

時間 2019-12-05

標籤 jquery 欄目 JQuery 简体版

原文原文鏈接

使用jQuery處理事件

事件處理

一個栗子，單擊p時背景變成灰色css

因爲es6的箭頭函數不支持this的綁定，因此沒法使用箭頭函數，只能使用匿名函數html

htmlnode

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
	<p>hello world</p>
</body>
</html>
<script src="./style.js"></script>
複製代碼

jsjquery

// 單擊任意p時，使其背景變成灰色
$('p').click(function () { $(this).css('background-color', 'gray'); });
複製代碼

效果 css3

或者使用第二個參數，添加相關的屬性，完成事件的相關觸發git

// 單擊任意p時，使其背景變成灰色
$('<img>', {
	src: image_url,
	alt: image_description,
	className: "translucent_image",
	click: function() {
		$(this).css('opacity', "50%");
	}
})
複製代碼

效果同理。es6

事件處理程序的高級註冊

使用bind()爲添加事件github

$('p').bind('click', f);
複製代碼

將p元素的click事件和函數f進行綁定，須要使用閉包ajax

還可使用三個值，第一值爲事件，第二個值爲Event對象的data屬性，在調用最後一個處理函數的時候，會將第二個值做爲對象的data屬性,這樣便可避免使用閉包操做npm

ps jquery 中全部的處理程序都有一個函數例如 hover()

mouseenter 綁定鼠標在進入的時候 mouseleave 綁定鼠標在離開的時候

$('p').bind('mouseenter mouseleave', f);
複製代碼

還可使用英文句號，做爲命名空間，這樣方便對多個回調函數的管理下方的是將函數f註冊在命名空間myMond

$('p').bind('mouseover.myMod', f);
複製代碼

下方的是將函數f註冊到命名空間yourMod和mouseout中

$('p').bind('mouseover.myMod.yourMod', f);
複製代碼

或者使用對象

$('p').bind({ mouseenter:f, mouseleave:g });
複製代碼

註銷事件處理程序

$('*').unbind();	// 從全部元素中移除全部的jquery事件處理程序
複製代碼

$('a').unbind('mouseover mouseout');    // 移除兩個屬性
複製代碼

// 取消綁定在myMod命名空間下的全部mouseover 和mouseout處理程序
$('a').unbind('mouse.myMod mouseout.myMod');
// 取消綁定在myMod命名空間下的全部事件處理程序
$('a').unbind('.myMod');
// 取消同時綁定在ns1和ns2命名空間下的單擊處理程序
$('a').unbind('click.ns1.ns2')
複製代碼

使用命名空間達到模塊化的目的

// 使用函數名，達到註銷事件處理程序
$('#mybutton').unbind('click', myClickHandler);
// 或者
$('a').unbind(
		{
			mouseover: mouseoverHandler,
			mouseout: mouseoutHandler
		}
	)
複製代碼

觸發事件

jquery的事件處理爲同步的，沒有異步。

$('#my_form').submit();	// 模擬用戶點擊按鈕進行提交
複製代碼

或者使用trigger

$('button').trigger('click.ns1');	// 觸發命名空間.ns1下的綁定函數
$('button').trigger('click!');	// 觸發沒有命名空間的單擊處理程序
複製代碼

或者以下

// 單擊一將會觸發二上的事件
$('#button1').click((e) => {$('#button2').trigger('button2')});
// 觸發事件時，將會添加額外的屬性給事件對象，若是事件之前被監聽，將會被直接觸發
$('#button1').trigger({ type:'click', synthetic:true });
複製代碼

$('#button1').trigger('click', true);   // 傳入的第二個參數將會成爲觸發事件的參數，進行傳入
$('#button1').trigger('clcik', [x, y, z]);  // 傳入三個額外的參數
複製代碼

$('*'); // 選擇全部元素進行觸發
// 或者使用工具函數
jQuery.event.trigger(); // 使用工具函數完成所有的選擇 https://api.jquery.com/category/events/event-object/
複製代碼

自定義事件

一個栗子，實現發佈訂閱模型，先全體元素廣播一個事件,在單擊一個按鈕的時候

$('#logoff').click(() => {
    $.event.trigger('logoff');  // 實現一個先全體元素廣播一個事件
})
複製代碼

若是元素要接收事件，須要綁定一個監聽器便可，至此完成發佈訂閱模式。

實時事件

實時事件爲，若是先前將全部a元素綁定了一個事件，接着在建立一個新的a的節點，若是此時觸發事件，則新建立的a元素不會被觸發事件，由於綁定的不是實時的事件。因爲更新，live，bind，delegate，die，undelegate 所有廢棄

注意，這一部分所有廢棄

動畫效果

動畫效果實質上是經過定時的修改css屬性，達到動畫的效果一個栗子 api.jquery.com/fadeIn/ 使用淡入效果

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="/public/js/jquery.js"></script>
	<link rel="stylesheet" href="/public/css/style.css">
</head>
<body>
	<p>
  Let it be known that the party of the first part
  and the party of the second part are henceforth
  and hereto directed to assess the allegations
  for factual correctness... (<a href="#">click!</a>)
  <div><span>CENSORED!</span></div>
</p>
複製代碼

$('a').click(function (){
	$('div').fadeIn(3000, () => {
		$('span').fadeIn(100);
	});
	return false    // 說明動畫是否放進隊列，若是未false 代表動畫將不會放入隊列，默認爲false，還能夠設置名字，進行隊列分類。
})
複製代碼

p {
	position: relative;
	width:400px;
	height:90px;
}
div {
	position: absolute;
	width:400px;
	height:65px;
	font-size:36px;
	text-align:center;
	color:yellow;
	background:red;
	padding-top:25px;
	top:0;
	left:0;
	display:none;
}
span {
	display:none;
}
複製代碼

當運行的時候會，自動將display設置爲可見。注意，jquery動畫效果爲異步的，調用fadeIn()方法的時候，會當即返回，動畫則在後臺執行，以下

$('a').click(() => {
	$('div').fadeIn(3000, () => {
		$('span').fadeIn(100);
	});
	return false;
})
複製代碼

當發生click事件的時候，會先回調click內的事件，發生動畫，在等待3000秒的時候，繼續回調下一個函數，因爲是異步的，先返回false，再執行動畫，false的意思爲通知click事件不能進入隊列中，進行等待。

動畫異步好坑，動畫其實是經過定時器來完成的，因爲定時器是一段段的執行，因此動畫爲異步操做，先執行返回，動畫等待某個時刻進行執行。返回的結果，並不必定執行完畢。返回的結果，並非執行完畢。

若是想要執行多段動畫，無需使用回調，由於動畫爲隊列機制，直接採用鏈式便可。

禁用動畫

若是不須要動畫，直接使用

jQuery.fx.off
複製代碼

直接設置其值爲false便可實現動畫的禁用。

簡單動畫

fadeIn(),fadeOut(), fadeTo().

其中fadeIn須要以前該對象的display爲noen或者visibility，經過動畫顯示出，上方有栗子，不在演示。 fadeOut()，一樣相反，也有異步，也有隊列。

ps 這兩個效果相似於visibility 雖然消失，可是依舊對流具備影響

show(), hide(), toggle()

hide相似於使用display，將其值設置爲none相似。

$( "button" ).click(function() {
  $( "p" ).hide( "slow" );
});
複製代碼

上方，設置button，觸發事件，回調p，設置動畫，解釋一下最後的參數，若是沒有參數，將會直接設置display的值爲none，若是有任意一個參數，將會設置高度和不透明度，將其變爲0，而且display也將會變爲none，確保不會影響頁面的佈局。

能夠設置緩動函數爲字符串

toggle，一樣若是有字符串，也將會實現如此。

$( "button" ).click(function() {
  $( "p" ).toggle( "" );
});
複製代碼

上方代碼，實現了切換p標籤，兩種狀態的切換。

slideDown(), slideUp(), slideToggle()

slideUp() 是將高度動態變化到0，而後社會display屬性爲none，爲向下 slideDown()正好相反。爲向上 slideToggle() 使用向上滑動和向下滑動，切換元素的可見性。

調用

$( "button" ).click(function() {
  $( "p" ).fadeOut().show(30000).slideToggle();
});
複製代碼

將會先隱藏，在顯示出，接着進行切換。

ps 因爲動畫爲隊列，能夠這樣使用

自定義動畫

使用animate()

ps css3中，有相似的動畫，是經過定義關鍵幀達到的。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <style>
  p {
    background: #dad;
    font-weight: bold;
    font-size: 16px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Toggle 'em</button> <p>Hiya</p> <p>Such interesting text, eh?</p> <script> $( "button" ).click(function() { $( "p" ).animate({ width: "90%" }, { queue: false, // 將動畫不放入效果隊列中 duration: 3000 // 持續時間爲3000毫秒 }) .animate({ fontSize: "24px" }, 1500 ) // 繼續發生如下動畫 .animate({ borderRightWidth: "15px" }, 1500 ); }); </script> 複製代碼

效果，

動畫屬性對象

animate()方法的第一個參數必須爲對象，該對象必須爲css的屬性名（使用駝峯命名法）動畫只支持數值屬性，不支持顏色，字體，或者display的枚舉屬性。

$('p').animate({
	marginLeft: "+=.5in",	// 增長段落縮進
	opacity: '-=.1'	// 同時減小不透明度
})
複製代碼

hide會保存當前屬性的值，而後將值變化到0，show值，進行還原，

動畫在使用hide的時候，會在完成的時候調用，若是動畫使用show，將會在完成時，調用show

動畫選項對象

緩動函數，jquery中有默認的緩動函數，爲正弦函數，即swing，還有一個線性的緩動函數爲linear 全部的緩動函數都在jQuery.easing中，

上方的緩動函數，還能夠自定義，即添加一個數組便可，如

jQuery.easing['squareroot'] = Math.sqrt; 
複製代碼

若是想要使用線性變化即

$('p').animate({
	'width': '+=100'
}, {
	duration: 500,
	easing: "linear"
})
複製代碼

或者使用傳入參數的方式

$('img').animate({
	"width": "+=100"
}, 500, "linear");
複製代碼

或者爲不一樣的css動畫屬性定義不一樣的緩動函數

// 用hide()方法，隱藏圖片，圖片大小用線性的動畫
// 不透明度採用swing緩動函數
$('img').animate({
	width: "hide",
	height: "hide",
	opacity: "hide"
}, {
	spacialEasing: {
		width: "linear",
		height: "linear"
	}
})
// 或者
$('img').animate({
	width: ['hide', 'linear'],
	height: ['hide', 'linear'],
	opacity: 'hide'
})
複製代碼

動畫取消，延遲和隊列

stop() 將會中止當前選中元素上的任何動畫，top接受兩個可選的參數，若是第一個爲true將會清楚當前隊列，不然隊列將不會被清除，第二個爲是否保留當前值，若是未true將會變化到終值，若是爲false將會保持當前值，而後開始執行動畫

// 當屬性懸浮在圖片上時，圖片將會不透明
$('img').bind({
	mouseover: function () {
		$(this).stop().fadeTo(300, 1.0);
	},
	mouseout: function () {
		$(this).stop().fadeTo(300, 1.0);
	},
})
複製代碼

注 bind已不推薦使用

還有一個爲delay() 這會直接添加一個時間延遲到動畫隊列中。

//快速淡出爲半透明，等一等，而後向上滑動
$('img').fadeTo(100, 0.5).delay(200).slideUp();
複製代碼

每個隊列都和文檔元素相關聯，每個元素的隊列都與其餘元素的隊列彼此獨立，即，使用queque()方法，給隊列添加一個新函數

// 淡入的顯示一個元素，稍等片刻，設置一些文字，而後變化邊框,爲對隊列的操做，添加到隊列的最後
$('#message').fadeIn().delay(200).queue(function(next) {
	$(this).text('hello world');	//顯示一些文字
	next();	// 方便下一個繼續調用
}).animate({
	borderWidth: "+=100px;"
});
複製代碼

clearQueue()方法將會清楚隊列，給queue()方法，傳入一個函數組成的數組，而不是單一函數時，將會傳入函數數組來替換當前隊列。

$(e).queue(f);  // 建立一個持有e的jquery對象，並調用queue方法
jQuery.queue(e, f); // 直接調用jQuery.queue工具函數,進行替換隊列
複製代碼

jQuery中默認的隊列名爲fx，這是沒有指定隊列名時默認使用的隊列。

Ajax

Ajax實現了不須要刷新，便可動態的加載一部分頁面，

load

是滴，load若是傳入的參數爲字符串，而是函數，load爲事件的處理程序的註冊，而不是ajax方法。若是傳入的是url，則將會進行替換

load爲異步操做，不會發生阻塞，發送完成之後，將會直接執行下一步操做

!()[melovemingming-1253878077.cos.ap-chengdu.myqcloud.com/blog-image/…]

$('p').load('./1.html')
複製代碼

固然也能夠加載一部分

// 加載並顯示天氣報告的溫度部分
$('temp').load('wheather_report.html #temperature')
複製代碼

ps 同源

load還會接受可選參數，第一個可選參數表示的數據，能夠追加到url後面，若是傳入爲對象，將會直接用&分隔的名值對請求發送。而且將會以post請求發送。

// 加載特定區號的天氣預報
$('#tmp').load('us_weather_report.html', 'zipcode=02134');
// 使用對象作數據,加載區號，而且請求華氏溫度，將會發送post請求
$('#tmp').load('us_weather_report.html', { zipcode=02114, units: 'f' });
複製代碼

load最後爲回調函數，當Ajax請求成功，或未成功，將會調用該函數

Ajax工具函數

jQuery.getScript()

將會異步的加載一段腳本

一樣受到同源的限制

第一個參數爲url，第二個參數爲運行完成之後將要執行的回調函數

jQuery.getScript('js/js_jquery.js', () => {
    $('div').js_jquery();   // 直接使用加載的類庫
})
複製代碼

底層是使用XMLHttmpRequest對象來獲取將要執行的腳本內容，而後將內容添加到script元素內部。

getJSON()

獲取到之後，將會解析爲JSON

// 假設data.json 包含文本，{'x':33, 'y':44}
jQuery.getJSON('data.json', (data) => {
    // data將會是解析後的對象{x:1, y:2}
})
複製代碼

jQuery.get jQuery.post

jQuery.get('./debug.txt', alert);   // 請求get請求，而後彈出警告
複製代碼

jQuery的ajax的數據類型

text 爲純文本 html 爲html文件 xml 爲xml數據 script 爲js文件請求 json 爲請求json數據的文件 jsonp 爲請求jsonp的

jQuery的ajax函數

須要傳入一個對象

一些選項

type

指定http的請求方法 get或者post或者delete或者push

url

獲取的url

data

添加到url或者請求體的數據，

dataType

預期的類型，即html，script，json，jsonp，xml

contentType

指定的請求頭

timeout

指定的超時時間，若是超過期間，直接取消請求，返回false

cache

添加時間戳，防止瀏覽器緩存

回調

context

指定回調函數時的上下文對象，即this

beforeSend

指定發送ajax請求指定激活的函數

success

指定ajax請求成功後的回調函數

error

指定ajax請求失敗後的回調函數

complete

指定請求完成後的函數

鉤子

async

指定同步

dataFileter

過濾或者預處理服務器返回的數據

ajax事件

ajax還會在請求的時候，觸發相應的事件這個用於在請求某些圖片的時候，在圖片仍舊繼續下載的時候，使用相應的時間，提示出圖片正在加載中例如

$('#loading_animation').bind({
    ajaxStart: function() {$(this).show()},
    ajaxStop: function() { $(this).hide() }
})
複製代碼

jQuery 選擇器

簡單選擇器

例如* 或者p 一個栗子選取元素在其父節點的子元素中排行第1或第4,第7等元素，含有js單詞，不包含a的元素

p:nth-child(3n+1):text(js):not(:has(a));
複製代碼

組合選擇器

blockquote i // 匹配blockquote裏的i元素
ol > li // 選擇ol元素下的li元素
複製代碼

選擇器組

h1, h2, h3 // 匹配h1 h2 h3的元素
複製代碼

選取方法

var paras = $('p');
paras.first();  // 選取第一個p元素
paras.eq(1);    // 選取第二個p
paras.slice(2, 5);  // 選取3， 4， 5的元素
paras.filter('.note');  // 選取div.note
複製代碼

將選中的元素集用作上下文

即交併補

$('div').find('p'); // 在div中查找p元素
$('#header, #footer').find('p');    // 尋找id爲header和footer子元素節點中的p元素
$('h1').next('p');  // 選擇h1的兄弟元素p
$('h1').prev(); // 選擇h1元素前的兄弟元素
$('#footer').nextAll('p');  // 選擇footer元素後的全部p元素
$('#footer').prevAll(); // 選擇footer元素前面的全部兄弟元素
$('li').parent();   // 列表元素的父元素
$('a[href]').parents('p');  // 選擇含有連接的p元素
$('a[href]').closest('div');    // 選擇包含連接的最裏層的div元素
複製代碼

恢復到以前的選中的元素

end()彈出棧

// 尋找全部div元素，而後在其中尋找p元素，高亮顯示p元素，而後給div加邊框
$('div').find('p').addClass('highlight').end().css('border', 'solid black 1px');
複製代碼

addSelf 返回一個新的jQuery對象，包含當前選中的全部元素，加上以前選中的。

$('div').find('p').andSelf().addClass('highlight').end().end().css('border', 'solid black 1px');
複製代碼

jQuery 插件擴展

插件地址 plugins.jquery.com/

ps 這個插件已經中止了，新的插件，使用npm方式安裝。無奈。插件目錄處於只讀狀態，若是下載，使用node.js的npm即包管理器，而且裏面的內容已經至關老了。5年的內容，無奈,因此，若是要使用擴展，必須使用npm，無奈，畢竟如今已經8102年了。

jQuery.fn是全部jQuery對象的原型對象。若是給該對象添加一個函數，則該函數會成爲一個jQuery的方法。栗子

jQuery.fn.println = function () {
		// 將全部的參數合併成空格分隔的字符串
		var msg = array.prototype.join.call(arguments, '');
		// 遍歷jQuery對象中的每個元素
		this.each(function() {
			// 將參數的字符串做爲文本添加到每個元素的後面，並添加一個br
			jQuery(this).append(document.createTextNode(msg).append('<br/>'));
		});
		// 返回這個未加修改過的jQuery對象，方便鏈式調用
		return this;
	}
複製代碼

ps 這個灰常簡單，原型鏈那一套內容，須要注意的是要進行返回該對象，不然沒法進行鏈式調用

使用一下下

$('#debug').println('x =', 'x', 'y');
複製代碼

即完成了一個jquery的插件的封裝使用jQuery.fx.speeds完成對緩動函數的封裝擴展css選擇，使用jQuery.expr[';']完成對css選擇的封裝

jQuery.expr[':'].draggable = function(e) {
    return e.draggable === true;
}
複製代碼

使用

$('img:draggable');
複製代碼

等價於

$('img[draggable=true]')
複製代碼

上方封裝的一個選擇器爲可拖動的元素

當draggable爲true的時候，能夠對元素進行拖動，這是h5的內容

一些注意事項

不要依賴$ 插件要返回this 插件有兩個或者兩個以上的選項，使用對象直接傳入不能污染命名空間，請在jquery上定義一個方法便可，若是有多個方法，請直接使用前綴若是有事件須要綁定，使用插件名做爲命名空間，而後放在插件名中，即，不能使用全局的若是插件須要使用data()方法關聯數據數據值要在一個對象中。文件命名須要使用jquery.plugin.js

jQuery的UI庫

jqueryui.com/

ps 該庫已經兩年未更新了，不過lssues 依舊在回覆中，對於庫的檢查 travis-ci.org/jquery/jque…

一個栗子，日期選擇

$('input.date').datepicker();
複製代碼

將class爲data中的input元素通通替換爲日期選擇組件

相關標籤/搜索

每日一句

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