栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

JavaScript DOM进阶方法

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

JavaScript DOM进阶方法

DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点;

一 DOM类型

类型名                        说明
Node                 表示所有类型值的统一接口,IE不支持;
document             表示文档类型;
Element              表示元素节点类型;
Text                 表示文本节点类型;
Comment              表示文档中的注释类型;
CDATASection         表示CDATA区域类型;
documentType         表示文档声明类型;
documentFragment     表示文档片段类型;
Attr                 表示属性节点类型;

1.Node类型

 DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现;
 这个Node接口在Javascript中是作为Node类型实现的;
 除IE之外,在其他所有浏览器中都可以访问到这个类型;

2.document类型

// document类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签;
document; // document;
document.nodeType; // 9;类型值;
document.childNodes[0]; // documentType;第一个子节点对象;
document.childNodes[1]; // HTMLHtmlElement; 对象;

// 如果想直接得到标签的元素节点对象HTMLHtmlElement,可以直接使用documentElement即可;
document.documentElement; // HTMLHtmlElement;

// 很多时候需要得到标签,之前常用的是:document.getElementsByTagName('body')[0];
document.body; // HTMLBodyElement;

// 在之前还有一个文档声明:会作为浏览器的第一个节点来处理;
document.doctype; // documentType;

// 在document中有一些遗留的属性和对象集合,可以快速的帮助我们精确的处理任务;
// 属性
document.title; // 获取和设置标签的值;<br /> document.URL; // 获取URL路径;<br /> document.domain; // 获取域名;<br />     // 当页面中包含来自其他子域的框架或内嵌框架时,能够设置document.domain就非常方便了;<br />     // 由于跨域安全限制,来自不同子域的页面无法通过Javascript通信;<br />     // 而通过将每个页面的document.domain设置为相同的值,这些页面就可以相互访问对方的Javascript对象了;<br /> document.referrer;          // 保存着链接到当前页面的那个页面的URL;<br /> // 对象集合<br /> document.anchors; // 获取文档中带name属性的元素集合;<br /> document.links; // 获取文档中带href属性的元素集合;<br /> document.forms; // 获取文档中<form>元素集合;<br /> document.images; // 获取文档中元素集合;</p> <p><strong>3.Element类型<br /> </strong></p> <p>// Element类型用于表现HTML中的元素节点.在上一章中,介绍了对元素节点进行查找/创建等操作;<br /> // 元素节点的nodeType为1;nodeName为元素的标签名;<br /> // 元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型;<br /> 元素名                     类型<br /> HTML             HTMLHtmlElement;<br /> DIV              HTMLDivElement;<br /> BODY             HTMLBodyElement;<br /> P                HTMLParamElement;</p> <p><strong>4.Text类型 <br /> </strong></p> <pre class="brush:js;"> // Text类型用于表现文本节点类型,文本不包含HTML,或包含转以后的HTML;文本节点的nodeType为3; // 在同时创建两个同一级别的文本节点的时候,会产生分离的两个节点; var box = document.createElement('div'); var text1 = document.createTextNode('Mr'); var text2 = document.createTextNode('Lee!'); box.appendChild(text1); box.appendChild(text2); document.body.appendChild(box); alert(box.childNodes.length); // =>2;两个文本节点; // 把两个同邻的文本节点合并在一起,使用normalize()即可; box.normalize(); // 合并成一个节点; // 将一个节点实现分离; box.firstChild.splitText(3); // 分离一个节点; // Text还提供一些别的DOM操作的方法 var box = document.getElementById('box'); box.firstChild.deleteData(0,2);// 删除从0位置开始的2个字符; box.firstChild.insertData(0,'Hello'); // 从0位置开始添加指定字符; box.firstChild.replaceData(0,2,'Miss'); // 从0位置替换掉2个指定字符; box.firstChild.substringData(0,2); // 从0位置获取2个字符,直接输出; alert(box.firstChild.nodevalue);// 输出操作后的结果;</pre> <p><strong>5.Comment类型</strong></p> <p> Comment类型表示文档中的注释,nodeType是8,nodeName是#comment,nodevalue是注释的内容;<br />      var box = document.getElementById('box');<br />      alert(box.firstChild);                        // Comment;</p> <p><strong>6.Attr类型<br /> </strong> Attr类型表示文档元素中的属性;nodeType为11;nodeName为属性名,nodevalue为属性值;详细内容在上一章;</p> <p><strong>二 DOM扩展<br /> </strong>1.呈现模式<br /> </p> <pre class="brush:js;"> // 从IE6开始区分标准模式和混杂模式(怪异模式),主要看文档的声明; // IE为document对象添加了一个名为compatMode属性,这个属性可以识别IE浏览器的文档处于什么模式; // 如果是标准模式,则返回CSS1Compat;如果是混杂模式则返回BackCompat; if(document.compatMode == 'CSS1Compat'){ alert(document.documentElement.clientWidth); }else{ alert(document.body.clientWidth); }</pre> <p><strong>2.滚动</strong></p> <p> DOM提供了一些滚动页面的方法<br />    document.getElementById('box').scrollIntoView();        // 设置指定可见;</p> <p><strong>3.children属性</strong></p> <p> 由于子节点空白问题,IE和其他浏览器解释不一致;如果只想得到有效子节点,可以使用children属性;这个属性是非标准的;<br />      var box = docuemnt.getElementById('box');<br />      alert(box.children.length);                             // 得到有效子节点数目;</p> <p><strong>4.contains()方法</strong></p> <p> 判断一个节点是不是另一个节点的后代,可以使用contains()方法;<br />     var box = document.getElementById('box');<br />     alert(box.contains(box.firstChild));                    // =>true;</p> <p><strong>三 DOM操作内容<br /> </strong>1.innerText属性<br /> </p> <pre class="brush:js;"> document.getElementById('box').innerText; // 获取文本内容(如有html直接过滤掉); document.getElementById('box').innerText = 'Mr.Lee'; // 设置文本(如有html转义); // PS:除了Firefox之外,其他浏览器均支持这个方法;Firefox的DOM3级提供了另外一个类似的属性:textContent; // 兼容方法 function getInnerText(element){ return (typeof element.textContent == 'string')?element.textContent:element.innerText; } function setInnerText(element,text){ if(typeof element.textContent == 'string'){ element.textContent = text; }else{ element.innerText = text; } }</pre> <p><strong>2.innerHTML属性</strong></p> <p> innerHTML属性可以解析HTML;<br />      document.getElementById('box').innerHTML;                   // 获取文本(不过滤HTML);<br />      document.getElementById('box').innerHTML = '<b>123</b>';    // 加粗的123;<br />  虽然innerHTML可以插入HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了;<br />     box.innerHTML = "";           // <script>元素不能被执行;<br />     box.innerHTML = "<sty1e>background:red;</style>";           // <sty1e>元素不能被执行;</p> <p><strong>3.outerText</strong></p> <p> outerText在取值的时候和innerText一样,同时Firefox不支持;<br />  而且赋值方法相当危险,它不单替换文本内容,还将元素直接抹去;<br />      var box = document.getElementById('box');<br />      box.outerText = '<b>123</b>';<br />      alert(document.getElementById('box'));                       // =>null; 不建议使用;</p> <p><strong>4.outerHTML<br /> </strong></p> <pre class="brush:js;"> // outerHTML属性在取值和innerHTML一致,但和outerText一样,赋值之后将元素抹去; var box = document.getElementById('box'); box.outerHTML = '123'; alert(document.getElementById('box')); // null; // PS:关于最常用的innerHTML属性和节点操作方法的比较;在插入大量HTML标记时,使用innerHTML的效率明显要高很多; // 因为在设置innerHTML时,会创建一个HTML解析器,这个解析器是浏览器级别的;因此执行Javascript会快得多; // 但是,创建和销毁HTML解析器也会带来性能损失,最好控制在最合理的范围内; for(var i=0; i<10; i++){ ul.innerHTML = '<i>item</i>'; // 避免频繁; } // 完善 for(var i=0; i<10; i++){ a = '<li>item</i>'; // 临时保存; } ul.innerHTML = a;</pre> <p><strong>四 小结<br /> </strong></p> <p>DOM是语言中立的API,用于访问和操作HTML和XML文档;<br /> DOM1级将HTML和XML文档形象地看作一个层次化的节点树,可以使用Javascript来操作这个节点树,进而改变底层文档的外观和结构;</p> <p>DOM由各种节点构成,简要总结如下:</p> <p>1.最基本的节点类型是Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node;<br /> 2.document类型表示整个文档,是一组分层节点的根节点;在Javascript中,document对象是document的一个实例;<br /> 使用document对象,有很多种方式可以查询和获取节点;<br /> 3.Element节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和属性;<br /> 4.另外还有一些节点类型,分别表示文本内容/注释/文档类型/CDATA区域和文档片段;</p></div> </div> <div style="clear: both;"></div> <div class="author-info fl"> <div><span class="gray">转载请注明:</span>文章转载自 <a href="https://www.mshxw.com/" class="blue">www.mshxw.com</a></div> <div><span class="gray">本文地址:</span><a href="https://www.mshxw.com/it/103013.html" class="blue">https://www.mshxw.com/it/103013.html</a></div> </div> <div class="prev fl"> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/103042.html">上一篇 Windows系统下使用Sublime搭建nodejs环境</a> </p> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/103014.html">下一篇 javascript制作的简单注册模块表单验证</a> </p> </div> <div class="new_tag fl"> </div> </div> <div class="new_r fr" style="border-radius:10px;"> <div class="tui fl"> <h3>JavaScript相关栏目本月热门文章</h3> <ul> <li><span>1</span><a href="https://www.mshxw.com/it/1041277.html" title="【Linux驱动开发】设备树详解(二)设备树语法详解">【Linux驱动开发】设备树详解(二)设备树语法详解</a></li> <li><span>2</span><a href="https://www.mshxw.com/it/1041273.html" title="别跟客户扯细节">别跟客户扯细节</a></li> <li><span>3</span><a href="https://www.mshxw.com/it/1041266.html" title="Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区">Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区</a></li> <li><span>4</span><a href="https://www.mshxw.com/it/1041261.html" title="【Java】对象处理流(ObjectOutputStream和ObjectInputStream)">【Java】对象处理流(ObjectOutputStream和ObjectInputStream)</a></li> <li><span>5</span><a href="https://www.mshxw.com/it/1041256.html" title="【分页】常见两种SpringBoot项目中分页技巧">【分页】常见两种SpringBoot项目中分页技巧</a></li> <li><span>6</span><a href="https://www.mshxw.com/it/1041299.html" title="一文带你搞懂OAuth2.0">一文带你搞懂OAuth2.0</a></li> <li><span>7</span><a href="https://www.mshxw.com/it/1041297.html" title="我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节:虚拟机与Java虚拟机介绍">我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节:虚拟机与Java虚拟机介绍</a></li> <li><span>8</span><a href="https://www.mshxw.com/it/1041296.html" title="【Spring Cloud】新闻头条微服务项目:FreeMarker模板引擎实现文章静态页面生成">【Spring Cloud】新闻头条微服务项目:FreeMarker模板引擎实现文章静态页面生成</a></li> <li><span>9</span><a href="https://www.mshxw.com/it/1041294.html" title="JavaSE - 封装、static成员和内部类">JavaSE - 封装、static成员和内部类</a></li> <li><span>10</span><a href="https://www.mshxw.com/it/1041291.html" title="树莓派mjpg-streamer实现监控及拍照功能调试">树莓派mjpg-streamer实现监控及拍照功能调试</a></li> <li><span>11</span><a href="https://www.mshxw.com/it/1041289.html" title="用c++写一个蓝屏代码">用c++写一个蓝屏代码</a></li> <li><span>12</span><a href="https://www.mshxw.com/it/1041285.html" title="从JDK8源码中看ArrayList和LinkedList的区别">从JDK8源码中看ArrayList和LinkedList的区别</a></li> <li><span>13</span><a href="https://www.mshxw.com/it/1041281.html" title="idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目">idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目</a></li> <li><span>14</span><a href="https://www.mshxw.com/it/1041282.html" title="在openwrt使用C语言增加ubus接口(包含C uci操作)">在openwrt使用C语言增加ubus接口(包含C uci操作)</a></li> <li><span>15</span><a href="https://www.mshxw.com/it/1041278.html" title="Spring 解决循环依赖">Spring 解决循环依赖</a></li> <li><span>16</span><a href="https://www.mshxw.com/it/1041275.html" title="SpringMVC——基于MVC架构的Spring框架">SpringMVC——基于MVC架构的Spring框架</a></li> <li><span>17</span><a href="https://www.mshxw.com/it/1041272.html" title="Andy‘s First Dictionary C++ STL set应用">Andy‘s First Dictionary C++ STL set应用</a></li> <li><span>18</span><a href="https://www.mshxw.com/it/1041271.html" title="动态内存管理">动态内存管理</a></li> <li><span>19</span><a href="https://www.mshxw.com/it/1041270.html" title="我的创作纪念日">我的创作纪念日</a></li> <li><span>20</span><a href="https://www.mshxw.com/it/1041269.html" title="Docker自定义镜像-Dockerfile">Docker自定义镜像-Dockerfile</a></li> </ul> </div> </div> </div> <!-- 公共尾部 --> <div class="link main"> <div class="link_tit"> <span class="on">热门相关搜索</span> </div> <div class="link_tab"> <div class="link_con"> <a href="http://www.mshxw.com/TAG_1/luyouqishezhi.html">路由器设置</a> <a href="http://www.mshxw.com/TAG_1/mutuopan.html">木托盘</a> <a href="http://www.mshxw.com/TAG_1/baotamianban.html">宝塔面板</a> <a href="http://www.mshxw.com/TAG_1/shaoerpython.html">儿童python教程</a> <a href="http://www.mshxw.com/TAG_1/xinqingdiluo.html">心情低落</a> <a href="http://www.mshxw.com/TAG_1/pengyouquan.html">朋友圈</a> <a href="http://www.mshxw.com/TAG_1/vim.html">vim</a> <a href="http://www.mshxw.com/TAG_1/shuangyiliuxueke.html">双一流学科</a> <a href="http://www.mshxw.com/TAG_1/zhuanshengben.html">专升本</a> <a href="http://www.mshxw.com/TAG_1/wodexuexiao.html">我的学校</a> <a href="http://www.mshxw.com/TAG_1/rijixuexiao.html">日记学校</a> <a href="http://www.mshxw.com/TAG_1/xidianpeixunxuexiao.html">西点培训学校</a> <a href="http://www.mshxw.com/TAG_1/qixiuxuexiao.html">汽修学校</a> <a href="http://www.mshxw.com/TAG_1/qingshu.html">情书</a> <a href="http://www.mshxw.com/TAG_1/huazhuangxuexiao.html">化妆学校</a> <a href="http://www.mshxw.com/TAG_1/tagouwuxiao.html">塔沟武校</a> <a href="http://www.mshxw.com/TAG_1/yixingmuban.html">异形模板</a> <a href="http://www.mshxw.com/TAG_1/xinandaxuepaiming.html">西南大学排名</a> <a href="http://www.mshxw.com/TAG_1/zuijingpirenshengduanju.html">最精辟人生短句</a> <a href="http://www.mshxw.com/TAG_1/6bujiaonizhuihuibeipian.html">6步教你追回被骗的钱</a> <a href="http://www.mshxw.com/TAG_1/nanchangdaxue985.html">南昌大学排名</a> <a href="http://www.mshxw.com/TAG_1/qingchaoshierdi.html">清朝十二帝</a> <a href="http://www.mshxw.com/TAG_1/beijingyinshuaxueyuanpaiming.html">北京印刷学院排名</a> <a href="http://www.mshxw.com/TAG_1/beifanggongyedaxuepaiming.html">北方工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinghangkonghangtiandaxuepaiming.html">北京航空航天大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoujingjimaoyidaxuepaiming.html">首都经济贸易大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguochuanmeidaxuepaiming.html">中国传媒大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoushifandaxuepaiming.html">首都师范大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguodezhidaxue(beijing)paiming.html">中国地质大学(北京)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingxinxikejidaxuepaiming.html">北京信息科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongyangminzudaxuepaiming.html">中央民族大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwudaoxueyuanpaiming.html">北京舞蹈学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdianyingxueyuanpaiming.html">北京电影学院排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguohuquxueyuanpaiming.html">中国戏曲学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeizhengfazhiyexueyuanpaiming.html">河北政法职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeijingmaodaxuepaiming.html">河北经贸大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinzhongdeyingyongjishudaxuepaiming.html">天津中德应用技术大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyixuegaodengzhuankexuejiaopaiming.html">天津医学高等专科学校排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinmeishuxueyuanpaiming.html">天津美术学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyinlexueyuanpaiming.html">天津音乐学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjingongyedaxuepaiming.html">天津工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinggongyedaxuegengdanxueyuanpaiming.html">北京工业大学耿丹学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingjingchaxueyuanpaiming.html">北京警察学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinkejidaxuepaiming.html">天津科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingyoudiandaxue(hongfujiaoou)paiming.html">北京邮电大学(宏福校区)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwanglaozhiyexueyuanpaiming.html">北京网络职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdaxueyixuebupaiming.html">北京大学医学部排名</a> <a href="http://www.mshxw.com/TAG_1/hebeikejidaxuepaiming.html">河北科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeidezhidaxuepaiming.html">河北地质大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeitiyoxueyuanpaiming.html">河北体育学院排名</a> </div> </div> </div> <div class="footer"> <div class="dl_con"> <div class="width1200"> <dl> <dt>学习工具</dt> <dd><a href="https://www.mshxw.com/tools/algebra/" title="代数计算器">代数计算器</a></dd> <dd><a href="https://www.mshxw.com/tools/trigonometry/" title="三角函数计算器">三角函数</a></dd> <dd><a href="https://www.mshxw.com/tools/analytical/" title="解析几何">解析几何</a></dd> <dd><a href="https://www.mshxw.com/tools/solidgeometry/" title="立体几何">立体几何</a></dd> </dl> <dl> <dt>知识解答</dt> <dd><a href="https://www.mshxw.com/ask/1033/" title="教育知识">教育知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1180/" title="百科知识">百科知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1155/" title="生活知识">生活知识</a></dd> <dd><a class="https://www.mshxw.com/ask/1199/" title="常识知识">常识知识</a></dd> </dl> <dl> <dt>写作必备</dt> <dd><a href="https://www.mshxw.com/zuowen/1128/" title="作文大全">作文大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1130/" title="作文素材">作文素材</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1132/" title="句子大全">句子大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1154/" title="实用范文">实用范文</a></dd> </dl> <dl class="mr0"> <dt>关于我们</dt> <dd><a href="https://www.mshxw.com/about/index.html" title="关于我们" rel="nofollow">关于我们</a></dd> <dd><a href="https://www.mshxw.com/about/contact.html" title="联系我们" rel="nofollow">联系我们</a></dd> <dd><a href="https://www.mshxw.com/sitemap/" title="网站地图">网站地图</a></dd> </dl> <div class="dl_ewm"> <div class="wx"> <img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/gzh.jpg" alt="交流群"> <p>名师互学网交流群</p> </div> <div class="wx"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/weixin.jpg" alt="名师互学网客服"> <p>名师互学网客服</p> </div> </div> </div> </div> <div class="copyright"> <p>名师互学网 版权所有 (c)2021-2022 ICP备案号:<a href="https://beian.miit.gov.cn" rel="nofollow">晋ICP备2021003244-6号</a> </p> </div> </div> <!-- 手机端 --> <div class="m_foot_top"> <img src="https://www.mshxw.com/foot.gif" width="192" height="27" alt="我们一直用心在做"><br/> <a href="https://www.mshxw.com/about/index.html">关于我们</a> <a href="https://www.mshxw.com/archiver/">文章归档</a> <a href="https://www.mshxw.com/sitemap">网站地图</a> <a href="https://www.mshxw.com/about/contact.html">联系我们</a> <p>版权所有 (c)2021-2022 MSHXW.COM</p> <p>ICP备案号:<a href="https://beian.miit.gov.cn/" rel="nofollow">晋ICP备2021003244-6号</a></p> </div> <div class="to_top" style="display:none;"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/to_top.png"></div> <!--广告!--> <script type="text/javascript" src="https://www.mshxw.com/skin/sinaskin//kaotop/js/top.js"></script> <script src="https://www.mshxw.com/skin/sinaskin//kaotop/js/fixed.js" type="text/javascript"></script> <!--头条搜索!--> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?018f42187355ee18d1bfcee0487fc91a76ac6319beb05b7dc943033ed22c446d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> <!--头条搜索结束!--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e05fec1c87ee5ca07f1ce57d093866c4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </div> <script type="text/javascript"> $(".alert_kf").click(function() { mantis.requestChat(); }); </script> <script type="text/javascript"> var mySwiper_weixin = new Swiper('.pc_swiper_weixin', { autoplay: 3000, //可选选项,自动滑动 loop: true, speed: 1000, pagination: '.swiper-pagination', paginationClickable: true, }) </script> <script type="text/javascript"> $(function() { $(window).scroll(function() { if ($(window).scrollTop() > 100) { $(".to_top").fadeIn(1000); } else { $(".to_top").fadeOut(1000); } }); $(".to_top").click(function() { if ($('html').scrollTop()) { $('html').animate({ scrollTop: 0 }, 300); return false; } $('body').animate({ scrollTop: 0 }, 300); return false; }); }); </script> </body> </html>