jQuery言語のエッセンス_html/css_WEB-ITnose

1. jQuery は JavaScript 関数ライブラリです。

  jQuery 库包含以下特性：1.HTML 元素选取2.HTML 元素操作3.CSS 操作4.HTML 事件函数5.JavaScript 特效和动画6.HTML DOM 遍历和修改7.AJAX(**Asynchronous JavaScript and XML**    译为（异步的[JavaScript](https://zh.wikipedia.org/wiki/JavaScript)与[XML](https://zh.wikipedia.org/wiki/XML)技术）)8.Utilities(实用工具,设备)

11.jpg

• jQ 構文は XPath (XML パス言語、XML 文書内の情報を検索するための言語) と CSS セレクター構文の組み合わせです
• jQuery 基本構文 $(selector).action() インスタンス $(this).hide()-hide 現在の要素
• ドキュメント準備関数

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

  も可能です

  $(function(){})

  • jQuery セレクター
    • 要素セレクター (css) 1.$("p") b4192ae337f42f0f8239f1d9425c7be0 要素を選択します。 3.$("p#demo") は、id="demo" を持つすべての bc8040711cf23fb09d95fda2b39dea8d 要素を選択します。
    • 属性セレクター (XPath)1.$("[href]") は、href 属性を持つすべての要素を選択します。 2.$("[href='#']") は、href 値が「#」に等しいすべての要素を選択します。 3.$("[href!='#']") は、href 値が "#" に等しくないすべての要素を選択します。 4.$("[href$='.jpg']") は、href 値が ".jpg" で終わるすべての要素を選択します。

• jQuery 名の競合の削除 (カスタム名)

  jQuery は、jQuery を導入する方法として $ 記号を使用します。他の一部の JavaScript ライブラリ (Prototype など) の関数でも $ 記号が使用されます。 jQuery は、この問題を解決するために noConflict() というメソッドを使用します。 var jq=jQuery.noConflict() は、$ 記号の代わりに独自の名前 (jq など) を使用するのに役立ちます。

2.jQ エフェクト

• 非表示/表示構文 Hide()、show().toggle() 構文

  $(selector).hide(speed,callback);$(selector).show(speed,callback);$(selector).toggle(speed,callback);

  例

  $("button").click(function(){  $("p").toggle();});

  オプションの速度パラメータは、非表示/表示の速度を指定し、「遅い」、「速い」、またはミリ秒の値を取ることができます。オプションのコールバック パラメータは、非表示または表示が完了したときに実行される関数の名前です。 toggle は表示/非表示の遷移
• fadeIn()、fadeOut()、fadeToggle()、fadeTo() fadeTo() 構文

  $(selector).fadeTo(speed,opacity,callback);

  残りの 3 つshow/hide と同じ
• Slide slideDown()、slideUp()、slideToggle() show/hide と同じ構文
• 効果 - アニメーション (作成可能)カスタム定義アニメーションの) animate() 構文 $(selector).animate({params},speed,callback);params パラメータはアニメーションを形成する CSS プロパティを定義します複数の属性アニメーション インスタンスを定義します

  $("button").click(function(){$("div").animate({  left:'250px',  opacity:'0.5',  height:'150px',  width:'150px'});});

  注: キャメルケースを使用します。 カラー アニメーションを作成するには、カラー アニメーション プラグインをダウンロードする必要があります。
• アニメーションの停止 (アニメーションやエフェクトが完了する前に停止するメソッド) stop() 構文 $(selector) .stop(stopAll,goToEnd); オプション stopAll パラメータは、アニメーション キューをクリアするかどうかを指定します。デフォルトは false で、アクティブなアニメーションのみを停止し、キューに入れられたアニメーションを逆方向に実行できます。オプションの goToEnd パラメーターは、現在のアニメーションをすぐに完了するかどうかを指定します。デフォルトは false です。したがって、デフォルトでは、stop() は選択した要素に指定されている現在のアニメーションをクリアします。
• 連鎖構文 $("#p1").css("color","re​​d").slideUp(2000).slideDown(2000); 例

  $("#p1").css("color","red").slideUp(2000).slideDown(2000);

3.jQuery HTML

• コンテンツと属性の取得 text()、html()、val()

  text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值

  インスタンス

  $("#btn1").click(function(){alert("Text: " + $("#test").text());});$("#btn2").click(function(){alert("HTML: " + $("#test").html());});$("#btn1").click(function(){alert("Value: " + $("#test").val());});

• コンテンツと属性の設定

  text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值

  例

  $("#btn1").click(function(){$("#test1").text("哈哈!");});$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){$("#test3").val("你好");});

• 要素の追加

  append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容

  例 $("p").append("Some appended text.");
• 要素の削除remove() - 選択した要素 (およびその要素を削除します) sub-elements) empty() - 選択した要素からサブ要素を削除します。 構文は上記と同じです。
• CSS クラスを取得および設定します。 addClass() - 選択した要素に 1 つ以上のクラスを追加します。removeClass() -選択した要素から削除する 1 つ以上のクラスを削除する要素を選択します toggleClass() - 選択した要素に対して追加/削除クラス切り替え操作を実行します css() - スタイル属性を設定または返します
• css() メソッドの例 $ ("p") .css("background-color"," yellow");
• サイズ

  通过 jQuery，很容易处理元素和浏览器窗口的尺寸。jQuery 尺寸 方法width()设置或返回元素的宽度（不包括内边距、边框或外边距）。height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。innerWidth()方法返回元素的宽度（包括内边距）。innerHeight()方法返回元素的高度（包括内边距）。outerWidth()方法返回元素的宽度（包括内边距和边框）。outerHeight()方法返回元素的高度（包括内边距和边框）。

  インスタンス

  $("button").click(function(){  var txt="";  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";  txt+="Outer height: " + $("#div1").outerHeight();  $("#div1").html(txt);});

4. トラバーサル

• トラバーサル

  トラバーサル ダイアグラム

• 祖先parent()、parents()、parentsUntil()

  parent() 方法返回被选元素的直接父元素。parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

  いずれかのインスタンス

  $(document).ready(function(){    $("span").parents("ul");});

• 子孫の子( ),find()

  children() 方法返回被选元素的所有直接子元素。find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

  インスタンス

  $(document).ready(function(){$("div").children("p.1");});

• 兄弟(),next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil( )

  siblings() 方法返回被选元素的所有同胞元素。next() 方法返回被选元素的下一个同胞元素。nextAll() 方法返回被选元素的所有跟随的同胞元素。nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

  instance

  $(document).ready(function(){  $("h2").siblings("p");});

• first()、last()、eq()、filter()、not() をフィルタリングすることで、次のことが可能になります。に基づいて一連の要素をフィルタリングして、特定の要素を選択します。例

  $(document).ready(function(){$("div p").first();});

  filter() と not() を使用すると、指定した基準に一致する要素、または一致しない要素を選択できます。例

  $(document).ready(function(){  $("p").not(".intro");});