jQuery を使用すると、Ajax ベースのアプリケーションを非常に簡単かつ迅速に作成できます。
jQuery は、もともと 2006 年の初めに John Resig によって作成されました。jQuery プロジェクトは現在、オープン ソース プロジェクトとして、分散した開発者グループによって維持管理されています。
jQuery を使用すると、多くの時間と労力を節約できます。 このサイトをお気に入りに追加して、読み続けてください
jQuery でできることは他にもたくさんあります。
リストはこれで終わりではありません。jQuery を使ってできることは他にもたくさんあります。
jQuery の使用を選択すべきいくつかの利点があります。
まず、jQuery のコピーをダウンロードして、それをプロジェクトに含めましょう。 jQuery の XNUMX つのバージョンをダウンロードできます。 急いで e 圧縮されていない .
圧縮されていないファイルは、開発やデバッグに適しています。 一方、縮小され圧縮されたファイルは、帯域幅を節約し、ファイル サイズが小さいためパフォーマンスが向上するため、運用環境に推奨されます。
ここから jQuery をダウンロードできます。 https://jquery.com/download/
jQuery ファイルをダウンロードすると、拡張子が js であることがわかります。つまり、これは JavaScript ファイルです。 実際、JQuery は JavaScript ライブラリにすぎないため、要素を使用して HTML ドキュメントに jQuery ファイルを含めることができます。 <script> 通常の JavaScript ファイルを含めるのと同じように。
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>カスタム スクリプトの前に常に jQuery ファイルを含めることを忘れないでください。 そうしないと、jQuery コードが jQuery API にアクセスしようとしたときに、jQuery API を使用できなくなります。
お気づきかもしれませんが、前の例では属性をスキップしました type="text/javascript" タグの内側に. Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 とすべての最新ブラウザで完成します。
別の方法として、ファイルのダウンロードを避けたい場合は、自由に利用できる CDN (コンテンツ配信ネットワーク) リンクを介してドキュメントに jQuery を埋め込むことができます。
CDN は、世界中の複数のサーバーで jQuery をホストし、ユーザーがファイルを要求すると、最も近いサーバーから提供されるため、読み込み時間を短縮することでパフォーマンス上の利点を提供できます。
これには、Web ページの訪問者が他のサイトにアクセスしているときに同じ CDN から jQuery のコピーを既にダウンロードしている場合、ブラウザーのキャッシュに既にあるため、再度ダウンロードする必要がないという利点もあります。
この場合、次のように記述する必要があります。
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jquery プロジェクトによって提供される CDN に加えて、次の方法で jQuery を含めることができます。 でログイン e Microsoft CDN。
jQuery ライブラリーの目標と、それを文書に組み込む方法を理解したところで、今度は jQuery を実践するときです。
次に、ヘッダーのテキストの色を事前の色から変更して、簡単な jQuery 操作を実行してみましょう。defi黒から緑に磨かれた色。
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>コードでは、ヘッダー、つまり要素の色を変更して、単純な jQuery 操作を実行しました。 ドキュメントの準備ができたときに、jQuery 要素のセレクターと css() メソッドを使用します。これは、ドキュメントの準備完了イベントと呼ばれます。
jQuery ステートメントは通常、ドル記号 ( $) で終わり、セミコロン ( ;).
jQuery では、ドル記号 ( $) は jQuery の単なるエイリアスです。 最も単純な jQuery ステートメントを示す次のサンプル コードを検討してください。
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>この例では、警告メッセージ「Hello I'm a JQuery sign」をユーザーに。 いくつかの機能を見てみましょう:
<script>: jQuery は単なる JavaScript ライブラリであり、要素内に jQuery コードを配置できます <script>、または外部 JavaScript ファイルに入れることができます。$(document).ready(handler); 準備完了イベントとして知られています。 それはどこにある handler これは、ドキュメントの準備が整うとすぐに、つまり DOM 階層が完全に構築されたときに、メソッドに渡されて実行される関数です。jQuery メソッド ready() 通常、無名関数で使用されます。 したがって、上記の例は、次のような簡略表記でも記述できます。
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>関数内では、jQuery ステートメントを記述して、次のような基本的な構文に従って任意のアクションを実行できます。
$(selector).action();鳩、 $(selector) 基本的に、DOM ツリーから HTML 要素を選択して操作できるようにします。 action() CSS プロパティの値の変更や要素のコンテンツの設定など、選択した要素にいくつかのアクションを適用します。
次に、段落テキストを設定する別の例を見てみましょう:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>jQuery の例はセレクターを参照しています p、これによりすべての段落が選択され、次にメソッドが選択されます text() 段落のテキスト コンテンツを「Hello World!"
前の例の段落テキストは、ドキュメントの準備ができると自動的に置き換えられます。 しかし、jQuery コードを実行する前にアクションを実行して、段落のテキストを置き換える場合の方法を見てみましょう。
最後の例を考えてみましょう:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>この例では、ボタンでクリック イベントが発生した場合にのみ、段落テキストが置き換えられます。Replace Textこれは単に、ユーザーがこのボタンをクリックしたときを意味します。
ID セレクターを使用して、ページ上の一意の ID を持つ単一のアイテムを選択できます。
たとえば、次の jQuery コードは、ID 属性を持つ要素を選択して強調表示します。 id="markid"、ドキュメントの準備ができたら。
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>クラス セレクターを使用して、特定のクラスを持つ要素を選択できます。
たとえば、次の jQuery コードは、class 属性を持つ要素を選択して強調表示します。 class="markclass"、ドキュメントの準備ができたら。
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>アイテム セレクターを使用して、アイテム名でアイテムを選択できます。
たとえば、次の jQuery コードは、すべての段落、つまり要素を選択して強調表示します。 "<p>" ドキュメントの準備ができたら。
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>属性セレクターを使用して、リンク属性などの HTML 属性の XNUMX つに基づいて要素を選択できます。 targetまたは入力の属性 typeなど。
たとえば、次の jQuery コードは、要素などのすべてのテキスト入力を選択して強調表示します。 "<input>" とともに type="text"、ドキュメントの準備ができたら。
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>CSS セレクターを組み合わせて、選択をより正確にすることもできます。
たとえば、クラス セレクターを要素セレクターと組み合わせて、特定のタイプとクラスを持つドキュメント内の要素を検索できます。
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>セレクターに加えて definiti、jQuery は、ページ上の要素を選択する機能をさらに強化する独自のカスタム セレクターを提供します。
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>多くの場合、イベントは、リンクまたはボタンをクリックする、入力ボックスまたはテキスト領域にテキストを入力する、選択ボックスで選択する、キーボードのキーを押す、マウス ポインターを移動するなど、Web ページとのユーザー インタラクションによってトリガーされます。など場合によっては、ブラウザー自体が、ページの読み込みやダウンロード イベントなどのイベントをトリガーすることがあります。
jQuery は、ほとんどのネイティブ ブラウザ イベントにイベント メソッドを提供することで、基本的なイベント処理メカニズムを改善します。これらのメソッドの一部は次のとおりです。 ready(), click(), keypress(), focus(), blur(), change()など。
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>一般に、イベントは次の XNUMX つの主要なグループに分類できます。
マウス イベントは、ユーザーがアイテムをクリックしたり、マウス ポインターを動かしたりするとトリガーされます。
マウス イベントを処理するために一般的に使用される jQuery メソッドを次に示します。
click()この方法 click() イベントの選択された要素にイベント ハンドラー関数をアタッチします。click」。 ユーザーがそのアイテムをクリックすると、リンクされた関数が実行されます。 次の例では、要素を非表示にします <p> クリックするとページに。
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()この方法 dblclick() イベントの選択された要素にイベント ハンドラー関数をアタッチします。dblclick」。 ユーザーがそのアイテムをダブルクリックすると、リンクされた関数が実行されます。 次の例では、要素を非表示にします <p> それらをダブルクリックすると。
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()この方法 hover() 選択した要素に XNUMX つまたは XNUMX つのイベント ハンドラー関数をアタッチします。この関数は、マウス ポインターが要素に出入りするときに実行されます。 最初の関数は、ユーザーがマウス ポインターを項目の上に置いたときに実行され、XNUMX 番目の関数は、ユーザーがその項目からマウス ポインターを離したときに実行されます。
次の例では、項目が強調表示されます <p> カーソルを上に置くと、カーソルを離すとハイライトが削除されます。
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()この方法 mouseenter() マウスが要素に入ったときに実行されるイベントハンドラー関数を選択した要素に添付します。 次の例では、要素にクラスの強調表示を追加します <p> その上にカーソルを置くと。
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()この方法 mouseleave() マウスが項目から離れたときに実行される、選択された項目にイベント ハンドラー関数をアタッチします。 次の例では、要素からクラスの強調表示を削除します <p> そこからカーソルを離したとき。
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>ユーザーがキーボードのキーを押したり離したりすると、キーボード イベントが発生します。 キーボード イベントを処理するために一般的に使用される jQuery メソッドをいくつか見てみましょう。
keypress()この方法 keypress() ブラウザーがユーザーからキーボード入力を受け取ったときに実行されるイベント処理関数を、選択した要素 (通常はフォーム コントロール) にアタッチします。 次の例では、イベントがトリガーされたときにメッセージを表示します keypress キーボードのキーを押したときにトリガーされる回数。
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keypress イベントは、Shift、Esc、Backspace、Delete などの修飾キーと非印刷キー、矢印キーなどを除いて、keydown イベントに似ています。 これらはキーダウン イベントを発生させますが、キープレス イベントは発生させません。
keydown()この方法 keydown() ユーザーが最初にキーボードのキーを押したときに実行される、選択された項目 (通常はフォーム コントロール) にイベント処理関数をアタッチします。 次の例では、イベントがトリガーされたときにメッセージを表示します keydown キーボードのキーを押したときにトリガーされる回数。
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()この方法 keyup() ユーザーがキーボードのキーを放したときに実行される、選択した要素 (通常はフォーム コントロール) にイベント処理関数をアタッチします。 次の例では、イベントがトリガーされたときにメッセージを表示します keyup キーボードのキーを押して離したときにトリガーされる回数。
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>フォーム イベントは、フォーム コントロールがフォーカスを取得または失ったとき、またはユーザーがテキスト入力にテキストを入力する、選択ボックスでオプションを選択するなど、フォーム コントロールの値を変更したときにトリガーされます。 フォーム イベントを処理するために一般的に使用される jQuery メソッドを次に示します。
change()この方法 change() イベント ハンドラー関数を要素にアタッチする <input> 値が変化したときに実行されます。 次の例では、ドロップダウン選択ボックスでオプションを選択すると、警告メッセージが表示されます。
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>クリック ボックス、チェック ボックス、ラジオ ボタンの場合、ユーザーがマウスで選択するとすぐにイベントが発生しますが、テキスト入力とテキスト領域の場合、要素がフォーカスを失った後にイベントが発生します。
focus()この方法 focus() 選択された要素 (通常はコントロールとフォーム バインディング) に、フォーカスを取得したときに実行されるイベント ハンドラー関数をアタッチします。 次の例では、テキスト入力がフォーカスを受け取ったときにメッセージを表示します。
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()この方法 blur() 次のようなフォーム要素にイベント ハンドラー関数をアタッチします。 <input>, <textarea>, <select> フォーカスを失ったときに実行されます。 次の例では、テキスト入力がフォーカスを失ったときにメッセージを表示します。
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()この方法 submit() イベント ハンドラー関数を要素にアタッチする <form> ユーザーがフォームを送信しようとしたときに実行されます。 次の例では、フォームを送信しようとしたときに入力された値に基づいてメッセージを表示します。
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>イベントは、DOM (ドキュメント オブジェクト モデル) ページの準備が整った場合や、ユーザーがブラウザー ウィンドウのサイズ変更やスクロールを行った場合などにも発生します。 このタイプのイベントを処理するために一般的に使用される jQuery メソッドを次に示します。
ready()この方法 ready() DOM が完全にロードされたときに実行する関数を指定します。
次の例では、DOM 階層が完全に構築され、操作の準備が整うとすぐに段落テキストを置き換えます。
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()この方法 resize() ブラウザー ウィンドウのサイズが変更されたときに実行されるイベント ハンドラー関数を window 要素にアタッチします。
次の例では、ブラウザ ウィンドウの角をドラッグしてサイズを変更しようとすると、ブラウザ ウィンドウの現在の幅と高さが表示されます。
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()この方法 scroll() イベント ハンドラー関数をウィンドウまたは iframe アイテムのスクロール位置が変わるたびに実行されるスクロール可能なアイテム。
次の例では、ブラウザ ウィンドウをスクロールするときにメッセージを表示します。
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
先週の月曜日、フィナンシャル・タイムズ紙はOpenAIとの契約を発表した。 FT は世界クラスのジャーナリズムにライセンスを供与しています…