Summary of common data processing methods in jQuery_jquery

The examples in this article summarize jQuery’s common data processing methods. Share it with everyone for your reference. The details are as follows:

$.trim(): Remove whitespace characters before and after the string.

var str = ' 薯条 ';
var formatStr = $.trim(str);  //'薯条'

$.param(): Array or object serialization.

var obj = {
  name: 'dog',
  count: 10
};
var str = $.param(obj); //"name=dog&count=10"

$.isArray(): Check whether it is an array.
$.isFunction(): Check whether it is a function type.
$.each(obj, [callback]): Traverse array or collection objects. obj is the collection object to be traversed, and callback represents the callback function, which will be started when each member is traversed. The callback function contains two parameters. The first parameter is the index of the object member or array, and the second parameter is the corresponding value.

var a = [x,y,z];
$.each(a, function(index, value) {
  console.log(index); //0,1,2
  console.log(value); //x,y,z
});
var b = {x:1, y:2, z:3};
$.each(b, function(key, value)) {
  console.log(key);  //x,y,z
  console.log(value); //1,2,3
}

Note: If you want to exit the each() loop midway, you can return false in the callback function, and other return values ​​will be ignored.

$.each() and $(selector).each() have the same function, but $.each() can traverse any object or array, while $(selector).each() can only traverse the objects selected by the current selector jQuery object.

$.makeArray(): Convert array-like objects into array objects. The so-called array-like object has a length attribute, and the index is from 0 to length-1. But these objects cannot call array methods.

var arr = $.makeArray($('li')); //类数组对象转换为数组
$('ul').html(arr.reverse()); //可以调用数组的reverse()方法了

$.grep(): Filter out elements in the array that do not meet the conditions based on the filter function.

$.grep(array, callback, [invert]);

Explanation: The parameter array represents the array to be filtered, and callback represents the filtering function. If the filter function returns true, the element is retained; if the filter function returns false, the element is deleted. Parameter invert, optional, if false or not set, returns the elements in the array that are returned true by the filter function; if this parameter is true, returns the elements that are returned false by the filter function.

var a = [1,2,3,4,5];
a = $.grep(a, function(value, index)) {
  return value > 3; //a现在为[4,5]
});
var b = [1,2,3,4,5];
b = $.grep(b, function(value, index)) {
  return value > 3; //b现在为[1,2,3]
}, true);

$.map(): Map array.
$.map(array, callback);

var a = [1,2,3,4];
a = $.map(a, function(elem)) {
  return elem * 2; //a现在为[2,4,6,8]
});

$.merge(): Merge arrays.
Description: Accepts two array parameters.

var a = [1,2,3];
var b = [4,5];
var c = $.merge(a,b); //c为[1,2,3,4,5];

$.unique(): Remove duplicates in the DOM element array.

...
<a id="1" class="link link1"></a>
<a id="2" class="link"></a>
<a id="3" class="link"></a>
...
var $link = $('.link'); //包含#1,#2,#3
var $firstLink = $('.link1'); //包含#1
var $links = $.merge($link, $firstLink); //包含#1,#2,#3,#1
var $linkList = $.unique($link); //包含#1,#2,#3

Note: It can only process DOM element arrays, not strings or JavaScript arrays.

I hope this article will be helpful to everyone’s jQuery programming.