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');
2.2.2 transform jQuery into dom object

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! 
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", "");
$("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() {
}, function() {
stop(); Pause animation effect
3.4.2 fade in and fade out effect


Modify transparency

fadeTo("time", transparency)

$(".nav>li").hover(function() {
}, function() {
3.4.3 custom animation (params, speed, easing, func)

$("button").click(function () {
        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
    $(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

   top: 200,
    left: 200
Set the distance from the top and left of the document

	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

    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