jquery Basic Application

What is JQuery?

jquery is a library of JavaScript functions.

jquery is a lightweight "write less, do more" JavaScript library.

The jquery library contains the following features:

• HTML element Selection
• HTML element manipulation
• CSS actions
• HTML Event functions
• JavaScript Effects and animations
• HTML DOM Traversal and modification
• Ajax
• Utilities

Tip: In addition to this, jquery offers a number of plugins.

JqueryGrammar

• Dollar sign definition JQuery
• Selector (selector) "Query" and "find" HTML elements
• JQuery Action () performs an operation on an element

1, you must first import the Jquery,x.x.x.js file using jquery
Selectors in the 2,jquery:
$ ("selector"). function ();
①$ is the abbreviation for jquery, which means that jquery ("selector") can be used. function ();
② selector, which can be any CSS-supported selector

element Selector

The JQuery element selector selects elements based on the element name.

Select all <p> elements in the page:

$ ("P")

Instance

After the user taps the button, all <p> elements are hidden:

$ (document). Ready (function () {  $ ("button"). Click (function () {    $ ("P"). Hide ();  });

#id Selector

The JQuery #id selector selects the specified element through the id attribute of the HTML element.

The ID of the element in the page should be unique, so you need to select a unique element in the page by #id selector.

Select the element syntax by ID as follows:

$ ("#test")

Instance

When the user taps the button, the element with the id= "test" attribute will be hidden:

$ (document). Ready (function () {  $ ("button"). Click (function () {    $ ("#test"). Hide ();  });

. class Selector

The JQuery class selector can find elements through the specified class.

The syntax is as follows:

$ (". Test")

Instance

All elements with the class= "test" attribute are hidden after the user taps the button:

$ (document). Ready (function () {  $ ("button"). Click (function () {    $ (". Test"). Hide ();  });});

3, document-ready function to prevent the jquery code from running before the document is fully loaded,

$ (document). Ready (function () {         jquery code});

Abbreviated form:

$ (function () {});

"Document-ready functions and Window.onload differences"
①window.onload must wait until all content in the Web page has finished executing before the code is loaded. (including images, videos and other resources)
The document-ready function allows you to execute code only after the page DOM structure has finished loading.
②window.onload can only write one, write multiple will only execute the last one.
The document can be written in more than one virtual function and will not be overwritten.

4, native JS object and jquery Object
① uses $ ("") to select the JQuery object, only the function of jquery can be called, and the event and function of the element JS cannot be used

$ ("#p"). click;√$ ("#p"). onclick = function () {}x

Explanation: $ ("#p") is a jquery object: The onclick is the native JS event
Similarly: using Document.getelement to get a native JS object, you cannot use jquery-related functions.
② Native JS object to jquery Object
You can use $ () to wrap a native JS object and convert it to a jquery object.

var p = document.getelementbytagname ("P");

$ (P). Click (); √ The native JS object P has been converted to a jquery object.
③jquery object to Native JS object, using. Get (index) or [index]

$ ("#p"). Get (0). onclick = function () {} $ ("#p"). [0].onclick = function () {}

5,jquery Resolving multiple library conflicts
Other libraries also use $ as their own identity, causing other JS libraries to conflict with jquery;
To resolve a conflict, you can discard the use of $ and use the jquery object directly.
"Use self-executing functions to pass in jquery objects to simplify the notation"

Jquery.noconflict ();//Call this function to transfer the control to another class library, that is, jquery can no longer use the $!function (j) {       function to use the letter J. Instead of the jquery object} (jquery);

jquery Basic Application