jQuery原理第四天

最新推荐文章于 2021-06-30 12:41:51 发布

码小余の博客

最新推荐文章于 2021-06-30 12:41:51 发布

阅读量2.4k

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/Cool_breeze_/article/details/106968554

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

insertAfter

实现insertAfter需要用到原生JavaScript的nextSibling属性

元素.insertAfter.指定元素 ==>将元素添加到指定元素外部的后面

insertAfter实现原理

insertAfter: function (sele) {
    // 1.统一的将传入的数据转换为jQuery对象
    var $target = $(sele);
    var $this = this;
    var res = [];
    // 2.遍历取出所有指定的元素
    $.each($target, function (key, value) {
        var parent = value.parentNode;
        var nextNode = $.get_nextsibling(value);
        // 2.遍历取出所有的元素
        $this.each(function (k, v) {
            // 3.判断当前是否是第0个指定的元素
            if (key === 0) {
                // 直接添加
                parent.insertBefore(v, nextNode);
                res.push(v);
            } else {
                // 先拷贝再添加
                var temp = v.cloneNode(true);
                parent.insertBefore(temp, nextNode);
                res.push(temp);
            }
        });
    });
    // 3.返回所有添加的元素
    return $(res);
},

replaceAll

function replaceAll(source, target) {
    // 1.将元素插入到指定元素的前面
    $(source).insertBefore(target);
    // 2.将指定元素删除
    $(target).remove();
}
var p = document.querySelector("p");
var li = document.querySelector("li");
// replaceAll(p, li);

replaceAll实现原理

replaceAll: function (sele) {
    // 1.统一的将传入的数据转换为jQuery对象
    var $target = $(sele);
    var $this = this;
    var res = [];
    // 2.遍历取出所有指定的元素
    $.each($target, function (key, value) {
        var parent = value.parentNode;
        var nextNode = $.get_nextsibling(value);
        // 2.遍历取出所有的元素
        $this.each(function (k, v) {
            // 3.判断当前是否是第0个指定的元素
            if (key === 0) {
                // 1.将元素插入到指定元素的前面
                $(v).insertBefore(value);
                // 2.将指定元素删除
                $(value).remove();
                res.push(v);
            } else {
                // 先拷贝再添加
                var temp = v.cloneNode(true);
                // 1.将元素插入到指定元素的前面
                $(temp).insertBefore(value);
                // 2.将指定元素删除
                $(value).remove();
                res.push(temp);
            }
        });
    });
    // 3.返回所有添加的元素
    return $(res);
},

attr

<!--
 * @Author: 码小余
 * @Date: 2020-06-26 10:55:03
 * @LastEditTime: 2020-06-26 10:58:53
 * @FilePath: \代码\jQuery原理\15-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>15-jQuery属性操作相关方法</title>
    <script src="js/njQuery-1.3.0.js"></script>
    <script>
      $(function () {
        /*
            1.attr(): 设置或者获取元素的属性节点值
        */
        // 传递一个参数, 返回第一个元素属性节点的值
        // console.log($("span").attr("class"));
        // 传递两个参数, 代表设置所有元素属性节点的值
        // 并且返回值就是方法调用者
        // console.log($("span").attr("class", "abc"));
        // 传递一个对象, 代表批量设置所有元素属性节点的值
        $("span").attr({
          class: "123",
          name: "888",
        });
      });
    </script>
  </head>
  <body>
    <span class="span1" name="it666"></span>
    <span class="span2" name="lnj"></span>
  </body>
</html>

attr实现原理

attr: function (attr, value) {
    // 1. 判断是否是字符串
    if (njQuery.isString(attr)) {
        // 判断是一个字符串还是两个字符串
        if (arguments.length === 1) {
            return this[0].getAttribute(attr);
        } else {
            this.each(function (key, ele) {
                ele.setAttribute(attr, value);
            });
        }
    }
    // 2. 判断是否是对象
    else if (njQuery.isObject(attr)) {
        var $this = this;
        // 遍历取出所有属性节点的名称和对应的值
        $.each(attr, function (key, value) {
            // 遍历取出所有的元素
            $this.each(function (k, ele) {
                ele.setAttribute(key, value);
            });
        });
    }
    return this;
},

prop

<!--
 * @Author: 码小余
 * @Date: 2020-06-26 11:05:25
 * @LastEditTime: 2020-06-26 12:32:24
 * @FilePath: \代码\jQuery原理\16-jQuery吧属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>16-jQuery属性操作相关方法</title>
    <!--<script src="js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.3.0.js"></script>
    <script>
      $(function () {
        /*
            2.prop(): 设置或者获取元素的属性值
        */

        // 传递两个参数, 代表设置所有元素属性节点的值
        // 并且返回值就是方法调用者
        console.log($("span").prop("abc", "lnj"));

        // 传递一个参数, 返回第一个元素属性节点的值
        console.log($("span").prop("abc"));

        // 传递一个对象, 代表批量设置所有元素属性节点的值
        $("span").prop({
          aaa: "111",
          bbb: "222",
        });
      });
    </script>
  </head>
  <body>
    <span class="span1" name="it666"></span>
    <span class="span2" name="lnj"></span>
  </body>
</html>

prop实现原理

prop: function (attr, value) {
    // 1. 判断是否是字符串
    if (njQuery.isString(attr)) {
        // 判断是一个字符串还是两个字符串
        if (arguments.length === 1) {
            return this[0][attr];
        } else {
            this.each(function (key, ele) {
                ele[attr] = value;
            });
        }
    }
    // 2. 判断是否是对象
    else if (njQuery.isObject(attr)) {
        var $this = this;
        // 遍历取出所有属性节点的名称和对应的值
        $.each(attr, function (key, value) {
            // 遍历取出所有的元素
            $this.each(function (k, ele) {
                ele[key] = value;
            });
        });
    }
    return this;
},

css

<!--
 * @Author: 码小余
 * @Date: 2020-06-26 11:22:58
 * @LastEditTime: 2020-06-26 11:23:55
 * @FilePath: \代码\jQuery原理\17-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>17-jQuery属性操作相关方法</title>
    <!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.3.0.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background: red;
        margin-bottom: 10px;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background: blue;
        margin-bottom: 10px;
      }
    </style>
    <script>
      $(function () {
        /*
                3.css(): 设置获取样式
            */
        // 传递一个参数, 返回第一个元素指定的样式
        // console.log($("div").css("height"));
        // 传递两个参数, 代表设置所有元素样式
        // 并且返回值就是方法调用者
        // console.log($("div").css("height", "50px"));
        // 传递一个对象, 代表批量设置所有元素样式
        $("div").css({
          height: "50px",
          backgroundColor: "pink",
        });
        // 获取样式
        // var div = document.querySelector("div");
        // console.log(window.getComputedStyle(div)["height"]);
        // console.log(div.currentStyle["height"]);
        // 设置样式
        // div.style["height"] = "200px";
      });
    </script>
  </head>
  <body>
    <div class="box1">div1</div>
    <div class="box2">div2</div>
  </body>
</html>

css实现原理

css: function (attr, value) {
    // 1. 判断是否是字符串
    if (njQuery.isString(attr)) {
        // 判断是一个字符串还是两个字符串
        if (arguments.length === 1) {
            return njQuery.getStyle(this[0], attr);
        } else {
            this.each(function (key, ele) {
                ele.style[attr] = value;
            });
        }
    }
    // 2. 判断是否是对象
    else if (njQuery.isObject(attr)) {
        var $this = this;
        // 遍历取出所有属性节点的名称和对应的值
        $.each(attr, function (key, value) {
            // 遍历取出所有的元素
            $this.each(function (k, ele) {
                ele.style[key] = value;
            });
        });
    }
    return this;
},

val

<!--
 * @Author: 码小余
 * @Date: 2020-06-26 11:36:18
 * @LastEditTime: 2020-06-26 11:36:19
 * @FilePath: \代码\jQuery原理\18-jQuery 属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>18-jQuery属性操作相关方法</title>
    <!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.3.0.js"></script>
    <script>
      $(function () {
        /*
             4.val(): 获取设置value的值
         */
        // 不传递参数, 返回第一个元素指定的样式
        // console.log($('input').val());

        // 传递两个参数, 代表设置所有元素样式
        // 并且返回值就是方法调用者
        console.log($("input").val("新设置的"));

        /*
            var input = document.querySelector("input");
            // input.setAttribute("value", "123456");
            var btn = document.querySelector("button");
            btn.onclick = function (ev) {
                // console.log(input.getAttribute("value"));
                // console.log($('input').val());
                console.log(input.value);
            }
            */
      });
    </script>
  </head>
  <body>
    <button>获取</button>
    <input type="text" value="默认值1" />
    <input type="text" value="默认值2" />
  </body>
</html>

val实现原理

val: function (content) {
    if (arguments.length === 0) {
        return this[0].value;
    } else {
        this.each(function (key, ele) {
            ele.value = content;
        });
        return this;
    }
},

hasClass

<!--
 * @Author: 码小余
 * @Date: 2020-06-26 12:06:00
 * @LastEditTime: 2020-06-26 12:08:32
 * @FilePath: \代码\jQuery原理\19-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>19-jQuery属性操作相关方法</title>
    <!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.3.0.js"></script>
    <script>
      $(function () {
        /*
            5.hasClass(): 判断元素中是否包含指定类
         */
        // 传递参数, 只要调用者其中一个包含指定类就返回true,否则返回false
        // console.log($("div").hasClass("cc"));
        // console.log($("div").hasClass("abc"));
        // console.log($("div").hasClass("bb"));
        // 没有传递参数, 返回false
        console.log($("div").hasClass());
        /*
            var div = document.querySelector("div");
            // console.log(div.getAttribute("class"));
            // console.log(div.className);
            // 1.获取元素中class保存的值
            var className = " "+div.className+" ";
            // 2.通过indexOf判断是否包含指定的字符串
            // console.log(className.indexOf("abc") != -1);
            // console.log(className.indexOf("bb"));
            // console.log(className.indexOf(" "+"bb"+" "));
            console.log(className.indexOf(" "+"dd"+" "));
            */
      });
    </script>
  </head>
  <body>
    <div class="aabb cc dd"></div>
    <div class="aabb bb"></div>
  </body>
</html>

hasClass实现原理

hasClass: function (name) {
    var flag = false;
    if (arguments.length === 0) {
        return flag;
    } else {
        this.each(function (key, ele) {
            // 1.获取元素中class保存的值
            var className = " " + ele.className + " ";
            // 2.给指定字符串的前后也加上空格
            name = " " + name + " ";
            // 3.通过indexOf判断是否包含指定的字符串
            if (className.indexOf(name) != -1) {
                flag = true;
                return false;
            }
        });
        return flag;
    }
},

码小余の博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery原理第四天

insertAfter实现insertAfter需要用到原生JavaScript的nextSibling属性元素.insertAfter.指定元素 ==>将元素添加到指定元素外部的后面insertAfter实现原理insertAfter: function (sele) { // 1.统一的将传入的数据转换为jQuery对象 var $target = $(sele); var $this = this; var res = []; // 2.遍历取出所
复制链接

扫一扫