//#region 选择器区域 //var win = window;// doc = document; //window.U.Json_ = window.$; //记录命名控件 //全局使用 解决jquery覆盖我们的选择器的问题。 /*下面的写法会导致程序在window.onload之前执行,为什么要在window.onload之前执行,如果非要执行,能否把所有要做window.onload之前执行的整合在一个文件?并列明必须先执行的理由?*/ /* 选择器前言 好处: 1、简化项目的代码 2、当我对系统的ocument.getElementById document.getElementsByTagName document.getElementsByClassName有奇异 觉得里面需要修改添加一些新的方法处理 可以统一处理 */ //#region 创建元素 /* *使用$$操作符简化编码长度。 *例:$$("div", { "style": { "cssText": "font-size:16px;float:left;line-height:33px;width:40%;margin:0px 0px 0px 15px;" }, "innerHTML": "文件名" }, Inner_J) * @param {string} 元素的类型tagName 例如:"div" * @param {object} 集合,类似 { "style": { "cssText": "font-size:16px;float:left;line-height:33px;width:40%;margin:0px 0px 0px 15px;" }, "innerHTML": "文件名" } * @param {element} 所要追加的父亲元素,把第二个参数作为孩子节点追加到第三个参数。par代表父亲元素 * @param {element} 追加的位置,如果有此参数,则把创建的元素追加到此元素的前面。此元素必须为第三个参数的孩子节点。 */ U.quickCreate = window.$$ = function (str, obj, parentel, child) { //创建基本元素元素 var i, _element; //由于createDocumentFragment和createTextNode太长,可以通过简单的方式去创建 var _obj = { "frag": "createDocumentFragment" //碎片元素 // "text": "createTextNode" //文本元素 }; //判断是否创建上面的元素方式 if (_obj[str]) { _element = document[_obj[str]](); } //创建制定标签的元素 else { _element = document.createElement(str); } //给元素添加属性 if (obj) { U.selectEl(_element).addAttrArray(obj); } //如果存在父亲,则追加孩子节点。 if (parentel) { //如果存在第四个参数,则追加到第四个参数的前面。否则,追加在最后面。 if (child) { parentel.insertBefore(_element, child); } //追加到父亲元素的最后面 else { parentel.appendChild(_element); } } //返回创建的元素 return _element; } //#endregion //#region 1473用的快速选择器 去除没有必要的功能 只保留简单的选择功能 /** * 初始化编辑区域 * * @param {string} 选择 首先我们会定义3个获取元素的方法代替系统的 document.getElementById document.getElementsByTagName document.getElementsByClassName * @param {元素} 在元素下面搜索符合参数一的所有孩子节点 例一、$("#U_MD_D_H");找名为U_MD_D_H唯一id。 例二、$("div", UDKF):在元素UDKF下面搜索所有div元素。 例三:$(".className", UDKF) 在元素UDKF下面找classname等于classname的元素。不建议用,性能太低。 */ $ = U.selectEl = function (name, el) { //调用选择器的方法 return new U.select(name, el); } /** * 初始化编辑区域 * * @param {string} 选择的元素,例如"div" * @param {document} 搜索的层次 * 返回值:数组 [elment,elment,element] * var a=U.select("div.classname",body); * var b=U.select("input,a) */ U.select = function (selector, el) { //定义类 //设置值 this.length = 0; //选择元素的总长度 this.context = el || document; //选择器的域(在哪个元素下面选,默认是document) //获取元素选择 this.select(selector, el); //选择元素 } U.select.EVENTS = []; //元素绑定事件存储的地方 /** * 这里是选择器的方法集合 * */ U.select.prototype = {//原型对象使用 /** * 定义选择器构造器 * * @param {string} 选择特殊字符串 包含# & [] * @param {document} 搜索的层次 */ select: function (name, el) { //选择器选择 var _selectel; //如果是字符串说明用户要通过选择器找到字符串 if (U.UF.C.isString(name)) { var _r = name.substring(0, 1), //获取特殊字符 . # 或者 "" _n = name.substring(1, name.length), //获取标签名 _doc = el || document; //去除特殊字符后 //这里是判断获取 try { //这里利用基础的选择器选取数据 switch (_r) { case "#": //根据id获取 因为id获取只能通过全局搜索 但是由于项目中有存在克隆的情况 会出现id不唯一的情况 if (_doc == document && U.UF.S.EN.test(_n)) { _selectel = document.getElementById(_n); } break; case ".": //根据className获取 if (U.UF.S.EN.test(_n)) { _selectel = _doc.getElementsByClassName(_n); } break; case "*": //如果后面有输入id,那么找所有的媒体文件 if (U.UF.S.EN.test(_n)) { _selectel = document[_n]; //获取媒体文件 if (!_selectel) { //如果没有找到说明不兼容 if (U.UF.CI.getBrowser().browser == "msie") { //ie得到媒体文件的方法 _selectel = document.getElementById(_n); } //非ie系列 else { _selectel = document.embeds[_n]; } } } //否则就是直接找指定元素下面的所有元素 else { _selectel = _doc.getElementsByTagName("*"); } break; default: //标签的获取 //获取指定的元素 if (U.UF.S.EN.test(name)) { _selectel = _doc.getElementsByTagName(name); //除去特殊字符的处理 } break; } } catch (e) { } //判断是否获取元素成功,如果上面简单的选择去不成功,那么就通过其他的选择器方案去获取 if (_selectel == null) { _selectel = U.UF.CP.selectorElement(name, _doc); //其他选择的方式获取 } } //如果用户第一个参数传的是元素,那么就直接设置 else if (name) { _selectel = name; } //添加元素到this里面 if (_selectel) { this.addElement(_selectel); } return this; }, /** * 添加查找到的元素到this里 * * @param {elements} 选择的元素数组 */ addElement: function (els) { //把所有获取出来的元素转化成数组,以便下面循环添加 U.UF.C.isElement(els) || els.length == null if ((U.UF.C.isElement(els) || els.length == null) || els.toString() == "[object Window]") { els = [els]; } //循环所有的元素,把元素设置到this里面,这样用户获取到的元素集就能通过this[0]或者this[id]去获取了 for (var i = 0; i < els.length; i++) { //如果元素存在的处理 this[i] = els[i]; //如果元素有id,那么给返回值添加一个id的处理,以便返回值中有以id作为key的返回值 if (els[i].id) { this[els[i].id] = els[i]; } this.length++; //没添加一个那么选择的元素的长度多一个 } }, /** * 在选择好的元素下面继续搜索子元素 * * @param {string} 选择特殊字符串 包含# & [] * @param {number} 搜索的层次 */ find: function (name, item) { //获取元素的后代 var i = item || 0, //由于选择选择出来的元素是数组,所以需要筛选出第几个需要获取子节点 _length = item + 1 || this.length, //选择元素的长度 _elements = new U.select(); //由于新选择了元素,那么实例化选择器 for (; i < _length; i++) { _elements.select(name, this[i]); //重新选择添加处理 } return _elements; //返回最后选择的结果 }, /** * 当前元素前一个兄弟节点 * * @param {string} 选择特殊字符串 包含# & [] * @param {number} 搜索的层次 */ prev: function (item) { var _selectel, //获取选择的元素 _selects = [], //所有选择的元素 i = item || 0, //由于选择选择出来的元素是数组,所以需要筛选出第几个需要获取子节点 _length = item + 1 || this.length, //选择元素的长度 _elements = new U.select(); //由于新选择了元素,那么实例化选择器 //循环的去获取每个元素的上级元素 for (; i < _length; i++) { _selectel = this[i]; if (_selectel) { //用do while去过滤文本节点,只找元素节点 do { _selectel = _selectel.previousSibling; } while (_selectel && _selectel.nodeType !== 1) } //找到节点追加到数组里 if (_selectel) { _selects.push(_selectel); } } //把元素添加到_elements里,并返回到前台 _elements.addElement(_selects); return _elements; }, /** * 当前元素之后第一个兄弟节点 * * @param {string} 选择特殊字符串 包含# & [] * @param {number} 搜索的层次 */ next: function (item) { var _selectel, //获取选择的元素 _selects = [], //所有选择的元素 i = item || 0, //由于选择选择出来的元素是数组,所以需要筛选出第几个需要获取子节点 _length = item + 1 || this.length, //选择元素的长度 _elements = new U.select(); //由于新选择了元素,那么实例化选择器 //循环的去获取每个元素的上级元素 for (; i < _length; i++) { _selectel = this[i]; if (_selectel) { //用do while去过滤文本节点,只找元素节点 do { _selectel = _selectel.nextSibling; } while (_selectel && _selectel.nodeType !== 1) } //找到节点追加到数组里 if (_selectel) { _selects.push(_selectel); } } //把元素添加到_elements里,并返回到前台 _elements.addElement(_selects); return _elements; }, /** * 获取所有的子元素 * * @param {number} 选择器结果里面的第几个 */ Nodes: function (item) { item = item || 0; //由于选择选择出来的元素是数组,所以需要筛选出第几个需要获取子节点 //直接返回所有的子节点 if (this[item]) { this[item].childNodes; } ; }, /** * 获取所有的子元素 * * @param {number} 选择器结果里面的第几个 */ Child: function (item) {//获取有效元素孩子节点 item = item || 0; //由于选择选择出来的元素是数组,所以需要筛选出第几个需要获取子节点 //如果选择的元素存在则获取子节点 通过U.UF.EL.getChildrenNoText 可以把 #text节点过滤 if (this[item]) { return U.UF.EL.getChildrenNoText(this[item].childNodes) } }, /** * 如果没有参数,则是查找自己的父亲,如果有参数,则查找符合条件的祖先元素。 * 如果UTF是数字n,则向上查找n层祖先。 * 如果UTF是属性,则查找符合条件的属性。 * * @param {number} 选择器结果里面的第几个 */ Parent: function (obj) {//获取上级父亲层 var _while, _istrue, _el = this[0]; obj = obj || 1; //如果没有条件,那么就是默认选取上一层的父亲 if (U.UF.C.isNumber(obj)) { for (i = 0; i < obj; i++) { if (_el) { //判断是否有选取 _el = _el.parentNode; } } } else { //循环的向上寻找制定条件的元素,最大不超过document层 _while: while (_el && _el != document) { _istrue = true; //循环判断条件是否匹配 for (i in obj) { //如果条件匹配 if (obj[i] != _el[i] && (!_el.getAttribute || _el.getAttribute(i) != obj[i])) { _istrue = false; break; } } //如果全部条件符合,那么直接跳出 if (_istrue) { break _while; } //继续向上找 else { _el = _el.parentNode; } } } //返回找到的祖先层 return _el; }, /** * 获取所有的子元素 * * @param {number} 选择器结果里面的第几个 */ childs: function (item) {//获取孩子节点 return new U.select(this.Child(item)); }, /** * 如果没有参数,则是查找自己的父亲,如果有参数,则查找符合条件的祖先元素。 * 如果UTF是数字n,则向上查找n层祖先。 * 如果UTF是属性,则查找符合条件的属性。 * * @param {number} 选择器结果里面的第几个 */ parentElement: function (obj, item) {//获取父亲节点 return new U.select(this.Parent(obj, item)); }, /** * 克隆元素 * * @param {boolean} 设置为 true,如果您需要克隆节点及其属性,以及后代, 设置为 false,如果您只需要克隆节点及其后代 * @param {number} 选择器结果里面的第几个 */ clone: function (deep, item) { //克隆元素 UDOD, UDID, USE var i = item || 0, //item 基本没有用 _returnarr = [], //返回的数据 _length = i + 1 || this.length; //克隆元素的长度 //循环克隆放入_returnarr里 for (; i < _length; i++) { _returnarr.push(this[i].cloneNode(deep)); } //返回选择器 return new U.select(_returnarr); }, /** * 把元素添加到制定的父亲层 * * @param {element} 添加到哪个父亲层 * @param {number} 选择器结果里面的第几个 * @param {element} 添加到哪个元素的上面 */ appendTo: function (parentel, item, childel) {//添加元素到制定的位置 var i = item || 0, //选择器结果里面的第几个 _length = item + 1 || this.length; //插入元素的长度 //循环条件元素 for (; i < _length; i++) { //如果有子元素,就添加到这个子元素的前面 if (childel) { parentel.insertBefore(this[i], childel); } //添加到最后面 else { parentel.appendChild(this[i]); } } return this; }, /** * 添加子元素 * * @param {element} 需要追加的元素 * @param {number} 选择器结果里面的第几个 * @param {element} 添加到哪个元素的上面 */ append: function (el, item, childel) {//插入元素 item = item || 0; //选择器结果里面的第几个 //如果有子元素,就添加到这个子元素的前面 if (childel) { this[item].insertBefore(el, childel); } //添加到最后面 else { this[item].appendChild(el); } return this; }, /** * 移除元素 * * @param {boolean} 设置为 true,如果您需要克隆节点及其属性,以及后代, 设置为 false,如果您只需要克隆节点及其后代 * @param {number} 选择器结果里面的第几个 */ remove: function (item) { var i = item || 0, //选择器结果里面的第几个 _length = item != null ? item + 1 : this.length; //移除的数量 //循环移除 for (; i < _length; i++) { //判断是否有上一级 if (this[i] && this[i].parentNode) { this[i].parentNode.removeChild(this[i]); //移除 } } return this; }, /** * 元素居中 * * @param {number} 选择器结果里面的第几个 */ Center: function (item) { //元素居中 var i = item || 0, //选择器结果里面的第几个 _length = item + 1 || this.length; //居中弹出的数量 //循环弹出处理 for (; i < _length; i++) { U.UF.F.windowTopCenter(this[i]); //居中弹出 } return this; }, /** * 返回元素的大小和位置 * * @param {number} 选择器结果里面的第几个 */ getElementInfo: function (item) { return U.UF.EL.getElementInfo(this[item || 0]); }, /** * 返回元素的大小和位置 * * 设置单个Css属性传参说明 * @obj {string} 必填 css属性名 * @value {string} 必填 css属性对应的值 * @item {number} 选填 选择器结果里面的第几个 * * 设置多个Css属性传参说明 * @obj {string} 必填 需设置的cssjson * 形如:{width : '100px', height: '100px', 'backgroud-color': 'red'} * @value {null} 占位传参 null * @item {number} 选填 选择器结果里面的第几个 */ css: function (obj, value, item) {//获取指定的css值 var i = item || 0, //选择第几个 _length = item + 1 || this.length, //长度 _isobject = U.UF.C.isObject(obj); //如果是object,那么第二个参数就是item 所以这里的 value = item if (_isobject) { this.addAttrArray({ "style": obj }, value); } //如果第一个参数是strig类型那么value需要有值,如果有值那么就是设置,否则是获取css else if (value != null) { //循环的设置值 for (i; i < _length; i++) { obj = U.UF.EL.styleConversion(obj); //由于用户这边会穿 text-align 这样的值 但是在css里面 该值为 textAlign改成了大写 try { this[i].style[obj] = value; } catch (e) { } } } //获取css else { return U.UF.EL.getStyle(this[i], obj); } return this; }, /** * 添加classname * * @param {string} 移除的classname */ addClass: function (classname, item) { //添加Class var i = item || 0, //选择第几个 _length = item + 1 || this.length; //长度 //循环给元素添加class值 for (; i < _length; i++) { U.UF.EL.addClass(this[i], classname); } return this; }, /** * 移除classname * * @param {string} 移除的classname */ removeClass: function (classname, item) {//移除制定的class var i = item || 0, //选择第几个 _length = item + 1 || this.length; //长度 //循环给元素移除classname for (; i < _length; i++) { U.UF.EL.removeClass(this[i], classname); } return this; }, /** * 判断元素是否有制定的class * * @param {string} classname */ hasClass: function (classname, item) { item = item || 0; return U.UF.EL.isHasClass(this[item], classname); }, /** * 判断元素是否有制定的class * * @param {string} classname */ attr: function (obj, value, item) { //添加属性 var j, i, //选择第几个 _length, //长度 _isobject = U.UF.C.isObject(obj); //判断元素是否为对象 //如果是object,那么第二个参数就是item 所以这里的 value = item if (_isobject) { i = value || 0; //选择第几个 _length = value + 1 || this.length; //长度 //循环所有的元素添加至 for (; i < _length; i++) { for (j in obj) { U.UF.EL.addAttributes(this[i], j, obj[j]); //给元素添加属性 } } } //如果第一个参数是strig类型那么value需要有值,如果有值那么就是设置,否则是获取css else if (value != null) { i = item || 0; //选择第几个 _length = item + 1 || this.length; //长度 //循环的设置值 for (i; i < _length; i++) { U.UF.EL.addAttributes(this[i], obj, value); //给元素添加属性 } } //获取属性, else { return this[item || 0].getAttribute(obj); } return this; }, /** * 移除属性 * * @param {string} classname */ rmAttr: function (name, item) { //移除属性 U.UF.EL.delAttributes(this[item || 0], name); //移除元素 return this; }, /** * 添加属性 * * @param {string} classname */ addAttrArray: function (obj, item) {//赋值区域 var j, k, _newcsstext, _csstype, _csstext = "", //csstext i = item || 0, //选择第几个 _length = item + 1 || this.length; //长度 //循环的处理每个元素赋值 for (; i < _length; i++) { //循环所有的属性 for (j in obj) { //css的添加方式 if (j == "style") { _csstext = ""; _newcsstext = obj[j]["cssText"]; for (k in obj[j]) { _csstype = U.UF.EL.styleConversion(k, true); //把所有的cssText转成css-text,因为css在拼接的时候是以这种形式 //cssText的设置方式,添加一份新的csstext if (_csstype == "css-text") { continue; } //如果是其他普通样式的添加,那么就拼接 else if (k in this[i][j]) { _csstext += _csstype + ":" + obj[j][k] + ";"; } //自定义属性的设置,情况比较少,但是在做兼容方案的时候可能会用到 else { this[i][j][k] = obj[j][k]; } } //如果需要设置cssText的处理 if (_newcsstext) { _csstext = this[i][j]["cssText"] + ";" + _newcsstext + ";" + _csstext; } //如果是undefined或者是null这样不设置值的处理 else if (_newcsstext !== "") { _csstext = this[i][j]["cssText"] + ";" + _csstext; } this[i][j]["cssText"] = _csstext; } //出css以外的添加方式 如 onclick事件赋值 classname赋值 else { //如果是事件类型的,又是字符串类型,那么这里把它转化成函数 if (j.indexOf("on") == 0 && U.UF.C.isString(obj[j])) { this[i][j] = new Function(obj[j]); //字符串转化成function continue; } //&& "string".indexOf(U.UF.C.getType((_UVE = UDE[j]))) > -1 //如果是字符串,同时又是系统属性,那么通过setAttribute的方式设置属性,该方式设置属性可以让属性在网页调试模式下看到如
kk为自定义属性 else if (U.UF.C.isString(obj[j]) && U.UF.EL.isCustomAttributes(this[i], j)) { //由于低版本的浏览器会报错,这里用try catch try { this[i].setAttribute(j, obj[j]); } catch (e) { } } try { this[i][j] = obj[j]; } catch (e) { } } } } return this; }, /** * 隐藏元素 * * @param {string} classname */ hide: function (item) { this.css({ "display": "none" }, item); }, /** * 显示元素 * * @param {string} classname */ show: function (item) { //显示元素 this.css({ "display": "block" }, item); }, /** * 获取长度 * */ width: function () { return U.UF.EL.getElementRealWidth(this[0]); }, /** * 获取长度 * */ height: function () { return U.UF.EL.getElementRealHeight(this[0]); }, /** * 鼠标移入的时候触发,由于onmouseover会出发多次 这里做兼容 * * @param {string} classname */ mouseenter: function (cb, item) { //enter事件 //设置移入函数 this.addAttrArray({ "onmouseover": function () { U.UF.EV.stopBubbleMouseOutOrOver(this, cb); //判断用户移入的时候出发元素,进行判断元素是否移入 } }, item); return this; }, /** * 鼠标移出的时候触发,由于onmouseout会出发多次 这里做兼容 * * @param {string} classname */ mouseleave: function (cb, item) { //leave事件 //设置移入函数 this.addAttrArray({ "onmouseout": function () { U.UF.EV.stopBubbleMouseOutOrOver(this, cb); //判断用户移入的时候出发元素,进行判断元素是否移入 } }, item); return this; }, /** * 鼠标移出的时候触发,由于onmouseout会出发多次 这里做兼容 * * @param {string} classname */ gt: function (item) { //索引大于的元素 var i = item, //item 基本没有用 _returnarr = [], //返回的数据 _elements = new U.select(); //由于重新筛选数据,那么需要新建一个选择器 //循环筛选元素 for (; i < this.length; i++) { _returnarr.push(this[i]); } //循环添加到this里面 _elements.addElement(_returnarr); return _elements; }, /** * 鼠标移出的时候触发,由于onmouseout会出发多次 这里做兼容 * * @param {string} classname */ lt: function (item) { var i = 0, //item 基本没有用 _returnarr = []; //返回的数据 //循环筛选元素 for (; i < item; i++) { _returnarr.push(this[i]); } //循环添加到this里面 return new U.select(_returnarr); //由于重新筛选数据,那么需要新建一个选择器 }, /** * 元素事件绑定 * * @param {string} classname */ bind: function (obj, value, item) { var j, i, //选择第几个 _length, //长度 _isobject = U.UF.C.isObject(obj); //判断元素是否为对象 //如果是object,那么第二个参数就是item 所以这里的 value = item if (_isobject) { i = value || 0; //选择第几个 _length = value + 1 || this.length; //长度 //循环所有的元素添加至 for (; i < _length; i++) { for (j in obj) { U.UF.EV.addElementEvent(j, this[i], obj[j]); //添加事件绑定 //添加事件 U.select.EVENTS.push({ element: this[i], //绑定事件 event: j, //事件 fun: obj[j] //函数 }); } } } //如果第一个参数是strig类型那么value需要有值,如果有值那么就是设置,否则是获取css else if (value != null) { i = item || 0; //选择第几个 _length = item + 1 || this.length; //长度 //循环的设置值 for (i; i < _length; i++) { U.UF.EV.addElementEvent(obj, this[i], value); //添加事件绑定 //添加事件 U.select.EVENTS.push({ element: this[i], //绑定事件 event: obj, //事件 fun: value //函数 }); } } return this; }, /** * 元素解除事件绑定 * * @param {string} classname */ unbind: function (obj, value, item) { //事件绑定取消 var j, i, //选择第几个 k, _length, //长度 _isobject = U.UF.C.isObject(obj); //判断元素是否为对象 //如果是object,那么第二个参数就是item 所以这里的 value = item if (_isobject) { i = value || 0; //选择第几个 _length = value + 1 || this.length; //长度 //循环所有的元素添加至 for (; i < _length; i++) { for (j in obj) { U.UF.EV.delElementEvent(j, this[i], obj[j]); //删除事件绑定 for (k = 0; k < U.select.EVENTS.length; k++) { if (U.select.EVENTS[k].element == this[i] && U.select.EVENTS[k].event == j && U.select.EVENTS[k].fun == obj[j]) { U.select.EVENTS.splice(k, 1); k--; } } } } } //如果第一个参数是strig类型那么value需要有值,如果有值那么就是设置,否则是获取css else if (obj != null) { i = item || 0; //选择第几个 _length = item + 1 || this.length; //长度 //循环的设置值 for (i; i < _length; i++) { for (k = 0; k < U.select.EVENTS.length; k++) { if (U.select.EVENTS[k].element == this[i] && U.select.EVENTS[k].event == obj && (value == null || U.select.EVENTS[k].fun == value)) { U.UF.EV.delElementEvent(obj, this[i], U.select.EVENTS[k].fun); //添加事件绑定 U.select.EVENTS.splice(k, 1); k--; } } } } //如果没有传key和value去移除,那么就移除元素所有绑定的事件 else { i = item || 0; //选择第几个 _length = item + 1 || this.length; //长度 for (i; i < _length; i++) { for (k = 0; k < U.select.EVENTS.length; k++) { if (U.select.EVENTS[k].element == this[i]) { U.UF.EV.delElementEvent(U.select.EVENTS[k].event, this[i], U.select.EVENTS[k].fun); //添加事件绑定 U.select.EVENTS.splice(k, 1); k--; } } } } return this; } } //#endregion