© 2025 Rocky. All rights reserved.

|浙ICP备2025179428号-3|友情链接|

魔法施展中...

技术文章

技术实践

一个新的极小的类Jquery的js库

2022-02-12
5 分钟
...

2002年的某晚。 关山口职业技术学院,西九楼电子系。 我在电脑上开着frontpage 2000,苦苦琢磨javascript。

2009年,我找到了jQuery,惊呼原来js可以这么方便。 但是无论如何我也想不到有一天,我会嫌弃jQuery minify 之后还有88K,然后自己把东拼西凑出来的代码发了个库。 see https://npmjs.org/package/pida,使用上基本和jquery是熟悉的味道:

Pida

Terribly small javascript library ,up to 5k (gziped)

  • Chrome or other supported:( no IE )
  • Browser side only,not for node.js

Installation:

yarn add pida

or

npm install --save pida

Example of document query

import  pida from  'pida'
pida.onDomReady(()=>{
    console.dir(pida.$("a").length)
     pida.addListener(pida.$("a"),"click",(evt)=>{
         console.log(evt.target);
     })
    pida.each(pida.$("a"),(item)=>{
        console.log(item);
    })
    console.dir(pida)
})

vite demo project:https://github.com/gotapi/pida-demo

ajax get request

pida.get("https://ip4.dev/myip?format=json",{
    "on":{
        "load":(progress)=>{
            console.log("onload")
        },
        "loaded":(progress)=>{
            console.log("onloaded")    
        }
    }
}).then((data)=>{
    console.log(data);
}).catch((err)=>{
    console.log("got error")
    console.log(err);
});

ajax post request

let data = new FormData()
data.append("title","hello")
pida.post("https://example.org/",{
    headers:{
        "secret":"this is secret"
    }
    },
    data
).then((resp)=>{
    console.log("got resp:")
    console.log(resp)
}).catch((err)=>{
    console.log("got error")
    console.log(err)
});

example for post x-www-form-urlencoded data:

let formSend = "type=json&url=" + encodeURIComponent(location.href) + "&content=" + encodeURIComponent("Hellobaby");

pida.post("https://gotapi.net/v3/api/text2pic", {
    "timeout": 15000,
    "headers": {
        "secret": secret,
        "Content-Type": "application/x-www-form-urlencoded"
   }
},
formSend).then((data) => {});

hide/show/toggle

pida.$("a[href]").toggle()

html/val/text

pida.$("p").html("same text")

attr

//when you try to getAttributes,return the first
pida.$("input").attr("value")
pida.$("href").attr("link","/index")

addClass/removeClass

pida.$("p").addClass("bigger")
pida.$("p").removeClass("blue-text")

usage of event binding

    pida.$("a[href]").on("click", (evt) => {
        evt.preventDefault();
        console.log(evt.target.getAttribute("href"));
    });

chainable

pida.$("a[href]").on("click",(evt)=>{ console.log(evt);}).addClass("blue").addClass("bigger")

other helpers

pida.each(iter,(element)=>{

})
pida.isArray()
pida.isObject()
pida.isString()

感谢阅读!如果您觉得这篇文章有帮助,欢迎分享给更多的朋友。

上一篇
产品思考

'偶感:赋能与甩锅'

互联网团队的管理者,总是高估自己团队的产品能力,低估组织管理的难度,短期内看不到问题,远期上定不下目标,名义上给别人赋能,实际上给自己甩锅。

下一篇
技术实践

sonarqube简易上手指南

Sonarqube 是一个开源的代码质量管理系统,支持超过25种编程语言:Java、C/C++、C#、PHP、Flex、Groovy、JavaScript、Python、PL/SQL、COBOL、Golang、Javascript等,目前已经与诸多外部工具做了很好的集成,分析报告中可以对重复代...

📮 订阅更新
每周收到最新文章推送,不错过精彩内容

💡 我们尊重您的隐私,不会将邮箱用于其他用途

加载中...

猜你喜欢

移动开发

TikTok初探[1]

第一大难就是注册tiktok的帐号,我在日本旅行的时候就顺带注册了一个tiktok号,感觉还挺轻松啊,没想到回国再打开手机app,连浏览都不行了。

2024-07-25
tiktok
技术实践

在google cloud platform上收录dokku 生成的日志

Google Cloud Platform (GCP) 上有类似于阿里云 SLS(Simple Log Service)的日志收集和分析服务。在 GCP 上,这个服务主要由 Cloud Logging 和 Cloud Monitoring 组成,它们共同提供了强大的日志管理和分析能力。

2024-07-17
技术实践

cookie与cors详解

由于HTTP协议是无状态的,而服务器端的业务必须是要有状态的。Cookie诞生的最初目的是为了存储web中的状态信息,以方便服务器端使用。比如判断用户是否是第一次访问网站。目前最新的规范是RFC 6265,它是一个由浏览器服务器共同协作实现的规范。

2022-02-16