Home > Web Front-end > JS Tutorial > What is the difference between JS and JQUERY?

What is the difference between JS and JQUERY?

一个新手
Release: 2017-10-14 10:29:03
Original
1741 people have browsed it

①. Get elements based on ID

{

JS: What you get is a DOM object.

Example: var p = document.getElementByID("one");

JQUERY: What is obtained is a JQUERY object.

Example: var p = $("#one");——The brackets are based on something, which is equivalent to a selection. If we want to find based on the ID, the ID in the style sheet It is represented by #, so here we directly bring in the pound sign. The whole sentence means to search based on the ID of one.

}

②. Get elements according to the class. If you want to get the DOM object in the array, use the index method. If you want to get the JQUERY object, use eq()

{

JS: What is obtained is an array

Example: var p = document.ElementsByClassName("test");

JQUERY:

Example: var p = $(".test");

}

③. Get elements based on name

{

JS: Return an array

Example: var bd = document.getElementsByName(uid);

JQUERY: The method is to use square brackets, attribute = a value, there is no limit to the value must be based on name, JQUERY is based on Attribute to get the element

Example: $("[name='uid']");

}

④. Get the element based on the tag name

{

JS: The return is also an array

Example: var p = document.getElementsByTagName("p");

JQUERY: Add all p in the style sheet The style method is the same, write the tag name directly within double quotes

Example: $("p");

}

Attachment: Other value methods of JQUERY

Combination selection: var p = $("p span");——There are many combinations

************************ ************************************************

Operation content

 ①. Non-form elements (if it is text, use the text method, if it is html code, use the html method)

  {

  For example: p.text();——When there are no parameters, it is a value

   p.text("aaaa");——When there are parameters, it is an assignment

  p.html( );——When there are no parameters, it is a value

  p.html("aaaa");——When there are parameters, it is an assignment

   }

 ② .Form element

  {

   JS:p.value;——Value; p.value = xxx;——Assignment

   JUQERY:p.val(); ——Without parameters, it is a value, and with parameters, it is an assignment.

  }

**************************************** ******************************

Operation attributes

Used in JS to operate attributes The method is

p.setAttribute("","");——Set attributes and modify attributes

p.removeAttribute("");——Remove attributes and write them in quotation marks An attribute name

p.getAttribute();——Get attributes

Methods used to operate attributes in JQUERY

Add attributes: p.attr("test", "aa");——Add parameters to this attr method, the attribute name is test, and the attribute value is aa

Remove the attribute: p.removeAttr("test");——Remove the test item Attribute

Get the attribute: p.attr("test");——Just write the name of an attribute directly in the attr method

************ *************************************************** ********

Operation style

The keyword for operation style in JS is style

Example: p.style.backgroundColor = "red";— —Set the background color of this p to red

The keyword for operating styles in JQUERY is css

Example: p.css("background-color","yellow");— —Change the background color of this p to yellow. All the styles in the CSS here are exactly the same as the styles in the css style sheet without any changes

The JS method of operating styles can only obtain inline styles, not Take embedded and external! ! ! ! !

JQUERY's method of operating styles can be inline or embedded

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template