第一百三十九节,JavaScript,封装库--CSS选择器
JavaScript,封装库--修改元素选择器
就是将构造库函数修改成元素选择器,像css那样,输入#xxx .xxx xxx (获取指定id下的指定class下的指定标签元素)
修改后的基础库
/** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象,使其每次调用都是独立的对象 * $()创建库对象,有一个可选参数,参数有两种方式,1是传入的this,2是传入的字符串 * 可选参数说明: * 传入的this,this,就是当前对象本身 * 传入的字符串,代表获取元素选择器 * 参数是元素选择器(id值、class值、标签名称)其中一样的字符串方式,或者是其中几样的字符串组合方式 * 获取一个元素传参方式 '#xxx'( 表示获取id),'.xxx'(表示获取class),'xxx'(表示获取标签) * 从父元素向下获取组合方式按照,一个元素传参方式加上空格,如: ('#sdf .hjk p')表示获取id为sdf元素下的class为hjk下的p元素 **/ var $ = function (args) { return new feng_zhuang_ku(args); }; /** *定义封装库构造函数,类库 **/ function feng_zhuang_ku(args) { /** jie_dian属性,创建数组,初始化,保存获取到的元素节点,返回数组 **/ this.jie_dian = []; if (typeof args == 'string') { //如果传入的是字符串,说明是获取元素选择器 if (args.indexOf(' ') != -1) { /**从父元素向下获取组合方式**/ var fen_ge = args.split(' '); //将接收的组合式元素名称分割成数组 var lin_shi = []; //保存临时对象的数组,解决被覆盖问题 var fu_yuan_su = []; //保存父元素的数组 for (var i = 0; i < fen_ge.length; i++) { if (fu_yuan_su.length == 0)fu_yuan_su.push(document); //如果没有父节点,就把document放入父节点 switch (fen_ge[i].charAt(0)) { //判断字符串的第一个字符是什么 case '#': //说明是id lin_shi = []; //清理临时数组,以便父节点失效,子节点有效 lin_shi.push(this.huo_qu_id(fen_ge[i].substring(1))); //去除第一个字符,获取到传入的id元素,保存到临时数组 fu_yuan_su = lin_shi; //将临时节点数组放入父节点数字 break; //说明是class case '.': lin_shi = []; //清理临时数组,以便父节点失效,子节点有效 for (var f = 0; f < fu_yuan_su.length; f++) { //根据父节点的长度循环 var tempss = this.huo_qu_class(fen_ge[i].substring(1), fu_yuan_su[f]); //获取到父节点下的子节点 for (var n = 0; n < tempss.length; n++) { //循环子节点,将每次循环的子节点添加到临时数组 lin_shi.push(tempss[n]); } } fu_yuan_su = lin_shi; //将临时节点数组放入父节点数字 break; default: //说明是标签 lin_shi = []; //清理临时数组,以便父节点失效,子节点有效 for (var j = 0; j < fu_yuan_su.length; j++) { //根据父节点的长度循环 var temps = this.huo_qu_name(fen_ge[i], fu_yuan_su[j]); //获取到父节点下的子节点 for (var k = 0; k < temps.length; k++) { //循环子节点,将每次循环的子节点添加到临时数组 lin_shi.push(temps[k]); } } fu_yuan_su = lin_shi; //将临时节点数组放入父节点数字 } } this.jie_dian = lin_shi; //将临时数组放入jie_dian数组 } else { /**一个元素传参方式**/ switch (args.charAt(0)) { //判断字符串的第一个字符是什么 case '#': //说明是id this.jie_dian.push(this.huo_qu_id(args.substring(1))); //去除第一个字符,获取到传入的id元素 break; case '.': //说明是class this.jie_dian = this.huo_qu_class(args.substring(1)); //去除第一个字符,获取到传入的class元素 break; default: //说明是标签 this.jie_dian = this.huo_qu_name(args); //获取到传入的标签元素 } } } else if (typeof args == 'object') { //如果传入的是对象,说明是this,就是当前对象本身 if (args != undefined) { this.jie_dian[0] = args; } } } /**$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$**/ /**$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$**/ /**------------------------------------------------获取元素标签开始--------------------------------------------**/ /**获取元素标签说明: * jie_dian属性,保存获取到的元素节点,返回数组, * * huo_qu_id()方法,通过id获取元素标签,参数是id值,将获取到的元素对象返回给方法本身,无法连缀 * huo_qu_name()方法,通过标签名称获取相同标签名的元素, * huo_qu_class()方法,获取相同class属性的节点,返回包含相同class属性的节点数组,返回给方法本身,无法连缀 * * huo_qu_name_zhi()方法,通过元素name值获取指定元素,适用于获取表单元素, * guo_lv_jie_dian()方法,获取多个节点时,过滤jie_dian属性里的数组,就是过滤掉指定索引外的元素对象 * huo_qu_zi_jie_dian()方法,获取一个元素下的子元素 **/ /** huo_qu_id()方法,通过id获取元素标签,参数是id值,将获取到的元素对象返回给方法本身,无法连缀 **/ feng_zhuang_ku.prototype.huo_qu_id = function (id) { return document.getElementById(id); }; /** huo_qu_name()方法,通过标签名称获取相同标签名的元素,返回包含相同标签名的元素数组,返回给方法本身 * 两个参数:获取指定元素下的相同标签元素,参数1标签名称,参数2是要获取元素的父元素 * 一个参数:获取页面所有相同标签元素,参数是标签名称 **/ feng_zhuang_ku.prototype.huo_qu_name = function (tag, parentnode) { var node = null; var lin_shi = []; if (parentnode != undefined) { node = parentnode; } else { node = document; } var tags = node.getElementsByTagName(tag); for (var i = 0; i < tags.length; i++) { lin_shi.push(tags[i]); } return lin_shi; }; /** huo_qu_class()方法,获取相同class属性的节点,返回包含相同class属性的节点数组,返回给方法本身,无法连缀 * 一个参数:获取整个页面指定的class属性节点,参数是class属性值 * 两个参数:获取指定元素区下的class属性节点,参数1是class属性值,参数2是要获取class属性节点的父元素节点 **/ feng_zhuang_ku.prototype.huo_qu_class = function (name, parentnode) { var node = null; var lin_shi = []; if (parentnode != undefined) { node = parentnode; } else { node = document; } var all = node.getElementsByTagName('*'); for (var i = 0; i < all.length; i++) { if (all[i].className == name) { lin_shi.push(all[i]); } } return lin_shi; }; /** huo_qu_name_zhi()方法,通过元素name值获取指定元素,参数是元素name值,返回元素相同name值对象集合, * 循环元素集合,将每次循环到的元素对象添加到 jie_dian属性,适用于获取表单元素 **/ feng_zhuang_ku.prototype.huo_qu_name_zhi = function (name) { var name_zhi = document.getElementsByName(name); for (var i = 0; i < name_zhi.length; i++) { this.jie_dian.push(name_zhi[i]); } return this; }; /** guo_lv_jie_dian()方法,获取多个节点时,过滤jie_dian属性里的数组,就是过滤掉指定索引外的元素对象 * 参数是要保留jie_dian属性里的对象索引 **/ feng_zhuang_ku.prototype.guo_lv_jie_dian = function (num) { var element = this.jie_dian[num]; this.jie_dian = []; this.jie_dian[0] = element; return this; }; /** huo_qu_zi_jie_dian()方法,获取一个元素下的子元素 * 注意首先要获取到父元素,在使用huo_qu_zi_jie_dian()方法 * 参数是要获取的,子元素(id值、class值、标签名称)其中一样的字符串方式, * 传参方式 '#xxx'( 表示获取id),'.xxx'(表示获取class),'xxx'(表示获取标签) **/ feng_zhuang_ku.prototype.huo_qu_zi_jie_dian = function (str) { var lin_shi = []; //临时数组 for (var i = 0; i < this.jie_dian.length; i++) { //根据父元素的长度,循环出父元素 switch (str.charAt(0)) { //判断字符串的第一个字符是什么 case '#': //说明是id lin_shi.push(this.huo_qu_id(str.substring(1))); //获取到父元素下的子元素id等于str的标签,将它添加到临时数组 break; case '.': //说明是class var tempss = this.huo_qu_class(str.substring(1), this.jie_dian[i]); for (var k = 0; k < tempss.length; k++) { lin_shi.push(tempss[k]); } break; default: //说明是标签名称 var temps = this.huo_qu_name(str, this.jie_dian[i]); for (var j = 0; j < temps.length; j++) { lin_shi.push(temps[j]); } } } this.jie_dian = lin_shi; //将临时数组替换成节点数组 return this; }; /**------------------------------------------------获取元素标签结束--------------------------------------------**/ /**------------------------------------------------元素节点操作开始--------------------------------------------**/ /**元素节点操作说明: * c_css()方法,给获取到的元素设置ss样式,或者获取css样式, * wen_ben()方法,给获取到的元素设置文本,或者获取文本 * tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀 * yi_chu_class()方法,给获取到的元素移除class属性,参数是要移除的class属性值,可以连缀 * she_zhi_link_css()方法,设置link连接、或style内嵌、中的CSS样式 * yi_chu_link_css()方法,移除link连接、或style内嵌、中的CSS样式 **/ /** c_css()方法,给获取到的元素设置ss样式,或者获取css样式, * 两个参数:设置样式,参数1样式名称,参数2样式值,设置的行内样式 * 一个参数:获取样式,参数是样式名称,无法连缀,获取即可用获取行内也可以获取连接 **/ feng_zhuang_ku.prototype.c_css = function (attr, value) { for (var i = 0; i < this.jie_dian.length; i++) { if (arguments.length == 1) { return getStyle(this.jie_dian[i], attr); //getStyle()函数库函数,跨浏览器获取元素Style,样式指定属性 } else { this.jie_dian[i].style[attr] = value; } } return this; }; /** wen_ben()方法,给获取到的元素设置文本,或者获取文本 * 有参:设置文本,参数是要设置的文本字符串。 * 无参:获取文本。无法连缀 **/ feng_zhuang_ku.prototype.wen_ben = function (str) { for (var i = 0; i < this.jie_dian.length; i++) { if (arguments.length == 0) { return this.jie_dian[i].innerHTML; } this.jie_dian[i].innerHTML = str; } return this; }; /** tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀 **/ feng_zhuang_ku.prototype.tian_jia_class = function (classname) { for (var i = 0; i < this.jie_dian.length; i++) { if (hasClass(this.jie_dian[i], classname)) { //hasClass()函数库函数,判断一个元素的class属性值是否存在 this.jie_dian[i].className += ' ' + classname; } } return this; }; /** yi_chu_class()方法,给获取到的元素移除class属性,参数是要移除的class属性值,可以连缀 **/ feng_zhuang_ku.prototype.yi_chu_class = function (classname) { for (var i = 0; i < this.jie_dian.length; i++) { if (hasClass(this.jie_dian[i], classname)) { this.jie_dian[i].className = this.jie_dian[i].className.replace(new RegExp('(\\s|^)' + classname + '(\\s|$)'), ' '); } } return this; }; /** she_zhi_link_css()方法,设置link连接、或style内嵌、中的CSS样式 * 在Web应用中,很少用到添加CSS规则和移除CSS规则,一般只用行内和Class;因为添加和删除原本的规则会破坏整个CSS的结构,所以使用需要非常小心。 * 直接在库对象下使用 如:$().she_zhi_link_css() * 四个参数: * 参数1,样式表索引位置,就是要操作的样式表位置索引,第几个样式表【数值】 * 参数2,要添加的选择器名称,【字符串】 * 参数3,要添加的样式名称和值,如:background:#ff2a16 【字符串】 * 参数4,将样式和选择器添加到样式表什么位置,【数值】 **/ feng_zhuang_ku.prototype.she_zhi_link_css = function (num, selectorText, cssText, position) { var sheet = document.styleSheets[num]; if (typeof sheet.insertRule != 'undefined') { sheet.insertRule(selectorText + "{" + cssText + "}", position); } else if (typeof sheet.addRule != 'undefined') { sheet.addRule(selectorText, cssText, position); } return this; }; /** yi_chu_link_css()方法,移除link连接、或style内嵌、中的CSS样式 * 在Web应用中,很少用到添加CSS规则和移除CSS规则,一般只用行内和Class;因为添加和删除原本的规则会破坏整个CSS的结构,所以使用需要非常小心。 * 直接在库对象下使用 * 两个参数: * 参数1,样式表索引位置,就是要操作的样式表位置索引,第几个样式表【数值】 * 参数2,删除样式表里的第几个选择器【数值】 **/ feng_zhuang_ku.prototype.yi_chu_link_css = function (num, position) { var sheet = document.styleSheets[num]; if (typeof sheet.deleteRule != 'undefined') { sheet.deleteRule(position); } else if (typeof sheet.removeRule) { sheet.removeRule(position); } return this; }; /**------------------------------------------------元素节点操作结束--------------------------------------------**/ /**------------------------------------------------元素事件开始--------------------------------------------**/ /**元素事件说明: * shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) * xian_shi()方法,设置元素显示,无参 * yin_cang()方法,设置元素隐藏,无参 * on_click()方法,给获取到的元素添加一个点击事件,参数是一个匿名函数(包含函数功能), * yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面, * chuang_kou_shi_jian()方法,浏览器窗口事件,当窗口的大小变化时触发函数 * zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 **/ /** shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) *参数1是移入时的执行函数(包含代码) *参数2是移出时的执行函数(包含代码) **/ feng_zhuang_ku.prototype.shu_biao_yi_ru_yi_chu = function (yi_ru, yi_chu) { for (var i = 0; i < this.jie_dian.length; i++) { addEvent(this.jie_dian[i], 'mouseover', yi_ru); addEvent(this.jie_dian[i], 'mouseout', yi_chu); } return this; }; /** xian_shi()方法,设置元素显示,无参 **/ feng_zhuang_ku.prototype.xian_shi = function () { for (var i = 0; i < this.jie_dian.length; i++) { this.jie_dian[i].style.display = 'block'; } return this; }; /** yin_cang()方法,设置元素隐藏,无参 **/ feng_zhuang_ku.prototype.yin_cang = function () { for (var i = 0; i < this.jie_dian.length; i++) { this.jie_dian[i].style.display = 'none'; document.documentElement.style.overflow = 'auto'; removeEvent(window, 'scroll', scrollTop); //遮罩锁屏时有用 } return this; }; /** on_click()方法,给获取到的元素添加一个点击事件,参数是一个匿名函数(包含函数功能), * 循环jie_dian属性里的节点,将每次循环的节点添加元素点击事件 **/ feng_zhuang_ku.prototype.on_click = function (fu) { for (var i = 0; i < this.jie_dian.length; i++) { addEvent(this.jie_dian[i], 'click', fu); } return this; }; /** yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面, * 注意:使用此方法时,首先要在css里将目标区块设置成(绝对定位,position: absolute;) **/ feng_zhuang_ku.prototype.yuan_su_ju_zhong = function () { if (this.jie_dian.length == 1) { var yan_su = null; for (var i = 0; i < this.jie_dian.length; i++) { yan_su = this.jie_dian[i]; } var y_style = getStyle(yan_su, 'display'); //getStyle()函数库函数,跨浏览器获取元素Style,样式指定属性 if (y_style === "none") { yan_su.style.display = "block"; } var width = yan_su.offsetWidth; var height = yan_su.offsetHeight; if (y_style === "none") { yan_su.style.display = "none"; } var chang_w = getInner().width; var chang_h = getInner().height; var top = (chang_h - height) / 2; var left = (chang_w - width) / 2; for (var ii = 0; ii < this.jie_dian.length; ii++) { this.jie_dian[ii].style.top = top + 'px'; this.jie_dian[ii].style.left = left + 'px'; } } else { alert("区块元素页面居中,只能设置一个区块元素,目前jie_dian数组里是多个元素请检查!") } return this; }; /** chuang_kou_shi_jian()方法,浏览器窗口事件,当窗口的大小变化时触发函数 * 接收一个参数,就是触发时要执行的函数(包含函数功能) **/ feng_zhuang_ku.prototype.chuang_kou_shi_jian = function (fn) { for (var i = 0; i < this.jie_dian.length; i++) { var yan_su = this.jie_dian[i]; } addEvent(window, 'resize', function () { fn(); if (yan_su.offsetLeft > getInner().width - yan_su.offsetWidth) { yan_su.style.left = getInner().width - yan_su.offsetWidth + 'px'; } if (yan_su.offsetTop > getInner().height - yan_su.offsetHeight) { yan_su.style.top = getInner().height - yan_su.offsetHeight + 'px'; } }); return this; }; /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 **/ feng_zhuang_ku.prototype.zhe_zhao_suo_ping = function () { if (this.jie_dian.length == 1) { var yan_su = null; for (var i = 0; i < this.jie_dian.length; i++) { yan_su = this.jie_dian[i]; } var chang_w = getInner().width; //getInner()函数库函数,跨浏览器获取浏览器视窗大小 var chang_h = getInner().height; yan_su.style.width = chang_w + 'px'; yan_su.style.height = chang_h + 'px'; yan_su.style.position = 'absolute'; yan_su.style.top = '0'; yan_su.style.left = '0'; var y_style = getStyle(yan_su, 'display'); //getStyle()函数库函数,跨浏览器获取元素Style,样式指定属性 if (y_style === "block") { document.documentElement.style.overflow = 'hidden'; addEvent(window, 'scroll', scrollTop); } else if (y_style === 'none') { document.documentElement.style.overflow = 'auto'; } } else { alert("遮罩锁屏区块,只能设置一个区块元素,目前jie_dian数组里是多个元素请检查!") } return this; }; /**------------------------------------------------元素事件结束--------------------------------------------**/ /**------------------------------------------------插件入口开始--------------------------------------------**/ /** 插件入口,简单的理解就是通过extend()方法,向此基础库添加一个原型方法 * 此extend()方法,一般是给插件文件使用的,插件就是通过extend()方法,将插件方法添加到基础库原型的 * 接收两个参数 * 参数1是传入要添加的方法名称 * 参数2是此方法的执行函数(包含代码) **/ feng_zhuang_ku.prototype.extend = function (name, fn) { feng_zhuang_ku.prototype[name] = fn; }; /**------------------------------------------------插件入口结束--------------------------------------------**/
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript讲解</title> <link rel="stylesheet" title='xxx' type="text/css" href="1.css"> <script type="text/javascript" src="feng_zhuang_ku/han_shu/han_shu.js" charset="utf-8"></script> <script type="text/javascript" src="feng_zhuang_ku/feng_zhuang_ku.js" charset="utf-8"></script> <script type="text/javascript" src="feng_zhuang_ku/cha_jian/tuo_zhuai.js" charset="utf-8"></script> <script type="text/javascript" src="1.js" charset="utf-8"></script> </head> <body> <div id="tou"> <div class="logo"><img src="img/logo.gif" alt=""></div> <div class="ge_ren_zhong_xin">个人中心 <ul> <li><a href="#">设置</a></li> <li><a href="#">换肤</a></li> <li><a href="#">帮助</a></li> <li><a href="#">退出</a></li> </ul> </div> <div class="deng_lu">登录</div> </div> <div id="login"> <h2 class="tbu"><img src="img/close.png" alt="" class="close" />网站登录</h2> <div class="user">帐 号:<input type="text" name="user" class="text" /></div> <div class="pass">密 码:<input type="password" name="pass" class="text" /></div> <div class="button"><input type="button" class="submit" value="" /></div> <div class="other">注册新用户 | 忘记密码?</div> </div> <div id="suo_ping">1</div> <input type="button" value="按钮" id="button" /> <a href="http://www.yc60.com" id="a">瓢城Web俱乐部</a> <div id="box">box</div> <div id="jkf"> <p> <span class="a">pspan</span> <span class="a">pspan</span> <span class="b">pspan</span> </p> <p> <span class="a">pspan</span> <span>pspan</span> <span id="q">pspan</span> </p> <div> <span class="a">pspan</span> <span>pspan</span> <span>pspan</span> </div> </div> <p> <span class="a">pspan</span> <span class="a">pspan</span> <span class="b">pspan</span> </p> </body> </html>
css代码
@charset "utf-8"; * { margin: 0; padding: 0; /*color: #ff583d;*/ } body{ background: url("img/header_bg.png") repeat-x; font-size:14px; } #tou{ width: 900px; height: 30px; margin: 0 auto; } .logo{ width: 100px; height: 30px; float: left; } .ge_ren_zhong_xin{ position: relative; width: 70px; height: 30px; line-height: 30px; float: right; background: url("img/arrow.png") no-repeat right center; cursor: pointer; } ul{ width: 100px; height: 110px; list-style-type: none; position: absolute; top:30px; right: -15px; background:#FBF7E1; border:1px solid #999; border-top:none; padding:10px 0 0 0; display:none; } ul li { height:25px; line-height:25px; text-indent:20px; letter-spacing:1px; } ul li a { display:block; text-decoration:none; color:#333; background:url("img/arrow3.gif") no-repeat 5px 45%; } ul li a:hover { background:#fc0 url("img/arrow4.gif") no-repeat 5px 45%; } /*登录*/ #tou .deng_lu { width: 30px; height: 30px; float: right; line-height: 30px; margin-right: 10px; cursor: pointer; } /*登录框*/ #login{ width: 350px; height: 250px; border: 1px solid #ccc; position:absolute; display: none; z-index: 9999; background-color: #fff; } #login h2{ background: rgba(0, 0, 0, 0) url("img/login_header.png") repeat-x scroll 0 0; border-bottom: 1px solid #ccc; color: #666; font-size: 14px; height: 40px; line-height : 40px; text-align: center; letter-spacing: 1px; margin: 0 0 20px; cursor: move; } #login h2 img{ cursor: pointer; float: right; position: relative; right: 8px; top: 14px; } #login div.user, #login div.pass { color: #666; font-size: 14px; padding: 5px 0; text-align: center; } #login input.text { background: #fff none repeat scroll 0 0; border: 1px solid #ccc; font-size: 14px; height: 25px; width: 200px; } #login .button { padding: 20px 0; text-align: center; } #login input.submit { background: rgba(0, 0, 0, 0) url("img/login_button.png") no-repeat scroll 0 0; border: medium none; cursor: pointer; height: 30px; width: 107px; } #login .other { color: #666; padding: 15px 10px; text-align: right; } /*遮罩锁屏区块*/ #suo_ping{ z-index: 9998; /*注意:如果遮罩层上面有元素,它的层级要大于9998*/ background: #000; filter: alpha(opacity=50); opacity: 0.5; display: none; }
前台js代码
//前台调用代码 addEvent(window, 'load', function () { //个人中心和登录框 $('#tou .ge_ren_zhong_xin').shu_biao_yi_ru_yi_chu(function () { //获取到个人中心元素,执行鼠标移入移除方法 $(this).c_css('background', 'url(img/arrow2.png) no-repeat right center'); //移入鼠标改变人中心背景图片 $('.ge_ren_zhong_xin ul').xian_shi(); //移入鼠标显示个人中心下拉区块 }, function () { $(this).c_css('background', 'url(img/arrow.png) no-repeat right center'); //移出鼠标改变人中心背景图片 $('.ge_ren_zhong_xin ul').yin_cang(); //移出鼠标隐藏个人中心下拉区块 }); $('#login .close').on_click(function () { $('#login').yin_cang(); $('#suo_ping').yin_cang(); }); $('#tou .deng_lu').on_click(function () { //获取登录,添加点击事件 $('#login').xian_shi().yuan_su_ju_zhong().chuang_kou_shi_jian(function () { //点击后,显示登录框,登录框居中,添加窗口事件 $('#login').yuan_su_ju_zhong(); //窗口改变时再次执行登录框居中 $('#suo_ping').zhe_zhao_suo_ping() }); $('#suo_ping').xian_shi().zhe_zhao_suo_ping(); }); $('#login').tuo_zhuai('tbu'); $('#jkf p #q').c_css('font-size','80px').c_css('color','#ff583d'); });