主要问题: 在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个ID选择器添加子节点的时候正常,但是到了给一个class选择器的元素添加的时候始终只能添加一个. 下面是我自己定义的Append()函数: /** * 向现有的元素节点中添加dom节点(对使用选择器获取的一系列元素都添加孩子节点child) * @param child,这里创建的实际上是一个JQuery对象 */ append: function (child) { var doms = typeof…

/* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架.内容框架.动画框架的搭建 * V 2.0:实现了框架的进一步优化,具有良好的扩展性, 可以支持链式访问 * */ / 主框架: 只做一件事,就是用于获取所有的元素集合 (function (w) { // 定义一个Xframe对象,后面就是他的构造函数 var xframe = function (…

// DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现有的元素集合中添加元素节点(修改this的内容) * @param dom * @return {add} */ add: function (dom) { // 1. 项伪数组中添加元素 this[this.length] = dom; // 2. 数组的长度也需要改变了 this.length+…

// 缓存框架 (function (xframe) { /** * 实现了缓存框架的临时存储功能(内存存储) * @type {{data: Array, get: (function(*): *), add: xframe.cache.add, delete: (function(*): boolean), update: (function(*, *): boolean), isExist: (function(*): boolean)}} */ xframe.cache = { data…

// 动画框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 xframe.extend(xframe, {}); // 实现动画框架的封装 xframe.Animate = (function (xframe) { // 1. 定义需要的API接口(API内部用于放置属性) var api = { timer: null,// 这是一个动画循环句柄 que…

// 选择框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 xframe.extend(xframe, { /** * ID选择器 * @param context * @return {HTMLElement | *} */ $id: function (context) { // context是一个DOM对象还是字符串 context = this.…

// CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)[只要是需要使用到this获取到的元素集合这个变量的时候,这里就是需要进行链式访问的] xframe.extend({ /** * 给DOM元素设置/取值CSS样式 * @return {*} */ css: function () { // 分为两种情况,一种是取值模式,一种是设置模式 var arg = arguments, len = arg.len…

// 事件框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本事件的绑定 * @param type * @param fn * @return {on} */ on: function (type, fn) { // 注意这里的初始的下标编号是长度减一 var i = this.length - 1; // 可以实现兼容版本的IE浏览器和W3c浏览器的支持…

// 属性框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素的属性信息 * @return {*} */ attr: function () { // 获取属性信息:两种格式,1. 取值模式 2.设置模式 var args = arguments; if (args.length === 0) { // 没有参数的话,就直接返回本身 return this;…

// 内容框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读取和修改元素的HTML标签 对应js中的innerHTML * @return {html} */ html: function () { var arg = arguments, len = arg.length, arr = Array.prototype.slice.call(this); i…