jqueryのクリーンアップ

28080 ワード
テキストリンク
Jqueryは、JavaScriptをすばやく簡単に使用できるライブラリです.
jqueryは、Webサイトの一般的な機能を提供するライブラリです.
たとえば、ボタンにマウスを置くと、ボタンの色を変更できます.
アルファベットをクリックすると、そのアルファベットは消えます.
特定の操作が実行されるとhtmlの内容が異なり、jquery実行の結果となります.
上記のタスクはすべてJSで実現できます.
それでもjqueryを使用する理由は、より速く、より簡単に実現できるからです.
しかし、最近Bootstrapはjqueryへの依存を減らすと発表しました.
Front-end分野ではjqueryの地位がかなり狭くなっていることがわかる.
しかし、jqueryに代わる高速で簡単なライブラリはこれまでありません.
jqueryの地位は簡単には下がらないと思います.

jqueryの使用方法


一般的にjqueryを使用する方法としてはcdn,直接ダウンロードしてインストールする2つの方法がある.
通常cdnを使用してドキュメントに挿入されるので、今日はcdnの使用方法について説明します.
jquery CDNはjquery、MS、GOGLEから提供されており、私は通常jqueryのホームページで掻いています.
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
上記のコードをhtmlファイルの「」タグに挿入すると有効になります.
また、上記のコードでは最新バージョンのjqueryの使用が許可されているので、バージョンxを心配する必要があります.

jqueryベース


jqueryはまずscriptタグに入ります.
JSのやり方と同じです.
<script>
  $( document ).ready( function() {
    // code ...
  } );
</script>
最初は$(document).ready(関数)で開始します.
名前の通り、ドキュメントのロードが完了すると、すべてのアクションが実行されます.
準備ができたら、code部分に必要なjqueryを入れればいいです.
jqueryの基本文法は$です.
$は、選択する要素を定義するセレクタです.
実行する関数をセレクタに適用するには、$(「セレクタ」)を入力します.関数()
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
上記の例では、選択者はpであり、実行する関数はclickである.
pをクリックすると、this=pを非表示にする関数です.
つまり、段落をクリックすると消えてしまいます.
複雑そうに見えるが、実際にやってみると面白い.

jqueryの様々な効果。


1.Hide/Show
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
名前の通り、これは遮蔽と表現の関数です.
hideとshowはbuttonクラスからなり、各ボタンを押すとすべての段落が消えて表示されます.
  • Fade 
    • <script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
    主にビデオ編集でよく使われる用語で、ぼやけた効果があります.
    上記の例では、ボタンを押すと隠されたdivが徐々に現れる効果です.
    現れる時間、効果などを指定できます.
  • Slide 
    • <script>
$(document).ready(function(){
$("#flip").click(function(){
  $("#panel").slideDown();
  });
});
</script>
    その名の通り滑る効果です
    それ以外にも効果はたくさんあります関連リンクを参照してください。

    Jquery HTML

  • GET 
    • <script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>
<body>

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
    html要素を受信する関数.
    例はalert(警告ウィンドウ)でドキュメントの内容を表します.
    だが選択者の後ろにはtext(), .html()が付いています.これは、どのコンテンツを受信するかを選択する関数です.
    .textはメールを受け取るようになります.htmlを受信します.

    これは.text()の実行結果.
    メールが届いていることがわかります.

    これは.これはhtml()の実行結果であり、html要素が受信されます.
  • ADD 
    • <script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>

</body>
    以上のコードは、既存のhtml要素に新しい要素を追加するコードです.
    よく見ると、btn 1をクリックすると、p要素にAppend textが追加されます.
    btn 2を押してOLのlistに新しいli項目を追加します.

    これが結果画面です

    Jquery Traversing


    1.親選択者
    $("선택자").parent(): // 가장 가까운 상위 노드
$("선택자").parents(parameter): // 상위 노드중 paramter를 가진 모든 노드
$("선택자").parentsuntil(parameter): // paramter를 가진 최상위 노드 직전까지 paramter를 가진 모든 상위 노드
    2.子の選択
    $("선택자").children(): // 가장 가까운 하위 노드
$("선택자").find(parameter): // parameter를 가진 하위 요소
    3.兄弟選択者
    $("선택자").siblings(): // 선택자와 같은 트리에 위치한 노드
$("선택자").next(): // 선택자 바로 다음에 위치한 형제 노드
$("선택자").nextAll(): //선택자 다음에 위치한 모든 형제 노드
$("선택자").nextUntil(): // 선택자와 같은 트리에 위치한 마지막 노드 바로 직전 형제 노드
$("선택자").prev(): // 선택자 바로 이전 형제 노드
$("선택자").prevAll(): //선택자 이전에 위치한 모든 형제 노드
$("선택자").prevUntil(): // 선택자와 같은 트리에 위치한 첫번째 노드 바로 직전 형제 노드

    整理が終わったら..。


    個人的に一番面白いと思う部分
    実際,ほとんどのコードはJSで実現できるが,コードが簡単で短いため負担が軽い.
    私は前学期Fluterでアプリケーションを作りましたが、jqueryの文法がよく分かりませんでした.
    大変ですが、受け取ったクエリーはすべてメイン開発者型で実現されています.
    当時知らなかった部分を知ったなんて...よかった!
    ソース:http://www.devkuma.com/books/pages/221
    https://www.w3schools.com/jquery
    https://jang2r.tistory.com/33
    カテゴリープルダウン機能の実装
    [C++]白俊23743号:密室脱出