jQuery 構文:

jQuery 構文は、HTML 要素を選択するためにコンパイルされ、要素に対して特定の操作を実行できます。 これが重要なポイントです。初心者は、学習したものが何に使用されるかを知る必要があります。

基本的な構文は $(selector).action() です。すべての jQuery はこれを中心に展開し、ページ上の要素を選択し、要素に対して特定の操作を実行します。

Example

$(this).hide() - 現在の要素を非表示にする

ドキュメント準備完了関数:

は、ドキュメントが完全にロードされる (準備完了する) 前に jQuery コードを実行しないようにします。 jQuery の規則により、すべての JavaScript コードはここに配置するのが最適です。

$(document).ready(function(){
});

ログイン後にコピー

jQuery 要素セレクターと属性セレクター: これらを使用すると、タグ名、属性名、またはコンテンツによって HTML 要素を選択できます。 $(selector).action()の前半に相当します。

jQuery 要素セレクター:

$("p") は

要素を選択します。

$("p.intro") は、class="intro" を持つすべての

要素を選択します。

$("p#demo") は、id="demo" を持つすべての

要素を選択します。

jQuery属性セレクター:

$("[href]") href属性を持つすべての要素を選択します。

$("[href='#']") href 値が「#」に等しいすべての要素を選択します。

$("[href!='#']") href 値が「#」に等しくないすべての要素を選択します。

$("[href$='.jpg']") は、href 値が ".jpg" で終わるすべての要素を選択します。

jQuery CSS セレクター:

$("p").css("background-color","red");

完全な jQuery セレクターリファレンスマニュアル: http:// www.w3school. com.cn/jquery/jquery_ref_selectors.asp

jQueryイベント関数: $(selector).action()の後半に対応します。

イベントハンドラーは、HTML で特定のイベントが発生したときに呼び出されるメソッドを指します。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

ログイン後にコピー

イベント関数	は関数を
$(document).ready(function)	にバインドしますReady イベント (ドキュメントの作成時)読み込みが完了したとき)
$(selector).click(function)	は、選択された要素のクリックイベントに関数をトリガーまたはバインドします
$(selector).dblclick(function)	がトリガーまたはbinds 関数は選択した要素のダブルクリックイベントにバインドされます
$(selector).focus(function)	関数をトリガーするか、選択した要素のフォーカスイベントにバインドします
$(selector ).mouseover( function)	選択した要素のマウスオーバーイベントに関数をトリガーまたはバインドします

完整的jQuery事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

约定：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

jQuery 效果：对应$(selector).action()的后半部分。

隐藏、显示、切换，滑动，淡入淡出，以及动画

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

这是一个段落。

这是另一个段落。

可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$(selector).toggle(speed,callback);

这是一个段落。

这是另一个段落。

jQuery 淡入淡出方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() fadeTo() 方法允许渐变的最终结果为给定的不透明度（值介于 0 与 1 之间，0为透明，1为不透明）。

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

ログイン後にコピー

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

すべての CSS プロパティを操作するには、animate() メソッドを使用できます。覚えておくべき重要な点が 1 つあります。animate() を使用する場合、すべてのプロパティ名を記述するには、padding の代わりに paddingLeft を使用する必要があります。 . -left、margin-right の代わりに marginRight を使用するなど。

left 属性が 250 ピクセルになるまで

要素を左に移動します:

< ; /body>

jQuery はアニメーション用のキュー機能を提供します。つまり、複数の animate() 呼び出しを次々に記述すると、jQuery はそれらのメソッド呼び出しを含む「内部」キューを作成します。次に、これらのアニメーション呼び出しを 1 つずつ実行します。

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

});

は次の形式で置き換えることができます

p.animate({height:'300px',opacity :'0.4'},"slow").animate({width:'300px',opacity:'0.8'},"slow");

jQuery stop() メソッドはアニメーションで使用されますまたは、効果が完了する前に停止します。

$(selector).stop(stopAll,goToEnd);

オプションの stopAll パラメーターは、アニメーションキューをクリアするかどうかを指定します。デフォルトは false で、アクティブなアニメーションのみを停止し、キューに入れられたアニメーションを逆方向に実行できます。

オプションの goToEnd パラメーターは、現在のアニメーションをすぐに完了するかどうかを指定します。デフォルトは false です。

< ;script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$ ("#stop").click(function(){

$("#panel").stop(); });
});

< ; p id="flip">ここをクリックしてパネルを下にスライドさせます

Hello world!

< ;/ html>

コールバック関数は、現在のアニメーションが 100% 完了した後に実行されます。

$(selector).hide(speed,callback)

$("p").hide(1000,function(){

alert("段落が非表示になりました");

});

完全なアニメーション: http://www.w3school.com.cn/jquery/jquery_ref_Effects.asp

jQuery には、HTML 要素と属性を操作するための強力なメソッドがあります。

jQuery DOM 操作:

DOM = ドキュメントオブジェクトモデル、「W3C ドキュメントオブジェクトモデルは、プログラムとスクリプトがドキュメントのコンテンツ、構造、スタイルに動的にアクセスして更新できるようにする、プラットフォームおよび言語に依存しないインターフェイスです。」

dom の値を取得します:

DOM 操作用の 3 つのシンプルで実用的な jQuery メソッド:

text() - 選択された要素のテキストコンテンツを設定または返します
html() - 選択した要素のコンテンツ (HTML タグを含む) を設定または返します
val() - フォームフィールドの値を設定または返します
$("#btn1").click(function() {
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $ (" #テスト").html());
});

$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});

$("button").click (function(){
alert($("#w3s").attr("href"));
});

DOM値を設定します:

$("#btn1")。 click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2" ).html("Hello world!");
});
$("#btn3").click(function(){
$("#test3").val( "Dolly Duck");

});

text()、html()、および val() コールバック関数、 コールバック関数には 2 つのパラメータがあります: 選択された要素リスト内の現在の要素の添え字と、元の要素の添え字(古い) 値。その後、関数 return の戻り内容が新しい値として使用されます。

$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "古いテキスト: " + origText + " 新しいテキスト: Hello world !
(index: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function( i,origText){
return "古い html: " + origText + " 新しい html: Hello world!
(index: " + i + ")";
});

} );

$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
} ; pend () - 選択した要素の先頭にコンテンツを挿入します

after() - 選択した要素の後にコンテンツを挿入します

before() - 選択した要素の前にコンテンツを挿入します

$ ( "p").append("追加されたテキスト。");

$("p").prepend("先頭に追加されたテキスト。");

$("img").after("後のテキスト" ; 、通常、次の 2 つの jQuery メソッドを使用できます:
remove() - 選択した要素 (およびそのサブ要素) を削除します。
empty() - 選択した要素からサブ要素を削除します
$( "#p1").remove();
$("#p1").empty();

jQueryのremove()メソッドはパラメータも受け入れ、削除されたものをフィルタリングすることができます要素。

このパラメーターには、任意の jQuery セレクター構文を使用できます。

title1

見出し 2

これは段落です。

これは別の段落です。

これは非常に重要なテキストです。

addClass()メソッドで指定することもできます複数のクラス:

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

$("#p1").addClass("重要な青");
});

jQuery css() メソッド

css() メソッドは、選択された要素の 1 つ以上のスタイル属性を設定または返します。

指定した CSS プロパティの値を返す必要がある場合は、次の構文を使用してください

$("p").css("background-color");

指定した CSS プロパティを設定する必要がある場合は、次の構文を使用してください:

$("p").css("background-color"," yellow");

複数の CSS プロパティを設定する必要がある場合は、次の構文を使用してください:

$(" p").css({"background -color":" yellow","font-size":"200%"});

jQueryの要素サイズの処理:

jQueryの場合、要素とブラウザウィンドウのサイズを処理するのが簡単です。

幅()
高さ()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

width() メソッドは、要素の幅 (パディング、ボーダー、またはマージンは含まない) を設定または返します。

height() メソッドは、要素の高さを設定または返します (パディング、境界線、またはマージンは含まれません)。

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

var txt="";
txt+="幅: " + $("#p1").width() + "
";
txt+="Height: " + $("#p1").height();
$("#p1").html(txt);

});

innerWidth() メソッドは、要素幅 (パディングを含む)。

innerHeight() メソッドは、要素の高さ (パディングを含む) を返します。

outerWidth() メソッドは、要素の幅 (パディングとボーダーを含む) を返します。

outerHeight() メソッドは、要素 (パディングとボーダーを含む) の高さを返します。

outerWidth(true) メソッドは、要素の幅 (パディング、ボーダー、マージンを含む) を返します。

outerHeight(true) メソッドは、要素 (パディング、ボーダー、マージンを含む) の高さを返します。

次の例では、指定された

要素の幅と高さを設定します:

$("button").click(function(){ $("#p1").width(500) . height(500) });

jQuery の移動:

jQuery トラバーサルは、他の要素との関係に基づいて要素を移動するために使用されます。 . HTML 要素を「検索」（または選択）します。選択範囲から開始し、目的の要素に到達するまでこの選択範囲に沿って移動します。家系図で jQuery トラバーサルを使用すると、選択した (現在の) 要素から開始して、家系図内を上 (祖先)、下 (子孫)、および水平 (兄弟) に簡単に移動できます。この移動は DOM のトラバースと呼ばれます。

jQuery は、DOM を走査するための複数のメソッドを提供します。トラバーサル手法の最大のカテゴリはツリートラバーサルです。

DOM ツリーを上に移動する

これらの jQuery メソッドは、DOM ツリーを上に移動するのに便利です

parent()

parents()
親sまで()
parent() メソッドは、選択した要素の直接の親要素を返します。このメソッドは、DOM ツリーの 1 つ上のレベルのみを走査します。

$("span").parent();

});

parents() メソッドは、選択された要素のすべての祖先要素を返します。ドキュメントルート要素 ()。

オプションのパラメータを使用して、祖先要素の検索をフィルタリングすることもできます。

次の例は、

要素のすべての祖先を返します。

});

parentsUntil() メソッドは、先頭と末尾を含まない、指定された 2 つの要素間のすべての祖先要素を返します。

次の例は、要素と

要素の間にあるすべての祖先要素を返します。

});

DOM ツリーを下位にトラバースします

DOM ツリーを下位にトラバースするための 2 つの jQuery メソッドを次に示します。

jQuery Children() メソッド

children() メソッドは、選択された要素のすべての直接の子要素を返します。このメソッドは、DOM ツリーを 1 つ下のレベルまでのみ走査します。

$(document).ready(function(){

$("p").children("p.1"); //クラス 1 の p 要素

});

find () メソッドは、選択した要素の子孫要素を最後の子孫まで返します。

次の例は、

の子孫であるすべての要素を返します:

$(document).ready(function(){

$("p").find("span");

} );

次の例は、

のすべての子孫を返します:

$(document).ready(function(){

$("p").find("*");

});

DOM ツリーを水平方向にトラバースできる便利なメソッドがたくさんあります:

siblings()

next()

nextAll()

nextUntil()

prev()
prevAll()
prevUntil()
siblings() メソッドは、選択された要素のすべての兄弟要素を返します。それ自体は含まれません。
$(document).ready(function(){
$("h2").siblings("p");
next() メソッドは、選択した要素の次の兄弟要素を返します。このメソッドは 1 つの要素のみを返します。
$("h2").next();
});

nextUntil() メソッドは、指定された 2 つのパラメーター間の後続の兄弟要素をすべて返します。両端の要素を除きます。

prev()、prevAll()、および prevUntil() メソッドは、上記のメソッドと同様に機能しますが、方向は逆です。前の兄弟要素を返します (DOM ツリー内の兄弟要素に沿って前方ではなく後方にトラバースします)。。

3 つの最も基本的なフィルタリングメソッドは、first()、last()、および eq() です。これらを使用すると、一連の要素内の位置に基づいて特定の要素を選択できます。 filter() や not() などの他のフィルタリングメソッドを使用すると、指定した基準に一致する要素または一致しない要素を選択できます。

first() メソッドは、選択された要素の最初の要素を返します。