Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the grammatical differences between jquery and javascript". In daily operation, I believe many people have doubts about the grammatical differences between jquery and javascript. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the grammatical differences between jquery and javascript?" Next, please follow the editor to study!

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

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, while jquery is a JavaScript function library, which is a framework based on JavaScript.

The first thing to use JQuery is to add a reference to the jQuery library at the beginning of the HTML code, such as:

Library files can be placed locally, or you can directly use the CDN of well-known companies, the advantage is that the CDN of these large companies is more popular, users are likely to be cached in the browser when visiting other websites before visiting your website, so it can speed up the opening of the website. Another benefit is obvious, saving the traffic bandwidth of the site. For example:

/ / Google or: / / jQuery official jquery and javascript have many differences in syntax. Operation element node

A.JavaScript usage

GetElement series, query series

Ha heh he / / is an array, even if there is only one element, you need to use [0] to get the first one and then use document.getElementsByName ("na"); / / is an array, even if there is only one element, you need to use [0] to get the first and then use document.getElementsByTagName ("li") / / is an array, even if there is only one element, you need to use [0] to fetch the first one and then use document.querySelector ("# div"); / is an element document.querySelectorAll ("# div li"); / / is an array, even if there is only one element, you need to use [0] to fetch the first and then use it.

B.JQuery usage

A large number of selectors use the $() package selector at the same time

Haha ha ha heh hehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehe (".cls"); $("li type [name = 'na']"); $("li"); $("# div"); $("# div li")

two。 Operation attribute node

A.JavaScript usage

GetAttribute ("attribute name"), setAttribute ("attribute name", "attribute value")

Haha). GetAttribute (). SetAttribute (, document.getElementById ("first"). RemoveAttribute ("name")

B.JQuery usage

.attr () passes in a parameter acquisition and two parameter settings

.prop ()

Prop can read and set the properties of text as well as attr.

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

Attr returns the property value or undefined, which does not change according to whether the checked property is selected or not when the property is read

Prop returns true and false. When reading the checked property, it will change depending on whether it is selected or not.

That is to say, the attribute to be fetched by attr must be the attribute specified on the tag, otherwise it cannot be fetched.

Haha $("# first"). Attr ("id"); $("# first"). Attr ("name", "nafirst"); $("# first"). RemoveAttr ("name"); $("# first"). Prop ("id"); $("# first"). Prop ("name", "nafirst"); $("# first"). RemoveProp ("name")

3. Manipulate text nodes

A.JavaScript usage

InnerHTML: get or set the HTML code of a node. You can get css and return it in the form of text.

InnerText: get or set the HTML code of a node, but not the css

Value: fetch the text entered by input [type = 'text']

Name: document.getElementById ("serven_times") [xss_clean]; document.getElementById ("serven_times") [xss_clean] = "hehe"; document.getElementById ("eight_times"). InnerText; document.getElementById ("eight_times"). InnerText = "la"; document.getElementById ("input"). Value

B.JQuery usage

.html () gets or sets the html code in the node

.text () gets or sets the text in the node

Val () gets or sets the value of the value attribute of input

Name: $("# serven_times"). Html (); $("# serven_times"). Html ("hehe"); $("# eight_times"). Text (); $("# eight_times"). Text ("la"); $("# input"). Val (); $("# input"). Val ("")

4. When manipulating the css style

_ JavaScript:

1. Use setAttribute to set class and style

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

2. Add a class selector using .className

Document.getElementById ("third") .className = "san"

3. Use .style. Style modifies a single style directly. Note that style names must use hump nomenclature

Document.getElementById ("four_times") .style.fontWeight = "900"

4. Add a string-level style using .style or .style.cssText:

Document.getElementById ("five_times") .style = "color: blue;"; / / IE is not compatible with document.getElementById ("six_times"). Style.cssText = "color: yellow;font-size: 60px;"

JQuery:

("# p2"). Css ("color", "yellow"); $("# p2"). Css ({"color": "white", "font-weight": "bold", "font-size": "50px",}); 5. Operation hierarchy node

_ JavaScript:

* 1.childNodes: get all the children of the current node (including element nodes and text nodes) * children: get all the element children of the current node (excluding text nodes) * 2 [xss_clean]: get the parent of the current node * 3.firstChild: get the first element node, including enter and other text nodes * firstElementChild: get the first element node Does not include carriage return nodes * lastChild and lastElementChild * 4.previousSibling: get the previous sibling node of the current element * previousElementSibling:: get the previous sibling node of the current element * nextSibling, nextElementSibling

JQuery:

1. A large number of selectors are provided:

: 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

two。 In addition, the corresponding functions are also provided:

First ()

Last ()

Children ()

Parents ()

Parent ()

Siblings ()

6. Bind an event to a node

_ JavaScript:

Dom0 event model and Dom2 event model are used. See my last blog for details.

JQuery:

1. Shortcut to event binding

Button $("button:eq (0)") .click (function () {alert (123);})

②: using on for event binding

Button / / ① uses on to bind single event $("button:eq (0)") .on ("click", function () {alert (456);}); / / ② uses on to bind multiple events to the same object at the same time $("button:eq (0)") .on ("click dblclick mouseover", function () {console.log (123);}) / / ③ uses on to bind multiple events to an object $("button:eq (0)") .on ({"click": function () {console.log ("click");}, "mouseover": function () {console.log ("mouseover") }, "mouseover": function () {console.log ("mouseover2");}}); / / ④ uses on to pass parameters to the callback function in object format, and the passed parameters can be obtained in e.data E in jquery can only be passed through parameters, not 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)) / / event factor in js}); at this point, the study on "what are the grammatical differences between jquery and javascript" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.