jQuery note punch card of FastPass has "passed away"

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

Since jQuery is no longer used, the jQuery plug-in no longer understands it

Tags: Front-end Javascript JQuery

Posted by Goins on Tue, 09 Aug 2022 16:58:37 +0930