jQuery の設計アイデアの例を共有する-jsチュートリアル-php.cn

jQuery の設計アイデアの例を共有する

小云云

リリース： 2018-01-23 13:21:27

オリジナル

1188 人が閲覧しました

どの言語であっても、考えることは非常に重要です。jQuery の詳細を掘り下げる前に、jQuery の設計思想を一般的に理解する必要があります。問題が発生した場合は、jQuery のどの機能を使用すればよいかを把握し、具体的な使用方法をマニュアルからすぐに見つけることができます。この記事ではjQueryの設計思想を詳しく紹介します。以下のエディターで見てみましょう。

要素の選択

jQuery の基本的な設計思想と主な使用法は、「Web ページの要素を選択し、それに対して特定の操作を実行する」ことです。これが他の JavaScript ライブラリと異なる基本的な機能です

jQuery を使用する最初のステップは、多くの場合、コンストラクター jQuery() ($ と略されます) に選択式を入れ、選択された要素を取得することです

【 CSS をシミュレートする選択要素】

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('p.myClass') // 选择class为myClass的p元素
$('input[name=first]') // 选择name属性等于first的input元素

ログイン後にコピー

【特殊な式選択】

$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('p:visible') //选择可见的p元素
$('p:gt(2)') // 选择所有的p元素，除了前三个
$('p:animated') // 选择当前处于动画状态的p元素

ログイン後にコピー

【複数のフィルタリングメソッド】

$('p').has('p'); // 选择包含p元素的p元素
$('p').not('.myClass'); //选择class不等于myClass的p元素
$('p').filter('.myClass'); //选择class等于myClass的p元素
$('p').first(); //选择第1个p元素
$('p').eq(5); //选择第6个p元素

ログイン後にコピー

書き込み

【メソッドの機能化】

ネイティブJavaScriptでは、代入演算子がより頻繁に使用されます。 jQueryでは、関数のパラメータを渡す方法、つまりメソッド関数化が主に使用されます

//原生
window.onload = function(){};
//jQuery
$(function(){});
//原生
p.onclick = function(){};
//jQuery
p.click(function(){});
//原生
p.innerHTML = '123';
//jQuery
p.html('123');

ログイン後にコピー

[連鎖操作]

Webページ要素を選択した後、それに対して一連の操作を実行でき、すべての操作を接続できます一緒にチェーンの形で書きます

$('p').find('h3').eq(2).html('Hello');

分解すると次のようになります:

$('p') //找到p元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello

ログイン後にコピー

これは jQuery の最も優れた便利な機能です。その原理は、jQuery 操作の各ステップが jQuery オブジェクトを返すため、異なる操作を接続できることです

jQuery には .end() メソッドも用意されているため、結果セットを 1 ステップ戻すことができます

$('p')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World

ログイン後にコピー

【割り当ての取得組み合わせ】

Web ページ要素を操作するための最も一般的な要件は、その値を取得するか、値を割り当てることです。 jQuery は、値 (ゲッター) と代入 (セッター) を完了するために同じ関数を使用します。つまり、「ゲッター」と「アサイナー」が 1 つに結合されます。値か代入かは関数のパラメータによって決まります

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

ログイン後にコピー

共通の値関数と代入関数は次のとおりです

.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值

ログイン後にコピー

結果セットに複数の要素が含まれる場合、代入する際にはすべての要素が代入されることに注意してください値を取得するときは、最初の要素の値のみが取り出されます

[注].text() は例外で、すべての要素のテキストの内容が取り出されます。

この記事がお役に立てば幸いです。