JQuery tool Functions
Original article address: Workshop
Attribute list description
Webkit-related browsers return true; otherwise, false, such as google and aoyou.
Mozilla-related browsers return true; otherwise, false, such as Firefox
The safari browser returns true; otherwise, false, for example, safari
If the browser is related to opera, true is returned. Otherwise, false is returned, for example, opera.
If the browser is related to msie, true is returned; otherwise, false is returned, such as IE, 360, sogou.
Version: returns the version of the corresponding browser.
$ (Function () {if ($. browser. msie) {alert ("IE browser");} if ($. browser. webkit) {alert ("webkit Browser");} if ($. browser. mozilla) {alert ("mozilla Browser");} if ($. browser. safari) {alert ("safari");} if ($. browser. opera) {alert ("operabrowser");} alert ($. browser. version );})Ii. boxModel
Returns a Boolean value. If the W3C box model is used, true is returned. Otherwise, false is returned.
There are two types of box models: W3C box models and IE box models. The fundamental difference between the two is that the W3C box model does not include padding and border. It only refers to the Height and Width of content, while the IE box model includes padding and border.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">The W3C box model is displayed in the preceding example. If the top two rows are deleted, <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Array and object operations
Iii. $. each ()This tool function can not only traverse the specified array, but also traverse the elements on the page.
Syntax: $. each (obj, fn (para1, para2) obj indicates the array or object to be traversed. fn is the callback function executed for each traversal element. para1 indicates the serial number of the array or the attribute of the object, para2 indicates the element and object attributes of the array.
$ (Function () {var arr = [1, 2, 3, 4, 5]; $. each (arr, function (index, value) {document. write (index + ":"); document. write (value + "<br/> ");});})
Output:
2: 3
3:4
4: 5$. Each () traverses the array.
$ (Function () {var arr = {"Zhang San": "23", "Li Si": 22, "Wang Wu": "21"}; $. each (arr, function (index, value) {document. write (index + ":"); document. write (value + "<br/> ");});})
Output: Michael JACOB: 23
Li Si: 22
Wang Wu: 21Element Traversal
<Head> <title> </title> <script src = "jQuery.1.8.3.js" type = "text/javascript"> </script> <script type = "text/javascript"> $ (function () {$ ("p "). each (function () {detail (this).css ("background-color", "red ");});
// The three lines of code have the same effect as the three lines above. // $. each ($ ("p"), function () {// ((this).css ("background-color", "red ");//})}) </script> 4. $. grep ()Filter the elements that meet the conditions and return a new array.
Syntax: $. grep (Arrar, fn (value, index); pay attention to the parameter order of the callback function. The first is the value, and the second is the index.
$. Grep (Arrar, fn (value, index), [bool]); the third parameter indicates whether to reverse the query; true indicates to reverse the query; false indicates not to reverse the query.
$ (Function () {var arr = [2, 5, 34, 22, 8]; var arr1 = $. grep (arr, function (value, index) {return index <= 2 & value <10;}) document. write (arr1.join (); // output 2, 5 })6. $. map ()Changes the data in the function and accepts an array or an array of classes as a parameter.
$ (Function () {var arr = [2, 5, 34, 22, 8]; var arr1 = $. map (arr, function (value, index) {if (value> 5 & index <3) {return value-10 ;}}) document. write (arr. join () + "<br/>"); //, 34,22, 8, you can see that the original array does not change document. write (arr1.join (); // 24 the new array only obtains the result after the operation })VII. $. inArray ()If an element to be searched exists in the array, the index of the element to be searched is returned.
$ (Function () {var arr = [1, 2, 3, 4, 5]; alert ($. inArray (4, arr); // pop up 3 })8. $. trim ()Removes spaces on both sides of a string.
$ (Function () {var str = "are you good at home? "; Document. write (" 11 "+ str +" 11 "+" <br/> "); // output 11. Are you in your hometown? 11 document. write ("11" + $. trim (str) + "11"); // output 11. Are you in your hometown? 11 // Add 11 to see the difference clearly. })9. Test operations$. IsArray (obj) checks whether the parameter is an array.
$. IsFunction (obj) checks whether the parameter is a function.
$. IsEmptyObject (obj) checks whether the parameter is an empty object.
$. IsPlainObject (obj) checks whether the parameter is a pure Object, that is, whether the Object is created using the {} or new Object () keyword.
$. Contains (container, contained) checks whether a DOM node contains another DOM node. Yes, true is returned; otherwise, false is returned. Note that the parameter is a DOM object rather than a jQuery object.
$ (Function () {var arr = [1, 2, 3, 2, 1]; document. write (jQuery. isArray (arr); // returns true var str = "123"; document. write (jQuery. isArray (str); // returns false
})$ (Function () {var f = fun1; alert ($. isFunction (fun1); // return true}) function fun1 (){}$ (Function () {var obj1 = {}; var obj2 = {name: "Zhang Fei"}; alert ($. isEmptyObject (obj1); // return true obj1 is an empty object alert ($. isEmptyObject (obj2); // returns false. obj2 is not an empty object })$ (Function () {var obj1 = {}; var obj2 = {name: "Zhang Fei"}; var obj3 = new Object (); var obj4 = null; alert ($. isPlainObject (obj1); // true creates alert ($. isPlainObject (obj2); // true create alert ($. isPlainObject (obj3); // true creates alert ($. isPlainObject (obj4); // flase is not created through {} or new Object })$ (Function () {alert ($. contains ($ ("# div1") [0], $ ("# p1") [0]); // returns true. Note that the parameter is a DOM object, not a jQuery object })10. $. param ()Serialize to a url string
$. Param (obj, [bool]); the second parameter is an optional parameter, indicating whether to perform shallow serialization.
$ (Function () {var man = {Name: "Zhang Fei", Age: 23}; var str = $. param (man); document. write (str); // Name = % E5 % BC % A0 % E9 % A3 % 9E & Age = 23 var str1 = decodeURI (str); document. write ("<br>" + str1); // Name = Zhang Fei & Age = 23 })11. $. makeArray ()Copy the attributes of an array or a class array object to a new array (an array is true) and return the new array.
Var arr = [1, 3, 5, 7, 9]; $ (function () {var arr1 = $. makeArray (arr); document. write (arr1.join (); // output 1, 3, 5, 7, 9 })12. $. merge ()This function accepts two arrays or array objects of classes, attaches the second parameter to the first parameter, returns the first parameter, the first array is modified, and the second parameter is not.
var arr1 = [1, 3, 5, 7, 9]; var arr2 = [2, 4, 6, 8, 10]; $(function () { var arr3 = $.merge(arr1, arr2); document.write(arr1.join() + "<br/>"); //1,3,5,7,9,2,4,6,8,10 document.write(arr2.join() + "<br/>"); //2,4,6,8,10 document.write(arr3.join() + "<br/>"); //1,3,5,7,9,2,4,6,8,10 })Thirteen, $. parseJSON ()This function parses a JSON string and returns the parsing result (object ). Similar to JSON. parse (). Note: jQuery only defines JSON parsing functions and does not define serialization functions.
Var man = {name: "James", age: 23}; var str = JSON. stringify (man); document. write (str + "<br/>"); // {"name": "Zhang San", "age": 23} var man1 = $. parseJSON (str); document. write (man1.name + man1.age); // Zhang San 2314. $. proxy ()Similar to the bind () method of the Function object, the Function is accepted as the first parameter, the object is used as the second parameter, and a new Function is returned. The Function is called as the method of the second parameter object.
$ (Function () {var obj = {name: "John", test: function () {alert (this. name); // when the button with id test is clicked, the name $ ("# test") is displayed "). unbind ("click", obj. test); // cancel event binding (no name will be displayed next time) };$ ("# test "). click (jQuery. proxy (obj, "test"); // bind the method test in the object })15th, $. unique (array)Delete duplicate elements from element array
$ (Function () {var arr = [1, 2, 3, 2, 1]; jQuery. unique (arr); alert (arr. join (); // returns 3, 2, 1 })Sixteen, $. extend ()Merge elements in an object
$ (Function () {var result = $. extend ({}, {name: "Tom", age: 21 },{ name: "Jerry", sex: "Boy"}); alert (result. name); // The output after Jerry will overwrite the previous one, and result is always an object })The dest parameter is omitted. the dest parameter in the extend method prototype can be omitted. If it is omitted, the method can only have one src parameter, in addition, the src is merged into the object that calls the extend method.
Note the following:The subsequent values will overwrite the previous values with the same name.
$ (Function () {$. extend ({hello: function () {alert ('hello');} // This method has only one parameter, meaning that the hello method is merged into the jQuery Global Object }); $. hello (); // pop up hello })Namespace example:
$ (Function () {$. extend ({net :{}}); // extended namespace $. extend ($. net, {hello: function () {alert ('hello');} // bind the hello Method to the namespace net}) $. net. hello (); // call the method through the net namespace })COPY method prototype:
extend(boolean,dest,src1,src2,src3...)The first parameter boolean indicates whether to perform deep copy.
$ (Function () {var result = $. extend (true, {}, {name: "John", location: {city: "Boston", country: "USA" }}, {last: "Resig", location: {state: "MA", country: "China"}); alert (result. location. state); // output MA // result = {name: "John", last: "Resig", location: {city: "Boston ",State: "MA", County: "China"} var result = $. extend (false, {}, {name: "John", location: {city: "Boston", country: "USA" }}, {last: "Resig", location: {state: "MA", country: "China"}); alert (result. location. city); // output undefined // result = {name: "John", last: "Resig", location: {state: "MA", county: "China"} note that there is no city, but the location is merged. The properties in the location do not matter })
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
