js初心者向けのjQuery基本チュートリアルノート_jquery

私が基本的な jquery チュートリアルで取ったメモを読んだ後、このメモはすべての人に適しているわけではありませんが、良いと思わない場合は読む必要はありません。彼ら。

1, : eq() と nth-child()
以下のコードを見てください:
;スクリプト言語 = JavaScript">
$(function(){
$('#a').click(function(){
alert("A")
})
$(' #b').click(function(e){
alert("B")
e.stopPropagation();//バブリングを防ぎ、「A」を出力しません。これは削除できます。
})
})



9, Hide()show() は最後の表示ステータスを記憶します

<スクリプト言語="JavaScript"> $('# test').toggle(function(){
$('#a').hide();//display : none 、表示がインラインであることを覚えておいてください
$('#b')。 Hide() ;//表示 : なし、表示がブロックであることを覚えておいてください
}, function(){
$('#a').show(); // 表示 : インライン
$('# b' ).show(); //表示 : ブロック
})
})

a

/p>



10, Hide() show() プラス時間パラメータ


LANGUAGE= "JavaScript">
$(function(){
$('#test').toggle(function(){
$('#a').hide(500);/ /表示 : なし
$('#b').hide(500);//表示 : なし
},function(){
$('#a').show(500); // 表示: インライン
$('#b').show(500); //表示 : ブロック
})
})

a

b

11、効果:
show()、hide() は、高さ、幅、不透明度の複数のスタイル属性を同時に変更します。 。
fadeIn() fadeOut() : 不透明度
fadeTo() : 不透明度
slideDown(), slideUp() : 高さ

満足できない場合は、animate を使用するしかありません()
animate() は、より強力で複雑なエフェクトを提供します。

12, animate():
before .show('slow'); // low は、高さ、幅、透明度を 0.6 秒以内に同時に変更することを表します。時間で表すと 600; === .show(600);
次に animate() を見てみましょう

animate({heigth : 'slow' ,width : 'slow'
ここで高さが使用できる理由: 'slow' は実際には .show('slow') と似ています。 もちろん、以前に高さを指定しました。 。

13. アニメーションを行う前に位置を決めます。




< p id="a" >a

14, width( ) と css('width')

a

//上記のイベントが順番に実行されます。最初に左を変更し、次に上を変更します


コントラスト:

< ;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<スクリプト src="http:// www.cssrain.cn/demo/JQuery API/jquery-1[1].2.1.pack.js" type="text/javascript">
<スクリプト言語="JavaScript"> ;
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" , top : " 300px"} , "遅い" )
})
})

a

//上記は一緒に実行されます。つまり、 left とトップも一緒に変わります。

違いはわかりますね。


16. 同様に、別の例を見てみましょう:


top:100px;background:red;">a

//animate() が続くとき 他のアニメーション効果が実行されると、それらも実行のためにキューに入れられます。つまり、一人ずつ来てください。

比較: css()


<スクリプト言語="JavaScript">
$('#test').click(function(){
$('#a').animate({left : "300px" } , "slow" )
.fadeTo('slow ',0.2)
.animate({ top : "300px" } , "slow" )
.fadeTo('slow',1)
.css("backgroundColor","#000");
//最後にCSSを書いていますが、クリック開始と同時に実行されます。 .css()
})
} )

a


解決策:

a

概要:
animate で複数の属性として適用すると、効果が同時に発生します。
連続して適用すると、順番に適用されます。
.css() メソッドなどの効果のないメソッドは適切ではありません。解決策は、それらをコールバック関数に入れることです。


17、例を示します。Paragraph
"http://www. w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">





<スクリプト言語="JavaScript">
$(function(){
// $('トップに戻る').insertAfter('p.chapter p');//追加各段落の後のハイパーリンク
$('トップに戻る').insertAfter('p.chapter p:gt(2)');//(最初の 3 つを削除)各段落の後のハイパーリンク
$('').prependTo('body');//本文の後の先頭にハイパーリンクを追加します。

$（ 'p.Chapter P'）。各（function（index）{/aim point：ラベルa
。$（ 'p.chapter p'）。 function(index){
k = "段落" (インデックス 1) "
//prependTo()を使用すると、kの内容が反転していることが判明しました。めまいがする。 。 。
// したがって、insertBefore(), ">デモ

段落 1 段落 1 段落 1 段落 1
gt;
gt;
gt;
gt;

第 2 段落2 パラグラフ 2 パラグラフ 2


gt;

パラグラフ 3 パラグラフ 3 パラグラフ 3 パラグラフ 3








br/>

第 4 段落 第 4 段落 第 4 段落

第 5 段落 第 5 段落 第 5 段落

gt;
gt;
gt;
gt;

第 6 段落6 パラグラフ 6 パラグラフ 6


gt;
gt;

;

パラグラフ 7 パラグラフ 7 パラグラフ 7






18、パッケージ化要素:wrap(): ;!DOCTYPE html PUBLIC "-//W3C/ /DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> www. w3.org/1999/xhtml" xml:lang="en" lang="en">





<スクリプト言語="JavaScript">
$(function(){
$("p" ).bind("click",function(){
alert("cssrain test:"); 🎜> $("p").clone(false).appendTo("body");
//クローン(true)バインドされたイベントはそれによって破棄されました。
$ ("p").Clone ().Appendto ("Body"); // デフォルトは false
/*
この jquery のクローン () は DOM のクローンとは少し異なります。 。
dom に clone() を実装したい場合
これを実行できます。
$("p").clone(true).appendTo("body"); */
})




段落 1 段落 1 🎜>



20、DOM 操作の概要:
ノードの作成:
Direct $("

cssrain ")

ノードのコピー:
.clone()

ノードの挿入:
.append()
.appendTo()
.prepend()
.prependTo()
.after()
.insertAfter()
.before()
.insertBefore()

ノードの削除:
.remove( )

空のノード:
.empty()

ラップ ノード:
.wrap()

属性の設定
.attr()

属性の削除
.removeAttr()

は、JavaScript の DOM 操作と基本的に同じです。 clone() の違いは、前の例で述べたとおりです。 。


これが最初の 6 章のメモのほぼすべてです。