What is the difference between javascript and jquery-Front-end Q&A-php.cn

Difference: 1. JavaScript is a lightweight programming language, while JQuery is a JavaScript function library; 2. js uses the DOM method to create element nodes, and jQuery can directly create DOM elements using $; 3. The methods of operating element nodes are different; 4. The methods of operating attribute nodes are different.

What is the difference between javascript and jquery

The operating environment of this tutorial: windows7 system, javascript1.8.5&&jquery1.10.0 version, Dell G3 computer.

1. The essential difference

1.JavaScript is inserted into the HTML page through the <script></script> tag and can be used by all A lightweight programming language implemented by 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 directly used by a well-known company. The advantage of CDN is that the CDNs of these large companies are relatively popular. Before users visit your website, they are likely to have cached it 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=></script>　　//Google

或者：

<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方

Copy after login

2. Differences in syntax

1. Different methods of operating element nodes

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 selector

<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

2. The methods of operating attribute nodes are different

a.JavaScript uses

getAttribute("Attribute name"), setAttribute("Attribute name", "Attribute value")

<body>
    <ul>
        <li id=>哈哈</li>
    </ul>
</body>
<script>).getAttribute().setAttribute(,　　document.getElementById("first").removeAttribute("name");
</script>

Copy after login

b.JQuery uses

.attr() to pass in a parameter to obtain, pass Enter two parameter settings

.prop()

prop and attr can both read and set the text attributes;

The difference between the two is in reading checked, disabled, etc. When the attribute name = attribute value

attr returns the attribute value or undefined. When the checked attribute is read, it will not change depending on whether it is selected.

prop returns true and false When reading the checked attribute, it will change according to whether it is selected.

That is to say, the attribute to be obtained by attr must be the attribute written on the label, otherwise it cannot be obtained.

<body>
    <ul>
        <li id="first">哈哈</li>
    </ul>
</body><script src="js/jquery.js"></script>
<script>
　　$("#first").attr("id");
　　$("#first").attr("name","nafirst");　　$("#first").removeAttr("name");
　　$("#first").prop("id"); 　　$("#first").prop("name","nafirst"); 　　$("#first").removeProp("name");
</script>

Copy after login

3. Different methods of operating text nodes

a.JavaScript uses

innerHTML: Get or set a node HTML code, you can get css, return it in the form of text

innerText: Get or set the HTML code of a node, you can't get css

value: Get input[type= 'text']Input text

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script>
    document.getElementById("serven_times").innerHTML;
    document.getElementById("serven_times").innerHTML = "<span style=&#39;color: #ff3a29&#39;>呵呵</span>";
    document.getElementById("eight_times").innerText;
    document.getElementById("eight_times").innerText = "啦啦";
    document.getElementById("input").value;
</script>

Copy after login

b.JQuery uses

.html() to get or set the html code in the node
.text() Get or set the text in the node
.val() Get or set the value attribute value of the input

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script src="/js/jquery.min.js"></script>
<script>
    $("#serven_times").html();
    $("#serven_times").html("<span style=&#39;color: #ff3a29&#39;>呵呵</span>");
    $("#eight_times").text();
    $("#eight_times").text("啦啦");
    $("#input").val();
    $("#input").val("哈哈");
</script>

Copy after login

4. There are different ways to operate css styles

JavaScript:

* 1.使用setAttribute设置class和style
*   document.getElementById("first").setAttribute("style","color:red");
* 2.使用.className添加一个class选择器
*   document.getElementById("third").className = "san";
* 3.使用.style.样式直接修改单个样式。注意样式名必须使用驼峰命名法
*   document.getElementById("four_times").style.fontWeight = "900";
* 4.使用.style或.style.cssText添加一串行级样式：
*   document.getElementById("five_times").style = "color: blue;";//IE不兼容
*   document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";

Copy after login

JQuery:

$("#p2").css("color","yellow");

$("#p2").css({
    "color" : "white",
    "font-weight" : "bold",
    "font-size" : "50px",
});

Copy after login

5. Manipulate hierarchical nodes

JavaScript:

*1.childNodes：获取当前节点的所有子节点（包括元素节点和文本节点）
*  children：获取当前节点的所有元素子节点（不包括文本节点）
*2.parentNode:获取当前节点的父节点
*3.firstChild:获取第一个元素节点，包括回车等文本节点
*  firstElementChild:获取第一个元素节点，不包括回车节点
*  lastChild、lastElementChild 同理
*4.previousSibling：获取当前元素的前一个兄弟节点
*  previousElementSibling：：获取当前元素的前一个兄弟节点
*  nextSibling、nextElementSibling

Copy after login

JQuery:

1. Provides a large number of selectors:

:first-child
:first-of-type^1.9
:last-child
:last-of-type^1.9
:nth-child
##:nth-last-child()
1.9
:nth-last-of-type()
1.9
1.9
1.9

##parent()　
siblings()

6. Bind an event to a node

JavaScript:

Used the Dom0 event model and Dom2 event model. For details, please see my previous blog

JQuery:

①.

Shortcut to event binding

<body>
    <button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
     $("button:eq(0)").click(function () {
        alert(123);
     });</script>

Copy after login

　②: Use on for event binding

<body>
    <button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
    //①使用on进行单事件的绑定
     $("button:eq(0)").on("click",function () {
        alert(456);
    });
     //②使用on同时给同一对象绑定多个事件
    $("button:eq(0)").on("click dblclick mouseover",function () {
        console.log(123);
    });
    //③使用on，给一个对象绑定多个事件
    $("button:eq(0)").on({
        "click":function () {
            console.log("click");
        },
        "mouseover":function () {
            console.log("mouseover");
        },
        "mouseover":function () {
            console.log("mouseover2");
        }
    });
    //④使用on给回调函数传参，要求是对象格式，传递的参数可以在e.data中取到；jquery中的e只能通过参数传进去，不能用window.event
    $("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
        console.log(e);
        console.log(e.data);
        console.log(e.data.name);
        console.log(e.data.age);
        console.log(window.event);//js中的事件因子

    });
    
</script>

Copy after login

7. The difference between JQuery’s document ready function and window.onload

*①.window.onload必须等待网页资源（包括图片等）全部加载完成后，才能执行；
*      而文档就绪函数只需要等到网页DOM结构加载完成后，即可执行
*②.window.onload在一个页面中，只能写一次，写多次会被最后一次覆盖
*      而文档就绪函数在一个页面中可以有N个

Copy after login

3. The methods of JavaScript objects and JQuery objects cannot be mixed.

1.JavaScript object and JQuery object

① 使用$("")取到的节点为JQuery对象，只能调用JQuery方法，不能调用JavaScript方法；
*      $("#p").click(function(){})√
*      $("#p").onclick = function(){}× 使用JQuery对象调用JavaScript方法
*
*      同理，使用、document.getElement系列函数取到的对象为JavaScript对象，也不能调用JQery函数

Copy after login

2.JavaScript object and JQuery object mutual conversion

*① JQuery --->  JavaScript :使用get(index)或者[index]选中的就是JavaScript对象
*  $("p").get(0).onclick = function(){}
*  $("p").[0].onclick = function(){}
* ② JavaScript ---> JQuery :使用$()包裹JavaScript对象        (我们发现JQuery不管获得几个对象都是一个数组，可以直接给整个数组都添加某一事件)
*  var p = document.getElementById("p");
*  $(p).click(function(){});

Copy after login

【推荐学习：javascript高级教程】

The above is the detailed content of What is the difference between javascript and jquery. For more information, please follow other related articles on the PHP Chinese website!