zoukankan      html  css  js  c++  java
  • 对JQuery中Ajax应用与jQuery插件的理解与笔记

    Ajax有原生的和封装jQuery版的,感觉JQuery的写法比较简洁明了,不需要去兼容浏览器。

     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({
    14                 type:"get",//提交数据方式
    15                 url:"",//提交路径
    16                 async:true//是否异步
    17                 data://数据类型
    18             });
    19         });
    20     </script>
    21 </html>

    jQuery插件就更有意思了,是一个比较方便的工具,减少开发项目的周期。

    自定义jQuery插件的一种方式 ,这种属于类里面添加方法,给对象调用。还有一种属于类调用,类似于静态方法,

    ;(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>

    在插件内部,this指向的是当前通过选择器获取的jQuery对象,而不像一般的方法那样,例如click()方法,内部的this指向的是DOM元素。

    可以通过this.each来遍历所有元素。

  • 相关阅读:
    Go 1.16新特性embed包及其使用
    PHP汉字转拼音的方法
    git diff ^M的消除
    转 C/C++中extern关键字详解
    idea安装步骤_IntelliJ IDEA 2019.3安装激活教程
    intellij idea 的全局搜索快捷键方法
    多边形面积计算及顶点顺逆时针方向判断
    凸多边形碰撞检测的分离轴算法(SAT)
    使用PCA方法创建OBB(oriented boundingbox)包围盒
    2021/12/08今日旧闻
  • 原文地址:https://www.cnblogs.com/chyxOne/p/8982534.html
Copyright © 2011-2022 走看看