Introduction of jQuery
JQuery is an efficient, compact, and feature-rich JavaScript tool library. Query itself, which means select, is a major refinement of the JavaScript method for selecting elements. It was officially released in 2006.
Development version
1. X: Compatible with IE6/7/8, which is most often used in work, learning version 1.12. 2. X: incompatible with IE6/7/8, mostly used for jQuery official bug adjustment. Not used at work. 3. X: not compatible with IE6/7/8, can only be used in older browsers, is now the official major maintenance update of jQuery.
download
JQuery’s official websiteThe main thing is to download the latest 3.x version
bootcdnIncludes all versions of jQuery, including the 1.12.4 version we need to learn
The role of the jQuery
JQuery greatly simplifies DOM manipulation and makes programming much easier and more efficient. For example, get elements, native JavaScript implementation:
// Get the element
var box = document.getElementById("#box")
var box = document.getElementsByTagName("div") [0]
Copy the codeJQuery implementation
<script src="Js/jquery - 1.12.4. Min. Js." "></script>
<script>
var box = $(".box");
//var box = $("#box");
</script>
Copy the codeUse the jQuery
When using jQuery, it can be used together with the jQuery Chinese document. Let’s say we chooseJQuery API Documentation in ChineseThis website.
Reference the jQuery file, for example:
<script src="Js/jquery - 1.12.4. Min. Js." "></script>
Copy the codeThe $() method
This method is a powerful way to get elements.
- In jQuery, there is only one global variable, $. This is one of the great features of jQuery that avoids global variable contamination.
- Originally the variable was not called $, it was called the jQuery() method, and in the library both names coexist and can be used.
- Classic error: $undefined. The cause is that the jquery file is not referenced or the reference path is incorrect.
<script src="Js/jquery - 1.12.4. Min. Js." "></script>
<script>
// Get all p elements and set their background color to red
$("p").css("background-color"."red")
// jQuery("p").css("background-color", "red")
</script>
Copy the codeThe jQuery object
- The $() method gets something called the jQuery object
- It encapsulates a large number of properties and methods, such as CSS () and HTML () and animate(), which are methods of jQuery objects.
- The elements fetched by $() are a set of elements that operate in batches.
<script src="Js/jquery - 1.12.4. Min. Js." "></script>
<script>
// Get all p elements and set their background color to red
$("p").css("background-color"."red")
// jQuery("p").css("background-color", "red")
// Set all p element text content to Hello
$("p").html("Hello")
// Animate all p elements
$("p").animate({"width": 300}, 1000)
</script>
Copy the codeJQuery object and native JS object
- Once you get the jQuery object, you can only use the methods of the jQuery object, not the methods of the native JS element object.
- Native JS objects cannot use jQuery’s methods either.
- The jQuery object is actually an array-like object that contains all the retrieved native JS objects, as well as a large number of jQuery methods and properties.
<script src="Js/jquery - 1.12.4. Min. Js." "></script>
<script>
// Output JQuery object to get array object
console.log($("p"));
</script>
Copy the codeConversion of jQuery objects to native JS objects
Number of native objects in JQuery object:
- $().length
- $().size()
console.log($("p").length);
console.log($("p").size());
Copy the codeInterchangeover:
- JQuery to Native: Directly use the array subscript method, get jQuery encapsulated native objects.
- Native to jQuery: Wrap native objects with $().
// JQ objects are converted to native JS objects
var $ps = $("p")
$ps[0].innerHTML = "Hello"
// Native JS objects are converted to JQ objects
var op = document.getElementsByTagName("p") [0]
$(op).css("background-color"."skyblue")
Copy the codeJQuery selector
- CSS2.1 and CSS3 selector
This example omits the jQuery file reference, but in practice you add the reference as before.
// Base selector
$("*")// Select all elements
$("p")// Select all p elements
$(".box")// Select the element whose class is box
$("#demo")// Select the element whose id is demo
// Advanced selector
$(".box p").html("Hello")// Select all descendant p elements of.box
// Form object properties
$("input:disabled").css("background-color"."red")// Select all disable form elements and set the background color
$("input:enabled").css(background-color","red")// Select all enable form elements and set the background color // Form object $(":input").css("background-color","blue"// Select all the form elements and set the background colorCopy the code- Filter selector
Also known as filter selector, jQuery added its own selector. Usage: Add filtered words after the base selector to filter out a portion of the previous selector selection. Or as part of an advanced selector. Commonly used:
$(":first")/ / the first
$(":last")// The last one
$(":eq(index)")// Index item
$(":gt(index)")// Greater than the item with index
$(":lt(index)")// Less than the item with index
$(":odd")// Entries with an odd index
$(":even")// Indices with even indices
$(":not(selector)")// Remove all elements that match the given selector
Copy the code- Screening method
In addition to selecting elements with selectors, jQuery objects also encapsulate corresponding filtering methods
$("p").first/ / the first
$("p").last// The last one
$("p").eq(index)// Index item
Copy the codeCompare the native method with the jQuery method
Interlaced discoloration cases:
// The native method
var trs = document.getElementsByTagName("tr");
/ / traverse
for (var i = 0; i < trs.length; i+=2) {
trs[i].style.backgroundColor = "skyblue"
}
/ / jQuery method
$(tr:even").css("background-color","yellowgreen")
Copy the codeObviously, the jQuery approach is much simpler.