[jQuery]学習ノート(二):セレクタとイベントの処理

4849 ワード

次の内容を紹介する前に、jQueryの文法の特徴を簡単に説明します.jQueryでは、(クエリー、query)HTML要素を選択し、アクションを実行できます.CSSと同様に、jQuery構文はHTML要素の選択のために作成され、要素に対していくつかの操作を実行することができます.
基本構文は次のとおりです.
$(selector).action()
ドル記号はjQueryセレクタ(selector)の「クエリー」と「検索」HTML要素jQueryのaction()を定義し、要素に対する操作$(this)を実行する.hide()-現在の要素$(「p」)を非表示にします.hide()-すべてのp段落$(「p.test」)を非表示にします.hide()-すべてのclass=「test」の段落を非表示にします.
$("#test").hide()-すべてのid=「test」の要素を非表示にします.
jQuery関数はdocument ready関数の1つにあります.

$(document).ready(function(){
--- jQuery functions go here ----
});

これは、ドキュメントが完全にロード(準備完了)される前にjQueryコードを実行しないようにするためです.ドキュメントが完全にロードされない前に関数を実行すると、操作が失敗する可能性があります.次に、2つの具体的な例を示します.存在しない要素を非表示にして、完全にロードされていない画像のサイズを取得しようとします.
セレクタの概念について説明します.
セレクタを使用すると、要素グループまたは単一の要素を操作できます.キーは、jQueryセレクタが効果を適用する要素をどのように正確に選択するかを学ぶことです.jQuery要素セレクタと属性セレクタを使用すると、HTML要素をラベル名、属性名、またはコンテンツで選択できます.セレクタを使用すると、HTML要素グループまたは単一の要素を操作できます.HTML DOM用語:セレクタを使用すると、DOM要素グループまたは単一のDOMノードを操作できます.
jQuery要素セレクタjQueryはCSSセレクタを使用してHTML要素を選択します.$("p")

要素を選択します.$("p.intro")すべてのclass="intro"の

要素を選択します.$(「p#demo」)id=「demo」の最初の

要素を選択します.
エレメントセレクタの使用例を簡単に示します.

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button.btn1").click(function(){
    $("p").css("background-color","red");

  $("button#btn2").click(function(){
      $("p").css("background-color","white");
    });
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1" type="button">Click me</button>
<button id="btn2" type="button">Click me</button>
</body>

</html>

jQuery属性セレクタjQueryは、XPath式を使用して、指定された属性を持つ要素を選択します.$([href])href属性を持つすべての要素を選択します.$(「href='#'」)href値が「#」に等しいすべての要素を選択します.$(「href!='#'」)href値が「#」に等しくないすべての要素を選択します.$([.href$='.jpg'])すべてのhref値が「.jpg」で終わる要素を選択します.
jQuery CSSセレクタjQuery CSSセレクタは、HTML要素のCSS属性を変更するために使用することができる.次の例では、すべてのp要素の背景色を赤に変更します.例$(「p」)です.css("background-color","red"); より多くのセレクタインスタンス
$(this)現在のHTML要素$("p")すべての

要素$("p.intro")すべてのclass="intro"の

要素$(".intro")すべてのclass="intro"の要素$("#intro")id="intro"の最初の要素$("ulli:first")各

要素$("[href$='.jpg'])すべてが".jpg"である末尾の属性値のhref属性$(「div#intro.head」)id=「intro」の
要素のすべてのclass=「head」の要素jQueryのイベント処理を見てみましょう.jQueryはイベント処理のために特別に設計されています.jQueryイベント関数jQueryイベント処理方法は、jQueryにおけるコア関数である.イベントハンドラとは、HTMLでイベントが発生したときに呼び出されるメソッドです.用語は、イベント「トリガ」(または「励起」)によってよく使用される.通常、jQueryコードはセクションのイベント処理方法に格納されます.インスタンス
```
<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>
```
上記の例では、ボタンのクリックイベントがトリガーすると、$(「button」)という関数が呼び出される.click(function() {..some code... } ) この方法はすべての
要素:$(「p」)を隠す.hide(); 個々のファイルの関数Webサイトに多くのページが含まれており、jQuery関数を簡単に維持したい場合は、jQuery関数を独立したものに配置してください.jsファイルにあります.一般に、関数はセクションに直接追加されます.ただし、これらを別のファイルに配置すると、(srcプロパティでファイルを参照):インスタンス
```
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
```
jQuery名の競合jQueryは、jQueryの概要として$記号を使用します.Prototypeなどの他のJavaScriptライブラリの関数でも$記号が使用されています.jQueryはnoConflict()という方法を用いてこの問題を解決する.var jq=jQuery.noConflict()は、$記号の代わりに自分の名前(例えばjq)を使用するのに役立ちます.
結論:jQueryはHTMLイベントを処理するために特別に設計されているため、以下の原則に従うと、あなたのコードはより適切でメンテナンスしやすい:すべてのjQueryコードをイベント処理関数に配置し、すべてのイベント処理関数をドキュメント準備完了イベントプロセッサに配置し、jQueryコードを個別に配置する.jsファイルに名前の競合がある場合は、jQueryライブラリの名前を変更します.jQueryのイベントメソッドの例として、$(document)があります.ready(function)は、ドキュメントの準備完了イベント(ドキュメントのロードが完了するとき)に関数をバインドする$(selector).click(function)は、選択する要素のクリックイベント$(selector)に関数をトリガまたはバインドする.dblclclick(function)は、選択された要素のダブルクリックイベント$(selector)に関数をトリガまたはバインドする.focus(function)は、選択する要素の取得フォーカスイベント$(selector)に関数をトリガまたはバインドする.mouseover(function)は、選択された要素に関数をバインドするマウスサスペンションイベントをトリガーまたはバインドします.

divを水平と垂直に中央に配置

LeetCode 188株式売買のベストタイミングIV HERODINGのLeetCodeの道