目的

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

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

正文

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

    window.jQuery=function(nodeOrSelector){
    
  //1 新建一个对象nodes
    
  var nodes = {};

  //2 如果nodeOrSelector传入的是字符串（选择器），获取对应的所有的元素放到nodes中（伪对象）；
    
  //2 如果nodeOrSelector传入的是一个节点，放到则把nodeOrSelector放到nodes伪数组的第一个值中
    
  if (typeof nodeOrSelector === 'string') {
    
    var temp = document.querySelectorAll(nodeOrSelector);
    
    for (var i = ; i < temp.length; i++) {
    
      nodes[i] = temp[i];
    
    }
    
    nodes.length = temp.length;
    
  } else if (nodeOrSelector instanceof Node) {
    
    nodes = {
    
      : nodeOrSelector,
    
      length:
    
    };
    
  }

  //3 在nodes中添加一个addClass的属性
    
  nodes.addClass = function(classes) {
    
    for (var i = ; i < nodes.length; i++) {
    
      nodes[i].classList.add(classes);
    
    }
    
  };

  //4 在nodes中添加一个text的属性，当text没有值时，是获取文本节点，中间有值时是设置文本节点
    
  nodes.text = function(text) {
    
    if(text===undefined){
    
      texts=[];
    
      for (var i = ; i < nodes.length; i++) {
    
        texts.push(nodes[i].textContent);
    
      }
    
      return texts;
    
    } else {
    
      for (var i = ; i < nodes.length; i++) {
    
        nodes[i].textContent = text;
    
      }
    
    }
    
  };
    
  return nodes;

};

window.$ = jQuery;
    
var $div = $('div');
    
$div.addClass('red');
    
$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. GEF中连接的实现

    在GEF绘图笔想象中复杂许多,需要很多组件的依赖与支持,稍微弄错一个引用,或一个操作调试起来就比较麻烦,下面列一下实现一个连接线功能所需要实现的类及添加的方法 建议大图查看. 相关代码:参考<G ...

  2. [转]SURF算法解析

    SURF算法解析 一.积分图像    积分图像的概念是由Viola和Jones提出的.积分图像中任意一点(i,j)的值为原图像左上角到任意点(i,j)相应的对焦区域的灰度值的总和,其数学公式如图1所示 ...

  3. RabbitMQ学习之Flow Control

    当RabbitMQ发布消息速度快于消费速度或者系统资源不足时,RabbitMQ将降低或阻断发布消息速度,以免服务器资源饱满而宕机,可以通过rabbitmqctl和web管理页面查看连接的状态为flow ...

  4. JA document的练习

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. USACO 2008 Nov Gold 3.Light Switching 线段树

    Code: #include<cstdio> #include<algorithm> #include<cstring> using namespace std; ...

  6. 【codeforces 799A】Carrot Cakes

    [题目链接]:http://codeforces.com/contest/799/problem/A [题意] 你有一个烤炉; 每t秒能同时烤出k个蛋糕; 你可以在第一个烤炉在烤的时候;同时花费d秒建 ...

  7. 【codeforces 803D】Magazine Ad

    [题目链接]:http://codeforces.com/contest/803/problem/D [题意] 给你一个字符串; 其中的空格和连字符表示可以折叠的部分 (就是说能在那个位置把字符串分成 ...

  8. ie7 text-indent input影响

    IE6/IE7中text-indent对input背景的影响 在text-indent在IE6/IE7中的位置偏移BUG一文中讨论过IE6/IE7中inline-block元素设置text-inden ...

  9. spring datasource和mybatis的datasource来源在哪里

    配置一个数据源     spring在第三方依赖包中包含了两个数据源的实现类包,其一是Apache的DBCP,其二是 C3P0.可以在Spring配置文件中利用这两者中任何一个配置数据源.  配置一个 ...

  10. POJ 2110

    终于过了,SHIT,二分+DFS即可,二分区间,根据数字是否在区间内,变成迷宫题了.枚举第一个格子,二分上界,即可. #include <iostream> #include <cs ...