ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery の概要 1_jquery

jQuery の概要 1_jquery

WBOY
WBOYオリジナル
2016-05-16 18:54:15934ブラウズ

jQuery コンストラクター
JQuery の利点
○ 小さいサイズ (v1.2.3 15kb)
○ 豊富な DOM セレクター (CSS1-3 XPath) ○ クロスブラウザー (IE6、FF、Safari、Opera)
○ チェーンcode
◦強力なイベントとスタイルのサポート
◦強力な AJAX 機能
◦拡張が簡単で豊富なプラグイン
jQuery のコンストラクターは 4 種類のパラメーターを受け取ります。
1 . )
2. jQuery(html)
3. jQuery(elements)
4. jQuery(fn)
最初の式は (ID、DOM 要素名、CSS 式、XPath 式) に基づいています。 ) はドキュメント内の要素を検索し、それらを jQuery オブジェクトにアセンブルして返します。
デモ:



jQuery の基本
.selected
{
背景色:黄色 }



  • jQuery コンストラクター


  • jQuery(expression,context)

  • jQuery(html)

  • jQuery(elements)


jQuery(fn)






  • 以下の jQuery コードを末尾に追加しますスクリプト ブロック内:
  • jQuery('ul>li:first').addClass("selected");
    ここで、$ が使用されている場合は、jQuery() をショートカット $() に置き換えることができます。他のオブジェクトでは、jQuery.noConflict() 関数を使用してショートカットをキャンセルできます。
  • 「ul>li:first」では、ul>li は ul の下にあるすべての li 要素 (CSS 式、ul/li は XPath モードで使用できます) を表し、:first はそれらの最初の要素を表します。 addClass() は、CSS スタイル クラスを追加するために jQuery オブジェクトによって使用される関数であり、その反対の関数は、removeClass() です。
  • 次のコードを追加します:
    $('ul').append($('
    new item
    '));
    where $('
    new item
    ') 文字列を DOM オブジェクトに変換し、append() 関数を通じて ul オブジェクトの末尾に追加します。
    次:
    $(document).ready(function(){
    $('ul').css('color','red');
    }); jQuery コンストラクターは、ドキュメントや jQuery オブジェクトなどの DOM オブジェクトを直接渡すこともできます (もちろん意味はありません)。 ready() 関数はイベント処理関数をドキュメントに追加し、ul の色を赤に設定します。
    $(document).ready() には多くのアプリケーション シナリオがあるため、$(fn) で直接置き換えることができます。ここで、fn は処理関数を表します。 (ready処理関数はドキュメントコンテンツの読み込み後に実行されるようです。他の画像などの関連リソースの読み込みを待つ必要がないため、loadイベントよりも先に実行されます。 $(function( ){ alert('welcome to jQuery'); }); 上記のコードの効果は、ページがロードされるとすぐにダイアログ ボックスが表示されることです。
    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。