Jquery learning Memorandum

As I have learned some basic knowledge, I will summarize some knowledge points here. 1. A lightweight JS library can greatly simplify JS operations and code volumes. 2. Syntax example: You can understand it in practice. [Python] $ (this). hide () demonstrates the jQueryhide () function to hide the current... SyntaxHighlighter. al

As I have learned some basic knowledge, I will summarize some knowledge points here.

 

1. A lightweight JS library can greatly simplify JS operations and code volumes.

2. Syntax example:

In practical use, you can understand it slowly.

[Python]
$ (This). hide ()
Demonstrate the jQueryhide () function to hide the current HTML element.
$ ("# Test"). hide ()
Demonstrate the jQueryhide () function to hide the element id = "test.
$ ("P"). hide ()
Demonstrate the jQueryhide () function to hide all

Element.
$ (". Test"). hide ()
Demonstrate the jQueryhide () function to hide all the elements of class = "test.
 
$ ("P. test"). hide ()-hide all paragraphs of class = "test.

$ (This). hide ()
Demonstrate the jQueryhide () function to hide the current HTML element.
$ ("# Test"). hide ()
Demonstrate the jQueryhide () function to hide the element id = "test.
$ ("P"). hide ()
Demonstrate the jQueryhide () function to hide all

Element.
$ (". Test"). hide ()
Demonstrate the jQueryhide () function to hide all the elements of class = "test.

$ ("P. test"). hide ()-hide all paragraphs of class = "test.
3. Syntax Basics

The jQuery syntax is compiled for the selection of HTML elements. You can perform some operations on the elements.

[Python]
Basic Syntax: $ (selector). action ()
Dollar sign defines jQuery
Selector: "query" and "Search" HTML elements
JQuery action () executes operations on Elements

Basic Syntax: $ (selector). action ()
Dollar sign defines jQuery
Selector: "query" and "Search" HTML elements
JQuery action () executes operations on Elements
4. Note:

All jQuery functions are in one documentready function.
[Python]
$ (Document). ready (function (){
--- JQuery functions go here ----
});

$ (Document). ready (function (){
--- JQuery functions go here ----
}); Prevents web pages from running after loading and tag definitions that cannot be found.

5. The jQuery element selector and attribute selector allow you to select HTML elements by Tag Name, attribute name, or content.

[Python]
JQuery element Selector
JQuery uses the CSS selector to select HTML elements.
$ ("P") Select

Element.
$ ("P. intro") select all class = "intro"

Element.
$ ("P # demo") Select the first id = "demo"

Element.
JQuery attribute Selector
JQuery uses an XPath expression to select an element with a given attribute.
$ ("[Href]") selects all elements with the href attribute.
$ ("[Href = '#']") select all elements with an href value equal.
$ ("[Href! = '#'] ") Select all elements with an href value not equal.
$ ("Your href00000000'.jpg ']") select all elements whose href values end with ". jpg.
JQueryCSS Selector
The jQueryCSS selector can be used to change the CSS attributes of HTML elements.

JQuery element Selector
JQuery uses the CSS selector to select HTML elements.
$ ("P") Select

Element.
$ ("P. intro") select all class = "intro"

Element.
$ ("P # demo") Select the first id = "demo"

Element.
JQuery attribute Selector
JQuery uses an XPath expression to select an element with a given attribute.
$ ("[Href]") selects all elements with the href attribute.
$ ("[Href = '#']") select all elements with an href value equal.
$ ("[Href! = '#'] ") Select all elements with an href value not equal.
$ ("Your href00000000'.jpg ']") select all elements whose href values end with ". jpg.
JQueryCSS Selector
The jQueryCSS selector can be used to change the CSS attributes of HTML elements.
The following example changes the background color of all p elements to Red:

Instance:

$ ("P" ).css ("background-color", "red ");

 

6. jQuery Name Conflict

JQuery uses the $ symbol as an introduction to jQuery.

Some other functions in the JavaScript Library (such as Prototype) also use the $ symbol.

JQuery uses noConflict () to solve this problem.

Varjq = jQuery. noConflict () helps you replace the $ symbol with your own name (such as jq.

7. jQuery events
The following are examples of event methods in jQuery:

Event Function
Bind a function
 
$ (Document). ready (function)
Bind the function to the ready event of the document (when the document is loaded)
 
$ (Selector). click (function)
Click events that trigger or bind a function to the selected Element
 
$ (Selector). dblclick (function)
Double-click event that triggers or binds a function to the selected Element
 
$ (Selector). focus (function)
Events that trigger or bind a function to the retrieved focus of the selected Element
 
$ (Selector). mouseover (function)
A mouse hover event that triggers or binds a function to the selected element.
 
Note: HTML elements are static by default and cannot be moved. To make the elements move, set the position of CSS to relative or absolute.

Example:

[Html]

$ (Document). ready (function (){
$ ("# Start"). click (function (){
$ ("# Box"). animate ({left: "100px"}, "slow ");
$ ("# Box"). animate ({fontSize: "3em"}, "slow ");
});
});
Script
 
 
Script

$ (Document). ready (function (){
$ ("# Start"). click (function (){
$ ("# Box"). animate ({left: "100px"}, "slow ");
$ ("# Box"). animate ({fontSize: "3em"}, "slow ");
});
});
Script
 
 
Thisis a heading
This is a paragraph.

 

Thisis another paragraph.

 
Click me 

 
Click me2 

 
 
 

$ (Document). ready (function (){
$ ("# Start"). click (function (){
$ ("# Box"). animate ({left: "100px"}, "slow ");
$ ("# Box"). animate ({fontSize: "3em"}, "slow ");
});
});
Script


Script

$ (Document). ready (function (){
$ ("# Start"). click (function (){
$ ("# Box"). animate ({left: "100px"}, "slow ");
$ ("# Box"). animate ({fontSize: "3em"}, "slow ");
});
});
Script


Thisis a heading
This is a paragraph.

Thisis another paragraph.

Click me

Click me2

We can test the above example and find that to move the Html element to make the effect, we need to set the position attribute.

8. jQuery Effect

Function
Description
 
$ (Selector). hide ()
Hide selected elements
 
$ (Selector). show ()
Show selected elements
 
$ (Selector). toggle ()
Switch (between hide and display) the selected Element
 
$ (Selector). slideDown ()
Slide down (Display) the selected Element
 
$ (Selector). slideUp ()
Slide (hide) selected element up
 
$ (Selector). slideToggle ()
Switch the selected elements to move up and down
 
$ (Selector). fadeIn ()
Fade in selected Element
 
$ (Selector). fadeOut ()
Fade out selected Element
 
$ (Selector). fadeTo ()
Fades Out the selected element to a given opacity
 
$ (Selector). animate ()
Execute a Custom Animation for the selected Element
 

 

Summary:

Because jQuery is designed to handle HTML events, your code is more appropriate and easier to maintain when you follow the following principles:

Place all jQuery code in the event processing function

Place all event processing functions in the document-ready event Processor

Place jQuery code in a separate. js File

If a name conflict exists, rename the jQuery library.
Author: altand