ホームページ > ウェブフロントエンド > フロントエンドQ&A > Webjar に jQuery を導入する方法

Webjar に jQuery を導入する方法

WBOY
リリース: 2023-05-18 19:45:36
オリジナル
537 人が閲覧しました

WebJars は、Java 言語ライブラリをカプセル化する方法です。これにより、クライアント ライブラリ (jQuery など) が Jar パッケージにカプセル化されます。これにより、開発者は、外部ファイルを手動でダウンロードしてインポートすることなく、Maven を通じてクライアント ライブラリを管理および導入できるようになります。 WebJar のクライアント ライブラリは、Web アプリケーションのクラスパス上にあります。

Web アプリケーションに jQuery を導入するには、次の手順に従ってください:

  1. pom.xml ファイルに次の依存関係を追加します:

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.5.1</version>
    </dependency>
    ログイン後にコピー

    ここでは jQuery バージョン 3.5.1 の導入を例に説明しますが、必要に応じてバージョン番号を変更できます。

  2. Web アプリケーションの HTML ファイルに次のタグを追加します。

    <link rel="stylesheet" href="/webjars/jquery/{version}/dist/jquery.min.js">
    ログイン後にコピー

    {version} は、インポートされた jQuery バージョンに置き換えられることに注意してください。例:

    <link rel="stylesheet" href="/webjars/jquery/3.5.1/dist/jquery.min.js">
    ログイン後にコピー
  3. JavaScript ファイルでの jQuery の使用:

    $(document).ready(function() {
        console.log("jQuery is working!");
    });
    ログイン後にコピー

    または、 の代わりに短いエイリアス $ を使用することもできます。 jQuery、例:

    $(function() {
        console.log("jQuery is working!");
    });
    ログイン後にコピー

上記の手順を完了すると、Web アプリケーションは WebJars の jQuery ライブラリを使用できるようになります。 Spring Boot フレームワークを使用している場合、webjars-locator ライブラリがデフォルトで Maven に導入されているため、追加の構成は必要ありません。

他の WebJar からクライアント ライブラリを導入する必要がある場合は、上記の手順に従うこともできます。タグ内の href 属性は、インポートされたライブラリに応じて変更する必要があることに注意してください。たとえば、Bootstrap ライブラリを導入するには、次のように記述できます:

<link rel="stylesheet" href="/webjars/bootstrap/{version}/css/bootstrap.min.css">
<script src="/webjars/bootstrap/{version}/js/bootstrap.min.js"></script>
ログイン後にコピー

同時に、pom.xml にインポートの依存関係も追加する必要があります:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>5.1.0</version>
</dependency>
ログイン後にコピー

上記は次のとおりです。 WebJars を使用して Maven 環境に jQuery を導入する方法 他の環境で使用する場合は、追加の設定が必要になる場合があります。ただし、一般に、Web アプリケーションで WebJar を使用すると、クライアント ライブラリの管理と保守が簡単になり、手動でのダウンロードとインポートのトラブルを回避できます。

以上がWebjar に jQuery を導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート