ホームページ  >  記事  >  ウェブフロントエンド  >  jquery クラスライブラリとは何ですか?

jquery クラスライブラリとは何ですか?

青灯夜游
青灯夜游オリジナル
2022-05-24 15:38:5212479ブラウズ

jquery は、JavaScript でカプセル化されたクラス ライブラリです。 jQuery は、JS 開発や DOM 操作を簡素化するために開発されたクラス ライブラリで、一般的に使用される関数コード (関数) を JS でカプセル化し、シンプルな JS デザイン モードを提供し、HTML ドキュメント操作、イベント処理、およびアニメーション デザインを最適化します。等

jquery クラスライブラリとは何ですか?

このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery は、JavaScript でカプセル化されたクラス ライブラリです。

JavaScript 開発または DOM 操作を簡素化するために、いくつかの JavasScript ライブラリが誕生しました。

JavaScript ライブラリは、多くの事前定義されたオブジェクトとユーティリティ関数をカプセル化します。

これは、ユーザーが対話が難しい Web2.0 機能を備えたリッチ クライアント ページを作成するのに役立ち、主要なブラウザーと互換性があります。

jQuery は、Prototype に続くもう 1 つの優れた JavaScript ライブラリです。

jQuery の哲学: 「書く量を減らし、多くのことを行う」。

jQuery は、一般的な JavaScript 関数コードをカプセル化し、シンプルな JavaScript 設計パターンを提供し、HTML ドキュメント操作、イベント処理、アニメーション設計、および Ajax インタラクションを最適化します。

jQuery ライブラリには、コア ライブラリ、UI、プラグイン、および jQuery Mobile モジュールが含まれています。

jQuery は、強力なセレクター、チェーン操作、優れたブラウザー互換性により、HTML ページへのアクセスと更新、DOM 操作、イベント処理、アニメーションの実行などの操作を大幅に簡素化します。

jQuery 設計の目的は、「Write Less, Do More」です。これは、記述するコードを減らし、より多くのことを実行することを意味します。

jQuery のコア機能は次のように要約できます: 独自のチェーン構文と短く明確な多機能インターフェイスを備え、効率的で柔軟な CSS セレクターを備え、CSS セレクターを拡張できます。便利なプラグイン拡張機構と豊富なプラグインを備えています。 jQuery は、IE 6.0、FF 1.5、Safari 2.0、Opera 9.0 などのさまざまな主流ブラウザと互換性があります。

#jQuery バージョン

    #1.xx.x バージョン: 現在市場にあるほぼすべてのブラウザと互換性があります
  • ##2.xx.x バージョン: 当初は IE ブラウザと互換性がなくなり、後に IE6/7/8 バージョンと互換性がなくなるように変更されました
  • 3.xx.x バージョン:IE6/7/8非対応
ファクトリ関数

ファクトリ関数をエントリとして使用する場合jQuery 操作のポイント、パス この関数は、ページ要素の検索、DOM オブジェクトの jQuery オブジェクトへのパッケージ化、ページ要素の作成などの機能を実現できます。

ファクトリ関数を記述する 2 つの方法:

$()

    jQuery()
  • 説明: 「$」記号と「jQuery」という単語は同じ意味を持ち、これは jQuery コア ライブラリの規則です。
  • window.jQuery = window.$ = jQuery;
コード:

        //DOM操作(返回DOM对象) - 获取页面中的按钮元素
        var but = document.getElementById('but1');
        // var but2 = document.getElementById('but2');
        console.log(but);


        /*
            jQuery操作 - 获取页面中的按钮元素
            jQuery() - 称为jQuery的工厂函数
              作用 - 该函数是jQuery的一个入口
                1.用于定位页面元素
              用法 - 另一种用法是'$()'
              返回值 - jQuery对象
        */
        var but = jQuery('#but');
        // var but2 = $('#but');
        console.log(but)

効果:


jquery クラスライブラリとは何ですか?##DOM オブジェクトと jQuery オブジェクト

jQuery オブジェクト

いわゆる jQuery オブジェクトは、DOM オブジェクトによってカプセル化されたオブジェクトを指します。 つまり、jquery オブジェクトの基礎となるロジックは依然として DOM オブジェクトです。 jQuery オブジェクトは、DOM オブジェクトに基づいて新しいオブジェクトにカプセル化されており、一連のプロパティとメソッドを提供します

jQuery 規約

DOM オブジェクト、jQuery オブジェクト、jQuery で定義されたオブジェクトの前に「$」を追加することに同意します。これは必須ではありません。

 //jQuery操作 - 返回变量增加一个前缀“$”
        var $but = jQuery('#but');
        var $but = $('#but');

DOM オブジェクトと jQuery オブジェクト

1. DOM オブジェクトを jQuery オブジェクトに変換する - ファクトリ関数

	var but = document.getElementById('but1');
        //将DOM对象转换为jQuery对象 - 工厂函数
        var $but = jQuery(but);
        console.log($but);
2. jQuery オブジェクトを DOM オブジェクトに変換する

jQuery オブジェクトは配列のようなオブジェクトです - jQuery オブジェクト [インデックス値]

jQuery オブジェクトは get(index) メソッドを提供します - インデックスはインデックス値を表します
  • 	/*
                将jQuery对象转换为DOM对象
                    jQuery对象是一个类数组对象 - jQuery对象[索引值]
                    jQuery对象提供了get(index)方法 - index表示索引值
            */
    
            var but1 = $but[0];
            console.log(but1);
            var but2 = $but.get(0);
            console.log(but2);
  • 【推奨学習:
  • jQuery ビデオ チュートリアル
Web フロントエンド ビデオ

]

以上がjquery クラスライブラリとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。