JQuery plugin development methods

Source: Internet
Author: User
Tags rtrim

JQuery plugin development methods
JQuery and jQuery plug-ins are basically used for web development. One is extension-like development, jQuery adds a new global function (jQuery's global function belongs to the jQuery namespace function). If jQuery is treated as a class, it is equivalent to adding a method to the jQuery class itself. The second is the development plug-in through object extension, that is, the jQuery object addition method. The most direct understanding of plug-in development of class extension is to add class methods to the jQuery class, which can be understood as adding static methods. A typical example is the $. AJAX () function, which is defined in the namespace of jQuery. Plug-in development for class extension can be expanded in the following forms: 1. add a global function $. ltrim = function (str) {return str. replace (/^ \ s +/, "") ;}; call method var str = "Remove left space"; console. log ("before removal:" + str. length + "removed:" + $. ltrim (str ). length); 2. add multiple global functions $. ltrim = function (str) {return str. replace (/^ \ s +/, "") ;};$. rtrim = function (str) {return str. replace (/\ s + $/, "") ;}; it is recommended that you use $ if you write fewer global functions. extend (object) $. extend ({ltrim: function (Str) {return str. replace (/^ \ s +/, "") ;}, rtrim: function (str) {return str. replace (/\ s + $/, "") ;}}); 3. although in the jQuery namespace, a large number of javaScript function names and variable names are not allowed. But it is still inevitable that some functions or variables will conflict with other jQuery plug-ins, so we are used to encapsulating some methods into another custom namespace. $. MyPlugin = {ltrim: function (str) {return str. replace (/^ \ s +/, "") ;}, rtrim: function (str) {return str. replace (/\ s + $/, "") ;}}; use an independent plug-in name to avoid function conflicts in the namespace. Call method: var str = "Remove left space"; console. log ("before call:" + str. length + "after the call:" + $. myPlugin. ltrim (str ). length); object extension plug-in 1. add an object extension method $. fn. changeColor = function () {this.css ("color", "red") ;};$. fn. changeFont = function () {this.css ("font-size", "24px") ;}; caller Formula: $ (function () {$ (""). showColor (); <br> $ ("div "). changeFont () ;}); 2. add multiple object extension methods (function ($) {$. fn. changeColor = function () {this.css ("color", "red") ;};$. fn. changeFont = function () {this.css ("font-size", "24px") ;}} (jQuery); compatible with writing (to prevent previous functions from being written ;) :; (function ($) {$. fn. changeColor = function () {this.css ("color", "red") ;};$. fn. changeFont = function () {this.css ("font-size", "24px") ;}}) (jQuer Y); The above defines a jQuery function with the form parameter $. After the function definition is complete, pass the jQuery real parameter in. Call and execute immediately. The advantage is that when writing the jQuery plug-in, we can also use the $ alias instead of causing conflicts with prototype. 3. use $. fn. for more information about extend (object), see jQuery source code (version 1.11.1. fn = jQuery. prototype = {// The current version of jQuery being used jquery: version, constructor: jQuery ,......................}, jQuery is a well-encapsulated class. For example, the $ ("a") Statement generates an instance of the jQuery class. JQuery. fn. extend (object) is actually an extension of jQuery. prototype, that is, adding a "member function" to the jQuery class ". JQuery class instances can use this "member function ". $. Fn. extend ({changeColor: function () {this.css ("color", "red") ;}, changeFont: function () {this.css ("font-size ", "24px") ;}}); describes the basic usage of object extension. The following is a simple function similar to code highlighting: (function ($) {$. fn. highlight = function (options) {// controllable plug-in parameters. You can modify the default parameter var defaults =$. extend ($. fn. highlight. defaults, options); // traverse the function, and then return this according to the parameter change style. each (function () {var elem = $ (this); var markup = elem.html (); Markup = $. fn. highlight. format (markup); elem.html (markup); elem.css ({color: defaults. color, fontSize: defaults. fontSize, backgroundColor: defaults. backgroundColor}) ;};}; // default value of the parameter $. fn. highlight. defaults = {color: "# 556b2f", backgroundColor: "white", fontSize: "48px"}; // format the font $. fn. highlight. format = function (txt) {return "<strong>" + txt + "</strong>" ;};}) (jQuery); $ (function () {// call the plug-in $ (""). Highlight ({color: "red", fontSize: "24px"}) ;}); Summarize the development and use of jQuery plug-ins, depending on the specific conditions in the development process, the first type of extension method is similar to C # adding a static method. The second type of object extension is determined based on your actual business, some common functions of your website can certainly be written as a plug-in by yourself, such as viewing images and clicking on the sidebar. Sometimes you can also study plug-ins written by others on the Internet, you can also learn a lot. if you think this article is good and rewarding, please give me a suggestion. Thank you ~

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.