美文网首页
js代码封装jquery

js代码封装jquery

作者: 夜景阑姗 | 来源:发表于2019-01-05 06:30 被阅读0次

补全???处代码

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

实现效果

window.jQuery = function(nodeOrSelector){
let nodes = {}

if(typeof nodeOrSelector === 'string'){
    let temp = document.querySelectorAll(nodeOrSelector) //伪数组
    for(let i = 0 ;i <temp.length; i++){
        nodes[i] = temp[i]    //循环遍历结果类似1,2,3 像数组 用[]表示
    }
    nodes.length = temp.length  //nodes是伪数组,数组长度不会动态改变,这里手动改变长度
}else if (nodeOrSelector instanceof Node){
   nodes = {0:nodeOrSelector,length:1} //伪数组
} 

// 设置所有 div 的 textContent 
nodes.setText = function(text){
  for(let i = 0;i<nodes.length; i++){
    nodes[i].textContent =  text
  }

// 为所有 div 添加 class
nodes.addClass = function(text){
   for(let i = 0;i<nodes.length;i++){
    nodes[i].classList.add(text)
  } 
}
  return nodes
} 

window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

思路:

  1. window.jQuery = ??? ,???是一个函数.
    2.函数有 addClass 方法 和 setText 方法.
    3.函数对象应该返回一个 hash ,声明了一个空对象,对象的下标是死的,要在循环处动态修改。let nodes = {}.
    4.用伪数组放获取的所有 div.

相关文章

  • htmlday8总结

    jQuery基础 jQuery实质就是对js的封装,封装的目的是为了更方便的使用js。js的代码写在哪儿,jq代码...

  • Day 8 jQuery属性操作和事件绑定

    一、jQuery基本操作 jQuery实质就是对js的封装,封装的目的是为了更方便的使用js js的代码写在哪里,...

  • jquery选择器总结

    什么是jquery? Jquery就是对原生的js代码的封装。所以在使用jquery的时候需要导入jquery的文...

  • js代码封装jquery

    补全???处代码 实现效果 思路: window.jQuery = ??? ,???是一个函数.2.函数有 add...

  • Day08-jQ基础

    jQuery实质就是对js的封装,封装的目的是为了更方便的使用js。js的代码写在哪儿,jq代码就可以写在哪儿,但...

  • jQuery基础

    jQuery实质就是对js的封装,封装的目的是为了更方便的使用js。js的代码写在哪儿,jq代码就可以写在哪儿,但...

  • js jquery的区别

    1. JS / JQuery介绍 Jquery是JS库,何为JS库,即把常用的js方法进行封装,封装到单独的JS文...

  • ECharts柱状图或者折线图方法封装

    前台界面样式 样式代码 JS方法(需引用echarts.js和jquery.js) C#后台数据封装方法

  • Day_8-JQ基础

    什么是jQuery 实质:对js的封装目的:为了更方便的使用js位置:js的代码写在哪儿,jq代码就可以写在哪儿前...

  • jQuery一——概述及选择器

    一、jQuery的概述   jQurey是一款快速的、简介的JS框架(JS代码库),封装了JS的常用功能,是继Pr...

网友评论

      本文标题:js代码封装jquery

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