5有用な基本的なjQuery構文

1）非表示/表示

これは、効果のないHTML要素を非表示または表示するために使用されます。 HTML要素をすばやく非表示または表示する場合は、これを使用してください。

• 構文：hide（）、show（）

例 ：

<span>$(document).ready(function(){
</span>	<span>$(".btn1").click(function(){
</span>		<span>$("p").hide();
</span>	<span>});
</span>	<span>$(".btn2").click(function(){
</span>		<span>$("p").show();
</span>	<span>});
</span><span>});</span>

ライブデモ： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide

2）フェードイン/フェードアウト

これには、素敵なフェードエフェクトを使用してHTML要素を隠して表示することが含まれます。 Divとそのコンテンツを見せたり隠したりするときによく使用されます。

• 構文：fadein（）、fadeout（）

例：

<span>$(document).ready(function(){
</span>	<span>$(".btn1").click(function(){
</span>		<span>$("p").fadeOut()
</span>	<span>});
</span>	<span>$(".btn2").click(function(){
</span>		<span>$("p").fadeIn();
</span>	<span>});
</span><span>});</span>

ライブデモ： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein

3）停止

現在実行中のアニメーションを停止したい場合は、これを使用してください。

• 構文：stop（）

例：

<span>$(document).ready(function(){
</span>	<span>$("#start").click(function(){
</span>		<span>$("div").animate({height:300},3000);
</span>	<span>});
</span>	<span>$("#stop").click(function(){
</span>		<span>$("div").stop();
</span>	<span>});
</span><span>});</span>

ライブデモ： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_stop

4）アニメーション

CSSスタイルを使用して、ある状態から別の状態に要素に変更を加える素晴らしい構文。 CSSプロパティ値を徐々に変更するだけで、アニメーション効果が発生します。

• 構文：animate（）

例：

<span>$(document).ready(function()
</span><span>{
</span>	<span>$("#btn1").click(function(){
</span>		<span>$("#box").animate({height:"300px"});
</span>	<span>});
</span>	<span>$("#btn2").click(function(){
</span>		<span>$("#box").animate({height:"100px"});
</span>	<span>});
</span><span>});</span>

ライブデモ： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate

5）スライドトグル

この構文は、jQueryを使用するさまざまなWebサイトで大きく使用されています。理想的には、HTML要素を非表示にして表示することですが、典​​型的なWordPress Webサイトの管理者エリアにある左側のバーメニューのように非常に素晴らしいスライド効果です。

• 構文：slidetoggle（）

例：

<span>$(document).ready(function(){
</span>	<span>$("button").click(function(){
</span>		<span>$("p").slideToggle();
</span>	<span>});
</span><span>});</span>

ライブデモ： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slidetoggle

jQuery構文に関するよくある質問（FAQ）

jQueryの基本的な構文は何ですか？

​​

jQueryの基本的な構文は、HTML要素を選択し、要素に対して何らかのアクションを実行するように設計されています。 $（selector）.action（）として記述されています。ここでは、Dollar Sign（$）はjQueryを定義またはアクセスし、（selector）がHTML要素を見つけ、.action（）が要素で実行されます。たとえば、$（“ p”）。hide（） - すべての段落要素を隠します。

ドキュメントレディイベントはjqueryでどのように機能しますか？これにより、ドキュメントが完全にロードされるまでJavaScriptコードが実行されないようにします。これは、ドキュメントが完全に読み込まれる前にjQueryコードが実行された場合、適切に機能しない可能性があるため、これは重要です。このための構文は$（document）.ready（function（）{// jqueryメソッドをここに移動します…}）;

jqueryの$ signの目的は何ですか？

$記号はjqueryのエイリアスです。 JQueryの定義またはアクセスに使用されます。 $ signを使用する別のJavaScriptライブラリを使用している場合、jquery.noconflict（）を使用して競合を回避できます。タグ名、クラス名、ID、属性、またはHTMLでの相対的な位置で要素を選択できます。たとえば、すべての段落要素を選択するには、$（「P」）を使用します。たとえば、.hide（）メソッドを使用して選択した要素を非表示にするか、.show（）メソッドを表示して表示できます。これらのメソッドは、$（“ p”）。hide（）。

jqueryでアクションをチェーンできますか？

のように、選択された要素で呼び出されます。jQueryの強力な特徴の1つは、アクションを結び付ける能力です。これは、同じ要素のセットで複数のアクションを実行できることを意味します。たとえば、$（“ P”）。CSS（“ Color”、“ Red”）。SlideUp（2000）。これらには、クリックやキープレスなどのユーザーアクション、またはドキュメントの読み込みなどが含まれます。これらのイベントに機能を使用して応答し、動的でインタラクティブなWebアプリケーションを作成できます。単一の行のコメントには//を使用できます。または / * * /マルチラインコメントには使用できます。コメントはブラウザによって無視され、メモを作成したりコードを説明したりするために使用できます。これはローカルコピーにすることも、CDNでホストされているバージョンにリンクすることもできます。スクリプトタグは、HTMLの頭に、または閉じたボディタグの直前に配置する必要があります。 HTMLドキュメントを操作したり、イベントを処理したり、アニメーションを作成したりするための、よりシンプルでユーザーフレンドリーなAPIを提供します。 Plane JavaScriptでこれらすべてを実行できますが、jQueryはそれを簡単にし、多数のブラウザーで動作します。

以上が5有用な基本的なjQuery構文の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。