Instance parsing jquery tool functions _jquery

First, $.browser object properties

Attribute list description

WebKit WebKit related browsers return true, otherwise return false, such as Google, proud tour.

Mozilla Mozilla-related browsers return true, otherwise return false, such as Firefox

Safari Safari-related browsers return true, otherwise return false, such as Safari

Opera opera-related browsers return true, otherwise return false, such as opera

MSIE MSIE The associated browser returns TRUE, otherwise returns false, such as ie,360, Sogou

Version returns the corresponding browser versions

  $ (function () {
  if ($.browser.msie) {
  alert ("IE browser");
  }
  if ($.browser.webkit) {
  alert ("WebKit browser");
  }
  if ($.browser.mozilla) {
  alert ("Mozilla browser");
  }
  if ($.browser.safari) {
  alert ("Safari browser");
  }
  if ($.browser.opera) {
  alert ("Opera browser");
  }
  alert ($.browser.version);
 })

Second, Boxmodel

Returns a Boolean value that returns true if the model of the system is the same, or false.

The box model is divided into two types, one is the model of the box, the other is IE box model. The fundamental difference between the two is that the box model does not include padding and border, only the height and width of content, and the IE box model contains padding and border.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
 
 

The example above pops up the <! model, and if you delete the top two rows, DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Operations of arrays and objects

Third, $.each ()

This tool function not only completes the traversal of the specified array, but also enables the traversal of elements in the page.

Syntax: $.each (OBJ,FN (para1,para2)) obj the array or object to traverse, the callback function that FN performs for each traversal element, para1 the ordinal number of the array or the property of the object, Para2 represents the elements of the array and the attributes of the object.

$ (function () {
  var arr = [1, 2, 3, 4, 5];
  $.each (arr, function (index, value) {
  document.write (index + ":");
  document.write (value + "<br/>");
  })
Output:
0:1
1:2
2:3
3:4
4:5

$.each () traverses the array.

$ (function () {
  var arr = {"John": "23", "Dick": 22, "Harry": "N"};
  $.each (arr, function (index, value) {
  document.write (index + ":");
  document.write (value + "<br/>");
  })
Output: John:
Dick
Harry: 21

ELEMENT traversal

Iv. $.grep ()

Filter the element that matches the criteria, and return a new array

Syntax: $.grep (ARRAR,FN (Value,index)); Note the order of the parameters of the callback function, the first is the value, and the second is the index.

$.grep (ARRAR,FN (Value,index), [bool]); The third argument indicates whether the counter is reversed, true for the inverse, and false for no counter.

$ (function () {
  var arr = [2, 5, 8];
  var arr1 = $.grep (arr, function (value, index) {return
  index <= 2 && value <;
  })
  document.write (Arr1.join ()); Output 2,5
 })

VI. $.MAP ()

Change the data within the function to accept an array or class array object as a parameter

$ (function () {
  var arr = [2, 5, 8];
  var arr1 = $.map (arr, function (value, index) {
  if (value > 5 && Index < 3) {return
   value-10;
   }
  })
  document.write (Arr.join () + "<br/>");　　　　　　　 2,5,34,22,8 can see that the original array does not change the
  document.write (Arr1.join ()); 24 The new array only obtains the result after the Operation
 })

Vii. $.inarray ()

Returns the index of the searched element if there is a search element in the array

 $ (function () {
  var arr = [1, 2, 3, 4, 5];
  Alert ($.inarray (4,arr)); Eject 3
 })

Viii. $.trim ()

Remove spaces on both sides of a string

 $ (function () {
  var str = "How are you doing in the other land?" ";
  document.write ("one" + str + "one" + "<br/>"); Output 11 Are you all right in the other land?　　　One
  document.write ("one" + $.trim (str) + "11"); Output 11 Are you all right in the other land? 11//Plus 11 is to see the difference clearly.
 })

IX. test operation

$.isarray (obj) detects whether the parameter is an array

$.isfunction (obj) detects whether a parameter is a function

$.isemptyobject (obj) detects whether the parameter is an empty object

$.isplainobject (obj) detects whether the parameter is a pure object, that is, whether the object was created through the {} or the new object () keyword.

$.contains (container,contained) detects whether a DOM node contains another DOM node. Yes returns TRUE or FALSE. Note that the parameter is a DOM object that is not 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)); Returns True
 })
 function Fun1 () {}
 $ (function () {
  var obj1 = {};
  var obj2 = {name: "Zhang Fei"};
  Alert ($.isemptyobject (OBJ1));　　Returns True Obj1 is an empty object
  alert ($.isemptyobject (OBJ2)); Returns false Obj2 is not a null object
 })
 $ (function () {
  var obj1 = {};
  var obj2 = {name: "Zhang Fei"};
  var obj3 = new Object ();
  var obj4 = null;
  Alert ($.isplainobject (OBJ1));　　True to create
  alert ($.isplainobject (OBJ2)) by {};　　True to create
  alert ($.isplainobject (OBJ3)) by {};　　True to create
  alert ($.isplainobject (OBJ4)) with the new Object ();　　Flase is not created by {} or New Object ()
 $ (function () {
  alert ($.contains ($ ("#div1") [0],$ ("#p1") [0]); Returns true, note that the parameter is a DOM object, not a jquery object
 }

Ten, $.param ()

Serialized as a URL string

$.param (Obj,[bool]); The second argument is an optional parameter that indicates whether shallow serialization

 $ (function () {
  var man = {Name: "Zhang Fei", age:23};
  var str = $.param (mans);
  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
 })

Xi. $.makearray ()

Copies the properties of an array or class array object to a new array (really an array) and returns 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 ()

The function accepts two arrays or class array objects, attaches the second parameter to the first argument, returns the first argument, the first array modifies, and the second does not.

 var arr1 = [1, 3, 5, 7, 9];
 var arr2 = [2, 4, 6, 8, ten];
 $ (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
 })

13, $.parsejson ()

The function parses the string in JSON format and returns the result of the resolution (object). Similar to Json.parse (), note: jquery only defines the JSON parsing function and does not define a serialization function.

 var man = {name: "John", age:23};
 var str = json.stringify (mans);
 document.write (str + "<br/>"); {"Name": "John", "Age":}
 var man1 = $.parsejson (str);
 document.write (Man1.name + man1.age); Zhang 323

14, $.proxy ()

The bind () method, similar to a function object, takes the functions as the first argument, the object as the second argument, and returns a new function that acts as a method call to the second parameter object.

$ (function () {
var obj = {
name: "John",
test:function () {
alert (this.name);　　When the button with the ID test clicks, the name
$ ("#test") pops up. Unbind ("click", Obj.test);　　　　and cancel event binding (next click will not eject name)
}
;
$ ("#test"). Click (Jquery.proxy (obj, "test"); Bind the method test in the Object object

XV, $.unique (array)

Delete a repeating element in an element array

$ (function () {
 var arr = [1, 2, 3, 2, 1];
 Jquery.unique (arr);
 Alert (Arr.join ()); return 3,2,1
})

16, $.extend ()

Merging elements in an object

$ (function () {
 var result=$.extend ({},{name: "Tom", age:21}, {name: "Jerry", Sex: "Boy"});
alert (result.name); Output Jerry behind will cover the front, result is always just an object
})

Omitting the dest parameter, the dest parameter in the Extend method prototype can be omitted, and if omitted, the method can have only one src parameter and merge the SRC into the object that invokes the Extend method.

One particular point to note is that the following value overrides a value with the same name as before.

$ (function () {
 $.extend ({
 hello:function () {alert (' Hello ');} The method has only one parameter, which means merging the Hello method into the jquery global object
 }.
 $.hello (); Popup Hello
})

namespace Example:

$ (function () {
 $.extend ({net:{}});//Extend a namespace
 $.extend ($.net,{
 hello:function () {alert (' Hello ');}// Bind the Hello method to the namespace Net
 })
 $.net.hello ();//Call method through net namespace
})

Copy method prototype:

extend(boolean,dest,src1,src2,src3...)

The first argument Boolean indicates whether to make a deep copy.

$ (function () {
 var result=$.extend (true, {}, 
 {name: "John", Location: {City: "Boston", Country: "USA"}}, 
 { Last: "Resig", Location: {state: "MA", Country: "" "}); 
 alert (result.location.state); Output MA
 //result={name: "John", Last: "Resig", location:{city: "Boston", State: "Ma", County: "" "
 Result=$.extend (False, {}, 
 {name: "John", Location: {City: "Boston", Country: "USA"}, 
 {last: "Resig", location : {state: "MA", Country: "" "}); 
 alert (result.location.city); Output undefined
 //result={name: "John", Last: "Resig", Location:{state: "MA", County: "The City,"} Just merged the attributes inside the location,location regardless
})

The above is the entire content of this article, I hope to help you, but also hope that a lot of support cloud Habitat community!