jQuery ⭐️
1. What is jQuery?
-
javaScript + Query advocates writing less code and doing more
-
jQuery encapsulates the common functional code of javaScript, and optimizes DOM operation, transaction processing, animation design and Ajax interaction
-
The essence of learning jQuery is to learn to call these functions to improve the efficiency of development
2. Basic syntax of jquery
2.1 $is the symbol of jQuery and another name of jQuery
$(function() {}) Equivalent to $(document).ready(function(){})
hide(); show();
$('div ') jQuery object obtained from div
2.2 jQuery and native dom objects can be converted to each other
2.2.1 converting DOM objects into jQuery objects
var dom = document.querySelector('video');
$(dom);
2.2.2 transform jQuery into dom object
$('video')[0].play();
$('video').get(0).play;
3. jQuery API
3.1 use class selector and assign color
$(".div").css("background", "blue"); take.div The background color of the class is all changed to blue
$("ul li").css("color", "cyan");
3.2 using a screening selector
3.3 cases
3.3.1 in implicit iteration, except for clicking the button, the other brother buttons are all primary colors!
$("button").click(function () {
// In implicit iteration, except for clicking the button, the other brother buttons are all primary colors!
$(this).css("background","cyan")siblings("button").css("background","");
})
3.3.2 click the button to realize the corresponding function and control the speed of change
$("button").eq(0).click(function () {
$(this).css("background", "cyan").siblings("button").css("background", "");
$("div").show(1000, function () {
alert("Callback function!");
})
});
$("button").eq(1).click(function () {
$(this).css("background", "cyan").siblings("button").css("background", "");
$("div").hide(1000, function () {
alert("Callback function!");
})
});
$("button").eq(2).click(function () {
$(this).css("background", "cyan").siblings("button").css("background", "");
$("div").toggleClass("r");
});
$("button").eq(3).click(function () {
$(this).css("background", "cyan").siblings("button").css("background", "");
$("div").slideDown(1000, function () {
alert("Callback function!");
})
});
$("button").eq(4).click(function () {
$(this).css("background", "cyan").siblings("button").css("background", "");
$("div").slideUp(1000, function () {
alert("Callback function!");
})
});
3.4 style of jquery
addClass("") add class
removeClass("") delete class
toggleClass("") switch class
3.4.1 compound writing method of hover mouse passing and leaving
Syntax: hover([over], out);
When writing two functions, the first function represents the mouse passing event, and the second function represents the mouse leaving event
When writing a function, the mouse passing and leaving events will be triggered every time the function is executed
$(".nav>li").hover(function() {
$(this).children("ul").slideDown(200);
}, function() {
$(this).children("ul").slideUp(200);
})
stop(); Pause animation effect
3.4.2 fade in and fade out effect
fadein,fadeout,fadeToggle
Modify transparency
fadeTo("time", transparency)
$(".nav>li").hover(function() {
$(this).children("ul").fadein(200);
}, function() {
$(this).children("ul").fadeout(200);
})
3.4.3 custom animation (params, speed, easing, func)
$("button").click(function () {
$("div").animate({
left: 200,
opacity: .3 // transparency
})
})
3.4.4 assign the state of select all button to all small buttons
prop = properties (configuration modification)
data = hashMap set key and value
$(".checkAll").change(function() {
// checked here is the boolean value
$("checkBox").prop("checked", $(this).prop("checked"))
})
3.5 modify the contents of the document
- $("h1").html("modified") modify element content
- $("h1").text("modified") modify the text content
- $("input").val("modified") modify the form value
3.6 traversal elements
$("div").each(function(i, domEle) {
// In the callback function, the first one is to get the subscript of the object, and the second one is the index number name, which is a dom object
console.log(index);
$(domEle).css("color", "blue");
})
3.7 creating elements
let li = $("<li>new</li>");
$("ul").append(li); Append create element
$("ul").prepend(li); Front add element
element.after("content"); Put behind the element
element.before("content"); Put in front of the element
3.8 location acquisition
offset() gets the distance from the page
$("").offset({
top: 200,
left: 200
});
Set the distance from the top and left of the document
$("").postion({
The offset value cannot be set, and only the parent distance with positioning can be obtained. If there is no parent, the document distance shall prevail
});
scrollTop() exceeds the distance of the specified element, which is generally set as a document or window
4. jQuery event
4.1 event binding mechanism
$(""). on("") assign binding events to the obtained object through on
$("div").on({
mouseenter: function(){},
click: function(){},
mouseleave: function(){}
});
on Bind multiple events
$("div").on("mouseenter mouseleave", function(){});
on Event delegation function
$("ul").on("click", "li", function(){}); Event binding in ul Yes, but the trigger object is li
4.2 event unbinding mechanism
$(""). off("") unbind the object by off
4.3 single event effectiveness mechanism
$(""). one("") assign a binding event to the object through one, which takes effect once
4.4 automatic trigger event
$(""). trigger("click") automatically triggers the click event
5. jQuery otherMethod
5.1 object copy
$. extend("false is shallow copy, true is deep copy", "object", "target object")
- Shallow copy uses the same address
- Deep copy uses different addresses
- There can be multiple target objects
5.2 jQuery multi database coexistence
In order to avoid the problem that other js libraries will also use $and then conflict
- You can change $to jQuery
- The user changed the $symbol to other symbols
- let tmp = $.noConflict(); Change $symbol to TMP symbol