Is jquery javascript?-Front-end Q&A-php.cn

jquery is not javascript. JavaScript is an interpretive scripting language, and jquery is a JavaScript function library, a framework written based on the JavaScript language; and there are many differences in syntax between the two.

Is jquery javascript?

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

jquery is not javascript.

javascript is an interpretive scripting language, and jquery is a JavaScript function library, a framework written based on JavaScript language

To use JQuery, you must first put it at the front of the HTML code Add a reference to the jQuery library, 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. The advantage is that the CDN of these large companies is more popular, and users will not be able to access your website for a long time. It may have been cached in the browser when visiting other websites, so it can speed up the opening 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
或者：
<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方

Copy after login

There are many differences in syntax between jquery and javascript

1. Manipulate 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. Manipulate attribute nodes

##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 one parameter to get, and to pass in two parameters to set

.prop()

prop and attr can both read and set text attributes;

The difference between the two is when reading attributes such as checked, disabled, etc. whose attribute name = attribute value

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

prop returns true and false. When the checked property is read, it will change depending on 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. Operation text node

a.JavaScript usage

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

innerText: Get or set the HTML code of a node HTML code, cannot get css

value: Get the text entered by input[type='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 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. When operating css styles

JavaScript:

1. Use setAttribute to set class and style

document.getElementById("first").setAttribute("style","color:red");

Copy after login

2. Use .className to add A class selector

document.getElementById("third").className = "san";

Copy after login

3. Use .style.style to directly modify a single style. Note that the style name must use camel case

document.getElementById("four_times").style.fontWeight = "900";

Copy after login

4. Use .style or .style.cssText to add a serial-level style:

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. Operating hierarchy 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-type1.9
:last-child
:last-of-type1.9
:nth-child
:nth-last-child ()1.9
:nth-last-of-type()1.9
:nth-of-type()1.9
:only-child
:only-of-type

2. In addition The corresponding function is provided:

first()
last()
children( )
parents()
parent()
siblings()

6. Bind an event to a node

JavaScript:

Using Dom0 event model and Dom2 event Model, please see my last blog for details

JQuery:

　①.

Shortcut for 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

[Related recommendations:

javascript learning tutorial】

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