Home > Web Front-end > JS Tutorial > Summary of common data processing methods in jQuery_jquery

Summary of common data processing methods in jQuery_jquery

WBOY
Release: 2016-05-16 16:13:22
Original
1173 people have browsed it

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);  //'薯条'
Copy after login

$.param(): Array or object serialization.

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

$.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
}
Copy after login

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()方法了
Copy after login

$.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);
Copy after login

$.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]
});
Copy after login

$.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];
Copy after login

$.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
Copy after login

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.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template