Example _ jQuery

This article mainly introduces how to rewrite jQuery objects in JavaScript. In some cases, jQuery cannot meet the needs of application development, and javascript can be used to rewrite jQuery methods to implement functions, if you need it, you can refer to jQuery as a very good class library. It solves a lot of client programming for us, but nothing is omnipotent, when it cannot meet our needs, we need to rewrite it, and do not affect its original functions or modify its original functions; for example, most of my current web applications use Ajax for Data Interaction. In this way, you can save the data of some hidden fields in the attributes of HTML tags, reduce the amount of code for HTML tags, such as ID and Timestamp. These fields that do not require user input but have to be submitted are submitted through the form.

Save the ID value in a hidden tag and submit it with the form.

The Code is as follows:

First Name

Note that the attribute names in the blue part should not be too concerned. You can take some simpler names. Now we will rewrite the val method of jQuery to read and set the value of data-id, to $. prototype. val re-defines a function and passes in the base class function as a closure to call it in the new function. See the following code:

Script $. prototype. val = function (base) {return function () {var s = this, a = "data-property", p = s. attr (a), isset = arguments. length> 0, v = isset? Arguments [0]: null; // The base class method is called here. Of course, when or whether the base class method is called depends on your business logic. Here we want to call it, because we need to maintain its original functions. If (isset & typeof (base) = "function") {base. call (s, v);} else {v = base. call (s) ;}if (p) {if (isset) {s. attr (p, v); return s} else {return s. attr (p) }}else {if (! S. is (": input") {if (isset) {s. text (v); return s;} else {return s. text () ;}} else {return isset? S: v ;}}// enter the base class method here} ($. prototype. val); script

After this rewriting, when the data-property attribute is specified in the tag, the jQuery object calls val () equivalent to calling attr ("data-property "), however, data-property is not specified. By default, if a non-form element is not specified, val () is equivalent to text (), if it is a form element, the original function is to read and write the value of the value Attribute. In this way, you can: $ ("[data-field = 'id']"). val (345) and $ ("[data-field = 'id']"). val () reads or sets its value. The "data-field" attribute will be mapped to the corresponding type of field on the server, the method for rewriting jQuery in JavaScript is here, and the rewriting of other methods is similar. You can think about it in the same way.

The Code is as follows:

   Method for rewriting objects in JavaScript