Summary of Front-end Knowledge Points-JQ


Summary of Front-end Knowledge Points-JQ

1. What is jQuery:

JQuery: A Library of very simplified DOM operations for third parties
Third party: Download
Extreme simplification: the ultimate simplification of DOM operations: four aspects:

1. DOM: Addition, deletion and modification
2. Event binding:
3. Animation effects:
4. Ajax

DOM operations: Learning jQuery is still learning DOM, but the API is simplified
Function libraries: jQuery is all functions, using functions to solve all problems
Why use:

  1. Ultimate simplification of DOM operations
  2. Solve most browser compatibility problems
    There are no compatibility issues with jQuery

2. How to use:

Download: Version:
1.x: Compatible with old browser IE8

1.x.js uncompressed version  
  Excellent: Includes complete annotations, formats, variable names, good readability
  Deficiency: Large volume, inconvenient for transmission
 When: Learning and Development Phase
1.x.min.js Compressed Edition
  Excellent: Small size, easy transmission
  Deficiency: Remove comments, format, and simplify variable names.
      Poor readability
 When: Production Environment

2.x: No longer compatible with older browsers
3.x: No longer compatible with older browsers, providing more new features:
Despise: 3.x’s new features:

1. All code runs in strict mode
2. Replace forEach$with for... of.
3. New Animation API: Request Animation Frame ()
4. Support promise
5. API of Ajax against cross-site scripting (XSS) attacks

Introducing web pages: 2 kinds:

  1. Introduce server local JS file: <script
  2. Introduce JS files shared in CDN network:


Introducing jquery-1.x.js is actually adding a new type of jQuery globally
Constructor jQuery: Used to create subobjects of jQuery type
Prototype object jQuery.fn: A common method for saving access to only child objects of jQuery type
How to use jQuery simplified API:
Problem: DOM elements cannot use jQuery simplified API
Solution: To use the jQuery simplified API, you must first create subobjects of jQuery type:
How to create subobjects of jQuery type: 2 kinds:

  1. By looking up DOM elements, the DOM elements are saved into the newly created jQuery object:
    var $jq=$(“selector”)
    What is a jQuery object: an array of classes containing the DOM elements found
  2. Save the obtained DOM elements directly into the newly created jQuery object

General features of jQuery API: 3

  1. Self-contained traversal: Calling an API once for a jQuery object as a whole is equivalent to calling an API once for every element inside
  2. Function Dual Use: Give a new value, modify it; Read the original value without giving a new value.
  3. Each function returns the JQ object being manipulated: a chain operation!

3. Find: Selector

Basic selector: same as CSS
id class element * ,
Hierarchical selector: same as CSS
Blank >+~
Sub-element filter selector: same as CSS
Sort separately within each parent element, starting from 1
:first-child :last-child :only-child
Basic Filter Selector (Location Filter Selector): jQuery Added
All qualified elements are stored in a unified set and numbered in the set. Starting from 0
:first/last :gt/lt/eq(i) :even/odd
Property filter selector: same as CSS
Content filtering: jQuery adds four new types:

  1. Query parent elements with text in content as a condition
    Contains (text) content contains elements of the specified text
  2. Query the parent element with the feature of the child element as the query condition
    Has (selector) contains the parent element of the child element that meets the selector requirement
  3. Empty element/non-empty element:

Visibility filtering: jQuery Added
Hidden can only choose two hidden elements

type="hidden"     display:none

State filtering: with four states of CSS:
:enabled :disabled :checked :selected
Form element filtering:
Input selects all form elements: input select textarea button
[type] Each type corresponds to a selector

:text  :password  :file    :button  :submit ....

4. Amendment:

Content: Three kinds:
HTML snippet: $(…). HTML ([new content]). innerHTML
Plain text content: $(…). text ([new content]). textContent
Value of form elements: $(…). val ([new value]). value
Empty content: $(…). empty ();
Attributes: 3 kinds:
HTML standard attributes: $(…). attr (“attribute name”[“value”])

Question: Only one attribute can be modified at a time:
Solution: Modify the values of multiple attributes at the same time:
   Property name: value,
   Property name: value,
      ... : ...

State attribute: $(…). prop (“property name” [, bool])
Custom extended attributes: $(…). data (“attribute name”[“value”])
Modification: Inline Style:
Get: Calculated style:
Use. css: $(…). CSS (“css attribute name”[, value])
Problem: Modifying each CSS attribute individually makes the code cumbersome
Solution: Batch style modification with class:
$(…).addClass(“class … “)
$(…).removeClass(“class …”)
$(…).hasClass(“class …”)

$(…).toggleClass(“class …”)

  1. Search by the relationship between nodes:
    2 broad categories:

    1. Father and son:
      Problem: Only direct child elements can be obtained
      Solution: Find out in all descendants
    2. Brother:
  2. Add, delete, replace, clone:
    Add: 2 steps:

    1. Create a new element: var $elem=$(“html snippet”)
    2. Add new elements to the DOM tree:
      Add at the end: $parent. append ($elem) //return $parent

             $elem.appendTo($parent) //return $elem

      Start by inserting: $parent.prepend ($elem) //return $parent

             $elem.prependTo($parent) //return $elem

      Insert before specifying the element: $child. before ($elem)
      After specifying the element, insert: $child. after ($elem)

It can be simplified as one step:
$(“html snippet”). appendTo ($parent)
Parent. append (“html snippet”)

Remove: $(…). Remove ()
Replacement: $(…). ReplceWith (); // Right Replacement Left // Return Left

$(...). replaceAll (...); // left replaces right // return left

Clone: $(…). clone ();
Shallow Cloning: Copy Content and Style Only, Not Copy Behavior

Clone () defaults to shallow cloning

Deep Cloning: Copying Content and Style and Copying Behavior


5. incident:

Despise: There are several ways of event binding in jq, which are:

  1. .bind (“event name”, handler)
    Unbind (“event name”, handler)
    3 heavy loads:

    Unbind ("event name", handler) removes a handler on a specified event
     Unbind ("event name") removes all handlers on a specified event
     Unbind () removes all handlers on all events
  2. One (“event name”, handler)
    It can only be triggered once. After triggering, it will be unbound automatically.
  3. Delegate (“selector”, “event name”, “handler)
    It’s actually a simplified version of bubbling:

    1. The target element judgment in bubbling is elevated to the first parameter, and the selector is used as the judgment condition.
    2. Rerefers this to the target element

Despise:.Delegate vs.bind

  1. Binding location is different:
    Bind () is directly bound to the target element (child element)
    . delegate () is bound to the parent element
  2. The number of events monitored varies:
    Bind () causes an increase in the number of event monitors
    Delegate () always has only one listener
  3. . bind () cannot automatically get event handlers for dynamically generated new elements
    Delegate () automatically obtains event handlers on parent elements even if new elements are generated dynamically later

Unbinding:. Undelegate ()

  1. Live / die () discarded
  2. On: Unify the use of bind and delegate

    1. Instead of bind:.On (“event name”, handler)
    2. Instead of delegate:.On (“event name”, “selector”, “handler)


  1. Ultimate simplification:. Event name (handler)

6. Page load after execution: 2 kinds:

  1. DOMContentLoaded:
    DOM content (html, js) is loaded and triggered ahead of time
    When: DOMContentLoaded is preferred when the operation does not need to wait for CSS and images
    jQuery: $(document).ready(function(){ … })
    Simplification: $(). ready (function (){…})
    More simplified: $(function () {…})

     ES6: $(()=>{ ... })
  2. window.onload=function(){
    // Wait until all the contents of the page (html, css, js, pictures) are loaded before execution
    When: If you have to wait for CSS and images to load before you can perform the operation, you must put it in window. onload

Despise: The Principle of $in jQuery: Four Overloads

  1. If a selector string is passed in, a JQ object is found and created
    Optimize: speed up
    If the selector is only an id, call getElementById
    If the selector is just a label, call getElements ByTagName
    If the selector is only a class, call getElementsByClassName
    If the selector is complex, call querySelector All
  2. If DOM element objects are passed in, the existing DOM elements are encapsulated as JQ objects
  3. If you pass in an HTML snippet, create a new element:
  4. If an incoming function is passed in, the DOM content is bound to be loaded and executed

7. Mouse events:

DOM: mouseover mouseout
In and out of child elements, events on parent elements are triggered repeatedly
jq: mouseenter mouseleave
Enter and exit child elements, no longer triggering events on parent elements
Simplification: If you bind mouseenter and mouseleave at the same time

It can be simplified as. hover (enterHandler, leaveHandler)
 If enterHandler and leaveHandler can be unified as one processing function:.Hover (handler)

Analog trigger:
Trigger (“event name”) => $(…). event name ()

8. Animation:

Simple animation: 3 kinds:

  1. Display Hiding:.Show (ms). hide (ms). toggle (ms)
    No parameters, default: instantaneous display hiding, no animation

    Principle: displaying property is implemented, and animation is not supported

    With milliseconds: animation effect

  2. Slip Up (ms). Slip Down (ms). Slip Toggle (ms)
  3. FadeIn (ms). fadeOut (ms). fadeToggle (ms)

Question: 1. The effect is fixed and not easy to maintain.

2. The efficiency of using programmed timers is not as good as that of transition.

Universal Animation:
CSS attribute: target value,
CSS attribute: target value,
Problem: CSS attributes that support only a single value

Color and CSS3 transformations are not supported

Automatically execute after animation playing: The last parameter of animation API is a callback function, which executes automatically after animation playing is completed!
This in the callback function refers to the current DOM element that is playing the animation.

9. Queuing and concurrency:

  1. Concurrency: multiple CSS attributes change simultaneously
    Default concurrent changes for multiple CSS attributes placed in an animate function
  2. Queuing: Multiple CSS attributes change successively
    For the same element, multiple animation APIs are called successively, all of which are queued for execution.
    Principle: All animation APIs do not start animation immediately, but just add the current animation function to the animation queue of elements to wait for execution.

Stop animation: $(…). stop ();
Default: Only Stop Animation queue, currently playing an animation, queue follow-up animation, still execute!
How to stop the animation and clear the queue:.Stop (true)

Selector: animated can select or judge an element that is playing animation

10. Class Array Object Operation:

// this – > current elem
Despise: $(…). each () vs $. each (array / collection, fun)

Var i=$(…). index (DOM element / JQ object to find)
Simplification: If a child element is found within a parent element:

$(child element). index ();

11. Add custom methods for jquery:

  1. Add to jQuery. FN
    Emphasis: jQuery. fn. Custom method = function (){

    // this - > JQ object that will call this method in the future
  2. Call: $(…). Custom method ()

12. Plug-ins: Third-party libraries that add functionality to standard function libraries or frameworks

  1. Official plug-in jQuery UI:
    Using jQueryUi:
    Introduce jquery.js first, because jQuery UI is developed based on jQuery
    Introduce jquery-ui.js
    Write a custom script again
    Interaction: Self-study

    1. Rewrite three simple animation APIs and add new effects
    2. For addClass/removeClass/toggleClass, action is also added
    3. Rewriting animate method to support color animation

What is a Component: Small Functions with Complete Styles and Behaviors
How to use: 4 steps:

1. Introduction: jquery-ui.css
2. Write HTML content structure according to component agreement
3. Introduce jquery.js and jquery-ui.js
4. In the custom script, find the parent element of the plug-in and call the plug-in API


Intrusiveness: Automatically adding classes and behaviors without the developer's knowledge
Excellent: simple!
Necessity: Not maintainable!

jQuery UI vs bootstrap
JQuery UI Stupid, Intrusive
Excellent: Simple: Unmaintainable
Bootstrap adds a small number of styles and behaviors manually (custom extension properties)
Lack: A little more trouble than jQuery UI
You: Customizable!

13. Third-party plug-ins:

File upload:
Rich Text Editor:
Masonry: Brick Wall/Waterfall Flow

14. Custom plug-ins:

When: Whenever you want to reuse a function or style, encapsulate it as a plug-in
Prerequisite: Plug-in functionality must already be implemented with native html, CSS and JSS
Two styles of encapsulated plug-ins:
JQuery intrusive:

  1. Extract the CSS needed by the plug-in and save it in a separate CSS file
  2. The JS file defining the plug-in:
    First check if jQuery was introduced in advance
    Define plug-in functions, stored in jQuery’s prototype object jQuery. FN

    Intrusion: Automatically add class for child elements according to plug-in needs
          Binding event handlers for child elements
  3. Use plug-ins:
    CSS file for introducing plug-ins
    Write HTML content in body according to plug-in
    JS files for introducing jquery.js and plug-ins
    In a custom script, find the parent element of the plug-in to be applied and call the plug-in function

Bootstrap DIY:

  1. Copy CSS to a separate CSS file
  2. Writing js:
    Verify that jQuery is loaded ahead of time
    Find custom extension properties to bind events for them
  3. Use plug-ins:
    CSS for introducing plug-ins
    Write content according to HTML format requirements of plug-ins
    Manual addition of class for HTML elements of plug-ins
    Adding specified custom extension properties to elements that trigger events

15. jQuery’s Ajax API

Data: “rawData”/{Variable Name: Value,…}

// Triggered before sending


// Whether successful or unsuccessful, triggers as long as the request is completed


// Request Triggered Successfully


// Triggered when an error occurs

… …
}).catch(err=>{ … })

  1. Send get requests exclusively

$.get(url,data,dataType).then(data=>{ … })

  1. Specialize in sending get requests, receiving JSON responses, and automatically converting them to JS objects

$.getJSON(url,data).then(data=>{ … })

  1. Send get request specially, receive JS statement response, and execute


  1. Specialize in sending get requests, get a response to an HTML snippet, and automatically populate it into the previous parent element

$(parent element). load (“xx.php/xx.html”)
Emphasis: No support for then!

Specially simplifying post requests:
$.post(url,data,dataType).then(data=>{ … })

16. Cross-domain requests:

Cross domain:

Allow cross-domain requests: link, img, script
Cross-domain: XHR objects (ajax requests)
Flexibility: script requires the server to return an executable JS statement

The server should return an executable JS statement containing data

How to achieve:
Client implementation: JSONP (Filled json)

  1. Define Processing Functions on the Client
  2. In the button click event, the script element is created dynamically, SRC is set to the server address, and the call back = function name is carried with the request parameter
  3. On the server side, the function name in the request parameter is received, and the function name and the data to be returned are spliced into an executable JS statement.
  4. Client script, request server php, get executable statements, automatically call pre-defined functions to process data
  5. At the end of the client processing function, delete script dynamically

The Ajax API for starting jQuery is available, but the dataType must all be written as jsonp, the same principle.

Server: header (“Access-Control-Allow-Origin:*”);
Allow clients to use XHR objects for cross-domain requests!

Conclusion: if you think the conclusion is OK, you can encourage me. Your encouragement is my driving force. Thank you, old fellow iron!

Recommended Today

The construction tool of C ා

What’s the motivation for writing this article? Why do you want to study the build tool (see. Csproj), create a new C project with visual studio IDE, and click build to run it? A: please refer to this_minutes_before_coding. I call it “engineering.”. Engineering development is not just about opening IDE and creating new projects. It […]