Jquery
1. What is JQuery??
JQuery is an excellent JavaScript framework, a lightweight JavaScript class library.
The core idea of JQuery is Write less,do more.
Use JQuery to be compatible with various browsers to easily handle HTML, Events, animation effects
And so on, and convenient for the Web site to provide AJAX interaction.
Features of 2.jQuery:
Use selectors to find the nodes to manipulate, and then encapsulate these nodes into a JQuery object,
The operation of the underlying encapsulated node is implemented by invoking the method or attribute of the JQuery object.
Benefits: A, better compatibility; b, more Concise code
3. Programming Steps:
Step1, using selectors to find nodes
Step2, calling JQuery's properties and methods
Conversion between 4.jQuery objects and DOM objects
1. What is a JQuery object ...
The jquery object is a package of jquery on the underlying object that only creates this object to
Use the methods provided in the class library.
2. DOM Object----> JQuery objects
The conversion of DOM objects to jQuery objects is easy, with the addition of $ and parentheses outside.
function f () {
var obj = document.getElementById (' D1 ');
DOM-> JQuery Objects
var $obj = $ (obj);
$obj. html (' Hello JQuery ');
} 3
. JQuery objects----> DOM objects
The JQuery object converts to a DOM object by calling the Get method plus the parameter value 0
$obj. Get (0).
function f () {
var $obj = $ (' #d1 ');
JQuery Object-> DOM
var obj = $ (obj). get (0);
obj.innerhtml = ' Hello JQuery ';
}
5. JQuery Selector
1. What is a jQuery selector.
The jquery selector is a special description symbol similar to the CSS selector that helps jquery
Navigate to the element to be manipulated, using a selector to help the HTML implement the separation of content and behavior.
You only need to add the Id attribute to the element.
2. Type of selector
A, basic selector
#id matches an element based on the specified ID
. class matches an element based on the specified class
element matches all the elements based on the specified elements name.
Select1,select2,...... The elements that match each selector are merged and returned together
* Match all elements
B, Hierarchy Selector
1. Select1 Space Select2 Find all descendants of the specified element
2. Select1 > Select2 Lookup child nodes
3. Select1 + Select2 Next brother
4. Select1 ~ select2 under All the brothers
C, filter Selector
1. Basic Filter Selector
: First GET element One
: Last get final element
: not excluding elements required by the selector
: Even matches all elements with subscript even
: Odd matches all elements with an odd number of subscripts
: EQ matches elements of all given index values
: The GT matches all elements that are greater than the given index value
: LT matches all elements that are less than the given index value
2. Content Filter Selector
: Contains matches the element that contains the given text
: Empty matches all empty elements that do not contain child elements or text
: Has matches elements that contain the matching elements of the selector
:p arent matches elements that contain child elements or text
3. Visibility Filter Selector
Filters based on the visible attributes of elements in the page, mainly on hidden properties and visible
The judgment of the attribute.
: Hidden matches all invisible elements, or elements of type hidden
: Visible matches all visible elements
4. Attribute Filter Selector
The property filter determines the attributes of the tag, and the qualifying element acts as the returned object.
[attribute] matches the element that contains the given property.
[Attribute=value] matches the given property as an element of a particular value
[Attribute!=value] matches all properties that do not contain the specified property, or the property is not equal to a specific value.
Elements.
[Attribute^=value] matches the given property as an element starting with some value
[Attribute$=value] matches the given property as an element that ends with some value
[Attribute*=value] matches the given property to an element that contains certain values
[AttrSel1] [AttrSel2] [Attrseln] Composite Property selector that requires multiple conditions to be satisfied at the same time
Use.
5. Child element Filter Selector
The child element filter Selector is filtered according to the value of the child element's position.
: Nth-child (Index, EnVen, odd) matches the nth child or Odd couple under its parent element
Of Note ': EQ (index) ' matches only one element, and this will match the child for each parent element
Of : Nth-child starting from 1, and: Eq () is from 0.
6. Form Object Properties Filter Selector
: Enabled to match all available elements
:d isabled matches all unavailable elements
: Checked matches all selected selected elements (check box, radio box, etc., excluding select
option in)
: Selected matches all selected option elements
D, form selector
The rules used are the same as those for each selector. $ (": input") returns all input loss
In the box, in most cases, the form selector is matched with other selectors to locate the element.
: Input matches all input, textarea, select, and button elements
: Text matches all single-line text boxes
:p assword match all password boxes
: Radio matches all radio buttons
: CheckBox matches all check boxes
: Submit matches all submit buttons
: Image matches all pictures
: Reset matches all reset buttons
: Button matches all buttons
: File matches All files fields
: Hidden matches all invisible elements, or elements of type hidden
6.jQuery Operation dom-Query
1. HTML () HTML () is equivalent to InnerHTML
Read or modify the properties and value values of the node's HTML content. With the DOM object's
InnerHTML of the same function.
2. Text () text () is equivalent to innertext
Reading or modifying the contents of the text in the node will filter out the tagged content, and the action base of the innertext
This is consistent, but innertext is written differently in different browsers and in JQuery uses text ()
Method can be.
3. Val ()
Read or modify the Value property values of the node, which is the property that has the value for the form element
The operation of some elements.
4. attr ()
Reads or sets the properties of the modified node. This method will be a bit broader and can modify any of the elements
Property.
7. JQuery Operations dom-Create, INSERT, delete
1. Syntax for creating DOM nodes
Enclose the string literal of an HTML tag using the $ symbol, which creates a DOM node, such as $
(HTML). Most of the time the created nodes need to be placed in the document, and some of the following methods can be used
To implement the insertion of a node in shorthand form
such as $ (' body '). Append (' <div>...</div> ')
2. Ways to insert a DOM node
The Append method adds a DOM node as the last child node
The Prepend method adds a DOM node as the first child node
The After method adds the DOM node as the next sibling node
The Before method adds a DOM node as the last sibling node in
3. Ways to delete a DOM node
Remove () can be removed Dom,remove (selector) can be positioned by selector and then deleted
In addition, empty () clears the node.
4. Separate JS and HTML content
$ (FN);
Note: Window.onload=function () {} is equivalent to $ (fucntion () {}), but the intrinsic mechanism
Not the same. FN is a function that will execute FN when the entire page record is complete.
8. JQuery Operation dom-Replication node
1. Ways to copy DOM nodes
Both the Clone () method and Clone (true) implement replication, and when the parameter true is added, the
The behavior of the node is also copied onto the new object.
9. JQuery Operation Dom-Property operation
1. Methods of property manipulation
The Read property uses the attr () method to set the property to use the attr (",") method. Delete attribute
Use the RemoveAttribute (' ") method.
JQuery Operation dom-Style operation
attr ("Class", "") gets and sets the
AddClass ("") Append Style
Removeclass ("") deletes the style
Toggleclass ("") Toggle Style
Hasclass ("") is there a style
CSS ("") Read CSS values
CSS ("", "") Set multiple styles
11.jQuery Operation dom-Traversal node
Childern ()/childern (selector) Only consider straight child nodes
Next ()/next (selector) Next sibling node
Perv ()/perv (selector) the last sibling node
Sibling ()/sibling (selector) Other brothers
Find (selector) finds all descendants that satisfy the selector
Parent () node, no selector
JQuery Event Handling
1. Implement event binding using JQuery
1. Implement event binding using JQuery
$obj. Bind (Event type, event handler function);
Note: The code to bind a JQuery object to a hit event is implemented as
$obj. Bind (' click ', fn), or $obj. Click (FN);
2. Get Event Object Events
$ (fucntion (e) {
E is the event processing object (JQuery encapsulates the underlying event object, simplifying the code)
});
3. Common Properties of Event objects
A, locate the event Source:
var obj = E.target
Gets the target attribute of the event source using the event object.
b, get the coordinates of the mouse clicks when the event occurs:
Alert (E.pagex + ' + e.pagey ');
Gets the mouse coordinates when the event occurs using the Pagex and Pagey properties.
C, prohibit event bubbling
E.stoppropagation ();
2. Event bubbling
The events generated by the child nodes are thrown up to the corresponding parent node in turn
When an event occurs, it is first sent to the inner element, after the element is given the opportunity to respond,
Events bubble up to the outermost element and pass from the inner layer to the outer layers.
3. Synthetic Events
. Hover (over,out) simulate mouse hover events
It provides a "stay in" state for frequently used tasks.
When the mouse is moved above a matching element, the first specified function is triggered. When the mouse moves
When the element is out, the second function specified is triggered. And it will be accompanied by whether the mouse is still in
Detection in a particular element (for example, an image in a div) and, if it is, will continue to hold "hover"
State without triggering the move out event (fixed a common error using the Mouseout event).
Toggle (F1,f2, ...) ) to simulate a continuous stand-alone event
Note that event propagation does not occur when an event is triggered in this way through jQuery;
Line is added directly to the handler for the element.
If a matching element is clicked, the first specified function is triggered, and when the same element is clicked again
element, it triggers the specified second function, and if there are more functions, it fires again until the last one.
Successive calls to these functions are repeated for each subsequent click.
4. Simulation operation
Trigger (Type,[data]) triggers a class of events on each matching element. which is submitting
The first form, but not the effect of submit ().
$ (' #username '). Trigger (' focus ');
abbreviated $obj.focus ();
JQuery Animation
1. Show hidden animation effects
The Hide () and. Show () methods are actions on the properties of display. If you add a speed parameter
Number, you will have an animation effect.
2. Slide animation effect up and down
$ (' div '). Slidedown (800);
Dynamically display all matching elements by changing the height (increasing downward), after the display is complete
Optionally triggers a callback function.
$ (' div '). Slideup (' fast ');
Dynamically hides all matching elements by changing height (decrease up) to
Optionally triggers a callback function.
$ (' div '). Slidetoggle (speed, [callback])
Toggles the visibility of all matching elements by changing the height, and optionally triggers a
A callback function.
3. Fade-in animation effect
If you are targeting an element and just gradually increasing its opacity, then use the FadeIn
(' slow '); fadeout is a gradual reduction of opacity and can be used/.fadeout ()
4. Custom animation effects
Usage: Animate ({JS object}, execution time, callback function);
JS object: {} describes the style of the element after animation execution
Execution time: number of milliseconds
Callback callback function: function to execute after animation execution
JQuery class Array
1. What is an array of classes
A DOM object encapsulated by a JQuery object.
2. Operation of class array
Length property: Gets the number of DOM objects encapsulated by the JQuery object
Each (FN) traverses the class array, and FN is used to work with DOM objects. In FN This indicates that the is being
The DOM object that is traversed. The FN function can add a parameter I to represent the DOM being traversed
Subscript for object (starting from 0)
EQ (Index): Takes out the DOM object with the subscript equal to index
Get (Index): Gets the DOM object labeled Index
Get (): Returns an array of DOM objects
Index (OBJ): Returns the subscript of a DOM or JQuery object in an array of classes
JQuery's support for AJAX
1. Load () method
Function: Adds the data bytes returned by the server to the node that meets the requirements
Usage:
$obj. Load (Request address, request parameter);
Request parameters can have two formats:
"Username=tom & Age=22"
{' username ': ' Tom ', ' Age ': 22}
When there is a request parameter, the Load method sends a POST request, otherwise the GET request is sent
2.$.get and $.post
A, role: send an asynchronous request to the server to process the data returned by the server.
B, Usage:
$.get (Url,data,callback,type)
URL: Request Address
Data: Request parameters, can have two formats
Format one; " Username=tom "
Format two: {"username": "Tom"}
