实现两个jQuery的API（addClass、text）
目的
- 给所有的div添加一个叫“red”的class，为方便看到代码的效果，设置如下css，在设置“red”成功时，文本会变红
.red{
color:red;
} - 将所有的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>
正文
- 完整代码及思路如下，效果点击这里
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）的更多相关文章
- jQuery validate api(转)
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- JQuery html API支持解析执行Javascript脚本功能实现-代码分析
JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...
- JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件
JQuery 常用API 参考资料:JQuery 官网 jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...
- JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
- jQuery EasyUI API 中文文档 - ComboGrid 组合表格
jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...
- jQuery学习笔记—— .html(),.text()和.val()的使用
本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法.jQuery中为我 ...
- API - .addClass()
比较简单的一个方法, jQuery官网中.addClass()有两种参数: 1 .addClass( className ) /* className 为一个或多个(多个时用空格分隔) css ...
- jquery 常用api 小结2
*一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...
- jquery中html()、text()、val()的区别
(2013-03-26 10:49:16) 转载▼ 分类: jquery .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改 ...
随机推荐
- ERROR 1840 (HY000) at line 24: @@GLOBAL.GTID_PURGED can only be set when @@GLOBA
在MySQL 5.7版本中,备份迁移数据库的时候,还原时提示如下报错信息 ERROR 1840 (HY000) at line 24: @@GLOBAL.GTID_PURGED can only be ...
- APUE学习笔记3——文件和目录
1 简介 之前学习了执行I/O操作的基本函数,主要是围绕普通文件I/O的打开.读或写.下面继续学习Unix文件系统的其他特征和文件的基本性质.我们将从stat函数开始,了解stat结构所代表的文件属性 ...
- 优动漫PAINT核心功能介绍
优动漫PAINT是一款功能强大的动漫绘图软件,适用于个人和专业团队创作,分为个人版和EX版.搭载了绘制漫画和插画所需的所有功能——丰富的笔工具.超强的笔压感应和手颤修正功能,可分别满足画师对于插画.漫 ...
- 2104 -- K-th Number
Description You are working for Macrohard company in data structures department. After failing your ...
- 序列模型（5）-----双向神经网络（BRNN）和深层循环神经网络（Deep RNN）
一.双向循环神经网络BRNN 采用BRNN原因: 双向RNN,即可以从过去的时间点获取记忆,又可以从未来的时间点获取信息.为什么要获取未来的信息呢? 判断下面句子中Teddy是否是人名,如果只从前面两 ...
- sql2008删除语句.txt
delete from [aixinxing].[dbo].[bbs2] where announceID in (select AnnounceID from [aixinxing].[dbo].[ ...
- [Ynoi2019模拟赛]Yuno loves sqrt technology II
题目大意: 给定一个长为\(n\)的序列,\(m\)次询问,每次查询一个区间的逆序对数. 32MB. 解题思路: 出题人题解 众所周知lxl是个毒瘤,Ynoi道道都是神仙题 二次离线莫队. 对于每个区 ...
- preload、prefetch的认识
预加载 现在的网络情况虽然很乐观,但是 defer和async 当浏览器碰到 script 脚本的时候: <script src="script.js"></sc ...
- 出现$ref的原因及解决方案
$ref的产生原因 (1)重复引用:一个集合/对象中的多个元素/属性都引用了同一个对象 (2)循环引用:集合/对象中的多个元素/属性在相互引用导致循环 针对fastjson的处理 fastjson作为 ...
- 【hihocoder 1317】搜索四·跳舞链
[题目链接]:http://hihocoder.com/problemset/problem/1317 [题意] [题解] dfs就能过吧. 在选取的时候; 把选取的这一行,占据的列,列的权值+1; ...