JQ Summary of common methods
The characteristics of
- Compatibility is not a concern in jquery
- Jquery has a powerful selector mechanism
- Good implicit iteration
- Omnipotent chain programming
The core
| Elements called | role |
|---|---|
.length |
The length of the set of elements |
.eadh() |
Iterate over the pseudo-array of JQ |
.index() |
Gets the subscript of the current element |
.data() |
Store or read data on the element |
.get([index]) |
Gets one of the matched elements, and returns a DOM object |
The selector
| grammar | Select elements |
|---|---|
$(" # id name)" |
The id selector |
$(". The name of the class ") |
Class name selector |
$(" Label Name ") |
Label selector |
$("[name='username']") |
Property selector |
$("li:first-child") |
The first tag |
$("li:last-child") |
The last tag |
$(" li: the NTH - the child (number) ") |
Number of tags, counting from 1 |
$("li:empty") |
An empty tag |
The filter
| grammar | Filter out the required elements |
|---|---|
$("li:first") |
The first one |
$("li:last") |
The last one |
$("li:event") |
Index even |
$("li:odd") |
Index is odd |
$(" li: eq (digital) ") |
The subscript is the specified number |
$(" li: lt (digital) ") |
The subscript is less than the specified number |
$(" li: gt (digital) ") |
The subscript is greater than the specified number |
Form element selector
| grammar | Matching form elements |
|---|---|
$(":input") |
All form elements |
$(":text") |
A single-line text box |
$(":password") |
Single-line password box |
$(":radio") |
The radio button |
$(":checkbox") |
Multiple button |
$(":submit") |
The submit button |
$(":reset") |
The reset button |
$(":image") |
Image button |
$(":button") |
Ordinary button |
$(":file") |
File upload button |
$(":hidden") |
Hide the field (matches all of the pagesdispaly:noneThe label) |
Form object selector
| grammar | Select the form object element |
|---|---|
$("input:enabled") |
All available forms |
$("input:disbaled") |
Home Page Disabled forms |
$("input:checked") |
All selected forms |
$("option:selected") |
The selected drop-down box |
Filter method
| Elements called | Use methods to filter elements |
|---|---|
.first() |
The first element in the collection |
.last() |
The last element in the set |
.next() |
Next sibling element |
.prev() |
The previous sibling element |
.nextAll() |
All subsequent sibling elements |
.prevAll() |
All previous sibling elements |
.parent() |
The parent element |
.parents() |
All ancestor elements |
Eq (digital) |
Specifies the element of the subscript |
.find(selector) |
The element specified in the descendant |
.siblings() |
All sibling elements |
.children() |
All of the children |
.end() |
Go back to the previous object of the chain operation |
Event method
$(function(){}) : execute only when all page resources are loaded, just like the native onLoad event
| Elements called | parameter | role |
|---|---|---|
.on() |
(Event type,[delegate element],[incoming data], handler) | An event handler that binds one or more events to a selection element |
.off() |
(Event type, delegate element, handler) | Event to unbind on |
.one() |
(Event type, handler) | An event that can only be triggered once |
.trigger() |
(Event type, handler) | Trigger an event manually |
.click() |
([incoming data], processing function) | Mouse click trigger |
.mouseover() |
([incoming data], processing function) | Mouse over, mouse over any child element will trigger |
.mouseout() |
([incoming data], processing function) | Mouse out: Triggered when the mouse moves away from any child element |
.hover() |
(Move in, move out) | Mouse in and out |
.mouseenter() |
([incoming data], processing function) | Triggered when the mouse moves over an element, not over a child element |
.mouseleave() |
([incoming data], processing function) | Triggered when the mouse moves away from an element, not away from a child element |
.resize() |
([incoming data], processing function) | Triggered when resize the browser window |
.scroll() |
([incoming data], processing function) | The scroll specifies the element trigger |
.ready() |
(Handler function) | The $(document) call is executed when the page tag is loaded |
Property, style, and class name operations
| Elements called | parameter | role |
|---|---|---|
.prop() |
(Attribute name, attribute value) : Set (Attribute name) : Gets |
Sets or gets the property name |
.attr() |
(Attribute name, attribute value) : Set (Attribute name) : Gets |
Sets or gets a custom property |
.removeProp() |
(Attribute name) | Delete the properties |
.removeAttr() |
(Attribute name) | Delete a custom attribute |
.css() |
(key, value) : Set one ({key: value, key: value}) : Set multiple values (key) : Get |
Sets or gets the style |
.addClass() |
(the name of the class) | Add the style |
.removeClass() |
(the name of the class) | Delete the style |
.toggleClass() |
(the name of the class) | If yes, delete the style. If no, add the style |
.hasClass() |
(the name of the class) | Check if the element has the class name, true if it does, false if it does not |
Element content manipulation
| Elements called | role |
|---|---|
.text() |
Gets the text content, and passing the parameter sets the text content |
.html() |
Gets the label content, which is used to set the label content |
.val() |
Gets the value of the form element, which is set by passing the parameter |
Element node operation
$(” Tags and content “) : Create a tag and fill it with content
| Elements called | grammar | role |
|---|---|---|
.append() |
Parent element. Append | Appends child elements to parent elements |
.prepend() |
Parent element. Prepend | Appends the child element to the first parent element |
.appendTo() |
Child element. AppendTo | Appends child elements to parent elements |
.prependTo() |
Child element. PrependTo | Appends the child element to the parent element |
.after() |
Element. After (new element) | Add the next sibling element |
.before() |
Element. Before (new element) | Add a sibling element |
.insertBefore() |
New element. InsertBefore | Appends an element to an element |
.insertAfter() |
New element. InsertAfter | Appends an element to an element |
.replaceWith() |
Element. ReplaceWith | Replace an element with a new element |
.replaceAll() |
New element. ReplaceAll | Replace an element with a new element |
.empty() |
Elements. The empty () | Remove all tags and content inside the element, making itself an empty tag |
.remove() |
Elements. The remove () | Delete yourself and all content within yourself |
.clone() |
Clone ([parameter 1],[parameter 2]) | Copy elements, argument 1 is the copy itself event (true/false), argument 2 is the copy child element event (true/false) |
The element size
| Elements called | role |
|---|---|
.height() |
Gets or sets the height of the element’s content area. |
.width() |
Gets or sets the width of the element’s content area. |
.innerHeight() |
Gets the height inside the element, including the padding but not the border |
.innerWidth() |
Gets the width inside the element, including the padding but not the border |
.outHeight([true]) |
Gets the height occupied by the element, including the padding and border. |
.outWidth([true]) |
Get the width occupied by the element, including the padding and border. |
Element position
| Elements called | parameter | role |
|---|---|---|
.offset() |
[{left: value,top: value}] | Gets or sets the position of the element on the page |
.position() |
There is no | The position of the element relative to its parent |
.scrollTop() |
[number] | Gets or sets the height at which the element scrolls |
.scrollLeft() |
[number] | Gets or sets the width of the element to scroll over |
animation
| Elements called | parameter | role |
|---|---|---|
.show() |
[milliseconds],[effect],[callback] | The status changed from Hidden to displayed |
.hide() |
[milliseconds],[effect],[callback] | Switch from the Display state to the hidden state |
.toggle() |
[milliseconds],[effect],[callback] | Toggle between hide and show states |
.slideDown() |
[milliseconds],[effect],[callback] | Pull down display |
.slideUp() |
[milliseconds],[effect],[callback] | Pull up to hide |
.slideToggle() |
[milliseconds],[effect],[callback] | Switch up and down pull display hide |
.fadeIn() |
[milliseconds],[effect],[callback] | Display that changes transparency from 0 to 1 |
.fadeOut() |
[milliseconds],[effect],[callback] | Hide from transparency 1 to 0 |
.fadeToggle() |
[milliseconds],[effect],[callback] | Toggle transparency show and hide |
.fadeTo() |
[milliseconds], Transparency,[effect],[callback function] | Causes the element to switch to the specified transparency |
.animate() |
{Attribute Set},[milliseconds],[Effect],[callback] | Custom animation, animation queue can be realized |
.stop() |
[bool],[bool] | Stops the animation in its current state, or in another state |
.finish() |
[Queue name] | Stops the animation in the finished state |
JQuery senior
Jquery sends ajax requests
Get request syntax
$.get(' request address ', argument, successful callback function, 'json'); Parameter 1: the address of the request parameter 2: the data carried by the request, which can be a concatenated string or an object parameter 3: the successful callback function, which takes the data returned in response Parameter 4: the format of the data to be returnedCopy the codePost request syntax
$.post(' request address ', argument, successful callback function, 'json'); Parameter 1: the address of the request parameter 2: the data carried by the request, which can be a concatenated string or an object parameter 3: the successful callback function, which takes the data returned in response Parameter 4: the format of the data to be returnedCopy the codeAjax request syntax
$.ajax({
url: Request address,// Required, requested address
type: Request mode,// Select request mode, default is GET (ignore case)
data: {}, // Send request is the parameter to carry
dataType: 'json'.// Select the data type that is expected to be returned. The default is string
async: true.// Asynchrony. The default value is true
success () {}, // Optional, successful callback function
error () {}, // Optional, failed callback function, parameter XHR, is ajax object, status status, err error message
cache: true.// Cache or not. Default is true
timeout: 1000.// Optional, timeout in milliseconds
context: div, // This in the callback refers to an Ajax object by default
})
Copy the codeJsonp request syntax
$.ajax({
url: Request address,dataType: 'jsonp'.data: { name: 'Jack'.age: 18 },
success (res) {
console.log(res)
},
jsonp: 'cb'.// jsonp calls the function key when requested
jsonpCallback: 'fn' // The name of the callback function when jsonp requests it
})
Copy the codeGlobal Ajax functions
The global Ajax function refers to the Ajax hook function. Hook functions are functions that are automatically called when something has reached a certain stage of execution
// This function is triggered when the first request starts
$(window).ajaxStart(function () {
console.log('A request has been made.')})// Any request will trigger this function before sending is prepared
$(window).ajaxSend(function () {
console.log('One's about to go out.')})// This function is triggered when any request succeeds
$(window).ajaxSuccess(function () {
console.log('One request was successful')})// This function is triggered when any request fails
$(window).ajaxError(function () {
console.log('One request failed')})// This function is triggered when any request completes
$(window).ajaxComplete(function () {
console.log('I have a request completed')})// This function is triggered at the end of any request
$(window).ajaxStop(function () {
console.log('I have a request terminated.')})Copy the codeJquery identifier
Jquery can surrender the use of $or jquery, or use another operator
JQuery. Of noConflict ();// the $sign can not be used, only jQuery
jQuery.noConflict(true);// The $symbol and jQuery can not be used
varVariable = jQuery. Of noConflict (true); // Use custom variables instead of $and jQuery
Copy the codeExtend custom methods to jquery
Jquery provides two classes of methods, one for element collection calls and one for self calls
// Extend methods to a collection of elements
jQuery.fn.extend({
// The argument is an object, and the methods in the object are methods that extend each set of elements
fn:function(){
console.log(123); }})/ / call
$("div").fn(); / / 123
// Extend methods to jquery itself
jQuery.extend({
// The argument is an object, and the methods in the object are methods that extend themselves
fn:function(){
console.log(456); }});/ / call
$.fn(); / / 456
Copy the code