web-dev-qa-db-ja.com

jQueryコードをHTMLページに追加する方法

$(".icon-bg").click(function () {
    $(".btn").toggleClass("active");
    $(".icon-bg").toggleClass("active");
    $(".container").toggleClass("active");
    $(".box-upload").toggleClass("active");
    $(".box-caption").toggleClass("active");
    $(".box-tags").toggleClass("active");
    $(".private").toggleClass("active");
    $(".set-time-limit").toggleClass("active");
    $(".button").toggleClass("active");
});

$(".button").click(function () {
    $(".button-overlay").toggleClass("active");
});

$(".iconmelon").click(function () {
    $(".box-upload-ing").toggleClass("active");
    $(".iconmelon-loaded").toggleClass("active");
});

$(".private").click(function () {
    $(".private-overlay").addClass("active");
    $(".private-overlay-wave").addClass("active");
});

誰でも助けることができますか？ http://codepen.io/iremlopsum/pen/YPWPap で見つけたアップロード機能用です。私のウェブサイトに入れようとしています

javascriptjqueryhtmlweb
27
justin_graham92

1）ベストプラクティスは、my.jsのような新しいjavascriptファイルを作成することです。このファイルをルートディレクトリのjsフォルダー-> js/my.jsに作成します。 2）my.jsファイルで、$（document）.ready（function（）{}）スコープ内にコードを追加します。

$(document).ready(function(){
    $(".icon-bg").click(function () {
        $(".btn").toggleClass("active");
        $(".icon-bg").toggleClass("active");
        $(".container").toggleClass("active");
        $(".box-upload").toggleClass("active");
        $(".box-caption").toggleClass("active");
        $(".box-tags").toggleClass("active");
        $(".private").toggleClass("active");
        $(".set-time-limit").toggleClass("active");
        $(".button").toggleClass("active");
    });

    $(".button").click(function () {
        $(".button-overlay").toggleClass("active");
    });

    $(".iconmelon").click(function () {
        $(".box-upload-ing").toggleClass("active");
        $(".iconmelon-loaded").toggleClass("active");
    });

    $(".private").click(function () {
        $(".private-overlay").addClass("active");
        $(".private-overlay-wave").addClass("active");
    });
});

3）新しいjsファイルをhtmlに追加します

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</head>
23
nikssa23

終了bodyタグの前にこれを追加します（jQueryライブラリへの参照）。他のホストされたライブラリを見つけることができます here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

この

<script>
  //paste your code here
</script>

このように見えるはずです

<body>
 ........
 ........
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script> Your code </script>
</body>
13
Aravind Bharathy

このようなスクリプトを呼び出すことをお勧めします

...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</body>

Jsファイルとcssファイルは異なる方法で処理する必要があります

JS scriptsタグの一番下にある<BODY>の前に最初にjqueryを置く（

  • 発生する問題は、それらが並行ダウンロードをブロックすることです。 HTTP/1.1 specificationは、ブラウザがホスト名ごとに2つ以下のコンポーネントを並行してダウンロードすることを示唆しています。
  • したがって、<head>タグの分析およびピクセルスクリプトなど、ページで最も重要な2つのスクリプトを選択し、jqueryを含む残りを<body>タグで呼び出すようにします。

CSS styleタグを他の優先タグの後に<HEAD>タグの上に置く

  • スタイルシートをドキュメントHEADに移動すると、ページの読み込みが速くなります。これは、スタイルシートをHEADに配置すると、ページを徐々にレンダリングできるためです。
  • cssシートの場合は、<head>タグにすべて配置することをお勧めしますが、すぐにレンダリングされるスタイルを<style>内の<HEAD>タグに配置し、残りは<body>にあります。

Google PageSpeed Insight のようにページをテストするときに、他の提案を見つけることもできます。

9
Chetabahana
  1. Jquery用のファイルを作成します（例：uploadfuntion.js）。
  2. そのファイルをWebサイトと同じフォルダーまたはサブフォルダーに保存します。
  3. HTMLページのheadセクションに貼り付け：<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

次に、スクリプトへの参照。例：<script src="uploadfuntion.js"> </script>

4.最後に、コード内のセレクターに一致する要素があることを確認する必要があります。

4
Rinus

最新のJquery用。単に：

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
0
mpalencia