//Advantages of jQuery:
1 Lightweight
2 Powerful Selectors
3 Excellent encapsulation of DOM operations
4 Reliable event handling mechanism
5 Perfect Ajax
6 Don’t pollute top-level variables
7 Excellent browser compatibility
Chain operation mode
9 Implicit iteration
10 Behavior was separated from the structural layer
11 Rich plug-in support
12 Complete documentation
13 Open Source
$("#foo") and jQuery("#foo") are equivalent
$.ajax and jQuery.ajax are equivalent The $ symbol is the abbreviation of jQuery
// window.onload : $(function(){ })
$(function(){ }) is equivalent to the window.onload event in js. It is executed immediately after the page is loaded. Only this is the same as window.onload
But window.onload can only write one, but $(function(){ }) can write multiple
When there is no abbreviation, it is $(document)ready(function(){ })
//Chain operation style:
$(".level1>a").click(function(){
$(this).addClass("current") //给当前元素添加"current"样式
.next().show(); //下一个元素显示
.parent().siblings()//父元素的同辈元素
.children("a") //子元素<a>
.removeClass("current")//移出"current"样式
.next().hide();//他们的下一个元素隐藏
return false;
})
//Convert jQuery object to DOM object:
1 The jQuery object is an array-like object, and the corresponding DOM object can be obtained through the [index] method
var $cr = $("#cr");//jQuery object
var cr = $[0]; //DOM object
2 Another method is provided by jQuery itself, and the corresponding DOM object is obtained through the get(index) method
var $cr = $("#cr");//jQuery object
var cr = $cr.get(0);//DOM object
//Convert DOM object to jQuery object:
For a DOM object, you only need to wrap the DOM object with $() to get a jQuery object.
The method is: $(DOM object);
var cr = document.getElementById("cr");//DOM object
var $cr = $(cr); //jQuery object
//Resolve conflicts:
1 If other JS libraries conflict with the jQuery library, we can call the jQuery.noConflict() function at any time to transfer control of the variable $ to other JavaScript libraries
var $jaovo = jQuery.noConflict();
$jaovo(function(){
$jaovo("p").click(function(){
alert($jaovo(this).text());
});
});
2 You can use "jQuery" directly to do some jQuery work
jQuery(function(){
jQuery("p".click(function(){
alert(jQuery(this).text());
}));
});
//jQuery selector
1 Basic Selector
The basic selector is the most commonly used selector in jQuery and is also the simplest selector. It searches for DOM elements through element id, class and tag name
//jQuery :
Just get the label object. It’s an array
//jQuery object acquisition:
$("p");//Get all p tag objects ---- The obtained object is an array
$("#aa");//Get the object of the tag with id aa --- The object obtained is an array
$(".aaa");//Get the object of the tag with class aaa --- The object obtained is an array
//Conversion between jQuery object and DOM object:
jQuery methods and DOM methods cannot be used (called) with each other, but objects can be converted to each other
$("p");//is a jQuery object
Document.documentElementsTagName("p");//It is a DOM object
$(document.documentElementsTagName("p"));//Convert DOM object into jQuery object
$("p").get(1);//It is a DOM object,
Get(1); represents the second digit of the array p, (the subscript 1 is the second digit)
$($("p").get(1));//The jQuery object is converted into
//jQuery object converted into DOM object:
1 The jQuery object is an array-like object, and the corresponding DOM object can be obtained through the [index] method
var $cr = $("#cr");//jQuery object
var cr = $[0]; //DOM object
2 Another method is provided by jQuery itself, and the corresponding DOM object is obtained through the get(index) method
var $cr = $("#cr");//jQuery object
var cr = $cr.get(0);//DOM object
//DOM object converted into jQuery object:
For a DOM object, you only need to wrap the DOM object with $() to get a jQuery object.
The method is: $(DOM object);
var cr = document.getElementById("cr");//DOM object
var $cr = $(cr); //jQuery object
//Create element:
$("
//text() text node:
text(): function/method to obtain the internal text of the selected tag (content visible to the human eye)
var li = $("li").text();//Get the data in the text node of li (that is, the content of 123)
//attr() Get attributes/Set attributes/Change attributes:
;var i = $("p").attr("title");//This is to get the value of the title attribute in the p tag
$("p").attr("title"," bbb");//Change the value of the title attribute in the p tag to bbb
//removeAttr() deletes the attribute value of the specified element:
What is your favorite fruit?
//append() to add elements:
Add the matched child element to the specified parent element.
Function chain calls: Why can chain calls be used?
It’s because the previous function still returns the object that was called
For example, a.append(b).append(c) below a is a parent tag object. Call the function to add b to it, and the returned value is still the object of a, so you can also call the function and add c to it
//a, b and c are all label objects
var $li_1 = $("
$parent.append($li_1).append($li_2);
a.append(b);//Add b to the end of a (append), a is the parent tag and b is the child tag
a.append(c);//Add c to the end of a (append), a is the parent tag and c is the child tag
a.append(b).append(c);//Add b and c to a. B and c are peers, but b is above c (chained call addition)
a.prepend(b)//Add b to the front of a a is the parent tag b is the child tag
a.insertAfter(b);//Add a to the back of b (of the same generation)
a.insertBefore(b);//Add a to the front of b (of the same generation)
//Call mobile node
//Insert our specified element in front of the matched element (specified element.insertBefore("matched element"))
//appendTo() adds elements:
//a is the object b is the tag name
appendTo(): adds the specified element to the set of matching elements
$("li").appendTo("ul");//Add the li tag to ul
a.appendTo("b"); //Yes, b is added to a (a is a label and b is a label)
Specified element.appendTo(matching element);
//Delete element (hidden) remove():
a.remove();//Remove a from html (hidden)
var $li = $("ul li:eq(1)").remove();//Remove the second li tag in ul eq(1); which is the li element with subscript 1, which is the li element Two, because the subscript starts from 0
$li.appendTo("ul");//Re-add the element just deleted to ul
$("ul li").remove("li[title !=Apple]");//Delete all li elements in the ul element whose title attribute is not Apple's
//removeAttr() deletes the attribute value of the specified element:
removeAttr(xx,xx); delete attribute value
What is your favorite fruit?
//Clear empty():
$("ul li:eq(1)").empty();//Find the second li element in ul and delete the content, (text node,
//Copy the selected node clone():
clone(true): Copy the node. When true, the event listener bound to the node is also copied. If not written, the default is false
$("li").clone()//Copy the current node
$("li").clone().appendTo("ul");//Copy the li node and append it to ul (append to the inside of ul)
$("li").clone(true).appendTo("ul");//Copy the li node, copy the event listener bound to li, and append it to ul together (append to the inside of ul)
//Replace the selected node replaceWith(),replaceAll():
a is the object being replaced
b is the complete tag to be replaced
a.replaceWith(b);//b will replace a (the following b replaces the previous a) The latter replaces the previous
b.replaceAll(a);//bReplace a (the previous b replaces the following a) The front replaces the following
//If there are multiple ps, they will be replaced
$("p").replaceWith("Your girlfriend’s least favorite fruit is???");//Replace the entire p tag with < ;strong>What is your girlfriend’s least favorite fruit???
//If there are multiple ps and you only want to replace one
$($("p").get(1)).replaceWith("Your girlfriend’s least favorite fruit is???");//Only replace the first 2 p tags replaced
You can also add an ID to the tag you want to replace, that is, only one will be replaced
$("#abc").replaceWith("
//replaceAll():
$("What is your mommy's least favorite fruit???").replaceAll("#abc");//The former one replaces the latter one with the ID #abc That tag
$("
//Wrap wrap() wraoAll() wrapInner() :
//wrap() :
wrap(): Wrap the matched element with a new HTML tag.
a label object (wrapped) b is a label (wrapped with b label)
All a tags will be wrapped
a.wrap(b);
//If there is an a tag, wrap it into:
out
//If there are multiple a tags, wrap them into:
out
out
out
Each is separated from the wrapping separation together.
a.wrap("b");//It adds a parent tag to a. a is wrapped by b
$("p").wrap("");//Add a parent tag to the p tag, that is, wrap the p tag with the tag to become
wrapAll(): Wrap all the labels together. Even if the labels to be wrapped are not together and there are other labels in the middle, the labels to be wrapped will be moved together and wrapped together
//Before parcel
aaa
aaa
//Effect switching toggleClass():
It refers to the switching between effects. There is an effect when there is no switching for the first time. When switching, it refers to the effect composed of all classes
It means switching back and forth between the current effect and the specified effect