What are the differences between jquery and javascript?-JS Tutorial-php.cn

What are the differences between jquery and javascript?

coldplay.xixi

Release： 2023-01-04 09:35:41

Original

6303 people have browsed it

The difference between jquery and javascript: 1. js is inserted into the HTML page through the [<script>] tag, while JQuery is a JavaScript function library; 2. js uses the getElement series, while JQuery uses [$()] Package selector. </p></blockquote> <p><img src="https://img.php.cn/upload/article/202104/09/2021040914272277637.jpg" alt="What are the differences between jquery and javascript?" ></p> <p>The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer. </p> <p><strong>The difference between jquery and javascript: </strong></p> <p><strong>1. The essential difference</strong></p> <p>1.JavaScript passes<script&gt The ;</script> tag is inserted into HTML pages, a lightweight programming language that can be executed by all modern browsers.

2.JQuery is a JavaScript function library. In other words, it is the most popular framework in JavaScript.

To use JQuery, you must first add a reference to the jQuery library at the beginning of the HTML code, for example:
<script src="js/jquery.min.js"></script>
Copy after login
The library file can be placed locally, or you can directly use the CDN of a well-known company. Advantages The CDNs of these large companies are more popular. Before users visit your website, it is likely that it has been cached in the browser when visiting other websites, so it can speed up the opening speed of the website. Another benefit is obvious, saving website traffic bandwidth. For example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google
Copy after login
or:
<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方　
Copy after login
2. Syntax differences
Operation element node
a. JavaScript uses
getElement series, query series
<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script>
　　document.getElementById("first");　　　　　　　　//是一个元素
　　document.getElementsByClassName("cls");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByName("na");　　　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByTagName("li");　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.querySelector("#div");　　　　　　　　//是一个元素 
　　document.querySelectorAll("#div li");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
</script>
Copy after login
b.JQuery uses
a large number of selectors and uses $() to wrap the selection Device
<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>
　　//使用JQuery取到的是jquery对象都是一个数组，即使只有一个元素被选中,但是在使用时候不一定需要使用:eq(0)来拿到这一个在使用可以直接使用
    $("#first");　　　　　　　　　　　　
    $(".cls");
    $("li type[name=&#39;na&#39;]");
    $("li");
    $("#div");
    $("#div li");
</script>
Copy after login
Related free learning recommendations: javascript learning tutorial
The above is the detailed content of What are the differences between jquery and javascript?. For more information, please follow other related articles on the PHP Chinese website!