JQuery introduction

This is the 26th day of my participation in the August More Text Challenge

ajaxError

• This function is triggered when any request fails

  $(window).ajaxError(function () {
      console.log('One request failed')})Copy the code

ajaxComplete

• This function is triggered when any request completes

  $(window).ajaxComplete(function () {
      console.log('I have a request completed')})Copy the code

ajaxStop

• This function is triggered at the end of any request

  $(window).ajaxStop(function () {
      console.log('I have a request terminated.')})Copy the code

JQuery has multiple libraries

• We’ve been using jQuery for a long time without any problems

• But if one day, we need to introduce another plug-in or library

• Also exposed is $get jQuery

• Then, our jQuery will not work

• So at this point, jQuery gives us a way to have multiple libraries

  // This method returns control of jQuery naming
  jQuery.noConflict()
  
  // The $variable is unusable after the above code is executed
  // But jQuery can be used
  console.log($) // undefined
  console.log(jQuery) // It can be used
  Copy the code

• Relinquish full control

  // This method can hand over full control when passing a true
  jQuery.noConflict(true)
  
  // The $variable is unusable after the above code is executed
  // The jQuery variable is also unavailable
  console.log($) // undefined
  console.log(jQuery) // undefined
  Copy the code

• Change control

  // You can use a variable to accept the return value, which is the new control
  var aa = jQuery.noConflict(true)
  
  // Now you can use aa as the exposed interface of jQuery
  aa('div').click(function () { console.log('I got clicked.')})Copy the code

JQuery plugin extension

• jQueryReally good and powerful
• But there are some methods that he doesn’t have, and our business requirements sometimes encounter methods that he doesn’t have
• So we can extend some methods to him

Extend to himself

• Extend to itself using the jquery.extend method

• The expanded content can only be called with $or jQuery

  // jquery. extend takes an argument that is an object containing our extended methods
  jQuery.extend({
      max: function (. n) { return Math.max.apply(null, n) },
      min: function (. n) { return Math.min.apply(null, n) }
  })
  Copy the code

• We’ll be ready to use it after we’ve expanded it

  const max = $.max(4.5.3.2.6.1)
  console.log(max) / / 6
  const min = $.min(4.5.3.2.6.1)
  console.log(min) / / 1
  Copy the code

Extend to the set of elements

• Used by the collection of elements after the extension

• That is, we use the set of elements fetched with a selector like $(‘li’)

• Extend with the jquery.fn.extend () method

  // jquery.fn.extend () takes an argument that is an object containing our extended methods
  jQuery.fn.extend({
      checked: function () {
          // The return keyword is used to ensure chained programming
          // The following code is the business logic
          return this.each(function() { this.checked = true})}})Copy the code

• We’ll be ready to use it after we’ve expanded it

  // called by a collection of elements
  $('input[type=checkbox]').checked()
  // All checkboxes are selected after execution
  Copy the code