Home > Developer > JavaScript
I recently reviewed JQuery and found that I have not written a plug-in. Before writing plug-ins, I felt that developing plug-ins was a high-end task. It was not a problem with me. However, I checked the relevant information on the Internet and found that the development plug-in is actually very simple. Here I will explain the commonly used JQuery plug-ins and the common scenarios of these plug-ins. Hope to help you. First, you have prepared a previously written train ticket list page. Click "set style and event" to see the following results. The page effect is directly implemented using Js code, so here we use the plug-in method to achieve the above effect. The code of the page table is as follows: copy code 1 <body> 2 <input type = "button" id = "btnshow" value = "load data"/> 3 <input type = "button" id = "setStyle" value = "set styles and events"/> 4 <table id = "tb1" border = "1px solid white" cellpadding = "0" cellspacing = "0"> 5 <tr> 6 <th rowspan = "2"> 7: 8 </th> 9 <th rowspan = "2"> 10 times 11 </th> 12 <th colspan = "2"> 13 Query Information of more than 19 tickets in the interval 14 </th> 15 <th colspan = "3"> 16: runtime 17 </th> 18 <th colspan = "5"> 20 </th> 21 <th> 22. Train information 23 </Th> 24 </tr> 25 <tr> 26 <th> 27 departure site 28 </th> 29 <th> 30 arrival site 31 </th> 32 <th> 33 hour 34 </th> 35 <th> 36 then 37 </th> 38 <th> 39 lasted 40 </th> 41 <th> 42 business seat 43 </th> 44 <th> 45 th seat 46 </th> 47 <th> 48 first seat 49 </th> 50 <th> 51 second seat 52 </th> 53 <th> 54 hard seat 55 </th> 56 <th> 57 levels 58 </th> 59 </tr> 60 </table> 61 </body> copy Code 1. Several plug-ins statement 1. extension plug-ins of JQuery itself are extended to JQuery's own extension library. You can directly use the $. Extended Function Name () when using it. Format: $. extend ({function name: function (data) {};}) Call method $. function Name (); sample code: Copy code 1 $. extend ({2 TestJs: function (table) {3 var tb = table; 4 // background image 5 $ (tb ). find ("tr: lt (2)" 2.16.css ({"color": "#055A78", 'background-image': 'url ("bg.png ")'}); 6 7 // text Center 8 $ (tb ). find ("td, th" 2.16.css ({"text-align": "center"}); 9 // parity 10 $ (tb ). find ("tr: gt (1): odd" ).css ("backgroundColor", "white"); 11 $ (tb ). find ("tr: gt (1): even" ).css ("bac KgroundColor "," # E5F2F8 "); 12 13 // tr event 14 $ (tb ). find ("tr "). mouseover (function () {15 rows (this).css ("cursor", "default"); 16 }). mouseout (function () {17 $ (this ). find ("td: eq (1)" ).css ("color", "black"); 18 }). click (function () {19 $ (tb ). find ("tr: gt (1): odd" ).css ("backgroundColor", "white"); 20 $ (tb ). find ("tr: gt (1): even" ).css ("backgroundColor", "# E5F2F8"); 21 outputs (this(.css ("backgroundColor", "#9AC2E5"); 22 }) 23 // Event 24 $ (tb) for each td in the column where the vehicle is located ). find ("tr td: eq (1 )"). wrapInner ('<a style = "color: black; text-decoration: none"> </a> '). children (). mouseover (function () {25 rows (this).css ("color", "red"); 26 }). mouseout (function () {27 blocks (this).css ("color", "black"); 28}) 29 30} 31 }); by copying code, we can define JQuery's own extension method, and this method can be displayed on the web page through smart prompts. The Code called on the page is as follows: copy the Code <script type = "text/javascript" >$ (function () {$ ("# setStyle "). click (function () {// extended extension $. testJs ("# tb1") ;}}); </script> copy Code 2. to expand HTML tags or page elements, you must reference the page elements encapsulated by JQuery. For example: $ ("# tb "). method (); sample code: copy the code (function ($) {$. fn. helpTest = function (options) {// HelpTest, this is the name of your jquery function [you need to use this name when calling this function in your html], // you do not need to change anything else. Var defaults = {// var defaults {here is the default value of your function parameter} helptext: "default help", tmpWidth: "200px"} var options = $. extend (defaults, options); // This sentence is dead. It means that if you call this plug-in html, if it is not worth passing in parameters, // I will use the parameter defined in defalut; otherwise, the value of the parameter you passed in will be used. [note]: If you want to use the parameter below, // you must use [options. parameter Name] For example: options. helpText $ (this ). mouseover (function (e) {// Add this mousemove event, that is, which html element calls my plug-in, then I will add the mousemove event alert ("shortname over") to him "); }) (JQuery); When copying code to perform JQuery extension on page elements, you need to use (function ($ ){...}) (JQuery. In the ", define our own method, the definition method is: $. fn. custom method name = function (parameter ){...}; the call code on the page is as follows: <script type = "text/javascript" >$ (function () {$ ("# tb1 "). helpTest () ;}); </script>
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
