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

The selector

The filter

Form element selector

Form object selector

Filter method

Event method

$(function(){}) : execute only when all page resources are loaded, just like the native onLoad event

Property, style, and class name operations

Element content manipulation

Element node operation

$(” Tags and content “) : Create a tag and fill it with content

The element size

Element position

animation

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 code

Post 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 code

Ajax 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 code

Jsonp 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 code

Global 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 code

Jquery 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 code

Extend 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