封装库--JavaScript,完整封装库文件

  1. /**
  2. *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀
  3. **/
  4.  
  5. /** 前台调用
  6. * 每次调用$()创建库对象,使其每次调用都是独立的对象
  7. * $()创建库对象,有一个可选参数,参数有两种方式,1是传入的this,2是传入的字符串
  8. * 可选参数说明:
  9. * 传入的this,this,就是当前对象本身
  10. *
  11. * 传入的字符串,代表获取元素选择器
  12. * 参数是元素选择器(id值、class值、标签名称)其中一样的字符串方式,或者是其中几样的字符串组合方式
  13. * 获取一个元素传参方式 '#xxx'( 表示获取id),'.xxx'(表示获取class),'xxx'(表示获取标签)
  14. * 从父元素向下获取组合方式按照,一个元素传参方式加上空格,如: ('#sdf .hjk p')表示获取id为sdf元素下的class为hjk下的p元素
  15. *
  16. * 传入一个匿名函数,表示是dom页面文档加载,在匿名函数里写代码,表示等待页面文档加载完毕后执行函数里的代码
  17. * 加载dom页面文档结构后执行函数,不等待图片,音频视频等文件加载
  18. **/
  19. var $ = function (args) {
  20. return new feng_zhuang_ku(args);
  21. };
  22.  
  23. /**
  24. *定义封装库构造函数,类库
  25. **/
  26. function feng_zhuang_ku(args) {
  27. /** jie_dian属性,创建数组,初始化,保存获取到的元素节点,返回数组
  28. **/
  29. this.jie_dian = [];
  30. if (typeof args == 'string') { //如果传入的是字符串,说明是获取元素选择器
  31. if (args.indexOf(' ') != -1) {
  32. /**从父元素向下获取组合方式**/
  33. var fen_ge = args.split(' '); //将接收的组合式元素名称分割成数组
  34. var lin_shi = []; //保存临时对象的数组,解决被覆盖问题
  35. var fu_yuan_su = []; //保存父元素的数组
  36. for (var i = 0; i < fen_ge.length; i++) {
  37. if (fu_yuan_su.length == 0)fu_yuan_su.push(document); //如果没有父节点,就把document放入父节点
  38. switch (fen_ge[i].charAt(0)) { //判断字符串的第一个字符是什么
  39. case '#': //说明是id
  40. lin_shi = []; //清理临时数组,以便父节点失效,子节点有效
  41. lin_shi.push(this.huo_qu_id(fen_ge[i].substring(1))); //去除第一个字符,获取到传入的id元素,保存到临时数组
  42. fu_yuan_su = lin_shi; //将临时节点数组放入父节点数字
  43. break; //说明是class
  44. case '.':
  45. lin_shi = []; //清理临时数组,以便父节点失效,子节点有效
  46. for (var f = 0; f < fu_yuan_su.length; f++) { //根据父节点的长度循环
  47. var tempss = this.huo_qu_class(fen_ge[i].substring(1), fu_yuan_su[f]); //获取到父节点下的子节点
  48. for (var n = 0; n < tempss.length; n++) { //循环子节点,将每次循环的子节点添加到临时数组
  49. lin_shi.push(tempss[n]);
  50. }
  51. }
  52. fu_yuan_su = lin_shi; //将临时节点数组放入父节点数字
  53. break;
  54. default: //说明是标签
  55. lin_shi = []; //清理临时数组,以便父节点失效,子节点有效
  56. for (var j = 0; j < fu_yuan_su.length; j++) { //根据父节点的长度循环
  57. var temps = this.huo_qu_name(fen_ge[i], fu_yuan_su[j]); //获取到父节点下的子节点
  58. for (var k = 0; k < temps.length; k++) { //循环子节点,将每次循环的子节点添加到临时数组
  59. lin_shi.push(temps[k]);
  60. }
  61. }
  62. fu_yuan_su = lin_shi; //将临时节点数组放入父节点数字
  63. }
  64. }
  65. this.jie_dian = lin_shi; //将临时数组放入jie_dian数组
  66. } else {
  67. /**一个元素传参方式**/
  68. switch (args.charAt(0)) { //判断字符串的第一个字符是什么
  69. case '#': //说明是id
  70. this.jie_dian.push(this.huo_qu_id(args.substring(1))); //去除第一个字符,获取到传入的id元素
  71. break;
  72. case '.': //说明是class
  73. this.jie_dian = this.huo_qu_class(args.substring(1)); //去除第一个字符,获取到传入的class元素
  74. break;
  75. default: //说明是标签
  76. this.jie_dian = this.huo_qu_name(args); //获取到传入的标签元素
  77. }
  78. }
  79. } else if (typeof args == 'object') { //如果传入的是对象,说明是this,就是当前对象本身
  80. if (args != undefined) {
  81. this.jie_dian[0] = args;
  82. }
  83. } else if (typeof args == 'function') {
  84. this.dom_dom(args);
  85. }
  86. }
  87.  
  88. /**█████████████████████████████████████████████████封装库█████████████████████████████████████████████████████████**/
  89.  
  90. /**▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃获取元素标签开始▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃**/
  91. /**获取元素标签说明:
  92. * jie_dian属性,保存获取到的元素节点,返回数组,
  93. *
  94. * huo_qu_id()方法,通过id获取元素标签,参数是id值,将获取到的元素对象返回给方法本身,无法连缀
  95. * huo_qu_name()方法,通过标签名称获取相同标签名的元素,
  96. * huo_qu_class()方法,获取相同class属性的节点,返回包含相同class属性的节点数组,返回给方法本身,无法连缀
  97. * hq_form_name()方法,获取表单里,指定name值的元素节点,也就是获取表单里指定名称的元素节点,在form元素对象下使用
  98. * hq_value()方法,获取和设置表单里节点的value属性值
  99. * huo_qu_name_zhi()方法,通过元素name值获取指定元素,适用于获取表单元素,
  100. * shang_jd()方法,获取当前节点同级的上一个节点
  101. * xia_jd()方法,获取当前节点同级的下一个节点
  102. * hq_jd()方法,多个节点时,获取某一个节点,并返回这个节点对象,参数是节点索引
  103. * sh_jd()方法,多个节点时,获取首个节点,并返回这个节点对象,无参
  104. * w_jd()方法,多个节点时,获取末个节点,并返回这个节点对象,无参
  105. * guo_lv_jie_dian()方法,多个节点时,获取某一个节点,并且feng_zhuang_ku对象
  106. * jd_length()方法,获取一个节点集合的长度
  107. * hq_suo_yin()方法,获取一个节点在,父节点下,子节点集合里的索引,也就是在集合里的下标
  108. * hq_shu_xing_zhi()方法,获取或设置一个节点的属性值
  109. * huo_qu_zi_jie_dian()方法,获取一个元素下的子元素
  110. * dom_dom()方法,加载dom页面文档结构后执行函数,不等待图片,音频视频等文件加载
  111. **/
  112.  
  113. /**▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃元素节点操作开始▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃**/
  114. /**元素节点操作说明:
  115. * c_css()方法,给获取到的元素设置ss样式,或者获取css样式,
  116. * shzh_tou_ming_du()方法,给元素设置透明度
  117. * wen_ben()方法,给获取到的元素设置文本,或者获取文本
  118. * wen_ben_guo_lv()方法,给获取到的元素设置文本,或者获取文本,会过滤html标签
  119. * tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀
  120. * yi_chu_class()方法,给获取到的元素移除class属性,参数是要移除的class属性值,可以连缀
  121. * she_zhi_link_css()方法,设置link连接、或style内嵌、中的CSS样式
  122. * yi_chu_link_css()方法,移除link连接、或style内嵌、中的CSS样式
  123. * tuo_zhuai()方法,将一个弹窗元素实现拖拽功能
  124. **/
  125. /**▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃元素事件开始▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃**/
  126. /**元素事件说明:
  127. * shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码)
  128. * xian_shi()方法,设置元素显示,无参
  129. * yin_cang()方法,设置元素隐藏,无参
  130. * yuan_su_shi_jian()方,给元素添加一个元素事件
  131. * on_click()方法,给获取到的元素添加一个点击事件,参数是一个匿名函数(包含函数功能),
  132. * dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环执行方法里的函数
  133. * yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,
  134. * chuang_kou_shi_jian()方法,浏览器窗口事件,当窗口的大小变化时触发函数
  135. * zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块
  136. * jie_chu_suo_ping()方法,将一个锁屏区块元素解除锁屏,
  137. **/
  138. /**▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃元素动画开始▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃**/
  139. /**
  140. * 元素动画说明
  141. * yi_dong_tou_ming()方法,将一个元素,
  142. *
  143. **/
  144. /**▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃插件入口开始▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃**/
  145.  
  146. /** 插件入口,简单的理解就是通过extend()方法,向此基础库添加一个原型方法
  147. **/
  148. /**▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ajax通讯▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃**/
  149. /**
  150. * ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据
  151. **/
  152. /**▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃表单序列化▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃**/
  153. /**
  154. * xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和value值,无法连缀
  155. **/
  156. /**█████████████████████████████████████████████████封装库██████████████████████████████████████████████████████████**/
  157.  
  158. /**------------------------------------------------获取元素标签开始--------------------------------------------**/
  159.  
  160. /** huo_qu_id()方法,通过id获取元素标签,参数是id值,将获取到的元素对象返回给方法本身,无法连缀
  161. **/
  162. feng_zhuang_ku.prototype.huo_qu_id = function (id) {
  163. return document.getElementById(id);
  164. };
  165.  
  166. /** huo_qu_name()方法,通过标签名称获取相同标签名的元素,返回包含相同标签名的元素数组,返回给方法本身
  167. * 两个参数:获取指定元素下的相同标签元素,参数1标签名称,参数2是要获取元素的父元素
  168. * 一个参数:获取页面所有相同标签元素,参数是标签名称
  169. **/
  170. feng_zhuang_ku.prototype.huo_qu_name = function (tag, parentnode) {
  171. var node = null;
  172. var lin_shi = [];
  173. if (parentnode != undefined) {
  174. node = parentnode;
  175. } else {
  176. node = document;
  177. }
  178. var tags = node.getElementsByTagName(tag);
  179. for (var i = 0; i < tags.length; i++) {
  180. lin_shi.push(tags[i]);
  181. }
  182. return lin_shi;
  183. };
  184.  
  185. /** huo_qu_class()方法,获取相同class属性的节点,返回包含相同class属性的节点数组,返回给方法本身,无法连缀
  186. * 一个参数:获取整个页面指定的class属性节点,参数是class属性值
  187. * 两个参数:获取指定元素区下的class属性节点,参数1是class属性值,参数2是要获取class属性节点的父元素节点
  188. **/
  189. feng_zhuang_ku.prototype.huo_qu_class = function (name, parentnode) {
  190. var node = null;
  191. var lin_shi = [];
  192. if (parentnode != undefined) {
  193. node = parentnode;
  194. } else {
  195. node = document;
  196. }
  197. var all = node.getElementsByTagName('*');
  198. for (var i = 0; i < all.length; i++) {
  199. if ((new RegExp('(\\s|^)' + name + '(\\s|$)')).test(all[i].className)){
  200. lin_shi.push(all[i]);
  201. }
  202. }
  203. return lin_shi;
  204. };
  205.  
  206. /** hq_form_name()方法,获取表单里,指定name值的元素节点,也就是获取表单里指定名称的元素节点,在form元素对象下使用
  207. * 参数是要获取表单里的元素name值,也就是名称
  208. * 返回表单里有相同name值的节点集合
  209. **/
  210. feng_zhuang_ku.prototype.hq_form_name = function (name) {
  211. for (var i = 0; i < this.jie_dian.length; i++){
  212. this.jie_dian[i] = this.jie_dian[i][name];
  213. }
  214. return this;
  215. };
  216.  
  217. /** hq_value()方法,获取和设置表单里节点的value属性值
  218. * 无参为获取表单里节点的value属性值
  219. * 有参为设置表单里节点的value属性值,参数是要设置的value属性值
  220. **/
  221. feng_zhuang_ku.prototype.hq_value = function (str) {
  222. for (var i = 0; i < this.jie_dian.length; i++) {
  223. if (arguments.length == 0) {
  224. return this.jie_dian[i].value;
  225. }
  226. this.jie_dian[i].value = str;
  227. }
  228. return this;
  229. };
  230.  
  231. /** huo_qu_name_zhi()方法,通过元素name值获取指定元素,参数是元素name值,返回元素相同name值对象集合,
  232. * 循环元素集合,将每次循环到的元素对象添加到 jie_dian属性,适用于获取表单元素
  233. **/
  234. feng_zhuang_ku.prototype.huo_qu_name_zhi = function (name) {
  235. var name_zhi = document.getElementsByName(name);
  236. for (var i = 0; i < name_zhi.length; i++) {
  237. this.jie_dian.push(name_zhi[i]);
  238. }
  239. return this;
  240. };
  241.  
  242. /** shang_jd()方法,获取当前节点同级的上一个节点
  243. **/
  244. feng_zhuang_ku.prototype.shang_jd = function () {
  245. for (var i = 0; i < this.jie_dian.length; i ++) {
  246. this.jie_dian[i] = this.jie_dian[i].previousSibling;
  247. if (this.jie_dian[i] == null) throw new Error('找不到上一个同级元素节点!');
  248. if (this.jie_dian[i].nodeType == 3) this.shang_jd();
  249. }
  250. return this;
  251. };
  252.  
  253. /** xia_jd()方法,获取当前节点同级的下一个节点
  254. **/
  255. feng_zhuang_ku.prototype.xia_jd = function () {
  256. for (var i = 0; i < this.jie_dian.length; i ++) {
  257. this.jie_dian[i] = this.jie_dian[i].nextSibling;
  258. if (this.jie_dian[i] == null) throw new Error('找不到下一个同级元素节点!');
  259. if (this.jie_dian[i].nodeType == 3) this.xia_jd();
  260. }
  261. return this;
  262. };
  263.  
  264. /** hq_jd()方法,多个节点时,获取某一个节点,并返回这个节点对象,参数是节点索引
  265. **/
  266. feng_zhuang_ku.prototype.hq_jd = function (num) {
  267. return this.jie_dian[num];
  268. };
  269.  
  270. /** sh_jd()方法,多个节点时,获取首个节点,并返回这个节点对象,无参
  271. **/
  272. feng_zhuang_ku.prototype.sh_jd = function () {
  273. return this.jie_dian[0];
  274. };
  275.  
  276. /** w_jd()方法,多个节点时,获取末个节点,并返回这个节点对象,无参
  277. **/
  278. feng_zhuang_ku.prototype.w_jd = function () {
  279. return this.jie_dian[this.jie_dian.length - 1];
  280. };
  281.  
  282. /** guo_lv_jie_dian()方法,多个节点时,获取某一个节点,并且feng_zhuang_ku对象
  283. * 参数是要获取jie_dian属性里的对象索引
  284. **/
  285. feng_zhuang_ku.prototype.guo_lv_jie_dian = function (num) {
  286. var element = this.jie_dian[num];
  287. this.jie_dian = [];
  288. this.jie_dian[0] = element;
  289. return this;
  290. };
  291.  
  292. /** jd_length()方法,获取一个节点集合的长度
  293. **/
  294. feng_zhuang_ku.prototype.jd_length = function () {
  295. return this.jie_dian.length;
  296. };
  297.  
  298. /** hq_suo_yin()方法,获取一个节点在,父节点下,子节点集合里的索引,也就是在集合里的下标
  299. **/
  300. feng_zhuang_ku.prototype.hq_suo_yin = function () {
  301. var children = this.jie_dian[0].parentNode.children;
  302. for (var i = 0; i < children.length; i++){
  303. if (this.jie_dian[0] == children[i]) return i;
  304. }
  305. };
  306.  
  307. /** hq_shu_xing_zhi()方法,获取或设置一个节点的属性值
  308. * 1个参数,获取属性值,参数是属性名称
  309. * 2个参数,设置属性值,第1个属性名称,第2个属性值
  310. **/
  311. feng_zhuang_ku.prototype.hq_shu_xing_zhi = function (shu_xing, zhi) {
  312. for (var i = 0; i < this.jie_dian.length; i++) {
  313. if (arguments.length == 1) {
  314. return this.jie_dian[i].getAttribute(shu_xing);
  315. } else if (arguments.length == 2){
  316. this.jie_dian[i].setAttribute(shu_xing,zhi);
  317. }
  318. }
  319. return this;
  320. };
  321.  
  322. /** huo_qu_zi_jie_dian()方法,获取一个元素下的子元素
  323. * 注意首先要获取到父元素,在使用huo_qu_zi_jie_dian()方法
  324. * 参数是要获取的,子元素(id值、class值、标签名称)其中一样的字符串方式,
  325. * 传参方式 '#xxx'( 表示获取id),'.xxx'(表示获取class),'xxx'(表示获取标签)
  326. **/
  327. feng_zhuang_ku.prototype.huo_qu_zi_jie_dian = function (str) {
  328. var lin_shi = []; //临时数组
  329. for (var i = 0; i < this.jie_dian.length; i++) { //根据父元素的长度,循环出父元素
  330. switch (str.charAt(0)) { //判断字符串的第一个字符是什么
  331. case '#': //说明是id
  332. lin_shi.push(this.huo_qu_id(str.substring(1))); //获取到父元素下的子元素id等于str的标签,将它添加到临时数组
  333. break;
  334. case '.': //说明是class
  335. var tempss = this.huo_qu_class(str.substring(1), this.jie_dian[i]);
  336. for (var k = 0; k < tempss.length; k++) {
  337. lin_shi.push(tempss[k]);
  338. }
  339. break;
  340. default: //说明是标签名称
  341. var temps = this.huo_qu_name(str, this.jie_dian[i]);
  342. for (var j = 0; j < temps.length; j++) {
  343. lin_shi.push(temps[j]);
  344. }
  345. }
  346. }
  347. this.jie_dian = lin_shi; //将临时数组替换成节点数组
  348. return this;
  349. };
  350.  
  351. /** dom_dom()方法,加载dom页面文档结构后执行函数,不等待图片,音频视频等文件加载
  352. * 参数是页面文档加载后要执行的函数
  353. **/
  354. feng_zhuang_ku.prototype.dom_dom = function (fn) {
  355. dom_jia_zai(fn);
  356. return this;
  357. };
  358.  
  359. /**------------------------------------------------获取元素标签结束--------------------------------------------**/
  360.  
  361. /**------------------------------------------------元素节点操作开始--------------------------------------------**/
  362.  
  363. /** c_css()方法,给获取到的元素设置ss样式,或者获取css样式,
  364. * 两个参数:设置样式,参数1样式名称,参数2样式值,设置的行内样式
  365. * 一个参数:获取样式,参数是样式名称,无法连缀,获取即可用获取行内也可以获取连接
  366. **/
  367. feng_zhuang_ku.prototype.c_css = function (attr, value) {
  368. for (var i = 0; i < this.jie_dian.length; i++) {
  369. if (arguments.length == 1) {
  370. return getStyle(this.jie_dian[i], attr); //getStyle()函数库函数,跨浏览器获取元素Style,样式指定属性
  371. } else {
  372. this.jie_dian[i].style[attr] = value;
  373. }
  374. }
  375. return this;
  376. };
  377.  
  378. /** shzh_tou_ming_du()方法,给元素设置透明度
  379. * 参数是要设置的透明度值,为百分比值,如10%,就是10
  380. **/
  381. feng_zhuang_ku.prototype.shzh_tou_ming_du = function (zhi) {
  382. for (var i = 0; i < this.jie_dian.length; i++){
  383. this.jie_dian[i].style.opacity = zhi / 100;
  384. this.jie_dian[i].style.filter = 'alpha(opacity='+ zhi +')';
  385. }
  386. return this;
  387. };
  388.  
  389. /** wen_ben()方法,给获取到的元素设置文本,或者获取文本
  390. * 有参:设置文本,参数是要设置的文本字符串。
  391. * 无参:获取文本。无法连缀
  392. **/
  393. feng_zhuang_ku.prototype.wen_ben = function (str) {
  394. for (var i = 0; i < this.jie_dian.length; i++) {
  395. if (arguments.length == 0) {
  396. return this.jie_dian[i].innerHTML;
  397. }
  398. this.jie_dian[i].innerHTML = str;
  399. }
  400. return this;
  401. };
  402.  
  403. /** wen_ben_guo_lv()方法,给获取到的元素设置文本,或者获取文本,会过滤html标签
  404. * 有参:设置文本,参数是要设置的文本字符串。如果有html标签会自动转换成字符串形式在设置
  405. * 无参:获取文本。如果有html标签获取后会自动过滤html标签,无法连缀
  406. **/
  407. feng_zhuang_ku.prototype.wen_ben_guo_lv = function (str) {
  408. for (var i = 0; i < this.jie_dian.length; i++) {
  409. if (arguments.length == 0) {
  410. if(typeof this.jie_dian[i].innerText == 'string'){
  411. return this.jie_dian[i].innerText;
  412. }else if (typeof this.jie_dian[i].textContent == 'string'){
  413. return this.jie_dian[i].textContent;
  414. }
  415. }else if (typeof this.jie_dian[i].innerText == 'string'){
  416. this.jie_dian[i].innerText = str;
  417. }else if (typeof this.jie_dian[i].textContent == 'string'){
  418. this.jie_dian[i].textContent = str;
  419. }
  420. }
  421. return this;
  422. };
  423.  
  424. /** tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀
  425. **/
  426. feng_zhuang_ku.prototype.tian_jia_class = function (classname) {
  427. for (var i = 0; i < this.jie_dian.length; i++) {
  428. if (hasClass(this.jie_dian[i], classname)) { //hasClass()函数库函数,判断一个元素的class属性值是否存在
  429. this.jie_dian[i].className += ' ' + classname;
  430. }
  431. }
  432. return this;
  433. };
  434.  
  435. /** yi_chu_class()方法,给获取到的元素移除class属性,参数是要移除的class属性值,可以连缀
  436. **/
  437. feng_zhuang_ku.prototype.yi_chu_class = function (classname) {
  438. for (var i = 0; i < this.jie_dian.length; i++) {
  439. if (hasClass(this.jie_dian[i], classname)) {
  440. this.jie_dian[i].className = this.jie_dian[i].className.replace(new RegExp('(\\s|^)' + classname + '(\\s|$)'), ' ');
  441. }
  442. }
  443. return this;
  444. };
  445.  
  446. /** she_zhi_link_css()方法,设置link连接、或style内嵌、中的CSS样式
  447. * 在Web应用中,很少用到添加CSS规则和移除CSS规则,一般只用行内和Class;因为添加和删除原本的规则会破坏整个CSS的结构,所以使用需要非常小心。
  448. * 直接在库对象下使用 如:$().she_zhi_link_css()
  449. * 四个参数:
  450. * 参数1,样式表索引位置,就是要操作的样式表位置索引,第几个样式表【数值】
  451. * 参数2,要添加的选择器名称,【字符串】
  452. * 参数3,要添加的样式名称和值,如:background:#ff2a16 【字符串】
  453. * 参数4,将样式和选择器添加到样式表什么位置,【数值】
  454. **/
  455. feng_zhuang_ku.prototype.she_zhi_link_css = function (num, selectorText, cssText, position) {
  456. var sheet = document.styleSheets[num];
  457. if (typeof sheet.insertRule != 'undefined') {
  458. sheet.insertRule(selectorText + "{" + cssText + "}", position);
  459. } else if (typeof sheet.addRule != 'undefined') {
  460. sheet.addRule(selectorText, cssText, position);
  461. }
  462. return this;
  463. };
  464.  
  465. /** yi_chu_link_css()方法,移除link连接、或style内嵌、中的CSS样式
  466. * 在Web应用中,很少用到添加CSS规则和移除CSS规则,一般只用行内和Class;因为添加和删除原本的规则会破坏整个CSS的结构,所以使用需要非常小心。
  467. * 直接在库对象下使用
  468. * 两个参数:
  469. * 参数1,样式表索引位置,就是要操作的样式表位置索引,第几个样式表【数值】
  470. * 参数2,删除样式表里的第几个选择器【数值】
  471. **/
  472. feng_zhuang_ku.prototype.yi_chu_link_css = function (num, position) {
  473. var sheet = document.styleSheets[num];
  474. if (typeof sheet.deleteRule != 'undefined') {
  475. sheet.deleteRule(position);
  476. } else if (typeof sheet.removeRule) {
  477. sheet.removeRule(position);
  478. }
  479. return this;
  480. };
  481.  
  482. /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能
  483. * 注意:有参设置拖拽点区块,只有弹窗的这个拖拽点区块才能拖拽,无参整个弹窗可以拖拽
  484. * 注意:一般需要在css文件将弹窗元素里的某一个区块光标设置成提示可以拖拽,如:cursor: move; (设置拖拽点)
  485. * 有一个参数,参数是弹窗元素里的拖拽点区块的字符串class值(设置拖拽点的class值)设置后弹窗元素里的这个拖拽点区块才能拖拽
  486. **/
  487. feng_zhuang_ku.prototype.tuo_zhuai = function (tuo_zhuai_dian) {
  488. if (this.jie_dian.length == 1) {
  489. var yan_su = null;
  490. var sum = arguments.length;
  491. for (var i = 0; i < this.jie_dian.length; i++) {
  492. yan_su = this.jie_dian[i];
  493. }
  494. addEvent(yan_su, 'mousedown', function (e) {
  495. if (trim(yan_su.innerHTML).length == 0)e.preventDefault();
  496. var e1 = getEvent(e); //getEvent()函数库函数,跨浏览器获取事件对象,事件event对象,
  497. var diffx = e1.clientX - yan_su.offsetLeft;
  498. var diffy = e1.clientY - yan_su.offsetTop;
  499. if (sum == 1) {
  500. if (e.target.className === tuo_zhuai_dian) {
  501. addEvent(document, 'mousemove', move);
  502. addEvent(document, 'mouseup', up);
  503. }
  504. } else if (sum == 0) {
  505. addEvent(document, 'mousemove', move);
  506. addEvent(document, 'mouseup', up);
  507. }
  508. function move(e) {
  509. var e2 = getEvent(e);
  510. var left = e2.clientX - diffx;
  511. var top = e2.clientY - diffy;
  512. if (left < 0) {
  513. left = 0;
  514. }else if(left <= gun_dong_tiao_wei_zhi().left){
  515. left = gun_dong_tiao_wei_zhi().left;
  516. }else if (left > getInner().width + gun_dong_tiao_wei_zhi().left - yan_su.offsetWidth) {
  517. left = getInner().width + gun_dong_tiao_wei_zhi().left - yan_su.offsetWidth;
  518. }
  519. if (top < 0) {
  520. top = 0;
  521. }else if(top <= gun_dong_tiao_wei_zhi().top){
  522. top = gun_dong_tiao_wei_zhi().top;
  523. }else if (top > getInner().height + gun_dong_tiao_wei_zhi().top - yan_su.offsetHeight) {
  524. top = getInner().height + gun_dong_tiao_wei_zhi().top - yan_su.offsetHeight;
  525. }
  526. yan_su.style.left = left + 'px';
  527. yan_su.style.top = top + 'px';
  528. if (typeof yan_su.setCapture != 'undefined') {
  529. yan_su.setCapture();
  530. }
  531. }
  532.  
  533. function up() {
  534. removeEvent(document, 'mousemove', move);
  535. removeEvent(document, 'mouseup', up);
  536. if (typeof yan_su.releaseCapture != 'undefined') {
  537. yan_su.releaseCapture();
  538. }
  539. }
  540. });
  541. } else {
  542. alert("将一个弹窗元素实现拖拽功能,只能设置一个弹窗元素,目前jie_dian数组里是多个元素请检查!")
  543. }
  544. return this;
  545. };
  546. /**------------------------------------------------元素节点操作结束--------------------------------------------**/
  547.  
  548. /**------------------------------------------------元素事件开始--------------------------------------------**/
  549.  
  550. /** shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码)
  551. *参数1是移入时的执行函数(包含代码)
  552. *参数2是移出时的执行函数(包含代码)
  553. **/
  554. feng_zhuang_ku.prototype.shu_biao_yi_ru_yi_chu = function (yi_ru, yi_chu) {
  555. for (var i = 0; i < this.jie_dian.length; i++) {
  556. addEvent(this.jie_dian[i], 'mouseover', yi_ru);
  557. addEvent(this.jie_dian[i], 'mouseout', yi_chu);
  558. }
  559. return this;
  560. };
  561.  
  562. /** xian_shi()方法,设置元素显示,无参
  563. **/
  564. feng_zhuang_ku.prototype.xian_shi = function () {
  565. for (var i = 0; i < this.jie_dian.length; i++) {
  566. this.jie_dian[i].style.display = 'block';
  567. }
  568. return this;
  569. };
  570.  
  571. /** yin_cang()方法,设置元素隐藏,无参
  572. **/
  573. feng_zhuang_ku.prototype.yin_cang = function () {
  574. for (var i = 0; i < this.jie_dian.length; i++) {
  575. this.jie_dian[i].style.display = 'none';
  576. }
  577. return this;
  578. };
  579.  
  580. /** yuan_su_shi_jian()方,给元素添加一个元素事件
  581. * 两个参数,参数1事件名称不加on,参数2事件函数
  582. **/
  583. feng_zhuang_ku.prototype.yuan_su_shi_jian = function (ming_cheng,fn) {
  584. for (var i = 0; i < this.jie_dian.length; i++) {
  585. addEvent(this.jie_dian[i],ming_cheng, fn);
  586. }
  587. return this;
  588. };
  589.  
  590. /** on_click()方法,给获取到的元素添加一个点击事件,参数是一个匿名函数(包含函数功能),
  591. * 循环jie_dian属性里的节点,将每次循环的节点添加元素点击事件
  592. **/
  593. feng_zhuang_ku.prototype.on_click = function (fu) {
  594. for (var i = 0; i < this.jie_dian.length; i++) {
  595. addEvent(this.jie_dian[i], 'click', fu);
  596. }
  597. return this;
  598. };
  599.  
  600. /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环执行方法里的函数
  601. * 参数是点击后要执行的函数,可以是多个函数,点击一次循环执行一个函数,从第一个开始,循环完毕后再次循环从第一个开始
  602. **/
  603. feng_zhuang_ku.prototype.dian_ji_qie_huan = function () {
  604. for (var i = 0; i < this.jie_dian.length; i++) {
  605. (function (jiedian, args) {
  606. var count = 0; //计数器
  607. addEvent(jiedian, 'click', function () { //给对象添加点击事件
  608. args[count++ % args.length].call(this); //点击后计数器数值求于作为下标执行传入的函数,计数器在累加,将对象传入
  609. });
  610. })(this.jie_dian[i], arguments); //通过arguments接收传入方法的函数
  611. }
  612. return this;
  613. };
  614.  
  615. /** yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,
  616. * 注意:使用此方法时,首先要在css里将目标区块设置成(绝对定位,position: absolute;)
  617. **/
  618. feng_zhuang_ku.prototype.yuan_su_ju_zhong = function () {
  619. if (this.jie_dian.length == 1) {
  620. var yan_su = null;
  621. for (var i = 0; i < this.jie_dian.length; i++) {
  622. yan_su = this.jie_dian[i];
  623. }
  624. var y_style = getStyle(yan_su, 'display'); //getStyle()函数库函数,跨浏览器获取元素Style,样式指定属性
  625. if (y_style === "none") {
  626. yan_su.style.display = "block";
  627. }
  628. var width = yan_su.offsetWidth;
  629. var height = yan_su.offsetHeight;
  630. if (y_style === "none") {
  631. yan_su.style.display = "none";
  632. }
  633. var chang_w = getInner().width;
  634. var chang_h = getInner().height;
  635. var top = (chang_h - height) / 2 + gun_dong_tiao_wei_zhi().top;
  636. var left = (chang_w - width) / 2 + gun_dong_tiao_wei_zhi().left;
  637. for (var ii = 0; ii < this.jie_dian.length; ii++) {
  638. this.jie_dian[ii].style.top = top + 'px';
  639. this.jie_dian[ii].style.left = left + 'px';
  640. }
  641. } else {
  642. alert("区块元素页面居中,只能设置一个区块元素,目前jie_dian数组里是多个元素请检查!")
  643. }
  644. return this;
  645. };
  646.  
  647. /** chuang_kou_shi_jian()方法,浏览器窗口事件,当窗口的大小变化时触发函数
  648. * 接收一个参数,就是触发时要执行的函数(包含函数功能)
  649. **/
  650. feng_zhuang_ku.prototype.chuang_kou_shi_jian = function (fn) {
  651. for (var i = 0; i < this.jie_dian.length; i++) {
  652. var yan_su = this.jie_dian[i];
  653. }
  654. addEvent(window, 'resize', function () {
  655. fn();
  656. if (yan_su.offsetLeft > getInner().width + gun_dong_tiao_wei_zhi().left - yan_su.offsetWidth) {
  657. yan_su.style.left = getInner().width + gun_dong_tiao_wei_zhi().left - yan_su.offsetWidth + 'px';
  658. if (yan_su.offsetLeft <= 0 + gun_dong_tiao_wei_zhi().width){
  659. yan_su.style.left = 0 + gun_dong_tiao_wei_zhi().left + 'px';
  660. }
  661. }
  662. if (yan_su.offsetTop > getInner().height + gun_dong_tiao_wei_zhi().top - yan_su.offsetHeight) {
  663. yan_su.style.top = getInner().height + gun_dong_tiao_wei_zhi().top - yan_su.offsetHeight + 'px';
  664. if (yan_su.offsetTop <= 0 + gun_dong_tiao_wei_zhi().top){
  665. yan_su.style.top = 0 + gun_dong_tiao_wei_zhi().top + 'px';
  666. }
  667. }
  668. });
  669. return this;
  670. };
  671.  
  672. /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块
  673. * 注意:一般需要在css文件将元素设置成隐藏
  674. **/
  675. feng_zhuang_ku.prototype.zhe_zhao_suo_ping = function () {
  676. if (this.jie_dian.length == 1) {
  677. var yan_su = null;
  678. for (var i = 0; i < this.jie_dian.length; i++) {
  679. yan_su = this.jie_dian[i];
  680. }
  681. fixedScroll.top = gun_dong_tiao_wei_zhi().top;
  682. fixedScroll.left = gun_dong_tiao_wei_zhi().left;
  683. var chang_w = getInner().width; //getInner()函数库函数,跨浏览器获取浏览器视窗大小
  684. var chang_h = getInner().height;
  685. yan_su.style.width = chang_w + gun_dong_tiao_wei_zhi().left + 'px';
  686. yan_su.style.height = chang_h + gun_dong_tiao_wei_zhi().top + 'px';
  687. yan_su.style.position = 'absolute';
  688. yan_su.style.top = '0';
  689. yan_su.style.left = '0';
  690. var y_style = getStyle(yan_su, 'display'); //getStyle()函数库函数,跨浏览器获取元素Style,样式指定属性
  691. if (y_style === "block") {
  692. addEvent(window, 'scroll', fixedScroll); //定位滚动条
  693. gdt_cao_zuo('y'); //隐藏滚动条
  694. }
  695. } else {
  696. alert("遮罩锁屏区块,只能设置一个区块元素,目前jie_dian数组里是多个元素请检查!")
  697. }
  698. return this;
  699. };
  700.  
  701. /** jie_chu_suo_ping()方法,将一个锁屏区块元素解除锁屏
  702. * 注意:一般需要在css文件将元素设置成隐藏
  703. **/
  704. feng_zhuang_ku.prototype.jie_chu_suo_ping = function () {
  705. for (var i = 0; i < this.jie_dian.length; i++) {
  706. this.jie_dian[i].style.display = 'none';
  707. }
  708. removeEvent(window, 'scroll', fixedScroll); //删除定位滚动条
  709. gdt_cao_zuo('x'); //显示滚动条
  710. return this;
  711. };
  712.  
  713. /**------------------------------------------------元素事件结束--------------------------------------------**/
  714.  
  715. /**------------------------------------------------元素动画开始--------------------------------------------**/
  716. /**
  717. * 元素动画说明
  718. * yi_dong_tou_ming()方法,将一个元素,
  719. * 1,x将元素横向左移动或者右移动
  720. * 2, y将元素竖向上移动或者下移动
  721. * 3,w将元素动画增加或者减少宽度
  722. * 4,h将元素动画增加或者减少高度
  723. * 5,o将元素动画增加或者减少透明度
  724. * 注意:也可以写其他css属性名称(全称),来动画增加或者减少css属性的数值,必须是值为数值的css属性,如:font-size
  725. * *******************************************
  726. *
  727. **/
  728.  
  729. /** yi_dong_tou_ming()方法,动态改变css属性说明
  730. * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作
  731. * 1,x将元素横向左移动或者右移动
  732. * 2, y将元素竖向上移动或者下移动
  733. * 3,w将元素动画增加或者减少宽度
  734. * 4,h将元素动画增加或者减少高度
  735. * 5,o将元素动画增加或者减少透明度
  736. * 注意:也可以写其他css属性名称(全称),来动画增加或者减少css属性的数值,必须是值为数值的css属性,如:font-size
  737. * *************************************
  738. * x将元素横向左移动或者右移动,首先将目标设置定位,position:absolute;
  739. * o将元素动画增加或者减少透明度,结合css里元素原始透明度filter: alpha(opacity=0);opacity: 0;
  740. * *************************************
  741. * yi_dong_tou_ming()方法,参数说明
  742. * 参数是一个对象如下
  743. * yi_dong_tou_ming({
  744. 'attr':'x', 【为动画方式】, x.为横向移动,y.为竖向移动,w.为增加宽度动画,h.为增加高度动画,o.为透明度动画,【必填】
  745. 注意:也可以写其他css属性名称(全称),来动画增加或者减少css属性的数值,必须是值为数值的css属性,如:font-size
  746. o.为透明度动画,设置透明度动画时,必须先在css里设置初始透明度如:opacity:1;filter:alpha(opacity=100);
  747. 否则IE9以下无法实现透明度动画
  748.  
  749. 'type':'1', 【动画模式】, 0.匀速模式,1.缓冲模式【可选,默认缓冲】
  750. 'speed':6, 【缓冲速度】, 动画模式为缓冲时设置,【可选,默认为6】,以此值改变跨度.每一次动画动态增加或者减少,实现缓冲效果
  751.  
  752. 'start':50, 【动画起始位置】, 起始的像素或者透明度【可选,默认为对象原始位置】一般不需要传
  753. 注意:动画起始位置,一般按钮动画使用,如果是鼠标触动动画,会不停的初始化,因为鼠标一动就改变了动画起始位置
  754.  
  755. 'target':100, 【目标量】, 就是在原始的像素或者透明度上,增加或者减少到目标量的像素或者透明度【可先,注意目标量不填,增量必填】
  756. 'alter':50, 【增量】, 就是在对象原始的像素或者透明度上,增加或者减少像素或者透明度【可先,注意增量不填,目标量必填】
  757. 'step':7, 【跨度】, 每一次动画增加或者减少的,像素或者透明度,【可选,默认20】
  758. 'danwei':'em', 【属性值单位】 danwei.为属性值单位,也就是以什么单位来计算css属性,如是px还是em等,不传默认px
  759. 't':50 , 【每次动画时间】, 也就是多少毫秒执行一次动画【可选,默认10】
  760. fn:function () { 【回调函数,列队】, 回调函数,用于动画执行完毕后执行函数,在回调函数里在写入动画,就是列队动画,也就是一个动画执行完毕后执行第二个动画
  761.  
  762. }
  763. mul:{ 【同步动画对象】,用于同时要执行多个动画,同步动画属性,属性值为对象,对象里面是,动画方式:目标量,组合的键值对,只能动画方式加目标量的键值对
  764. 同步动画,除了动画方式和目标量外,其他的都是在同步动画对象外设置,因为他们是统一的其他参数
  765. 'w':101,
  766. 'h':500,
  767. 'o':30
  768. }
  769. });
  770. **/
  771. feng_zhuang_ku.prototype.yi_dong_tou_ming = function (obj) {
  772. for (var i = 0; i < this.jie_dian.length; i++) {
  773. var element = this.jie_dian[i];
  774. // attr,为动画方式,
  775. // x.为横向移动
  776. // y.为竖向移动
  777. // w.为增加宽度动画
  778. // h.为增加高度动画
  779. // o.为透明度动画
  780. var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
  781. obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' :
  782. obj['attr'] == 'o' ? 'opacity' : obj['attr'] != undefined ? obj['attr'] : 'left';
  783.  
  784. // start.为动画起始位置,
  785. // 如果输入了动画起始位置,值就为输入的起始位置,移动动画是像素值(如100),透明度动画是透明度百分比(如50)
  786. // 如果没输入,默认移动动画获取的对象原始像素位置,透明度动画获取的对象原始透明度,除以100等于原始透明度百分比
  787. var start = obj['start'] != undefined ? obj['start'] :
  788. attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 :
  789. parseInt(getStyle(element, attr));
  790.  
  791. // t.为每次动画时间,也就是多少毫秒执行一次动画
  792. // 不传默认,是10毫秒执行一次动画
  793. var t = obj['t'] != undefined ? obj['t'] : 10;
  794.  
  795. // step.为跨度,每一次动画增加或者减少的,像素或者透明度
  796. var step = obj['step'] != undefined ? obj['step'] : 20;
  797.  
  798. // danwei.为属性值单位,也就是以什么单位来计算css属性,如是px还是em等,不传默认px
  799. var danwei = obj['danwei'] != undefined ? obj['danwei'] : 'px';
  800.  
  801. // alter.为增量,就是在对象原始的像素或者透明度上,增加或者减少像素或者透明度
  802. var alter = obj['alter'];
  803.  
  804. // target.为目标量,就是在原始的像素或者透明度上,增加或者减少到目标量的像素或者透明度
  805. // 注意,增量,是在原始上增加或者减少多少,目标量是在原始的基础上增加或者减少到目标
  806. var target = obj['target'];
  807.  
  808. //mul,接收的,obj对象里的mul属性,而mul属性是一个对象,由动画方式加目标量组合的键值对,也就是要同步动画的参数
  809. var mul = obj['mul']; //接收同步动画(参数对象)
  810.  
  811. // speed.为缓冲速度,动画模式为缓冲时,以此值改变step.每一次动画动态增加或者减少,实现缓冲效果
  812. // 不传,默认为6
  813. var speed = obj['speed'] != undefined ? obj['speed'] : 6;
  814.  
  815. // type.为动画模式,匀速为匀速模式,缓冲为缓冲模式
  816. // 不传,默认为缓冲模式
  817. var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';
  818.  
  819. if (alter != undefined && target == undefined) {
  820. target = alter + start;
  821. } else if (alter == undefined && target == undefined && mul == undefined) {
  822. throw new Error('alter增量,或target目标量,或者同步动画对象,必须传一个!');
  823. }
  824. if (start > target) step = -step;
  825.  
  826. if (!isNaN(start)) {
  827. if (attr == 'opacity') {
  828. element.style.opacity = parseInt(start) / 100;
  829. element.style.filter = 'alpha(opacity=' + parseInt(start) + ')';
  830. } else {
  831. element.style[attr] = start + danwei;
  832. }
  833. }
  834.  
  835. if (mul == undefined){ //判断如果同步动画对象没有传,说明是单个动画
  836. mul = {}; //创建mul对象
  837. mul[attr] = target; //将单个动画的,动画方式当作对象键,将目标量当作值,组合成键值对到对象里
  838. }
  839.  
  840. clearInterval(element.timer); //给对每个象创建定时器并停止定时器
  841. element.timer = setInterval(function () { //将对象下的定时器开启
  842. //创建一个布尔值,这个值可以了解对个动画是否执行完毕
  843. var flag = true; //表示都执行完毕了
  844.  
  845. //循环同步动画对象
  846. for (var i in mul) {
  847. attr = i == 'x' ? 'left' : i == 'y' ? 'top' :
  848. i == 'w' ? 'width' : i == 'h' ? 'height' :
  849. i == 'o' ? 'opacity' : i != undefined ? i : 'left'; //得到同步动画对象里的,动画方式
  850. target = mul[i]; //得到同步动画对象里的,目标量
  851.  
  852. if (type == 'buffer') {
  853. step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
  854. (target - parseInt(getStyle(element, attr))) / speed;
  855. step = step > 0 ? Math.ceil(step) : Math.floor(step);
  856. }
  857. if (attr == 'opacity') {
  858. if (step == 0) {
  859. setOpacity();
  860. } else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) {
  861. setOpacity();
  862. } else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) {
  863. setOpacity();
  864. } else {
  865. var temp = parseFloat(getStyle(element, attr)) * 100;
  866. element.style.opacity = parseInt(temp + step) / 100;
  867. element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')';
  868. }
  869. //判断目标值不等于元素当前值,说明动画还没到达目标值,将flag修改成false
  870. if (parseInt(target) != parseInt(parseFloat(getStyle(element, attr)) * 100)) flag = false;
  871. } else {
  872. if (step == 0) {
  873. setTarget();
  874. } else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) {
  875. setTarget();
  876. } else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) {
  877. setTarget();
  878. } else {
  879. element.style[attr] = parseInt(getStyle(element, attr)) + step + danwei;
  880. }
  881. //判断目标值不等于元素当前值,说明动画还没到达目标值,将flag修改成false
  882. if (parseInt(target) != parseInt(getStyle(element, attr))) flag = false;
  883. }
  884. }
  885. //判断flag = true;了说明元素的当前值已经达到目标值,可以停止定时器了
  886. if (flag) {
  887. clearInterval(element.timer); //停止定时器
  888. if (obj.fn != undefined)obj.fn(); //判断如果传入了回调函数,动画执行完毕后执行回调函数,列队动画
  889. }
  890. }, t);
  891. function setTarget() {
  892. element.style[attr] = target + danwei;
  893. }
  894. function setOpacity() {
  895. element.style.opacity = parseInt(target) / 100;
  896. element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
  897. }
  898. }
  899. return this;
  900. };
  901. /**------------------------------------------------元素动画结束--------------------------------------------**/
  902.  
  903. /**------------------------------------------------插件入口开始--------------------------------------------**/
  904. /** 插件入口,简单的理解就是通过extend()方法,向此基础库添加一个原型方法
  905. * 此extend()方法,一般是给插件文件使用的,插件就是通过extend()方法,将插件方法添加到基础库原型的
  906. * 接收两个参数
  907. * 参数1是传入要添加的方法名称
  908. * 参数2是此方法的执行函数(包含代码)
  909. * 使用方法:$().ext_end(方法名称,方法匿名函数)
  910. *
  911. **/
  912. feng_zhuang_ku.prototype.ext_end = function (name, fn) {
  913. feng_zhuang_ku.prototype[name] = fn;
  914. };
  915. /**------------------------------------------------插件入口结束--------------------------------------------**/
  916.  
  917. /**------------------------------------------------ajax通讯开始--------------------------------------------**/
  918.  
  919. /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据
  920. * 参数是一个对象{},如下
  921. * $().ajax({
  922. method:'post', 【method】属性,通讯模式,post为post模式,get为get模式
  923. url:'hj.php', 【url】属性,发送数据或请求数据的url地址
  924. data:{ 【data】属性,是发送内容,是一个对象,里面是键值对形式的发送数据对象
  925. 'name':'lee',
  926. 'age':100
  927. },
  928. success:function (text) { 【success】属性,是一个回调函数,函数参数是text,会接收到发送或者获取到的数据
  929. alert(text);
  930. },
  931. async:true 【async】属性,请求方式,true异步方式,false同步方式
  932. });
  933. **/
  934. feng_zhuang_ku.prototype.Ajax = function (obj) {
  935. //注意:引入了开源库json2,如果浏览器版本太低不支持JSON对象,通过一个开源库json2来模拟执行,如果支持JSON对象就用JSON对象
  936. //开源库json2写在函数库里
  937. //创建XHR对象
  938. var xhr = (function () {
  939. if (typeof XMLHttpRequest != 'undefined') { //判断是否可以直接创建XHR对象,w3c
  940. return new XMLHttpRequest(); //如果可以就直接创建XHR对象
  941. } else if (typeof ActiveXObject != 'undefined') { //判断IE低版本的3种模式是否支持
  942. var version = [
  943. 'MSXML2.XMLHttp.6.0',
  944. 'MSXML2.XMLHttp.3.0',
  945. 'MSXML2.XMLHttp'
  946. ];
  947. for (var i = 0; version.length; i++) {
  948. try {
  949. return new ActiveXObject(version[i]);
  950. } catch (e) {
  951. //跳过
  952. }
  953. }
  954. } else {
  955. throw new Error('您的系统或浏览器不支持XHR对象!'); //如果都不支持报错
  956. }
  957. })(); //自我执行闭包里的函数,创建XHR对象
  958.  
  959. //接收对象url地址
  960. obj.url = obj.url + '?rand=' + Math.random(); //组合对象传进来的通讯url地址
  961.  
  962. //接收对象传来的内容,进行名值对编码
  963. obj.data = (function (data) {
  964. var arr = [];
  965. for (var i in data) {
  966. arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
  967. }
  968. return arr.join('&'); //将数组格式化分隔符后返回
  969. })(obj.data); //自我执行闭包里的函数
  970.  
  971. //判断请求方式来
  972. if (obj.method === 'get') obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
  973.  
  974. //判断发送模式如果是异步
  975. if (obj.async === true) {
  976. //添加一个加载事件
  977. xhr.onreadystatechange = function () {
  978. //判断已经接受到全部响应数据,而且可以使用
  979. if (xhr.readyState == 4) {
  980. callback();
  981. }
  982. };
  983. }
  984. xhr.open(obj.method, obj.url, obj.async);
  985. if (obj.method === 'post') {
  986. xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  987. xhr.send(obj.data);
  988. } else {
  989. xhr.send(null);
  990. }
  991. if (obj.async === false) {
  992. callback();
  993. }
  994. function callback() {
  995. if (xhr.status == 200) {
  996. obj.success(xhr.responseText); //回调传递参数
  997. } else {
  998. alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
  999. }
  1000. }
  1001. return this;
  1002. };
  1003. /**------------------------------------------------ajax通讯结束--------------------------------------------**/
  1004.  
  1005. /**------------------------------------------------表单序列化开始--------------------------------------------**/
  1006.  
  1007. /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和value值,无法连缀
  1008. * 参数是要获取指定表单的原生态对象
  1009. * 返回,包含表单数据的对象,如,{表单数据}
  1010. **/
  1011. feng_zhuang_ku.prototype.xu_lie_biao_dan = function (form) {
  1012. var parts = {};
  1013. for (var i = 0; i < form.elements.length; i++) { //根据表单字段长度循环
  1014. var filed = form.elements[i]; //得到没一项表单的字段
  1015. switch (filed.type) { //判断得到字段的属性
  1016. case undefined:
  1017. case 'submit':
  1018. case 'reset':
  1019. case 'file':
  1020. case 'button':
  1021. break; //如果是以上几种的一种直接跳出
  1022. case 'radio':
  1023. case 'checkbox':
  1024. if (!filed.selected) break; //如果是以上两种,判断是否被勾选,没勾选直接跳出
  1025. case 'select-one':
  1026. case 'select-multiple':
  1027. for (var j = 0; j < filed.options.length; j++) { //下拉选项
  1028. var option = filed.options[j];
  1029. if (option.selected) {
  1030. var optvalue = '';
  1031. if (option.hasAttribute) { //非ie
  1032. optvalue = (option.hasAttribute('value') ? option.value : option.text); //value值存在取value值,value值不存在取text值
  1033. } else { //ie
  1034. optvalue = (option.attributes('value').specified ? option.value : option.text); //value值存在取value值,value值不存在取text值
  1035. }
  1036. parts[filed.name] = optvalue; //如果不是以上情况,将表单字段的name值加上value值,添加到对象
  1037. }
  1038.  
  1039. }
  1040. break;
  1041. default:
  1042. parts[filed.name] = filed.value; //如果不是以上情况,将表单字段的name值加上value值,添加到对象
  1043. }
  1044. }
  1045. return parts;
  1046. };
  1047.  
  1048. /**------------------------------------------------表单序列化结束--------------------------------------------**/
  1049.  
  1050. /**█████████████████████████████████████████████████函数库██████████████████████████████████████████████████████**/
  1051.  
  1052. /** 函数库说明:
  1053. * sys浏览器检测对象,对象下有8个属性
  1054. * dom_jia_zai()函数,DOM页面加载函数,等待页面结构加载完毕后就执行函数,不需要等待页面音频视频等文件加载完毕,提高加载速度
  1055. * addEvent()函数库函数,跨浏览器添加事件绑定,注意:传入事件名称时不要on
  1056. * removeEvent()函数库函数,跨浏览器删除事件绑定,注意:传入事件名称时不要on
  1057. * getInner()函数库函数,跨浏览器获取浏览器视窗大小
  1058. * gun_dong_tiao_wei_zhi()函数库函数,获取滚动条头部与浏览器头部的位置,获取底部滚动条与浏览器左边的位置
  1059. * ju_li_liu_lan_qi_tou()函数库函数,跨浏览器获取当前元素的头部与浏览器头部的位置是多少
  1060. * getStyle()函数库函数,跨浏览器获取元素Style,样式指定属性
  1061. * hasClass()函数库函数,判断一个元素的class属性值是否存在
  1062. * yuan_su_da_xiao()函数库函数,获取指定元素的绝对大小(包含边框)
  1063. * getEvent()函数库函数,跨浏览器获取事件对象,事件event对象,
  1064. * preDef()函数库函数,阻止事件默认行为,
  1065. * trim()函数库函数,删除字符串的前后空格
  1066. * scrollTop()函数库函数,滚动条清零,使滚动条无法下拉
  1067. * gdt_cao_zuo()函数库函数,显示和隐藏浏览器滚动条
  1068. * fixedScroll()函数库函数,定位滚动条
  1069. * pd_shuzu()函数库函数,判断一个类容是否存在一个数组中,返回布尔值
  1070. * sh_jd_suo_yin()函数库函数,获取当前节点的上一个节点,在父元素的索引
  1071. * xia_jd_suo_yin()函数库函数,获取当前节点的下一个节点,在父元素的索引
  1072. **/
  1073. /**-----------------------------------------------------------------------------------------------------------------**/
  1074.  
  1075. /** sys浏览器检测对象,对象下有8个属性
  1076. * liu_lan_qi属性,检测浏览器名称和版本号,如:alert(sys.liu_lan_qi);
  1077. * xi_tong属性,检测浏览器运行环境,如:alert(sys.xi_tong);
  1078. * ie属性,检测IE浏览器的版本号,返回IE浏览器的版本号
  1079. * firefox属性,检测firefox浏览器的版本号,返回firefox浏览器的版本号
  1080. * chrome属性,检测chrome浏览器的版本号,返回chrome浏览器的版本号
  1081. * opera属性,检测opera浏览器的版本号,返回opera浏览器的版本号
  1082. * safari属性,检测safari浏览器的版本号,返回safari浏览器的版本号
  1083. * webkit属性,检测webkit浏览器的版本号,返回webkit浏览器的版本号
  1084. **/
  1085. (function () { //闭包,自我执行
  1086. window.sys = {}; //全局变量对象,保存浏览器信息
  1087. var ua = navigator.userAgent.toLowerCase(); //获取浏览器信息,并转化成小写
  1088. var s = []; //浏览器信息数组
  1089. /**判断IE浏览器**/
  1090. if ((/msie ([\d.]+)/).test(ua)) { //IE10以下判断字段为:msie x版本号
  1091. s = ua.match(/msie ([\d.]+)/); //如果有获取到msie x版本号返回数组
  1092. sys.liu_lan_qi = '浏览器为IE:' + s[1]; //向sys对象添加liu_lan_qi属性,属性值等于获取到的数组第二个元素
  1093. sys.ie = s[1];
  1094. } else if ((/trident/).test(ua)) { //ie10以上判断字段为:trident
  1095. s = ua.match(/rv:([\d.]+)/); //如果有获取到trident字段返回数组
  1096. sys.liu_lan_qi = '浏览器为IE:' + s[1];
  1097. sys.ie = s[1];
  1098. }
  1099. /**判断火狐浏览器**/
  1100. if ((/firefox\/([\d.]+)/).test(ua)) { //火狐判断字段为:firefox
  1101. s = ua.match(/firefox\/([\d.]+)/);
  1102. sys.liu_lan_qi = '浏览器为firefox:' + s[1];
  1103. sys.firefox = s[1];
  1104. }
  1105. /**判断谷歌浏览器**/
  1106. if ((/chrome\/([\d.]+)/).test(ua)) { //谷歌判断字段为:chrome
  1107. s = ua.match(/chrome\/([\d.]+)/);
  1108. sys.liu_lan_qi = '浏览器为chrome:' + s[1];
  1109. sys.chrome = s[1];
  1110. }
  1111. /**判断Opera浏览器**/
  1112. if ((/opera\/.*version\/([\d.]+)/).test(ua)) { //谷歌判断字段为:opera 与 version
  1113. s = ua.match(/opera\/.*version\/([\d.]+)/);
  1114. sys.liu_lan_qi = '浏览器为Opera:' + s[1];
  1115. sys.opera = s[1];
  1116. }
  1117. /**判断safari浏览器**/
  1118. if ((/version\/([\d.]+).*safari/).test(ua)) { //谷歌判断字段为:version 与 safari
  1119. s = ua.match(/version\/([\d.]+).*safari/);
  1120. sys.liu_lan_qi = '浏览器为Opera:' + s[1];
  1121. sys.safari = s[1];
  1122. }
  1123. /**判断webkit浏览器**/
  1124. if ((/webkit/).test(ua)) { //webkit判断字段为:webkit
  1125. s = ua.match(/webkit\/([\d.]+)/);
  1126. sys.liu_lan_qi = '浏览器为webkit:' + s[1];
  1127. sys.webkit = s[1];
  1128. }
  1129. /**判断系统**/
  1130. if (Boolean(navigator.platform)) {
  1131. sys.xi_tong = '环境系统为:' + navigator.platform;
  1132. } else {
  1133. alert("无法检测到环境系统")
  1134. }
  1135. })();
  1136.  
  1137. /** dom_jia_zai()函数,DOM页面加载函数,等待页面结构加载完毕后就执行函数,不需要等待页面音频视频等文件加载完毕,提高加载速度
  1138. * 参数是页面结构加载完毕后要执行的函数
  1139. * 一般前写前台js文件时,使用此方法加载DOM页面后执行代码,提高速度
  1140. **/
  1141. function dom_jia_zai(fn) {
  1142. var isReady = false;
  1143. var timer = null;
  1144.  
  1145. function doReady() {
  1146. if (timer) clearInterval(timer);
  1147. if (isReady) return;
  1148. isReady = true;
  1149. fn();
  1150. }
  1151.  
  1152. if ((sys.opera && sys.opera < 9) || (sys.firefox && sys.firefox < 3) || (sys.webkit && sys.webkit < 525)) {
  1153. timer = setInterval(function () {
  1154. if (document && document.getElementById && document.getElementsByTagName && document.body) {
  1155. doReady();
  1156. }
  1157. }, 1);
  1158. } else if (document.addEventListener) {//W3C
  1159. addEvent(document, 'DOMContentLoaded', function () {
  1160. fn();
  1161. removeEvent(document, 'DOMContentLoaded', arguments.callee);
  1162. });
  1163. } else if (sys.ie && sys.ie < 9) {
  1164. var timer = null;
  1165. timer = setInterval(function () {
  1166. try {
  1167. document.documentElement.doScroll('left');
  1168. doReady();
  1169. } catch (e) {
  1170. }
  1171. }, 1);
  1172. }
  1173. }
  1174.  
  1175. /** addEvent()函数库函数,跨浏览器添加事件绑定,注意:传入事件名称时不要on
  1176. * 接收3个参数
  1177. * 参数1要绑定事件的元素对象,
  1178. * 参数2事件名称,也就是什么事件,注意:传入事件名称时不要on
  1179. * 参数3接收的事件执行函数
  1180. * 注意:一个元素对象,执行了多个相同的事件函数时只执行一次,其他的会被忽略,注意是相同的事件函数
  1181. * 说明:
  1182. * 事件函数里的this,代表绑定事件元素对象本身
  1183. * 事件函数里有一个可选参数e,e接收的元素event对象,传入addEvent()后跨浏览器获取到元素event对象,将元素event对象赋值给e
  1184. * 所以事件函数里的e,代表元素event对象,前提是首先要在事件函数传参e后,再在事件函数里调用e,得到元素event对象
  1185. * e.preventDefault()方法,在事件函数里写e.preventDefault()方法,兼容浏览器阻止事件元素对象默认行为,前提在事件函数要传参e
  1186. * e.stopPropagation()方法,在事件函数里写e.stopPropagation()方法,阻止元素对象的父级元素事件冒泡行为,前提在事件函数要传参e
  1187. * e.target属性,在事件函数里写e.target属性,获取到事件对象元素的标签节点(包含一个事件对象里的子节点)
  1188. **/
  1189. function addEvent(obj, type, fn) {
  1190. if (typeof obj.addEventListener != 'undefined') {
  1191. obj.addEventListener(type, fn, false);
  1192. } else {
  1193. if (!obj.events) obj.events = {}; //创建一个存放事件的哈希表(散列表)
  1194. if (!obj.events[type]) { //第一次执行时执行
  1195. obj.events[type] = []; //创建一个存放事件处理函数的数组
  1196. if (obj['on' + type]) obj.events[type][0] = fn; //把第一次的事件处理函数先储存到第一个位置上
  1197. } else {
  1198. if (addEvent.equal(obj.events[type], fn)) return false; //同一个注册函数进行屏蔽,不添加到计数器中
  1199. }
  1200. obj.events[type][addEvent.ID++] = fn; //从第二次开始我们用事件计数器来存储
  1201. obj['on' + type] = addEvent.exec; //执行事件处理函数
  1202. }
  1203. }
  1204. /*-------------------------------------------------------------------------------------*/
  1205. //为每个事件分配一个计数器
  1206. //JS一切皆为对象,所以addEvent.ID语法正确,实际上是个全局变量
  1207. addEvent.ID = 1;
  1208. addEvent.exec = function (event) { //执行事件处理函数
  1209. var e = event || addEvent.fixEvent(window.event);
  1210. var es = this.events[e.type];
  1211. for (var i in es) {
  1212. es[i].call(this, e);
  1213. }
  1214. };
  1215. addEvent.equal = function (es, fn) { //同一个注册函数进行屏蔽
  1216. for (var i in es) {
  1217. if (es[i] == fn) return true;
  1218. }
  1219. return false;
  1220. };
  1221. addEvent.fixEvent = function (event) { //把IE常用的Event对象配对到W3C中去
  1222. event.preventDefault = addEvent.fixEvent.preventDefault;
  1223. event.stopPropagation = addEvent.fixEvent.stopPropagation;
  1224. event.target = event.srcElement;
  1225. return event;
  1226. };
  1227. addEvent.fixEvent.preventDefault = function () { //IE阻止默认行为
  1228. this.returnValue = false;
  1229. };
  1230. addEvent.fixEvent.stopPropagation = function () { //IE取消冒泡
  1231. this.cancelBubble = true;
  1232. };
  1233. /*---------------------------------------------------------------------------------------*/
  1234.  
  1235. /** removeEvent()函数库函数,跨浏览器删除事件绑定,注意:传入事件名称时不要on
  1236. * 接收3个参数
  1237. * 参数1接收事件绑定时的元素对象
  1238. * 参数2接收事件绑定时的事件名称,也就是什么事件,注意:传入事件名称时不要on
  1239. * 参数3接收事件绑定时的执行函数
  1240. **/
  1241. function removeEvent(obj, type, fn) {
  1242. if (typeof obj.removeEventListener != 'undefined') {
  1243. obj.removeEventListener(type, fn, false);
  1244. } else {
  1245. if (obj.events) {
  1246. for (var i in obj.events[type]) {
  1247. if (obj.events[type][i] == fn) {
  1248. delete obj.events[type][i];
  1249. }
  1250. }
  1251. }
  1252. }
  1253. }
  1254.  
  1255. /** getInner()函数库函数,跨浏览器获取浏览器视窗大小
  1256. * 返回一个对象,里面有两个属性
  1257. * width属性,代表浏览器视窗宽度
  1258. * height属性,代表浏览器视窗高度
  1259. **/
  1260. function getInner() {
  1261. if (typeof window.innerWidth != 'undefined') {
  1262. return {
  1263. width: window.innerWidth,
  1264. height: window.innerHeight
  1265. }
  1266. } else {
  1267. return {
  1268. width: document.documentElement.clientWidth,
  1269. height: document.documentElement.clientHeight
  1270. }
  1271. }
  1272. }
  1273.  
  1274. /** gun_dong_tiao_wei_zhi()函数库函数,获取滚动条头部与浏览器头部的位置,获取底部滚动条与浏览器左边的位置
  1275. * 无参
  1276. * 返回一个对象
  1277. * 对象有两个属性
  1278. * top,返回,滚动条头部与浏览器头部的位置
  1279. * left,返回,滚动条底部与浏览器底部的位置
  1280. **/
  1281. function gun_dong_tiao_wei_zhi() {
  1282. return{
  1283. top:document.documentElement.scrollTop || document.body.scrollTop,
  1284. left:document.documentElement.scrollLeft || document.body.scrollLeft
  1285. };
  1286. }
  1287.  
  1288. /** ju_li_liu_lan_qi_tou()函数库函数,跨浏览器获取当前元素的头部与浏览器头部的位置是多少
  1289. * 参数是要获取的元素对象
  1290. **/
  1291. function ju_li_liu_lan_qi_tou(element) {
  1292. var top = element.offsetTop;
  1293. var parent = element.offsetParent;
  1294. while (parent != null){
  1295. top += parent.offsetTop;
  1296. parent = parent.offsetParent;
  1297. }
  1298. return top;
  1299. }
  1300.  
  1301. /** getStyle()函数库函数,跨浏览器获取元素Style,样式指定属性
  1302. * 两个参数
  1303. * 参数1接收元素对象
  1304. * 参数2接收css样式名称
  1305. * 返回指定元素的指定样式值
  1306. **/
  1307. function getStyle(jie_dian, attr) {
  1308. var value;
  1309. if (typeof window.getComputedStyle != 'undefined') {//W3C
  1310. value = window.getComputedStyle(jie_dian, null)[attr];
  1311. } else if (typeof jie_dian.currentStyle != 'undeinfed') {//IE
  1312. value = jie_dian.currentStyle[attr];
  1313. }
  1314. return value;
  1315. }
  1316.  
  1317. /** hasClass()函数库函数,判断一个元素的class属性值是否存在
  1318. * 两个参数
  1319. * 参数1接收元素对象
  1320. * 参数2接收class属性值
  1321. * 返回指定元素的class属性值是否存在,
  1322. **/
  1323. function hasClass(jie_dian, className) {
  1324. return jie_dian.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
  1325. }
  1326.  
  1327. /** yuan_su_da_xiao()函数库函数,获取指定元素的绝对大小(包含边框)
  1328. * 接收一个参数,参数是元素对象
  1329. * 返回一个对象,里面有两个属性
  1330. * width属性,元素的宽度
  1331. * height属性,元素的高度
  1332. **/
  1333. function yuan_su_da_xiao(jie_dian) {
  1334. return {
  1335. width: jie_dian.offsetWidth,
  1336. height: jie_dian.offsetHeight
  1337. }
  1338. }
  1339.  
  1340. /** getEvent()函数库函数,跨浏览器获取事件对象,事件event对象,
  1341. * 这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。
  1342. * 接收一个参数,参数是事件函数的形式参数,也就是事件函数的形式参数接收到的event对象
  1343. * 返回event对象,
  1344. **/
  1345. function getEvent(event) {
  1346. return event || window.event;
  1347. }
  1348.  
  1349. /** preDef()函数库函数,阻止事件默认行为,
  1350. * 接收一个参数,参数是事件函数的形式参数,也就是事件函数的形式参数接收到的event对象
  1351. **/
  1352. function preDef(event) {
  1353. var e = getEvent(event);
  1354. if (typeof e.preventDefault != 'undefined') {//W3C
  1355. e.preventDefault();
  1356. } else {//IE
  1357. e.returnValue = false;
  1358. }
  1359. }
  1360.  
  1361. /** trim()函数库函数,删除字符串的前后空格
  1362. * 接收一个参数,参数是要删除前后空格的字符串
  1363. **/
  1364. function trim(str) {
  1365. return str.replace(/(^\s*)|(\s*$)/g, '');
  1366. }
  1367.  
  1368. /** scrollTop()函数库函数,滚动条清零,使滚动条无法下拉
  1369. * 无参
  1370. **/
  1371. function scrollTop() {
  1372. document.documentElement.scrollTop = 0;
  1373. document.body.scrollTop = 0;
  1374. }
  1375.  
  1376. /** gdt_cao_zuo()函数库函数,显示和隐藏浏览器滚动条
  1377. * 有参,x为显示滚动条,y为隐藏滚动条
  1378. **/
  1379. function gdt_cao_zuo(zhi) {
  1380. if (zhi == 'x'){
  1381. parseFloat(sys.firefox) < 4 ? document.body.style.overflow = 'auto' : document.documentElement.style.overflow = 'auto';
  1382. }else if(zhi == 'y'){
  1383. parseFloat(sys.firefox) < 4 ? document.body.style.overflow = 'hidden' : document.documentElement.style.overflow = 'hidden';
  1384. }else {
  1385. alert('gdt_cao_zuo()函数库函数,参数不正确');
  1386. }
  1387. }
  1388.  
  1389. /** fixedScroll()函数库函数,定位滚动条
  1390. * fixedScroll.left参数,是外部通过fixedScroll属性方式传递的,如外部fixedScroll.left = getScroll().left;
  1391. **/
  1392. function fixedScroll() {
  1393. setTimeout(function () {
  1394. window.scrollTo(fixedScroll.left, fixedScroll.top);
  1395. }, 100);
  1396. }
  1397.  
  1398. /** pd_shuzu()函数库函数,判断一个类容是否存在一个数组中,返回布尔值
  1399. * 参数1判断的数组,参数2判断的内容
  1400. **/
  1401. function pd_shuzu(shuzu, value) {
  1402. for (var i in shuzu) {
  1403. if (shuzu[i] === value) return true;
  1404. }
  1405. return false;
  1406. }
  1407.  
  1408. /** sh_jd_suo_yin()函数库函数,获取当前节点的上一个节点,在父元素的索引
  1409. * 参数1,当前元素在父元素的索引
  1410. * 参数2,父元素原生对象
  1411. * 如果当前索引是开始位置0,返回的总索引减一
  1412. * 如果当前索引是结束位置,返回的当前索引减一
  1413. **/
  1414. function sh_jd_suo_yin(suoy,fjid) {
  1415. var length = fjid.children.length; //获取父节点里所有子节点的长度
  1416. if (suoy == 0) return length - 1;
  1417. return parseInt(suoy) - 1;
  1418. }
  1419.  
  1420. /** xia_jd_suo_yin()函数库函数,获取当前节点的下一个节点,在父元素的索引
  1421. * 参数1,当前元素在父元素的索引
  1422. * 参数2,父元素原生对象
  1423. * 如果当前索引是开始位置0,返回的当前索引减一
  1424. * 如果当前索引是结束位置,返回0
  1425. **/
  1426. function xia_jd_suo_yin(suoy,fjid) {
  1427. var length = fjid.children.length; //获取父节点里所有子节点的长度
  1428. if (suoy == length - 1) return 0;
  1429. return parseInt(suoy) + 1;
  1430. }
  1431.  
  1432. /**▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃开源库json2开始▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃**/
  1433.  
  1434. /** json2.js 开源库json2,
  1435. * 如果浏览器版本太低不支持JSON对象,通过一个开源库json2.js来模拟执行,如果支持JSON对象就用JSON对象
  1436. **/
  1437.  
  1438. if (typeof JSON !== 'object') {
  1439. JSON = {};
  1440. }
  1441. (function () {
  1442. 'use strict';
  1443. function f(n) {
  1444. return n < 10 ? '0' + n : n;
  1445. }
  1446.  
  1447. if (typeof Date.prototype.toJSON !== 'function') {
  1448. Date.prototype.toJSON = function (key) {
  1449. return isFinite(this.valueOf())
  1450. ? this.getUTCFullYear() + '-' +
  1451. f(this.getUTCMonth() + 1) + '-' +
  1452. f(this.getUTCDate()) + 'T' +
  1453. f(this.getUTCHours()) + ':' +
  1454. f(this.getUTCMinutes()) + ':' +
  1455. f(this.getUTCSeconds()) + 'Z'
  1456. : null;
  1457. };
  1458. String.prototype.toJSON =
  1459. Number.prototype.toJSON =
  1460. Boolean.prototype.toJSON = function (key) {
  1461. return this.valueOf();
  1462. };
  1463. }
  1464. var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
  1465. escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
  1466. gap,
  1467. indent,
  1468. meta = { // table of character substitutions
  1469. '\b': '\\b',
  1470. '\t': '\\t',
  1471. '\n': '\\n',
  1472. '\f': '\\f',
  1473. '\r': '\\r',
  1474. '"': '\\"',
  1475. '\\': '\\\\'
  1476. },
  1477. rep;
  1478.  
  1479. function quote(string) {
  1480. escapable.lastIndex = 0;
  1481. return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
  1482. var c = meta[a];
  1483. return typeof c === 'string'
  1484. ? c
  1485. : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
  1486. }) + '"' : '"' + string + '"';
  1487. }
  1488.  
  1489. function str(key, holder) {
  1490. var i, // The loop counter.
  1491. k, // The member key.
  1492. v, // The member value.
  1493. length,
  1494. mind = gap,
  1495. partial,
  1496. value = holder[key];
  1497. if (value && typeof value === 'object' &&
  1498. typeof value.toJSON === 'function') {
  1499. value = value.toJSON(key);
  1500. }
  1501. if (typeof rep === 'function') {
  1502. value = rep.call(holder, key, value);
  1503. }
  1504. switch (typeof value) {
  1505. case 'string':
  1506. return quote(value);
  1507. case 'number':
  1508. return isFinite(value) ? String(value) : 'null';
  1509. case 'boolean':
  1510. case 'null':
  1511. return String(value);
  1512. case 'object':
  1513. if (!value) {
  1514. return 'null';
  1515. }
  1516. gap += indent;
  1517. partial = [];
  1518. if (Object.prototype.toString.apply(value) === '[object Array]') {
  1519. length = value.length;
  1520. for (i = 0; i < length; i += 1) {
  1521. partial[i] = str(i, value) || 'null';
  1522. }
  1523. v = partial.length === 0
  1524. ? '[]'
  1525. : gap
  1526. ? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']'
  1527. : '[' + partial.join(',') + ']';
  1528. gap = mind;
  1529. return v;
  1530. }
  1531. if (rep && typeof rep === 'object') {
  1532. length = rep.length;
  1533. for (i = 0; i < length; i += 1) {
  1534. if (typeof rep[i] === 'string') {
  1535. k = rep[i];
  1536. v = str(k, value);
  1537. if (v) {
  1538. partial.push(quote(k) + (gap ? ': ' : ':') + v);
  1539. }
  1540. }
  1541. }
  1542. } else {
  1543. for (k in value) {
  1544. if (Object.prototype.hasOwnProperty.call(value, k)) {
  1545. v = str(k, value);
  1546. if (v) {
  1547. partial.push(quote(k) + (gap ? ': ' : ':') + v);
  1548. }
  1549. }
  1550. }
  1551. }
  1552. v = partial.length === 0
  1553. ? '{}'
  1554. : gap
  1555. ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}'
  1556. : '{' + partial.join(',') + '}';
  1557. gap = mind;
  1558. return v;
  1559. }
  1560. }
  1561.  
  1562. if (typeof JSON.stringify !== 'function') {
  1563. JSON.stringify = function (value, replacer, space) {
  1564. var i;
  1565. gap = '';
  1566. indent = '';
  1567. if (typeof space === 'number') {
  1568. for (i = 0; i < space; i += 1) {
  1569. indent += ' ';
  1570. }
  1571. } else if (typeof space === 'string') {
  1572. indent = space;
  1573. }
  1574. rep = replacer;
  1575. if (replacer && typeof replacer !== 'function' &&
  1576. (typeof replacer !== 'object' ||
  1577. typeof replacer.length !== 'number')) {
  1578. throw new Error('JSON.stringify');
  1579. }
  1580. return str('', {'': value});
  1581. };
  1582. }
  1583. if (typeof JSON.parse !== 'function') {
  1584. JSON.parse = function (text, reviver) {
  1585. var j;
  1586.  
  1587. function walk(holder, key) {
  1588. var k, v, value = holder[key];
  1589. if (value && typeof value === 'object') {
  1590. for (k in value) {
  1591. if (Object.prototype.hasOwnProperty.call(value, k)) {
  1592. v = walk(value, k);
  1593. if (v !== undefined) {
  1594. value[k] = v;
  1595. } else {
  1596. delete value[k];
  1597. }
  1598. }
  1599. }
  1600. }
  1601. return reviver.call(holder, key, value);
  1602. }
  1603.  
  1604. text = String(text);
  1605. cx.lastIndex = 0;
  1606. if (cx.test(text)) {
  1607. text = text.replace(cx, function (a) {
  1608. return '\\u' +
  1609. ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
  1610. });
  1611. }
  1612. if (/^[\],:{}\s]*$/
  1613. .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
  1614. .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
  1615. .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
  1616. j = eval('(' + text + ')');
  1617. return typeof reviver === 'function'
  1618. ? walk({'': j}, '')
  1619. : j;
  1620. }
  1621. throw new SyntaxError('JSON.parse');
  1622. };
  1623. }
  1624. }());
  1625. /**▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃开源库json2结束▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃**/
  1626.  
  1627. /**█████████████████████████████████████████████████函数库██████████████████████████████████████████████████████**/

第一百六十一节,封装库--JavaScript,完整封装库文件的更多相关文章

  1. 第三百六十一节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)倒排索引

    第三百六十一节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)倒排索引 倒排索引 倒排索引源于实际应用中需要根据属性的值来查找记录.这种索引表中的每一项都包 ...

  2. 第一百三十一节,JavaScript,封装库--CSS

    JavaScript,封装库--CSS 将封装库里的方法,改成了原型添加方法 增加4个方法 tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀1 ...

  3. 第一百六十节,封装库--JavaScript,ajax注册表单到数据库

    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...

  4. 第一百五十一节,封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全

    封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...

  5. 第一百二十一节,JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

  6. 第一百九十一节,jQuery EasyUI 入门

    jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...

  7. 第一百七十一节,jQuery,高级事件,模拟操作,命名空间,事件委托,on、off 和 one

    jQuery,高级事件,模拟操作,命名空间,事件委托,on.off 和 one 学习要点: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one jQuery 不但封装了大量常用的事 ...

  8. 第二百六十七节,Tornado框架-分页封装模块

    Tornado框架-分页封装模块 框架引擎 #!/usr/bin/env python #coding:utf-8 import tornado.ioloop import tornado.web # ...

  9. 第二百六十一节,Tornado框架模板引擎本质

    Tornado框架模板引擎本质 只需要了解一下即可 本篇就来详细的剖析模板处理的整个过程. 上图是返回给用户一个html文件的整个流程,较之前的Demo多了绿色流线的步骤,其实就是把[self.wri ...

随机推荐

  1. 系统找不到指定文件 No installed service name 'Apache2'

    原因:系统服务中没有apache2服务 解决方法: 开始 --运行 --- 输入“CMD”出来DOS窗口---- 输入 D: 回车 再输入 cd D:/Program Files(x86)/Apach ...

  2. BEA公司的weblogic是什么?有什么特点?

    转自:http://zhidao.baidu.com/link?url=J9obKwHhuh1sdLoBC3pILeaq1nz_tcpScggBNeS3D0GzAz9FI002vlS2xxJD4_z6 ...

  3. 【ACM】最小公倍数

    http://acm.hdu.edu.cn/game/entry/problem/show.php?chapterid=2&sectionid=1&problemid=1 #inclu ...

  4. 一个.net Cookie组件的bug引发的题外话

    在.net里,做过Http模拟发送请求的朋友们应该遇到过,有个时候无论怎么努力,都没办法让Cookie跟网页用浏览器所收集的一样,其中原因除了有些Cookie大概是ReadOnly之外,似乎另有隐情: ...

  5. Andorid上拉加载更多的几种实现方式

    1.前言 Andriod中上拉加载更多的效果随处可见,因为一次性要展现的数据太多信息量太大的话,给用户的体验就很差(加载慢,界面卡顿.流量消耗大等),而加载更多可以控制每次加载条目的数量以达到快速加载 ...

  6. ROC

    # -*- coding: utf-8 -*- # __author__ = "JieYao" from biocluster.agent import Agent from bi ...

  7. Unable to locate package错误

    W: GPG error: http://nginx.org precise Release: The following signatures couldn't be verified becaus ...

  8. Request to https://bower.herokuapp.com failed with 502

    bower 版本过低,需要升级为最新bower版本, 如果升级版本后依然无法使用,更改.bowerrc配置,如下所示 { "directory": "bower_comp ...

  9. mongodb - 查看数据库状态

    > use test switched to db test > db.stats() { "db" : "test", #数据库名 "c ...

  10. 快速理解linux流编辑器sed命令

    原创 杜亦舒性能与架构 之前介绍过 awk 命令,sed 命令同样是非常重要的文本处理工具,涉及到linux shell开发时,几乎是避不开这两大利器的 sed 是 stream editor 的简写 ...