目的

  1. 给所有的div添加一个叫“red”的class，为方便看到代码的效果，设置如下css，在设置“red”成功时，文本会变红

    1. .red{
    2.   color:red;
    3. }
  2. 将所有的div中的textContent变为“Hi”，HTML代码如下：
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5. </head>
    6. <body>
    7.   <div class="item1">选项1</div>
    8.   <div class="item2">选项2</div>
    9.   <div class="item3">选项3</div>
    10.   <div class="item4">选项4</div>
    11.   <div class="item5">选项5</div>
    12. </body>
    13. </html>

正文

  1. 完整代码及思路如下，效果点击这里

    1. window.jQuery=function(nodeOrSelector){
    2.   //1 新建一个对象nodes
    3.   var nodes = {};
    4.  
    5.   //2 如果nodeOrSelector传入的是字符串（选择器），获取对应的所有的元素放到nodes中（伪对象）；
    6.   //2 如果nodeOrSelector传入的是一个节点，放到则把nodeOrSelector放到nodes伪数组的第一个值中
    7.   if (typeof nodeOrSelector === 'string') {
    8.     var temp = document.querySelectorAll(nodeOrSelector);
    9.     for (var i = ; i < temp.length; i++) {
    10.       nodes[i] = temp[i];
    11.     }
    12.     nodes.length = temp.length;
    13.   } else if (nodeOrSelector instanceof Node) {
    14.     nodes = {
    15.       : nodeOrSelector,
    16.       length:
    17.     };
    18.   }
    19.  
    20.   //3 在nodes中添加一个addClass的属性
    21.   nodes.addClass = function(classes) {
    22.     for (var i = ; i < nodes.length; i++) {
    23.       nodes[i].classList.add(classes);
    24.     }
    25.   };
    26.  
    27.   //4 在nodes中添加一个text的属性，当text没有值时，是获取文本节点，中间有值时是设置文本节点
    28.   nodes.text = function(text) {
    29.     if(text===undefined){
    30.       texts=[];
    31.       for (var i = ; i < nodes.length; i++) {
    32.         texts.push(nodes[i].textContent);
    33.       }
    34.       return texts;
    35.     } else {
    36.       for (var i = ; i < nodes.length; i++) {
    37.         nodes[i].textContent = text;
    38.       }
    39.     }
    40.   };
    41.   return nodes;
    42.  
    43. };
    44.  
    45. window.$ = jQuery;
    46. var $div = $('div');
    47. $div.addClass('red');
    48. $div.text('Hi');

实现两个jQuery的API（addClass、text）的更多相关文章

  1. jQuery validate api(转)

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  2. JQuery html API支持解析执行Javascript脚本功能实现-代码分析

    JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...

  3. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  4. JavaScript强化教程——jQuery UI API 类别

    ---恢复内容开始--- 主要介绍:JavaScript强化教程​—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...

  5. jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...

  6. jQuery学习笔记—— .html(),.text()和.val()的使用

    本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法.jQuery中为我 ...

  7. API - .addClass()

    比较简单的一个方法,  jQuery官网中.addClass()有两种参数: 1 .addClass( className )   /* className 为一个或多个(多个时用空格分隔) css ...

  8. jquery 常用api 小结2

    *一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...

  9. jquery中html()、text()、val()的区别

     (2013-03-26 10:49:16) 转载▼ 分类: jquery   .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改 ...

随机推荐

  1. javascript中创建对象和实现继承

    # oo ##创建对象 1. 原型.构造函数.实例之间的关系 * 原型的construct->构造函数:调用isPrototypeOf(obj)方法可以判定和实例的关系:  * 构造函数的pro ...

  2. Ubuntu Server 18.04 LTS 安装

    版本:Ubuntu Server 18.04.1 LTS 环境:VMware Workstation 14 Player 下载地址:https://www.ubuntu.com/download/se ...

  3. 一文带您了解5G的价值与应用

    一文带您了解5G的价值与应用 5G最有趣的一点是:大多数产品都是先有明确应用场景而后千呼万唤始出来.而5G则不同,即将到来的5G不仅再一次印证了科学技术是第一生产力还给不少用户带来了迷茫——我们为什么 ...

  4. MongoDB基本操作总结

    MongoDB语法总结:插入操作:单条插入语法 : insertOne()示例: db.getCollection('MY_TEST').insertOne({"日期" : &qu ...

  5. 动态规划——独立任务最优调度（Independent Task Scheduling）

    题目链接 题目描述 用2 台处理机A 和B 处理n 个作业.设第i 个作业交给机器A 处理时需要时间i a ,若由机器B 来处理,则需要时间i b .由于各作业的特点和机器的性能关系,很可能对于某些i ...

  6. Linux进程地址管理之mm_struct

    FROM : http://www.cnblogs.com/Rofael/archive/2013/04/13/3019153.html Linux对于内存的管理涉及到非常多的方面,这篇文章首先从对进 ...

  7. 【BZOJ2733】【HNOI2012】永无乡 - 线段树合并

    题意: Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通 ...

  8. 终极对决！Dubbo 和 Spring Cloud 微服务架构到底孰优孰劣

    标签: 微服务dubbospring架构 前言 微服务架构是互联网很热门的话题,是互联网技术发展的必然结果.它提倡将单一应用程序划分成一组小的服务,服务之间互相协调.互相配合,为用户提供最终价值.虽然 ...

  9. vue v-for下图片src显示失败，404错误

  10. Python包结构和函数式编程

    # 包的结构 |--包 |--|-- __init__.py 包的标志文件 |--|-- 模块1 |--|-- 模块2 |--|-- 子包(子文件夹) |--|--|-- __init__.py 包的 ...