jQuery--data、load、then、done、getJSON、$.fn.extend

最新推荐文章于 2022-07-16 18:30:50 发布

咩有猫腻.

最新推荐文章于 2022-07-16 18:30:50 发布

阅读量376

点赞数

分类专栏：前端后端

本文链接：https://blog.csdn.net/DcTbnk/article/details/106781305

版权

前端后端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

1.   .data() 创建自定义属性 及获取自定义属性
2.   .load() 将其他网页内容放入想要放入的网页中，同时也可修改它的样式
3.   .done() .getJSON()
4.   $.fn.extend()  在jQuery中创建实例方法

一.data

<!-- html -->
    <h1>biaoti</h1>
    <h1>biaoti</h1>
    <p data-id="10001">ppp</p>
    <p>pppp</p>
    <!-- js -->
    <script src="jquery-1.11.0.js"></script>
    <script>
      $(function () {
        $("p").click(function () {
          //  但是因为h1和p是同级标签，所以第一个p的索引是2，第二个p的索引是3
          console.log($(this).index()); //在同辈元素中的索引
        });

        console.log($("p").data("id")); // 10001 取到data-***的值，data-可以省略

        $("p").eq(1).data("abc", "123");
        console.log($("p").eq(1).data("abc"));  // 123
      });

    </script>

二.load

在这里插入图片描述

<!-- 头部 -->
    <div id="header"></div>
    <!-- 内容 -->
    <div>内容</div>
    <!-- 尾部 -->
    <div id="footer"></div>

    <script src="jquery-1.11.0.js"></script>
    <script>
      $(function () {
        $("#header").load("header.html", () => {
          $(".a").css({ color: "red" }); //注意放到回调函数里
        }); //异步操作
        //$(".a").css({ color: "red" }); //这行代码先执行
        $("#footer").load("footer.html");
      });
    </script>

==三.then、done、getJSON ==

<body>
    <script src="jquery-1.11.0.js"></script>
    <script>
      $(function () {
         $("div").css();//实例方法
        $.ajax();//类方法
        //*******************************************************************
         $.ajax({
          url: "data.json",
          data: { a: 1 },
          success: function (data) {
            console.log(data);
          },
        });
        //*******************************************************************
        $.ajax("data.json").then((data) => {
          console.log(data);
        });
        //*******************************************************************
        // done 表完成时
        $.ajax("data.json").done((data) => {
          console.log(data);
        });
        //*******************************************************************
        $.get("data.json", { a: 1 }, function (data) {
          console.log(data);
        });
        //*******************************************************************
         $.ajax({
          url:
            "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=31727,1461,21082,32045,31322,30823&wd=duan&req=2&csor=4&pwd=dua&cb=?",
          dataType: "jsonp",
          success: (data) => {
            console.log(data);
          },
        });
        //*******************************************************************
         $.getJSON(
          "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=31727,1461,21082,32045,31322,30823&wd=duan&req=2&csor=4&pwd=dua&cb=?",
          (data) => {
            console.log(data);
          }
        );
      });
    </script>
  </body>

data.json

[1, 2, 3]

四. $.fn.extend

<body>
    <!-- html -->
    <div>a</div>

    <!-- js -->
    <script src="jquery-1.11.0.js"></script>
    <script>
      $(function () {
        //$.fn.extend()*************************************************
        console.log($.fn == $.prototype);
        //$("div").abc();//报错  以下是解决方案
        //方案一*******************************************************************
         $.fn.abc = function () {};
        $("div").abc();
        //方案二*******************************************************************
          $.fn.extend({
            abc:function(){

            },
            efg:function(){
                
            }
        })
        //*******************************************************************
        $.doAdd = function (a, b) {
          return a + b;
        };

        $.doAdd(10, 20);
        //*******************************************************************
         $.extend({
          doAdd: function () {},
        });

        //实例方法 作为说明
        //highLight() 高亮显示
        //1.颜色固定死 不需要参数
        $.fn.extend({
          highLight: function () {
            this.css({ color: "red", background: "yellow" });
            return this;
          },
        });

        //2.颜色可变 需要参数
         $.fn.extend({
          highLight: function (color, bgColor) {
            this.css({ color: color, background: bgColor });
            return this;
          },
        });

        //3.参数可选 传参就用，不传就默认
        $.fn.extend({
          highLight: function (options = {}) {
            var defaults = {
              color: "red",
              bgColor: "yellow",
            };
            var opts = {};
            for (let i in defaults) {
              opts[i] = options[i] || defaults[i];
            }
            this.css({ color: opts.color, background: opts.bgColor });
            return this;
          },
        });

        $("div").highLight({ bgColor: "blue" }).width("100px");
      });
    </script>
  </body>