发表新帖
发表新帖

How to add jQuery code into HTML Page

前端 未结
关注
6 1603
天涯浪人
天涯浪人 2020-12-05 09:51 

$(\".icon-bg\")
相关标签:
6条回答
  • 猫巷女王i
    2020-12-05 10:01

    1) Best practice is to make new javascript file like my.js. Make this file into your js folder in root directory -> js/my.js . 2) In my.js file add your code inside of $(document).ready(function(){}) scope.

    $(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) add your new js file into your 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>
    0 讨论(0)
  • 你的背包
    2020-12-05 10:01

    for latest Jquery. Simply:

    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    0 讨论(0)
  • 野的像风
    2020-12-05 10:04

    Make sure that you embedd the jQuery library into your page by adding the below shown line into your <head> block:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    0 讨论(0)
  • 庸人自扰
    2020-12-05 10:09

    Before the closing body tag add this (reference to jQuery library). Other hosted libraries can be found here

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

    And this

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

    It should look something like this

    <body>
 ........
 ........
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script> Your code </script>
</body>
    0 讨论(0)
  • 悲哀的现实
    2020-12-05 10:14

    I would recommend to call the script like this

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

    The js and css files must be treat differently

    Put jquery as the first before other JS scripts at the bottom of <BODY> tag

    • The problem caused is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname.
    • So select 2 (two) most important scripts on your page like analytic and pixel script on the <head> tags and let the rest including the jquery to be called on the bottom <body> tag.

    Put CSS style on top of <HEAD> tag after the other more priority tags

    • Moving style sheets to the document HEAD makes pages appear to be loading faster. This is because putting style sheets in the HEAD allows the page to render progressively.
    • So for css sheets, it is better to put them all on the <head> tag but let the style that shall be immediately rendered to be put in <style> tags inside <HEAD> and the rest in <body>.

    You may also find other suggestion when you test your page like on Google PageSpeed Insight

    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-05 10:25
    1. Create a file for the jquery eg uploadfuntion.js.
    2. Save that file in the same folder as website or in subfolder.
    3. In head section of your html page paste: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    and then the reference to your script eg: <script src="uploadfuntion.js"> </script>

    4.Lastly you should ensure there are elements that match the selectors in the code.

    0 讨论(0)
 看不清?
提交回复
热议问题