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