jQuery: JavaScriptライブラリ -- John Resig 2006-8-26
一般的に、インタラクティブ性に対する企業の要求がそれほど高くない場合、PCはバージョン1.xを使用し、携帯端末はバージョン2.xを使用します。
圧縮ツール: Yahoo YUI Compressor, Google JavaScript Closure Compiler
難読化は、変数名や関数名の無意味な命名を修正し、盗用を防ぎます。
jQuery === $
基本構文
セレクタ
セレクタの書き方は基本的にcssと同じです。
| .class/#id/tag | |
| .wrapper ul | 親子セレクタ |
| li: first | |
| li: 奇数/偶数 | 0から奇数/偶数 |
| li: eq(num) | jQueryはフォールト・トレラント機構を備えているため、0から始まる最初のものを選択し、最後のものから-1、num write 999は実行されず、エラーも報告されません。 |
| li[data='first'] | 名前が data で、値が first の属性を選択します。 |
| li[data$='th'] | 値が "th" で終わるデータ属性を選択します。 |
| li[data^='f'] | 値がfで始まるデータ属性を選択します。 |
| li[data!='f'] | 値がfでないデータ属性を選択した場合、fはカウントされません。 |
要素を取得するには2つの方法があります。
var one = $('ul li');
var two = $('li', 'ul'); //2つのパラメータがあり、2つ目のパラメータは1つ目のパラメータのコンテキストである。
フォールト・トレランス：......エラーを報告しない、プログラムの実行を妨げない、これは実際に非常に優れています！
例
$('li').each(function(index, elem){
$(elem).find('.icon').css({fontSize: '12px', color: 'red'}};
})
ここでliのアイコンを検索するループは、すべてのliのアイコンがない場合は、エラーではありませんが、見つけることができない場合でも、ネイティブJSで見つけることができないエラーが報告されます。
ソースコードの単純な書き換え
達成すべき目標
- $() JQ
- jQuery.fn.init コンストラクタ
- クローズドスコープ
;(function() {
function jQuery(selector) {
//この関数を呼び出し、パラメータを渡し、init関数を実行する。initはコンストラクタなので、newでインスタンス化する。
return new jQuery.prototype.init(selector);
}
jQuery.prototype.init = function(selector) {
// this = {}; initこの関数は thisからインスタンス化される。
// 適切なセレクタに従って対応するDOM要素を見つけ、jQueryオブジェクトにラップし、それを返す
this.length = 0;
if (selector.indexOf('.') != -1) {
var elem = document.getElementsByClassName(selector.slice(1));//slice
} else if(selector.indexOf('#') != -1) {
var elem = document.getElementById(selector.slice(1));
}
// 要素が1つしか選択されていない場合、elemは長さを持たず、以下のループは長さを持たないとエラーを報告する。
if (elem.length === undefined) {
this[0] = elem;
this.length ++;
}
for (var i = 0; i < elem.length; i++) {
this[i] = elem[i];
this.length ++;
}
}
// cssjQueryにないメソッド.prototype.init内部では
jQuery.prototype.init.prototype = jQuery.prototype;
jQuery.prototype.css = function(option) {
for (var i = 0; i < this.length; i++) {
// thisこれは、initによってインスタンス化された thisであり、選択された要素を含んでいる。
for(var attr in option) {
this[i].style[attr] = option[attr];
}
}
return this; //連鎖した呼び出しを実装する
}
window.$ = window.jQuery = jQuery;
})();
$('#logo').css({width: '300px', height: '300px'})
.css({opacity: .2});
もし thisオブジェクトに要素が追加されなければ、プリントアウトされるのはネイティブに選択されたクラスの配列だけです。
追加後
$.ready
DOM要素の読み込み完了
$(document).on("ready", function() {...})
$(document).ready(function() {...})
$(function() {...})
window.onloadはDOM要素を読み込むだけでなく、jQueryに対応してimgの読み込みが終わるのを待ちます：
$(window).on("load", function() {...})
$(window).load(function() {...})
DOM要素は、イベントをバインドするためにロードすることができますが、いくつかのシナリオでは、まだwindow.onloadを使用する必要があり、例えば、回転イメージは、イメージの幅と高さを使用する必要があり、イメージが再生するためにロードされていない行うことはできません！
選択検索
get
メソッドはネイティブの js オブジェクトを取得します。
$('li').get()
パラメータなし、null渡し、undefinedはすべてのli要素を返します。
jQuery.prototype.get = function(number) {
// if (number == null) {
// return [].slice.call(this, 0);
// } else {
// if (number >= 0) {
// return this[number];
// } else {
// // 負の数は数である+
// return this[number + this.length];
// }
// }
return number != null
? (number >= 0 ? this[number] : this[number + this.length])
: [].slice.call(this, 0);
}
eq
getとの最大の違いは、eqがjQueryオブジェクトを返すことです。
なぜeqメソッドにはeqセレクタがあるのですか？
eqセレクタがすべてのクラスにメソッドを一律に追加してから、個別に追加する方法がないからです。
$('.demo').css({'color': 'red'}).eq(3).css({'color': 'blue'});
$('.demo:eq(3)').css({'color': 'red'}).css({'color': 'blue'});
パラメータが渡されなかった場合は null を返します。
ソースコードの修正
jQuery.prototype.init = function(selector) {
this.length = 0;
if (selector == null) {
return this;
}
if (typeof selector == 'string' && selector.indexOf('.') != -1) {
var elem = document.getElementsByClassName(selector.slice(1));
} else if(typeof selector == 'string' && selector.indexOf('#') != -1) {
var elem = document.getElementById(selector.slice(1));
}
// ネイティブDOMオブジェクト、eqは1つだけを選択する
// if (selector instanceof Element) {
// this[0] = selector;
// this.length++;
// }
// 要素が1つしか選択されていない場合、elemは長さを持たず、以下のループは長さを持たないとエラーを報告する。
// if (elem.length === undefined) {
// this[0] = elem;
// this.length ++;
// }
if (selector instanceof Element || elem.length === undefined) {
this[0] = elem || selector;
this.length ++;
}
for (var i = 0; i < elem.length; i++) {
this[i] = elem[i];
this.length ++;
}
}
jQuery.prototype.eq = function(number) {
var elem = number != null
? (number >= 0 ? this[number] : this[number + this.length])
: [].slice.call(this, 0);
return jQuery(elem); //配列をクラス配列に入れる
}
find
元の要素の上に子要素を見つける
$('ul').css({'color': 'blue'});
.find('li').css({'color': 'yellow'});
例えば、liのprevObjectはulで、ulのprevObjectはdocumentです。
jQueryは、document.getで始まるネイティブJSの上に構築されています。
フィルタリング
filter
<div class="container">
<ul>
<li>1</li>
<li class="special-item">2</li>
<li class="special-item">34</li>
</ul>
</div>
コンテナの下にある特別な項目を探します。
$('.container ul').find('li').filter('.special-item');
注意すべき点は、ulでフィルターをかけることができないことです。
findで直接special-itemを探すのと違うのは、prevObjが違うことです。
フィルタは特別なセレクタや関数を渡すこともできます。
$('.container ul').find('li').filter('偶数')
$('.container ul').find('li').filter(function(idx, elem) {
console.log(idx, elem); //thiselemを指す
return idx % 2 == 0;
})
not フィルタの逆
条件を満たす要素を返すfilterの結果とは逆に、条件を満たさない要素は返しません。
ソースコードはSizzle.js（jQueryセレクタエンジン）に関連しています。
has 子要素を持つ要素
見つけやすい要素
<ul>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
$('li').has('ul');
li 要素を ul で検索
is ブール値を返します。
選択された要素がタグかどうかを判定します。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
$('ul').click(function(e) {
conaole.log(e.target); //ネイティブのDOMオブジェクトなので、使用するには変換する必要がある。
if($(e.target).is('li')){
console.log($(e.target).text());
} else {
console.log($(this).text());
}
})
add 集中操作
$('ul').css({'color': 'green'})
.find('li').css({'color': 'green'})
addを使用しない場合、liにまとめてスタイルを追加し続けるには、findを使用してすべてのliを見つける必要があります。
$('ul').add('li').css({'color': 'green'})
最初の書き方と同じように、ulもliも同じスタイルを追加します。
アイテム0には親要素liが追加されていることがわかりますので、このメソッドは新しいjQueryインスタンスオブジェクトを作成します。
もしHTMLの残りの部分が同じ構造であれば、それはまた
<div id="logo">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
console.log($('#logo ul').add('li').css({'border': '1px solid black'}));
追加されるリです。
jQuery.prototype.add = function(selector) {
var curObj = jQuery(selector),
baseObj = this,
newObj = jQuery(); //
for (var i = 0; i < curObj.length; i++) {
newObj[newObj.length++] = curObj[i];
}
for (var i = 0; i < curObj.length; i++) {
newObj[newObj.length++] = baseObj[i];
}
this.pushStack(newObj);
return newObj;
}
end
jQueryの操作
$('ul').css({...})
$('ul').find('li').css({...})
これら2つのcss操作は、異なるオブジェクトに基づいています。liを使用していて、ulに戻したい場合は、end
$('ul').css({'border': '1px solid black'})
.find('li').css({'border': '1px solid red'})
.end().css({'border': '1px solid green'});
フォールバックの後に返される新しいjQueryオブジェクトは、prevObjectの内容です。
ソースコードの実装：
エンドはフォールバックを実装するために prevObject に依存しており、多くの関数がこのプロパティを持つ必要があります。
jQuery.prototype.pushStack = function(elem) {
if (elem.constructor != jQuery) {
elem = jQuery(elem);
}
elem.prevObject = this;
return elem;
}
jQuery.prototype.end = function() {
return this.prevObject;
}
コンテンツを取得
html
html は innerHTML と同じです。
<div id="logo">
<ul id="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
</div>
$('div').html()
このメソッドがコレクションに使用された場合、最初の要素のhtmlのみが読み込まれます。
$('div ul li').html() //1
このコレクションをループするcssメソッドとは異なり
ただし、代入操作はセット内のすべての要素を置き換えることができるので、値を取って代入して得られる要素の違いには特に注意してください。
$('div ul li').html('<span>置き換えられたコンテンツ</span>')
配列を操作することもできます。
var arr = ['Jackson', 'Daniel', 'Eden'];
$('div ul li').html(function(idx, elem) {
return '<span>' + arr[idx] + '</span>';
})
text
はテキストの内容のみを表示し、innerText は値のコレクションで、すべての要素のテキストを取得します。
配列を代入して操作することもできます。
size() 長さに相当
クラスの操作
addClass
$('div ul li').eq(1).addClass('active warning');
jQueryは自動的にスペースを追加するのに役立ちますが、スペースの前にアクティブにする必要はありません。
$('div ul li').addClass('active warning');
コレクションへのクラス名の追加はラウンドロビン操作です。
また
$('div ul li').addClass(function(idx, elem) {
return 'item-' + idx;
})
柔軟な条件判断も可能
$('div ul li').addClass(function(idx, elem) {
if ((idx + 1) % 2 != 0) {
return 'active';
}
})
removeClass
操作は addClass と同じで、コレクションをループしてクラス名を削除し、メソッドを渡します。
jQueryは非常に高い耐障害性を持っており、存在しないクラス名を削除したり、空の文字列を渡したりしても何も起こりません。
$('div ul li').click(function(e) {
$('.item').removeClass('active');
$(this).addClass('active');
});
以下の理由から、cssで操作するのではなく、クラスで追加するのがベストです：
- メンテナンス
- 再利用性
- css ファイルはキャッシュ可能です。
hasClass
要素に複数のクラス名がある場合でも、探しているクラス名が含まれていれば true を返します。
css
値を付ける
$('div').css('color', 'blue');
$('ul').css({'backgroundColor': 'green', 'border': '1px solid yellow'})
.css('width', '+=100px');
元の += に追加できます。
値の取得
$('div').css('color');
値が色の場合は rgb を返します。
属性関連
attr
値の取得
$('div').attr('class');
$('input').attr('checked'); //checked
チェックを受けると、省略されているか省略されていないかに関係なくチェックされ、このプロパティがなければ未定義です。
値を付ける
$('div').attr('class', 'test');
prop
フェッチとアサインの操作はattrと同じです。
$('div').prop('class');
$('input').prop('checked'); //true
概要
- カスタム属性は、attr を介してのみ値を設定し、割り当てることができます。
- checked,selected,disabledと同様、propメソッドではよりわかりやすくなります。
フォーム要素の値の取得と代入
val 単一のフォームコントロール値
$('input').eq(0).val("新しい属性値")
プロパティの値を変更した後、コンソールelemに表示される値は変更されませんが、これはjQueryがこの部分を処理していないだけで、実際には、印刷された値は変更されたままであり、その後の操作には影響しません。
パス機能、シナリオは少ない
$('input').eq(0).val(function(idx, oldVal) {
return oldValue + '新しいプロパティ値';
})
フォーム内のすべてのコントロールの値をシリアライズします。
を取得するために、コントロールをフォームに記述する必要があります。
$('form').serialize();
戻り値は文字列
"text1=abc&text2=ddd&text3=ejl"
オブジェクトの別々の配列を返したい場合
$('form').serializeArray();
each
ul > li * 5
$("li").each(function(idx, elem) {
$(elem).text(idx + 1)
.addClass("test-" + idx);
})
elem はネイティブの DOM オブジェクトです。もし $ パッケージを使わないのであれば、ネイティブの JS メソッド
効率化のためにtestとaddClassの2つの関数を組み合わせた反復処理
$("li").text(function() {...})
$("li").addClass(function() {...})
index
$("ul").on("click", "li", function(e) {
console.log($(e.target).index());
})
$("li").on("click", function(e) {
console.log($("li").index($(e.target)));
})
どちらの書き方でも結構です。
DOM追加、削除、修正
チェック
next/prev 前/次の要素
フィルター条件を指定するために、メソッド内でパラメーターを渡すことができます。
$("button").click(function() {
$(this).prev("span").css("fontSize", "30px");
})
これが機能するためには、前の要素はスパンでなければなりません。
prev の実行後、新しい jQuery オブジェクトが返されます。
nextAll
選択後の全要素
シナリオ：すべてを選択し、すべてにチェックを入れます！
$("input").eq(0).click(function() {
if($("input").eq(0).prop("checked")) {
$(this).nextAll().prop("checked", true);
} else {
$(this).nextAll().prop("checked", false);
}
})
同じように条件を制限することができます。
$(this).nextAll("input[type='checkbox']")
nextUntil
<div id="logo">
<ul id="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
</div>
<div>
<h1>バスケットボールのスター選手</h1>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<h1>サッカーのスター選手</h1>
<input type="checkbox" />
C <input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
nextAllですべてのお気に入りにチェックを入れると、すべてのチェックボックスにチェックが入ります。
$("h1").next().click(function() {
if($(this).prop("checked")) {
$(this).nextUntil("h1").prop("checked", true);
} else {
$(this).nextUntil("h1").prop("checked", false);
}
})
siblings 兄弟要素
兄弟要素。パラメータフィルタリングに渡すこともできます。
parent 前の親要素
parents すべての親要素[]
children すべての子要素
パラメータを渡すことで、必要な親要素を指定することができます。
最も近い要素を選択することができます。
offsetParent 位置づけられた要素の最も近い祖先。
スライスは、左閉じと右開きの要素の範囲を選択します。
追加、変更
$() 要素の選択、作成
$("<div style='color: red'>test</div>").appendTo($("body"))
insertBefore/beforeinsertAfter/after
$(".box-3").insertBefore(".box-1");
順番が逆です。
$(".box-1").before($(".box-3"));
2つのメソッドが存在するのは、連鎖呼び出しのためです。
非jQueryオブジェクトを渡す場合はinsertBeforeの前にテキストが挿入され、jQueryオブジェクトを渡す必要がない限り、良いにセレクタを渡します。
親要素に追加された子要素の appendTo/prependTo
append/prepend 親が子を追加
appendは追加、prependはリストの先頭に追加
wrap
$("h1").wrap("<div class='container></div>")
$("h1").wrap($("<div class='container></div>"))
$("h1").wrap($(".container")); //
h1をラップの内容で囲みます。
この3つの方法はすべて機能しますが、最後の方法は「container」で選択された要素がカットされずにコピーされるという欠点があります。
関数
$("h1").wrap(function(idx) {
return "<div class='container-" + idx+ "'></div>"
})
wrapInner 内部にレイヤーを追加
<div class="container">
<h1>text</h1>
<h1>text</h1>
</div>
$(".container").wrapInner("<div></div>")
結局
<div class="container">
<div>
<h1>text</h1>
<h1>text</h1>
</div>
</div>
関数を渡すこともできます。
wrapAll は統一されたクラス名を持つ要素を
<div class="container">
<h1>text</h1>
<h1>text</h1>
</div>
<div class="container">
<h1>text</h1>
<h1>text</h1>
</div>
$(".container").wrapAll("<div class='wrap'></div>")
その結果
<div class='wrap'>
<div class="container">
<h1>text</h1>
<h1>text</h1>
</div>
<div class="container">
<h1>text</h1>
<h1>text</h1>
</div>
</div>
unwrap 外側の
<div class='wrap'>
<div class="container">
<h1>text</h1>
<h1>text</h1>
</div>
</div>
$("h1").unwrap()
その結果
<div class='wrap'>
<h1>text</h1>
<h1>text</h1>
</div>
アウターレイヤーに至るまで、ラップまで連続して呼び出すことができます。
clone
イベントをクローンしたい場合はtrueを渡します。
カスタム属性はクローンオーバーできません。
例：テンプレートのコピー
<table>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr class="tpl">
<td></td>
<td></td>
<td></td>
</tr>
</table>
スタイルは display: none です。
データ
var tplArr = [
{
name: 'jackson',
age: 25,
job: 'singer'
},
{
name: 'ben',
age: 32,
job: 'teacher'
}
];
var tplTable = $("table");
tplArr.forEach(function(elem, idx) {
var cloneDOM = $(".tpl").clone().removeClass("tpl");
cloneDOM.find("td").eq(0).text(elem.name)
.next().text(elem.age)
.next().text(elem.job);
tplTable.append(cloneDOM);
})
data
カスタムプロパティの設定
$("div").data("data-set", "test");
json を渡すこともできます。
$("div").data({
name: "jsckson",
age: 25
});
値の取得
$("div").data("name");
コンソール・エレメントで効果を見ることはできません。
例
<div class="container">
<div class="tpl">
<p></p>
<p></p>
<button> </button>
</div>
<div class="resArea">
<span class="total"></span>
</div>
</div>
var tplArr = [
{
id: "001",
name: 'jackson',
shoe: 'アディダス',
price: 2153
},
{
id: "001",
name: 'ben',
shoe: ' ',
price: 1212
}
];
//
tplArr.forEach(function(elem, idx) {
var cloneDOM = $(".tpl").clone().removeClass("tpl");
cloneDOM.data({ //データをマッピングする
id: elem.id,
name: elem.name,
shoe: elem.shoe,
price: elem.price
})
.find("p").eq(0).text(elem.shoe)
.next().text(elem.price);
cloneDOM.insertBefore($(".resArea"));
})
$("button").click(function() {
//暗黙の型変換
$(".total").text(+$(".total").text() + $(this).parent().data("price"));
})
削除
remove イベントは回復できません
$("div").click(function() {
alert("クリックされた~");
})
$("div").remove().appendTo("body")
removeの後、バインドされていたイベントも削除され、イベントを再び追加すると、そのイベントは存在しなくなります。
detach イベントの復元が可能
イベントの削除と再追加は、まだ
イベント
バインドオン、アンバインドオフ
function handleClick() {
console.log("click");
}
$("div").on("click", handleClick);
$("div").off("click", handleClick);
$("div").off("click");
$("div").off(); //すべてのバインドを解除する
$("div").on("click", function() {
alert("は一度クリックされた");
})
$("div").on("click", function() {
alert("が2回クリックされた");
})
要素が複数の同じリスナー・イベントにバインドされている場合、すべてが実行されます。
データを渡し、e.dataで取得することも可能です。
$("div").on("click", {test: "test"}, function(e) {
console.log(e.data)
})
イベント委任
委譲された要素が最初に書かれ、トリガーされた要素が最後に書かれます。
$("ul").on("click", "li", function(e, idx) {
console.log($(this).test());
//
var item = $(this),
list = document.getElementsByTagName("ul")[0],
idx = item.index(list);
})
特別なアイテムの製本も可能
$("ul").on("click", "li:even", handleClick);
$("ul").off("click", "li:even", handleClick);
複数のイベントをバインド可能
$("div").on({
mouseenter: function() {
console.log("mouseenter");
},
click: function() {
console.log("click")
},
mouseleave: function() {
console.log(mouseleave);
}
})
trigger
function handleClick() {
console.log("click");
}
$("div").on("click", handleClick);
$("div").trigger("click")
ユーザークリックトリガーではなく、トリガーイベント
アプリケーションシナリオ：広告の自動クローズ
イベントがトリガーされる際に追加のパラメータを渡したい場合、トリガーは
function handleClick(e, a, b) {
console.log("click", a, b);
}
$("div").on("click", handleClick);
$("div").trigger("click", ["message1", "message2"])
トリガーのもう一つの重要な使用例は、カスタムイベントのトリガーです。
$("div").on("customEvent", function() {
console.log("これはカスタムイベントである")
});
$("div").trigger("customEvent")
トリガー以外にカスタムイベントをトリガーする方法が見つかりません。
one
one() メソッドは、選択した要素に 1 つ以上のイベント・ハンドラを追加し、イベントが発生したときに実行する関数を指定します。
one() メソッドを使用する場合、1 つの要素に対して実行できるイベント・ハンドラ関数は 1 つだけです。
<a href="https://..om"></>
$("a").one("click", function() {
window.open("https://..om");
return false; //デフォルトイベントのブロックとバブリング
})
hover
マウスオーバーとマウスアウトを1つのイベントにまとめることができます。
$("div")
.on("mouseenter", function() {
console.log("mouse enter");
})
.on("mouseleave", function() {
console.log("mouse leave");
})
$("div").hover(function() {
console.log("mouse enter");
}, function() {
console.log("mouse leave");
})
keydown/keyup
$("input").keydown(function() {
$("input").css("backgroundColor", "green");
});
$("input").keyup(function() {
$("input").css("backgroundColor", "blue");
});
アニメーション
<div class="container">
<h1> </h1>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</div>
ul{
display: none;
}
hide/show/toggle
$("h1")
.on("mouseenter", function() {
$(this).next().show();
})
.on("mouseleave", function() {
$(this).next().hide(3000);
})
内部にパラメータを渡すと、グラデーション効果が得られます。
数字を決める、それが時間
プラグインjQueryイージングプラグインcdn
<script src="https://..///-/../..js"></>
<script src="https://..///-/../...js"></>
トグル
$("h1").on("click", function() {
if ($(this).next().css("display") == "none") {
$(this).next().show();
}else{
$(this).next().hide();
}
})
表示と非表示を1つにまとめた、スイッチのようなエフェクト
$("h1").on("click", function() {
$(this).next().toggle();
})
fadeIn/fadeOut/fadeToggle/fadeTo 容量の変更
$("h1").on("click", function() {
if ($(this).next().css("display") == "none") {
$(this).next().fadeIn();
}else{
$(this).next().fadeOut();
}
})
$("h1").on("click", function() {
$(this).next().fadeToggle();
})
fadeToパラメータ：時間、カットオフ透明度、速度、コールバック
$("h1").on("click", function() {
$(this).next().fadeTo(, "swing", function() {
conso;e.log("finished")
});
})
slideDown/slideUp/slideToggle
変更はすべて垂直方向の値です。
animate(style, speed, easing, callback)
<div class="container"></div>
$(".container").animate({
width: "200px",
height: "200px"
}, 5000, "swing", function() {
console.logo("finished");
})
特定の値を指定せず、元の値から一定の値だけ増加させることも可能です。
$(".container").animate({
width: "+=50px",
height: "+=50px"
});
cssは幅と高さを100に設定し、150で止めます。
コールバック関数の中で次のアニメーションを行うこともできます。
$(".container").animate({
width: "+=100px",
height: "+=100px",
top: "100px",
left: "100px"
}, 1000, "swing", function() {
console.log("最初のアニメーションの終わり");
$(this).animate({
width: "+=20px",
height: "+=20px"
top: "0px",
left: "200px"
}, 5000, "swing", function() {
console.log("秒アニメーションの終わり");
})
})
色はサポートされておらず、変更できるのは値に関連するものだけです。
アニメーションの原則：アニメーションキュー
queue() メソッドは、マッチした要素に対して実行される関数のキューを表示または操作します。
$(".container")
.queue("test", function() {
console.log(1)
})
.queue("test", function() {
console.log(2)
})
.queue("test", function() {
console.log(3)
})
console.log($(".container").queue("test")); //[ƒ, ƒ, ƒ]
$(".container").dequeue("test"); //1
.dequeue() を呼び出して、キューに入れられた次の関数を実行します。
コンソール印刷
$(".container").queue("test") //[ƒ, ƒ]
$(".container").dequeue("test"); //2
実行後に削除
$(".container")
.queue("test", function(next) {
console.log(1)
next();
})
.queue("test", function(next) {
console.log(2)
next();
})
.queue("test", function() {
console.log(3)
})
$(".container").dequeue("test");
console.log($(".container").queue("test"));
次のメソッドはデキューなしで連続して実行できますが、最初にトリガーされたときはまだデキューを実行しなければなりません。
1
2
3
[]
clearQueue clearQueue
console.log("クリーンアップ前 ", $(".container").queue("test"));
$(".container").clearQueue("test");
console.log("をクリーンアップした後、", $(".container").queue("test"));
クリーンアップ前[ƒ, ƒ, ƒ]
クリーンアップ[]
上記のアニメーションを実装するためにキューを使用すると、実際のアニメーションはおそらく次のように実装されます。
$(".container")
.on("click", function() {
$(this).dequeue("test");
})
.queue("test", function(next) {
$(this).animate({
width: "+=100px",
height: "+=100px",
top: "100px",
left: "100px"
})
next();
})
.queue("test", function() {
$(this).animate({
width: "+=20px",
height: "+=20px"
top: "0px",
left: "200px"
})
})
一時停止アニメーション停止
<button class="startBtn"> </button>
<button class="pauseBtn"> </button>
<button class="endBtn"> </button>
<div class="container"></div>
開始
$(".startBtn").on("click", function() {
$(".container")
.animate({
width: "+=100px",
height: "+=100px",
top: "100px",
left: "100px"
}, 2000)
.animate({
width: "+=20px",
height: "+=20px",
top: "50px",
left: "200px"
}, 5000);
})
ポーズ
$(".pauseBtn").on("click", function() {
$(".container").stop();
})
このコードをテストしてみると、ブロブは停止しないようですが、幅と高さが毎回異なることがわかりました。
つまりstop()は現在のアニメーションを終了させ、最初のアニメーションを停止させ、2番目のアニメーションを継続させます。
ボールを完全に停止させるには、stopにtrueパラメータを渡します。
$(".container").stop(true);
これはアニメーション・キューを空の配列 [] に空け、1つの f
ここでは、1つのtrueを渡すだけでなく、2つのtrueを渡すこともできます。
最初のtrueは、キューを空にするかどうかを示します。
2番目のtrueは、アニメーションが終了する最初のポイントを表し、ボタンを押すとすぐに現在のアニメーションの終わりにジャンプします。
$(".container").stop(true, true); //停止, 一時的
$(".container").stop(false, true); //次のアニメーションに移る。
遅延遅延
2つのアニメーションの間にディレイを設定し、次のアニメーションに移る前に少し待つことができます。
$(".startBtn").on("click", function() {
$(".container")
.animate({
width: "+=100px",
height: "+=100px",
top: "100px",
left: "100px"
}, 2000)
.delay(3000)
.animate({
width: "+=20px",
height: "+=20px",
top: "50px",
left: "200px"
}, 5000);
})
jQuery.fx.off トランジション効果の削除
jQuery.fx.off = true
アニメーション効果なし、直接変形
スケール位置
offset 親要素に依存しない、文書からの相対位置。
値を割り当てることができます。
("div").offset({"top": 50, "left": 50});
親要素からの相対位置
scrollLeft / scrollTop
ウィンドウスクロールバー
$(window).scrollTop(); //
$(window).scrollTop(500); //
要素内スクロール
<div class="container">
<div class="item"></div>
</div>
.container {
width: 150px;
height: 150px;
padding: 20px;
margin: 20px;
border: 10px solid #;
overflow: auto;
}
.container .item{
width: 1500px;
height: 1500px;
background: orange;
}
$(".container").scrollTop(500);
width / innerWidth(+padding) / outerWidth(+padding + boeder)
$(".container").width(); //150
$(".container").innerWidth(); //190
$(".container").outerWidth(); //210
マージン値を追加するには、outerWidth に true を渡します。
$(".container").outerWidth(true); //250
ツールメソッド
はインスタンスメソッドで、直接 $ を呼び出すのはインストルメンタルメソッドです。
$.type
jQueryの$.typeはこの問題を解決します。
typeof([1, 2, 3]); //object
$.type([1, 2, 3]); //array
typeof(null); //object
$.type(null); //null
typeof(new Number()); //object
$.type(new Number()); //number
typeof(new Date()); //object
$.type(new Date()); //date
typeof(new RegExp()); //object
$.type(new RegExp()); //regexp
function Car(){};
typeof(new Date()); //object
$.type(new Date()); //object
.isArray/.isFunction / $.isWindow...
$.trim ヘッダーとフッターのスペースを削除
ネイティブトリムと同じ結果
var str = " tes t ";
str.trim(); //tes t
$.trim(str); //tes t
$.proxy this "を
バインドに類似
パラメータ：変更するメソッド、指す this。
function test() {
console.log(this);
}
var person = {
name: "jackson"
}
$.proxy(test, person);
test(); //window
プロキシが thisポインタを変更するのはそれほど単純なことではありません。 実際、プロキシは thisポインタがPersonを指す新しい関数を返し、古いthisはまだウィンドウを指しています。
var testAfterProxy = $.proxy(test, person);
testAfterProxy(); {name: "jackson"}
そのため、返された新しい関数を受け取るための変数が必要になります。
アプリケーション
var test = {
init: function() {
this.elem = document.getElementsByClassName("test")[0];
this.num = 100;
this.bindEvent();
},
bindEvent: function() {
this.elem.addEventListener("click", $.proxy(this.showNum, this), false);
},
showNum: function() {
console.log(this.num);
}
}
test.init();
$.noConflict
jQueryは、他のライブラリも$シンボルを使用していることを懸念し、次の方法を考案しました。
var $NC = $.noConflict();
NCNCはシンボルを置き換え、元の$シンボルは使用しません。
$.each()
インスタンスメソッドは $().each です。
var arr = [1, 2, 3];
$.each(arr, function(idx, elem) {
console.log(idx, elem);
})
とforEachは同じメソッドを使用します。$.each ()はforEachの前身で、forEachよりもパフォーマンスが良いので、一般的にはネイティブのforEachを使用します。
$.map
$.each() と同じ場合は、ネイティブで使用したほうがよいでしょう。
var arr = [1, 2, 3];
var newArr = $.map(arr, function(idx, elem) {
return elem * 3;
})
console.log(newArr); //[3, 6, 9]
$.parseJSON
var json = '{"name": "jackson"}';
var res = $.parseJSON(json);
ネイティブのJSON.parseの使用法と同じです。
JSON.stringifyはjQueryに相当するものはありません。
$.makeArray
パラメータを渡すと、クラスの配列を配列に変換することができます。
var obj = {
0: "jackson",
1: "eden",
2: "dnaiel",
length: 3
}
console.log($.makeArray(obj)); //["jackson", "eden", "dnaiel"]
複数のパラメータを渡します。
- 2番目のパラメータはクラス配列に渡され、対応する項目がクラス配列に追加されます。
最初の引数に文字列、配列、ブーリアンなどを渡すと、その引数に
console.log($.makeArray("ben", obj)); // {0: "jackson", 1: "eden", 2: "dnaiel", 3: "ben", length: 4}
console.log($.makeArray(999, obj)); //{0: "jackson", 1: "eden", 2: "dnaiel", 3: 999, length: 4}
配列を渡すと、その配列の内容が順番にクラスの配列に追加されます。
var arr = [1, 2, 3];
console.log($.makeArray(arr, obj)); //{0: "jackson", 1: "eden", 2: "dnaiel", 3: 1, 4: 2, 5: 3, length: 6}
- 2番目のパラメータは配列として渡され、その配列は次のように追加されます。
console.log($.makeArray(obj, arr)); // [1, 2, 3, "jackson", "eden", "dnaiel"]
要約すると、どのようなデータ型が返されるかは、2番目のパラメータを見てください。
extends、カスタムメソッド
メソッド内でのオブジェクトの受け渡し、プロパティの設定 メソッド
ツールアプローチの拡張
$.extend({
min: function(a, b) {
return a < b ? a : b;
}
});
console.logo($.min(15, 10));
拡張メソッド例
.fnはjQuery.prototypeと同じです。
$.fn.extend({
clickToShowNumber: function() {
$(this).click(function() {
alert(($(this).text()) * 2);
})
}
});
$("ul li").clickToShowNumber();
シャローコピー、両エクステンション
var person1 = {
name: 'jaskson',
age: 25,
sex: 'male'
}
var person2 = {
name: 'eden',
age: 8,
job: 'student',
bro: {
name: 'ben'
}
}
$.extend(person1, person2);
console.log(person1, person2)
extendメソッドはperson2の値をperson1にコピーし、重複があれば置き換えます。 これは浅いコピーであり、参照は同じ値を指すので、一方が変更されればもう一方も変更されることに注意してください。
パラメータが3つある場合、person2がperson1にコピーされ、その結果がperson3に上書きされます。
ディープコピーでは、最初のパラメータにtrueを渡します。
$.extend(true, person1, person2);
参照もコピーされ上書きされますが、浅いコピーのような上書きではなく、person1 に同じ名前のオブジェクトが作成され、キーと値のペアがインクリメンタルに追加されます。
$.ajax
jsonpPlaceholder API:
$.ajax({
url: 'http://../rs',
type: 'GET',
dataType: 'JSON', //サーバーから返されるデータ型を期待する
timeout: 1000,
async: true, //非同期かどうか、デフォルトはtrue
success: function(res) {
console.log(res);
},
error: function(e) {
console.log(e);
},
complete: function() {
// このメソッドは成功しても失敗しても実行される
},
context: document.body //this "を
})
ソースコード
;(function() {
function jQuery(selector) {
//この関数を呼び出し、パラメータを渡し、init関数を実行する。initはコンストラクタなので、newでインスタンス化する。
return new jQuery.prototype.init(selector);
}
jQuery.prototype.init = function(selector) {
// this = {}; initこの関数は thisからインスタンス化される。
// 適切なセレクタに従って対応するDOM要素を見つけ、jQueryオブジェクトにラップし、それを返す
this.length = 0;
if (selector == null) {
return this;
}
if (typeof selector == 'string' && selector.indexOf('.') != -1) {
var elem = document.getElementsByClassName(selector.slice(1));//slice
} else if(typeof selector == 'string' && selector.indexOf('#') != -1) {
var elem = document.getElementById(selector.slice(1));
}
if (selector instanceof Element || elem.length == undefined) {
this[0] = elem || selector;
this.length ++;
} else {
for (var i = 0; i < elem.length; i++) {
this[i] = elem[i];
this.length ++;
}
}
}
// cssjQueryにないメソッド.prototype.init内部では
jQuery.prototype.init.prototype = jQuery.prototype;
jQuery.prototype.css = function(option) {
for (var i = 0; i < this.length; i++) {
// thisこれは、initによってインスタンス化された thisであり、選択された要素を含んでいる。
for(var attr in option) {
this[i].style[attr] = option[attr];
}
}
return this; //連鎖した呼び出しを実装する
}
jQuery.prototype.get = function(number) {
if (number == null) {
// 空のインターセプト、インターセプトなし、クラスの配列を配列に変える
return [].slice.call(this, 0)
} else {
if (number >= 0) {
return this[number];
} else {
// 負の数は数である+
return this[number + this.length];
}
}
}
jQuery.prototype.eq = function(number) {
// jQueryオブジェクトを返す
var elem = number != null
? (number >= 0 ? this[number] : this[number + this.length])
: [].slice.call(this, 0);
// return jQuery(elem); //配列をクラス配列に入れる
// 前のステップはpushStackで実装されている
return this.pushStack(elem);
}
jQuery.prototype.add = function(selector) {
var curObj = jQuery(selector),
baseObj = this,
newObj = jQuery(); //
for (var i = 0; i < curObj.length; i++) {
newObj[newObj.length++] = curObj[i];
}
for (var i = 0; i < curObj.length; i++) {
newObj[newObj.length++] = baseObj[i];
}
this.pushStack(newObj);
return newObj;
}
jQuery.prototype.end = function() {
return this.prevObject;
}
jQuery.prototype.pushStack = function(elem) {
if (elem.constructor != jQuery) {
elem = jQuery(elem);
}
elem.prevObject = this;
return elem;
}
window.$ = window.jQuery = jQuery;
})();
