美文网首页
实现一个jquery的api

实现一个jquery的api

作者: 卡布i | 来源:发表于2020-01-20 23:50 被阅读0次

添加多个classname的函数

nodes.addClass = function(classes){ //以array的方式传参

classes.forEach(function(value){  //forEach() 方法对数组的每个元素执行一次提供的函数。
    for(let i = 0;i<nodes.length;i++){ 
        nodes[i].classList.add(value)}
})

}
div 的 textContent 变为 'hi'

nodes.setText = function(text){
for(let i = 0;i<nodes.length;i++){
nodes[i].textContent = text}
}
jQuery的API

window.jQuery = function(nodeOrSelector){ //传一个节点或者字符串

let nodes = {} //定义一个伪数组,用来存要操作的节点
if(nodeOrSelector === 'string') //如果传的是字符串,则用选择器去查找
{
    let temp = document.querySelectorAll(nodeOrSelector)
    for(let i = 0;i<temp.length;i++){
        nodes[i] = temp[i] //用temp作为临时对象,使得返回的nodes不是nodelist,而是伪数组
    }
    nodes.length = temp.length
}
else if(nodeOrSelector instanceof Node){
    nodes = {0:nodeOrSelector,length:1} //如果传入的值是节点,返回的nodes也写成伪数组的形式
}



nodes.addClass = function(classes){ //实现添加classname

        classes.forEach(function(value){
            for(let i = 0;i<nodes.length;i++){
                nodes[i].classList.add(value)}
        })
}


nodes.setText = function(text){ //实现改变元素的textcontent的功能
    for(let i = 0;i<nodes.length;i++){
        nodes[i].textContent = text}
}

return nodes} //返回nodes,供给外部使用

var div =('div') //封装一个jQuery对象
$div.addClass('red') // 调用addClass函数,将div 的 class 添加一个 red

$div.setText('hi') // 调用setText函数,可将div 的 textContent 变为 hi

相关文章

  • 初探jQuery

    jQuery API的实现 自己模拟jQuery的一个API预览:http://js.jirengu.com/pa...

  • 如何实现一个jQuery的api

    什么是jQuery 实现jQuery的api 实现jQuery的api说起来也很简单,就是对DOM进行封装。话不多...

  • 实现一个 jQuery 的 API

    实现一个 jQuery 的 API 实现步骤 命名空间模式 这个模式的调用为jQuery.addClass(ite...

  • 前端基础入门五(掌握jQuery的常用api,实现动态效果)

    jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常...

  • 用原生DOM实现一个jQuery的API

    今天第一次接触jQuery,先简单的实现一个jQuery的API,实现两个方法: addClass() setTe...

  • 实现一个 jQuery 的 API

    想要实现一个以下功能用原生js的DOM API来实现一个类jQuery API的功能 1、首先获取DOM元素 判断...

  • Angularjs选项卡

    用jQuery实现选项卡,通过操作dom节点实现,jQuery多数api方便操作dom。例如next()、sibl...

  • 2018-08-22

    实现JQuery之API 1.需求分析window.jQuery = ???window.div = div.ad...

  • 实现jQuery的API

    1. jQuery函数结构 jQuery函数要方便与输入一个选择器参数或则节点正确返回一个伪数组,便于对其明确执行...

  • 实现一个jQuery API

    通过以下四步实现jQuery: 接受一个node或选择器 封装成一个伪数组 在这个伪数组上加上几个API 把这个伪...

网友评论

      本文标题:实现一个jquery的api

      本文链接:https://www.haomeiwen.com/subject/msvszctx.html