1. <span style="font-size:14px;color:#006600;"></span>  

// Multiple selectors are separated by spaces or specified symbols to match the elements represented by the last selector that has a specified relationship with the former
$("#uid span"); // Select all descendant span elements of element with id "uid"
$("p > span"); // Select all children span elements of the p element
$("div + p"); // Select the peer p element immediately after the div element
$("div p span"); // Select the span element of the descendant of all the p elements of the div element


// There is no space between multiple selectors, matching elements that meet these selector conditions at the same time
$("p#uid"); // Select the p element with id attribute "uid"
$("div.foo"); // Select all div elements with CSS class name "foo"
$(".foo.bar"); // Select all elements with CSS class names "foo" and "bar"
$("input[name=books][id]"); // Select all elements with name attribute of "books" and id attribute

1. <span style="font-size:14px;color:#006600;">//jQuery specific selectors can also be used in any combination with other selectors
2. </span>  

// jQuery specific selectors can also be used in any combination with other selectors
$(":checkbox"); // Pick all checkbox elements
$(":text"); // Select all input elements of type text
$(":password"); // Select all input elements of type password
$(":checked"); // Select all selected radio, checkbox, option elements
$(":selected"); // Pick all selected option elements
$(":input"); // Select all form control elements (all input, textarea, select, button elements)

$(); / / returns an empty jQuery object without passing in any parameters (does not match any elements)

2

Element screening

1. <span style="color:#009900;"><span style="font-size:16px;"></span></span>  

// The following methods all return a new jQuery object that contains the filtered elements
$("ul li").eq(1); // Select the element whose index order is 1 in ul li (that is, the second li element)
$("ul li").first(); // Select the first matching element in ul li
$("ul li").last(); // Select the last matching element in ul li
$("ul li").slice(1, 4); // Select elements 2 to 4
$("ul li").filter(":even"); // Select all elements in odd order in ul li
$("div").find("p"); // Select all descendant p elements of all div elements
$("div").children(); // Select all child elements of all div elements
$("div").children("p"); // Select all the children p elements of all div elements
$("span").parent(); // Pick the parent of all span elements
$("span").parent(".foo.bar"); // Select the parent of all span elements with CSS class names "foo" and "bar"
$("#uid").prev(); // Select the next-generation element before the element with id as uid
$("#uid").next(); // Select the next generation element after the element with id as uid

1. <span style="font-size:14px;color:#009900;"></span>  

// jQuery's chain programming style
$("div").find("ul").addClass("menu").children().css("margin", 0).hide();("selector").css( { marginLeft: 15, color: "red", fontSize: "14px"} ); // Set multiple style attributes for all matching elements at once

// The following is a breakdown of the above code
$("div") // Returns a jQuery object that matches all div elements
.find("ul") // Returns a jQuery object that matches all descendants of the ul element in these div elements
.addClass("menu") // Add the CSS class name "menu" to these ul elements and return the current object itself
.children() // Returns a jQuery object that matches all the children of these ul elements
.css("margin", 0) // Set the css Style "margin: 0" for these child elements and return the current object itself
.hide(); // Hides these child elements and returns the current object itself

$("selector").css( { marginLeft: 15, color: "red", fontSize: "14px"} ); // Set multiple style genera for all matching elements at once

// Selector represents a specific selector

$("selector").val(); // Get the value value of the first matching element (commonly used for form controls)
$("selector").val("Hello"); // Set the value of all matching elements to "Hello"

$("selector").html(); // Get the innerHTML value of the first matching element
$("selector").html("Hello"); // Set the innerHTML value of all matching elements to "Hello"

$("selector").text(); // Get the innerText value of the first matching element (jQuery is compatible)
$("selector").text("Hello"); // Set the innerText value of all matching elements to "Hello"

$("selector").attr("class"); // Get the class attribute of the first matching element
$("selector").attr("class", "code"); // Set the class attribute of all matching elements to "code"
$("selector").removeAttr("class"); // Remove the class attribute of all matching elements

$("selector").prop("checked"); // Get the checked attribute value of the first matching element
$("selector").prop("checked", true); // Set the checked attribute value of all matching elements to true (that is, select all matching check boxes or radio boxes)
$("selector").removeProp("className"); // Remove the className attribute of all matching elements

jQuery core: event handling

$("selector").bind( "dblclick", handler );
$("selector").bind( "keyup", handler );
$("selector").bind( "mouseout", handler );

// Event methods such as bind() support binding the same handler to multiple events (separated by spaces)
$("selector").bind( "mouseenter mouseleve", function(event){
    if(event.type == "mouseenter"){
        // Execution code for mouseenter event
    }else if(event.type == "mouseleve"){
        // Execution code of mouseleve event 
    }
} );

// Event names can have a namespace
$("selector").bind( "mouseout.foo", handler );

3 animation effect

$("selector").show(); // Show hidden elements without transition animation by default
$("selector").show( 400 ); // Show hidden elements with 400 ms transition animation
$("selector").show( "fast" ); // Show hidden elements with 200 ms transition animation
$("selector").show( "slow" ); // Show hidden elements with 600 ms transition animation

$("selector").hide(); // Hide the displayed elements and use the same as show()
$("selector").toggle(); // Toggle show / hide elements (hide if show, show if hide), similar to show()

/* The following slide *, fade * series methods have the same functions as the above show(), hide(), toggle(),
 * Similar usage, but with different animation effects
 */

$("selector").slideDown(); // Show hidden elements with slide down transition animation
$("selector").slideUp(); // Hide the displayed elements with a slide up transition animation
$("selector").slideToggle(); // Toggle show / hide elements with up / down transition animation

$("selector").fadeIn(); // Show hidden elements with fade in transition animation
$("selector").fadeOut(); // Hide displayed elements with fade out transition animation
$("selector").fadeToggle(); // Hide displayed elements with fade out transition animation

In addition, jQuery supports custom CSS style based animation effects. You can use animate() Method, and performs a transition animation from the current style to the specified style.

// Sets the css Style "width: 200px; height: 100px" for all matching elements, and performs a transition animation effect from the current style to the specified style
// Animation takes 1000 milliseconds to execute
$("selector").animate( { width: "200px", height: "100px" }, 1000 );

$.ajax() It is the underlying implementation of Ajax in jQuery, and other Ajax request methods are based on this method.

// Send Ajax requests as GET
$.get("ajax.php", { username: "hello", password: "123456" }, function(data){
    // This is the callback function executed after the successful ajax request, which is the success option in $. ajax above
});

// POST Ajax requests
$.post("ajax.php", { username: "hello", password: "123456" }, function(data){
    // This is the callback function executed after the successful ajax request, which is the success option in $. ajax above
});

jQuery helper methods

// Remove whitespace from both ends of the string
var str1 = $.trim( "  abc d  " ); // "abc d"
var str2 = $.trim( null ); // ""
// Determine whether it is an array
var isArray1 = $.isArray( [] ); // true
var isArray2 = $.isArray( new Array() ); // true
// Judge whether it is a function
var result1 = $.isFunction( function(){} ); // true
var result2 = $.isFunction( new Function() ); // true
// Retrieves whether the specified value exists in the array and returns its first occurrence index
var index1 = $.inArray( 2, [ 1, 3, 5, 2, 0 ] ); // 3
var index2 = $.inArray( 3, [ 2 ] ); // -1 (no return - 1)
// Convert JSON string to corresponding JS object
var jsonObj = $.parseJSON( '{ "name": "CodePlayer", "age": 18 }' );
var jsonArray = $.parseJSON( '[ 12, "CodePlayer", true ]' );

Mutual transformation between DOM elements and jQuery objects

var p = $("p"); // Returns a jQuery object containing all p elements
p[0]; // The first p element
p[0].id ; // Returns the id of the first p element
p[1]; // The second p element
p[2]; // The third p element
p.length; // Number of p elements

In addition, jQuery also provides us with a get() Method to get the DOM element of the corresponding index.

var p = $("p"); // Returns a jQuery object containing all p elements
p.get(0); // The first p element
p.get(1); // The second p element
p.get(2); // The third p element
p.get( ); // All p elements contained will be returned as an array without passing in any parameters