JavaScript Tool Library

There are multiple uses of this method:

You can pass in a CSS selector as a parameter and return a JQ object containing the matched elements. This method is implemented by querySelectorAll.

$$('.mdui-table')

You can pass in DOM elements, DOM element arrays, NodeList, JQ objects, and return JQ objects containing the specified elements.

$$(document)

You can pass in an HTML string and return a JQ object containing a DOM created from HTML.

$$('<div id="wrapper"><span id="inner"></span></div>')

You can pass in a function, which will be called after the DOM is loaded.

$$(function () { console.log('DOM Loaded') })

If only one object is passed in, the properties in the object will be merged into the JQ object, which is equivalent to adding new functions under the JQ namespace.

$$.extend({
  customFunc: function () {}
})

// Then you can call the custom method like this
$$.customFunc()

If two or more objects are passed in, the properties of all objects are added to the first object, and the merged object is returned.

var object = $$.extend(
  { key1: val1 },
  { key2: val2 },
  { key3: val3 }
);

// At this time, the first object and return value are both { key1: val1, key2: val2, key3: val3 }

Extend methods on JQ's prototype chain.

$$.fn.extend({
  customFunc: function () {}
})

// Then you can use the extended method like this
$$(document).customFunc()

Serialize the array or object.

$$.param({width:1680, height:1050})
// width=1680&height=1050

$$.param({foo: {one: 1,two: 2 } })
// foo[one]=1&foo[two]=2

$$.param({ids:[1,2,3] })
// ids[]=1&ids[]=2&ids[]=3

Iterate over an array or object

$$.each(['a', 'b', 'c'], function (i, value) {
  console.log(i + ':' + value);
})

// result:
// 0:a
// 1:b
// 2:c

$$.each({'name': 'mdui', 'lang': 'zh'}, function (i, value) {
  console.log(i + ':' + value);
})

// result
// name:mdui
// lang:zh

Merge two arrays, the merged result will replace the contents of the first array, and return the merged result.

var first = ['a', 'b', 'c'];
var second = ['c', 'd', 'e'];
var result = $$.merge(first, second);
console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e']
console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e']

Delete duplicate elements in the array. It can be an array of DOM elements, an array of strings, and an array of numbers. Return the deduplicated array.

var result = $$.unique([1,2,12,3,2,1,2,1,1,1,1]);
console.log(result); // [1, 2, 12, 3]

Traverse the array or object, return a new array or object through the function,null with undefined Will be filtered out.

var result = $$.map(['a', 'b', 'c'], function (value, key) {
  return key + value;
});
console.log(result); // ['0a', '1b', '2c']

var result = $$.map([1, 2, 3], function (value, key) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

Determine whether the parent node contains child nodes, and return a boolean value.

$$.contains(document, document.body); // true
$$.contains(document.body, document); // false

Detect the set of matched elements based on CSS selectors, DOM elements, or JQ objects. If at least one element matches, return true, otherwise return false.

$$('.box').is('.box'); // true
$$('.box').is('.boxss'); // false
$$('.box').is($$('.box')[0]); // true

Returns the number of elements in the JQ object.

$$('body').length; // 1

Traverse a JQ object and execute a function for each matched element. If the function returns false, the traversal ends.

The first parameter of the function is the index number of the element, and the second parameter is the current element. The this keyword of the function points to the current element.

$$('img').each(function(i, element) {
  this.src = 'test' + i + '.jpg';
});

Traverse a JQ object, call a function for each element of the object, and generate a new JQ object that contains the return value of the function.null with undefined Will be filtered out.

The first parameter of the function is the index number of the element, and the second parameter is the current element. The this keyword of the function points to the current element.

var result = $$('input.checked').map(function (i, element) {
  return $$(this).val();
});

// result is a JQ object composed of the values ​​of the matched elements

Returns the JQ object of the element with the specified index number in the JQ object.

$$('div').eq(0); // Returns the JQ object of the first element
$$('div').eq(-1); // Returns the JQ object of the last element
$$('div').eq(-2); // Returns the JQ object of the penultimate element

Returns the JQ object of the first element in the JQ object.

$$('div').first(); // Returns the JQ object of the first div

Returns the JQ object of the last element in the JQ object.

$$('div').last(); // Returns the JQ object of the last div

Returns the DOM element with the specified index number in the JQ object. If no index number is specified, an array of all DOM elements in the JQ object will be returned.

$$('div').get(); // Returns an array of all div elements
$$('div').get(0); // Return the first div element
$$('div').get(-1); // Return the last div element

If no parameters are passed in, the index value of the first element in the JQ object relative to the sibling element is returned.

If a CSS selector is passed in as a parameter, the index value of the first element in the JQ object relative to the element that matches the CSS selector is returned.

If a DOM element is passed in, the index value of the DOM element in the JQ object is returned.

<div id="child">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
  <div id="child4"></div>
</div>

$$('#child3').index(); // 2
$$('#child3').index('#child div'); // 2
$$('#child div').index($$('#child3').get(0); // 2

Returns a subset of JQ objects.

The subset is the elements starting from start. If the end parameter is passed in, the elements from start to the position that do not contain end are extracted.

$$('div').slice(3); // Returns all elements after the third (including the third) in the object
$$('div').slice(3, 5); // Returns the elements between the third to the fifth (including the third but not the fifth) in the object

Filter out the JQ objects of the elements that match the specified expression from the JQ objects. Parameters can be CSS selectors, JQ objects, DOM elements, functions.

When the parameter is a function, the first parameter of the function is the index number of the current element in the JQ object, the second parameter is the current element, and the this keyword points to the current element. When the function returns true, the element will be kept, when it returns false, the element will be removed.

// Filter out all JQ objects containing div elements of the .box class
$$('div').filter('.box');

// Filter out all JQ objects with selected options
$$('#select option').filter(function (idx, element) {
  return element.selected;
});

Filter out the JQ objects of the elements that do not match the specified expression from the JQ objects. Parameters can be CSS selectors, JQ objects, DOM elements, functions.

When the parameter is a function, the first parameter of the function is the index number of the current element in the JQ object, the second parameter is the current element, and the this keyword points to the current element. When the function returns true, the element will be removed, when it returns false, the element will be retained.

// Filter out all JQ objects that do not contain div elements of the .box class
$$('div').not('.box');

// Filter out all JQ objects with unchecked options
$$('#select option').not(function (idx, element) {
  return element.selected;
});

Determine whether the first element in the JQ object contains the specified CSS class.

$$('div').hasClass('item')

Add CSS classes to the element. Multiple class names can be separated by spaces.

$$('div').addClass('item')

$$('div').addClass('item1 item2')

Remove the CSS class on the element. Multiple class names can be separated by spaces.

$$('div').removeClass('item')

$$('div').removeClass('item1 item2')

If there are CSS classes on the element, delete them, and add them if they don’t. Multiple class names can be separated by spaces.

$$('div').toggleClass('item')

$$('div').toggleClass('item1 item2')

Gets or sets the attribute value of the selected element.

// Get the attribute value of the first element
$$('input[type="checkbox"]').prop('checked');

// Set the attribute values ​​of all selected elements
$$('input[type="checkbox"]').prop('checked', true);

// Set multiple attribute values ​​of elements at the same time
$$('input').prop({
  checked: false,
  disabled: true
})

Delete the attribute value specified by the selected element.

$$('input').removeProp('disabled')

Gets or sets the attribute value of the selected element.

// Get the attribute value of the first element
$$('div').attr('username');

// Set the attribute values ​​of all selected elements
$$('div').attr('username', 'mdui');

// Set multiple attribute values ​​of elements at the same time
$$('div').prop({
  username: 'mdui',
  lastname: 'test'
})

Delete the specified attribute value of the selected element.

$$('div').removeAttr('username')

Gets or sets the value of the selected element.

// Get the value of the first element selected
$$('#input').val()

// Set the value of the selected element
$$('#input').val('input value')

Gets or sets the text content of the selected element.

// Get the text content of the first element selected
$$('#box').text()

// Set the text content of the selected element
$$('#box').text('text content')

Gets or sets the HTML content of the selected element.

// Get the HTML content of the first element selected
$$('#box').html()

// Set the HTML of the selected element
$$('#box').html('html content')

Read or store data on DOM elements.

var dom = document.getElementById('box');

// Store a string on the DOM element
$$.data(dom, 'key', 'value');

// Store an object on the DOM
$$.data(dom, 'obj', {test: 'test'});

// Store multiple data on the DOM at the same time
$$.data(dom, {
  key1: 'value1',
  key2: {
    test: 'test'
  }
});

// Get all the data stored on the DOM
$$.data(dom);

Delete the data stored on the DOM.

// Delete the data stored on the DOM with the key name key
$$.removeData(dom, 'key');

Store data on the elements of the current JQ object.

// Store a string on the .box element
$$('.box').data('key', 'value');

// Store an object on the .box element
$$('.box').data('obj', {
  test: 'test'
});

//Store multiple data on the .box element at the same time
$$('.box').data({
  key1: 'value1',
  key2: {
    test: 'test'
  }
});

// Get all the data stored on the .box
$$('.box').data();

Delete the data stored on the elements of the JQ object.

// Delete the data with the key name key stored on the .box element
$$('.box').removeData('key');

Get the style value of the first element in the JQ object, or set the style of each element.

// Get element style value
$$('#box').css('color')

// Set the style value of the element
$$('#box').css('color', 'red')

// Set multiple style values ​​at the same time
$$('#box').css({
  'color': 'red',
  'background-color': 'white'
})

If no parameters are passed in, get the width of the first element in the JQ object.

If a parameter is passed in, set the width of all elements in the JQ object. If the parameter is a number or a string of numbers, px will be automatically added as the unit.

The value obtained by this method does not include the inner and outer margins by default. When box-sizing:border-box, the inner margin will be included.

$$('.box').width();
$$('.box').width(10);
$$('.box').width('20%')

If no parameters are passed in, get the height of the first element in the JQ object.

If a parameter is passed in, set the height of all elements in the JQ object. If the parameter is a number or a string of numbers, px will be automatically added as the unit.

The value obtained by this method does not include the inner and outer margins by default. When box-sizing:border-box, the inner margin will be included.

$$('.box').height();
$$('.box').height(10);
$$('.box').height('20%');

Get the width of the element, including the padding.

$$('.box').innerWidth();

Get the height of the element, including the padding.

$$('.box').innerHeight();

Hide all elements in the JQ object.

$$('.box').hide();

Restore the display state of all elements in the JQ object.

$$('.box').show();

Switch the display state of all elements in the JQ object.

$$('.box').toggle();

Get the offset of the element relative to the document, as well as the width and height of the element.

$$('.box').offset();
// {
//   top: 20,
//   left: 30,
//   width: 200,
//   height: 100
// }

Returns the JQ object of the parent element of the first element in the JQ object for positioning. That is, the first element whose position is relative or absolute in the parent element.

$$('.box').offsetParent()

Get the offset of the element relative to the parent element, as well as the width and height.

$$('.box').position();
// {
//   top: 20,
//   left: 30,
//   width: 100,
//   height: 200
// }

Find the specified set of descendant nodes according to the CSS selector.

// Found the descendant nodes of #box, the node collection that contains .box
$$('#box').find('.box')

Get the direct child elements of the matched element, you can use the CSS selector as a parameter to filter.

Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// Find all direct child elements of #box
$$('#box').children()

// Find all the direct child elements of #box, the set of elements containing .box
$$('#box').children('.box')

The child elements of the matched element are filtered according to the passed in parameters, and the JQ object of the filtered element is returned.

The incoming parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// Add background color to li containing ul
$$('li').has('ul').css('background-color', 'red');

Returns the JQ object of the matched direct parent element.

If no parameters are passed in, the JQ object of the direct parent element is returned directly. If a parameter is passed in, only the JQ object of the direct parent element that matches the parameter is returned.

Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// Returns the immediate parent element of the .box element
$$('.box').parent();

// Returns the element of the .parent class in the direct parent element of the .box element
$$('.box').parent('.parent');

Returns the JQ objects of all matched ancestor elements.

The incoming parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

//Returns all the ancestors of the span element
$$('span').parents();

// Return all span elements that are the ancestors of p elements
$$('span').parents('p');

Find all the parent elements of the current element until the matching element is encountered.

The returned JQ object contains all the parent elements found below, but does not contain the elements matched by the parameter.

// Find all the parent elements of the .item element until the .parent element is encountered
$$('.item').parentsUntil('.parent');

Get the JQ object of the previous sibling element of the current element. You can use parameters for filtering.

Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// Returns the previous element of the .box element
$$('.box').prev();

// Get the previous div element of the .box element
$$('.box').prev('div');

Get the JQ objects of all sibling elements before the current element. You can use parameters for filtering.

Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// Returns all sibling elements before the .box element
$$('.box').prevAll();

// Returns all the .selected sibling elements in front of the .box element
$$('.box').prevAll('.selected');

Get all the sibling elements in front of the current element, until a matching element is encountered, and no matching element is included.

Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// Returns all the sibling elements before the .box element, until the .until element is encountered
$$('.box').prevUntil('.until');

Get the JQ object of the next sibling element of the current element. You can use parameters for filtering.

Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// 返回 .box 元素的后一个元素
$$('.box').next();

// 获取 .box 元素的后一个 div 元素
$$('.box').next('div');

Get the JQ objects of all sibling elements behind the current element. You can use parameters for filtering.

Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// Returns all sibling elements after the .box element
$$('.box').nextAll();

// Return all .selected sibling elements behind the .box element
$$('.box').nextAll('.selected');

Get all the sibling elements behind the current element, until a matching element is encountered, and the matching element is not included.

Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// Return all the sibling elements after the .box element until the .until element is encountered
$$('.box').nextUntil('.until');

Matches from the current element upwards, and returns the first matched element.

Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// Get the nearest .parent element among the parent elements of the .box element
$$('.box').closest('.parent');

Get all sibling elements of the current element. You can use parameters for filtering.

Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// Get all the sibling elements of the .box element
$$('.box').siblings();

// Get all the sibling elements of the .box element with .selected elements
$$('.box').siblings('.selected');

Add elements to the current JQ object.

Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

//Add the element containing .selected to the current JQ object
$$('.box').add('.selected');

Remove all child nodes of the selected element from the DOM.

$$('.box').empty();

Remove all selected elements from the DOM.

$$('.box').remove();

Insert the specified content in front of the selected element.

The incoming parameters can be string, HTML, JQ object, DOM element, DOM element array, NodeList.

// HTML Code
<p>I would like to say: </p>

// js Code
$$('p').prepend('<b>Hello</b>');

// result
[ <p><b>Hello</b>I would like to say: </p> ]

Add the selected element to the front of the inside of another specified element.

Incoming Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// HTML Code
<p>I would like to say: </p>

// js Code
$$('<p>Hello</p>').prependTo('p');

// result
[ <p><p>Hello</p>I would like to say: </p> ]

Insert the specified content behind the selected element.

The incoming parameters can be string, HTML, JQ object, DOM element, DOM element array, NodeList.

// HTML Code
<p>I would like to say: </p>

// js Code
$$('p').append('<b>Hello</b>');

// result
[ <p>I would like to say: <b>Hello</b></p> ]

Insert the selected element behind the inside of another specified element.

Incoming Parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList.

// HTML Code
<p>I would like to say: </p>

// js Code
$$('<p>Hello</p>').appendTo('p')

// result
[ <p>I would like to say: <p>Hello</p></p> ]

Insert content after the selected element.

The incoming parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList, HTML strings

// HTML Code
<p>I would like to say: </p>

// js Code
$$('p').after('<b>Hello</b>')

// result
[ <p>I would like to say: </p><b>Hello</b> ]

Insert the selected element after the specified element.

The incoming parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList, HTML strings

// HTML Code
<p>I would like to say: </p>

// js Code
$$('<b>Hello</b>').insertAfter('p');

// result
[ <p>I would like to say: </p><b>Hello</b> ]

Insert content before the selected element.

The incoming parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList, HTML strings

// HTML
<p>I would like to say: </p>

// js Code
$$('p').before('<b>Hello</b>');

// result
[ <b>Hello</b><p>I would like to say: </p> ]

Insert the selected element in front of the specified element.

The incoming parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList, HTML strings

// HTML
<p>I would like to say: </p>

// js Code
$$('p').insertBefore('<b>Hello</b>');

// result
[ <p>I would like to say: </p><b>Hello</b> ]

Replace the selected element with the new element.

The incoming parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList, HTML strings

$$('.box').replaceWith('<p>Hello</p>');
// 用 <p>Hello</p> 替换所有的 .box 元素 

Replace the specified element with the selected element.

The incoming parameters can be CSS selectors, JQ objects, DOM elements, DOM element arrays, NodeList

$$('.new').replaceAll('.box');
// Replace all .box elements with .new elements

Copy all elements in the collection through deep cloning.

Copy all the elements in the collection by deep cloning through the native cloneNode method. This method will not have data and event handlers copied to the new element. This is different from using a parameter in jquery to determine whether to copy data and event handling.

$$('body').append($("#box").clone())

Combine the values ​​of the form elements into an array of key-value pairs of name and value.

$$('form').serializeArray();
// [{"name":"golang","value":"456"},{"name":"name","value":"mdui"},{"name":"password","value":""}]

Serialize the form element array or object.

$$('form').serialize();
// golang=456&name=mdui&password=

Bind event handlers to specific events of each matched element.

// Bind the click event
$$('.box').on('click', function (e) {
  console.log('Clicked on the .box element');
});

// Bind multiple events
$$('.box').on('click focus', function (e) {
  console.log('click with focus Event will trigger the function');
});

// Event delegation
$$(document).on('click', '.box', function (e) {
  console.log('This function is triggered when the .box is clicked');
});

// Bind multiple events and event handling functions at the same time
$$('.box').on({
  'click': function (e) {
    console.log('The click event is triggered');
  },
  'focus': function (e) {
    console.log('The focus event is triggered');
  }
});

// Incoming parameters
$$('.box').on('click', {key1: 'value1', key2: 'value2'}, function (e) {
  console.log('Click on the .box element and pass in parameters for the event handler');
  // e._data for {key1: 'value1', key2: 'value2'}
});

// Get event parameters
$$('.box').on('click', function (e, data) {
  // data is equal to e._detail
});

Bind event handlers to specific events of each matched element. But the event will only be triggered once.

The usage of the method and .on() The same, so no more examples.

Unbound event from each matched element.

// Unbound specified event
$$('.box').off('click');

// Unlock multiple bound events at the same time
$$('.box').off('click focus');

// Unbound specified event handler
$$('.box').off('click', callback);

// Unlock the event bound by the event delegate
$$(document).off('click', '.box');

// Cancel the specified event handling function bound by the event delegate
$$(document).off('click', '.box', callback);

Trigger the specified event

// Trigger the specified event
$$('.box').trigger('click');

// Pass in parameters when the event is triggered
$$('.box').trigger('click', {key1: 'value1', key2: 'value2'});

DOM Loaded,DOMContentLoaded Triggered when the event is triggered.

$$(document).ready(function () {
  console.log('The current page DOM has been loaded');
});

// It also has another way of writing, which has the same effect as the .ready() method
$$(function () {
  console.log('The current page DOM has been loaded');
});

Set the global AJAX default parameters.

$$.ajaxSetup({
  //Disable the triggering of global AJAX events by default
  global: false,

  // Use POST request by default
  method: 'POST'
});

See the detailed parameter list below AJAX parameter。

Send an AJAX request and return the XMLHttpRequest object it created.

$$.ajax({
  method: 'POST',
  url: './test.php',
  data: {
    key1: 'val1',
    key2: 'val2'
  },
  success: function (data) {
    console.log(data);
  }
});

See the detailed parameter list below AJAX parameter。

Global AJAX events.

AJAX The function is executed at the beginning of the request.

$$(document).ajaxStart(function (event, xhr, options) {
  // xhr: XMLHttpRequest Object
  // options: AJAX Requested configuration parameters
});

Global AJAX events.

AJAX The function is executed when the request is successful.

$$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: XMLHttpRequest Object
  // options: AJAX Requested configuration parameters
  // data: AJAX The data returned by the request
});

Global AJAX events.

AJAX The function is executed when an error occurs in the request.

$$(document).ajaxError(function (event, xhr, options) {
  // xhr: XMLHttpRequest Object
  // options: AJAX Requested configuration parameters
});

Global AJAX events.

AJAX The function is executed when the request is completed.

$$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: XMLHttpRequest Object
  // options: AJAX Requested configuration parameters
});

Request method.

include：GET、POST、PUT、PATCH、HEAD、OPTIONS、DELETE

Set at XMLHttpRequest The data on the object.

$$.ajax({
  url: 'A cross-domain URL',
  xhrFields: {
    withCredentials: true
  }
});

HTTP An object composed of status codes and functions.

$$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('Called when the return status code is 404');
    },
    200: function (data, textStatus, xhr) {
      alert('Called when the return status code is 200');
    }
  }
});

The status code between 200-299 indicates that the request is successful, the function parameters and success The callback parameters are the same; otherwise, the request fails, and the function parameters are the same as error The parameters of the callback are the same.

The type of data returned by the server.

include：text、json、jsonp

Called before the request is sent. return false The AJAX request will be cancelled at the time.

$$.ajax({
  beforeSend: function (xhr) {
    // xhr for XMLHttpRequest Object
  }
});

Called after the request is successful.

$$.ajax({
  success: function (data, textStatus, xhr) {
    // data for AJAX The data returned by the request
    // textStatus Is the string containing the success code
    // xhr for XMLHttpRequest Object
  }
});

Called when there is an error in the request.

$$.ajax({
  error: function (xhr, textStatus) {
    // xhr for XMLHttpRequest Object
    // textStatus Is the string containing the error code
  }
});

Called after the request is completed.

$$.ajax({
  complete: function (xhr, textStatus) {
    // xhr is the XMLHttpRequest object
    // textStatus Is a string containing a success or error code
  }
});

Redraw the current element.

$$('.box').reflow();

Set the current element transition-duration Attributes.

$$('.box').transition();

Add a transitionend event callback on the current element.

$$('.box').transitionEnd(function () {
  console.log('The transitionend event of the .box element has fired');
})

Set the transform property of the current element.

$$('.box').transform('rotate(90deg)')

Set the transform-origin property of the current element.

$$('.box').transformOrigin('top center')

Initialize the components of the current element and the components of child elements.

$$('[mdui-collapse]').mutation()

Show the mask layer. You can pass in an integer parameter to indicate the z-index style of the mask layer, and the default is 2000.

$$.showOverlay();

Hide the mask layer.

If you call $$.showOverlay() multiple times to show the mask layer, you also need to call $$.hideOverlay() the same number of times to hide the mask layer. You can force the mask layer to be hidden by passing in the parameter true.

$$.hideOverlay();

Lock the screen.

$$.lockScreen();

Unlock the screen.

If you call $$.lockScreen() multiple times to display the mask layer, you also need to call $$.unlockScreen() the same number of times to hide the mask layer. You can force the mask layer to be hidden by passing in the parameter true.

$$.unlockScreen();

Function throttling.

The first parameter is the function to be executed, and the second parameter is the delay time.

$$.throttle(function () {
  console.log('This function is executed once at most 100ms');
}, 100)

Generate a globally unique ID.

$$.guid();

You can pass in a parameter. When the guid corresponding to the parameter value does not exist, a new guid will be generated and returned; when the guid corresponding to the parameter already exists, the existing guid will be returned directly.

// The following two lines of code return the same value
$$.guid('test');
$$.guid('test');