Understanding and notes on Ajax Application and jQuery plug-in in jquery

Keywords: Java JQuery Javascript

Ajax has both native and packaged jQuery versions. It feels that jQuery's writing method is simple and clear, and does not 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="test" />
 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({
14                 type:"get",//How to submit data
15                 url:"",//Submission path
16                 async:true//Asynchronous
17                 data://data type
18             });
19         });
20     </script>
21 </html>

 

 

jQuery plug-in is more interesting. It is a more convenient tool to reduce the development project cycle.

A way to customize the jQuery plug-in, which belongs to adding methods to the class to call the object. 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="Discoloration" />
    </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>

In the plug-in, this refers to the jQuery object obtained through the selector, rather than the general method, such as the click() method. The internal this refers to the DOM element.

You can traverse all elements through this.each.

Posted by davidcriniti on Thu, 26 Mar 2020 08:37:44 -0700