原生javascript用面向对象的方式仿query实现链式调用。

最新推荐文章于 2023-06-02 11:22:14 发布
最新推荐文章于 2023-06-02 11:22:14 发布
阅读量612 收藏
点赞数
分类专栏： javascript web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CodingNoob/article/details/80574702
版权

原生javascript用面向对象的当时仿query实现链式调用。

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="animate.css" rel="stylesheet">
    <style>
        div{height:200px;width:400px;}
    </style>
</head>
<body>
    <div class="animated">
        <p><span>111</span></p>
        <span>222</span>
        <div><span>3333</span></div>
    </div>
</body>
<script>
    function $(selector){
        this.element = document.querySelector(selector);
    }
    $.prototype = {
        //css()
        css: function(obj){
            for(var i in obj){
                this.element.style[i] = obj[i]; 
            }
            return this;
        },
        // find()
        find: function(selector) {
            return document.querySelectorAll(selector);
        }
    }
    console.log(new $('div').css({'backgroundColor': 'red', 'fontSize': '36px', 'color': 'yellow'}).find('span'));
</script>
</html>
#麻辣小龙虾#
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用原生JavaScript采用面向对象中介者模式实现简单的俄罗斯方块游戏
08-10
使用原生JavaScript，采用面向对象 中介者模式实现简单的俄罗斯方块游戏
实现一个 query 方法，实现对数据的链式查询和处理
weixin_44998439的博客
04-21 1771
实现一个 query 方法，实现对数据的链式查询和处理
面试题——实现一个链式调用的query方法
最新发布
L2395183536的博客
06-02 561
定义 groupBy 方法，该方法接受一个字符串类型的参数 key，按照 key 对 results 数组中的元素进行分组，并将分组后的结果存储回 results 数组中，然后返回 this 对象以支持链式调用。定义 filter 方法，该方法接受一个回调函数作为参数，过滤 results 数组中的元素，并将过滤后的结果存储回 results 数组中，然后返回 this 对象以支持链式调用。需要注意的是，这只是一个简单的实现方式，还有很多细节需要考虑，例如对于分组操作，如果 key 的值为 null 或。
js实现jQuery的简单方法和链式操作
qq_61538679的博客
05-07 448
好了，言归正传，我们来分析上面jQuery的代码。 $(“.box1”) 就是实现了选择器的功能。 $(“.box1”).click 就是选择器 + 调用click方法 最后在click里面传入函数。 第一个小目标就是自己封装js来实现上面代码的功能。我们分三步走战略来实现。 js实现 $(“.box1”) 实现 $(“.box1”).click() 实现 $(“.box1”).click( ( ) => { console.log(“123”) } ) 第一步
query功能的实现
weixin_30614109的博客
01-10 1065
query功能的实现 上一篇文章介绍了update方法的功能实现，那么杂数据库操作中查找操作也是使用率非常高的函数，同样我们也需要了解它的实现过程。使用方法如下： List<User> list = jdbcTemplate.query("select * from user",new UserRowMapper()); 跟踪jdbcTemplate中的query方法：...
JavaScript基于面向对象实现的无缝滚动轮播示例
11-21
本文实例讲述了JavaScript基于面向对象实现的无缝滚动轮播。分享给大家供大家参考，具体如下： 无缝轮播 面向对象 一、HTML及CSS部分同前文《原生JavaScript实现的无缝滚动功能》。 JavaScript面向对象部分如下： ...
原生js-面向对象-特效-幻灯片片.zip
09-29
使用原生javascript + 利用面向对象思想，编写PC端幻灯片特效
0原生js-面向对象-无缝轮播图.zip
09-29
使用原生javascript + 使用面向对象思想，编写无缝轮播图特效。
JavaScript函数、闭包、原型、面向对象学习笔记
10-18
给大家分享了一篇关于JavaScript函数、闭包、原型、面向对象的知识点学习笔记内容，有兴趣的朋友参考下。
学习JavaScript设计模式(链式调用)
10-23
主要带领大家学习JavaScript设计模式，其中重点介绍链式调用，感兴趣的小伙伴们可以参考一下
javascript简单链式调用案例分析
01-19
本文实例讲述了javascript简单链式调用方法。分享给大家供大家参考，具体如下： jQuery用的就是链式调用。像一条连接一样调用方法。 链式调用的核心就是return this;,每个方法都返回对象本身。 下面是简单的模拟jQuery的代码： [removed] window.$ = function (id) { return new _$(id); } function _$(id) { this.elements = document.getElementById(id); } _$.prototype = { constructor:
九、数据库的链式操作
汪学友的博客
07-02 598
一、查询规则 链式查询：->，当Db::name(‘user’) 返回的是查询对象（Query）,即可连接数据库对应的方法；每次执行一个数据库查询方法时，比如 where() 还是返回查询对象（Query）,只要还是数据库对象，那么就可以一直使用指向符号进行链式查询。 再利用 find() 和 select() 是结果查询方法（放在最后），并不是链式查询方法； 二、 更多查询 如果多次使用数据库查询，那么每次静态创建都会生成一个实例，造成浪费；我们可以把对象实例保存下来，再进行反复调用即可； 当
js实现jquery的简单方法和链式操作
前端开发一枚
10-15 807
我用这篇文章来理一理如何用js去实现封装jQuery的简单方法。 文末有完整代码链接，需要代码的朋友直接看文末 本文js实现了下面jquery的几种方法，我将它分为8个小目标 实现$(".box1").click( )方法 实现$(“div”).click( )方法 考虑$( )中参数的三种情况 实现jq中的on方法 实现链式操作 实现jq中的eq方法 实现jq中的end方法 实现jq中的css方法 有不正确的地方还望大家在评论区指出来，谢谢啦。 1. 实现$(".box1").click( .
[工作小记]queryset.felter可以链式查询
Lei Gong's blog
08-29 149
queryset.felter后边加各种条件 可以链式查询 举例： queryset = self.model.objects.filter(latest_revision_id__isnull=False).exclude( id__in=dataset_attr_relation_datapack_ids, latest_revision_id__in=dataset_attr_relation_revision_ids) queryset = queryset.filter(cate
TP5访问数据库具体实现---query查询器
jhkj_5154的博客
02-27 1969
我们是用Query查询器来完成。使用查询构建器，封装了对于不同数据库的操作，它提供了我们对于不同数据库统一的操作。不需要在意不同数据库差异性。使用原生sql来操作，整个tp5数据库访问层就失去了它的意义。我们一直在说Query是查询构造器。但是这个查询二字就是泛指，它不仅仅是有数据库的读操作，还有写操作。Query构建起仅仅是一种语法，最终还是有Builder来翻译成sql语句来查询。所有操作数据...
node.js中实现对数据库的链式操作
qq_35149975的博客
08-26 767
在平时的业务需求中，总是经常与数据库打交道，但书写SQL语句有时候是真的很头大。业务简单那还好，但遇到情况比较复杂时，也许就是一个字符串的拼接问题，却很难找到原因。 为了解决SQL语句的书写问题，我想到了其他编程语言中的数据库链式操作，很好地简化了对数据库的操作复杂度，但遗憾的是node.js中没有这个 ...
css选中子元素中不是第一个元素的3种方法
热门推荐
CodingNoob
07-26 5万+
第一种：使用伪类选择器:not
使用原生 JavaScript 或者 jQuery 来实现 Ajax。
06-01
使用原生 JavaScript 或者 jQuery 来实现 Ajax，可以使用以下两种方式： 1. 使用原生 JavaScript 实现 Ajax 使用原生 JavaScript 实现 Ajax 可以使用 XMLHttpRequest 对象，示例代码如下： ```javascript const ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值