Understanding and Notes on Ajax Application and jQuery Plug-in in JQuery

Ajax has native and encapsulated jQuery versions. I feel that the writing method of JQuery is relatively concise and clear, and there is no need to be compatible with browsers.

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="button" value="测试" />
 9     </body>
10     <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
11     <script type="text/javascript">
12         $(function(){
13             $.ajax({
15Submit data method//                 type:"get",14
                 url:"", // Submit path 
16                  async: true // Asynchronous 
17                  data: // Data type 
18              });
 19          });
 20      </script>
 21 </html>

The jQuery plug-in is even more interesting. It is a more convenient tool and reduces the cycle of development projects.

A way to customize the jQuery plug-in, which belongs to the class to add a method to the object to call. There is also a class call, similar to a static method,

;(function(){
        $.fn.extend({
            "color":function(value){
                return this.css("background-color",value);
            }
        });
})(jQuery);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" />
        <input type="button" value="变色" />
    </body>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
    <script type="text/javascript" src="js/jquery.color.js" ></script>
    <script type="text/javascript">
        $(function(){
            $("input[type=button]").click(function(){
                $("input[type=text]").color($("input[type=text]").val());
            });
        });
    </script>
</html>

Inside the plug-in, this points to the jQuery object currently obtained through the selector, unlike general methods, such as the click() method, where this points to the DOM element.

All elements can be traversed through this.each.

Understanding and Notes on Ajax Application and jQuery Plug-in in JQuery

Guess you like