JavaScript中＂onchange＂事件的使用方法

在JavaScript中，`onchange`事件是一个常用于表单元素的非常有用的功能，它能够在用户改变元素的值时触发执行一段代码。这对于想要在用户进行某些操作时动态响应用户行为的前端开发者来说至关重要。

在HTML中，`onchange`事件通常作为一个属性添加到表单元素上，比如``、``。当这些元素的值发生变化，并且焦点从元素上移开时（例如，用户选择了一个新的选项，或输入了文本并离开了输入字段），`onchange`事件就会触发。</p> </p> <p><p>以下是`onchange`事件的基本用法：</p> </p> <p><h4>HTML部分</h4> </p> <p><p>在HTML中，你可以直接在表单元素上添加`onchange`属性：</p> </p> <p><pre><code class="language-html"></p> <p><input type="text" id="textInput" onchange="handleChange(event)"></p> <p></p> <p><select id="dropdown" onchange="handleSelectChange(event)"></p> <p><option value="option1">Option 1</option></p> <p><option value="option2">Option 2</option></p> <p></p> <p></select></p> <p></code></pre> </p> <p><h4>JavaScript部分</h4> </p> <p><p>然后在JavaScript中定义对应的处理函数：</p> </p> <p><pre><code class="language-javascript">function handleChange(event) {</p> <p>// 获取变化的值</p> <p>var value = event.target.value;</p> <p>console.log('Input value changed to: ' + value);</p> <p>// 其他处理逻辑</p> <p>}</p> <p>function handleSelectChange(event) {</p> <p>// 获取被选择的值</p> <p>var value = event.target.value;</p> <p>console.log('Selected value changed to: ' + value);</p> <p>// 其他处理逻辑</p> <p>}</p> <p></code></pre> </p> <p><h4>注意事项</h4> </p> <p><p>1. <strong>事件处理程序</strong>：你可以直接在HTML中使用内联的JavaScript作为事件处理程序，但为了保持代码的整洁和可维护性，通常建议使用`addEventListener`方法在JavaScript文件中单独定义事件处理函数。</p> </p> <p style="text-align:center"><img decoding="async" src="http://weicankao.com/wp-content/uploads/2024/05/y4zdtN8.jpg" alt="JavaScript中＂onchange＂事件的使用方法" title="JavaScript中＂onchange＂事件的使用方法"></p> </p> <p><pre><code class="language-javascript">document.getElementById('textInput').addEventListener('change', handleChange);</p> <p>document.getElementById('dropdown').addEventListener('change', handleSelectChange);</p> <p></code></pre> </p> <p><p>2. <strong>事件对象</strong>：`event`对象是传递给事件处理函数的，它包含了事件相关的各种信息。在这个场景中，我们可以通过`event.target`访问到触发事件的元素。</p> </p> <p><p>3. <strong>兼容性</strong>：`onchange`事件几乎在所有浏览器上都有很好的兼容性，可以放心使用。</p> </p> <p><p>4. <strong>触发时机</strong>：需要注意的是，`onchange`事件不会在用户正在输入时触发，而是在输入完成且焦点离开输入元素后触发。</p> </p> <p><p>通过上述方式，你就可以在前端项目中有效地利用`onchange`事件，以响应用户的交互操作，并执行相应的逻辑，从而提升用户的操作体验和页面的动态交互性。</p></p> </div> <div class="single-credit"> 本文来自网络，不代表微参考立场，转载请注明出处：<a href="http://www.weicankao.com/js/745.html"">http://www.weicankao.com/js/745.html</a> </div> <div class="entry-footer clear"> <div class="entry-footer-right"> </div> </div> <div class="entry-bottom clear"> <div class="entry-tags"> </div> <span class="custom-share"> <span class="social-share" data-sites="wechat, weibo, qq, qzone"></span> </span> </div> </article> <div class="post-nav clear"> <div class="post-nav-previous"><i class="fa fa-angle-left"></i> 上一篇<a href="http://www.weicankao.com/js/747.html" rel="next">如何使用JavaScript从JSON文件中获取数据</a></div> <div class="post-nav-next">下一篇 <i class="fa fa-angle-right"></i><a href="http://www.weicankao.com/js/743.html" rel="prev">JavaScript中的’break’关键字的作用是什么？</a></div> </div> <div class="related-content"> <h3 class="section-title">相关推荐</h3> <ul class="clear"> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3388.html">如何用JavaScript确定元素的高度？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 38<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3352.html">如何使用JavaScript确定元素的高度？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 34<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3343.html">如何实现JavaScript页面刷新机制？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 24<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3342.html">如何监控JavaScript中的输入事件？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 25<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3324.html">如何使用JavaScript中的switch语句来执行多分支逻辑？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 22<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3313.html">如何将JavaScript字符串转换为数字形式？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 26<em>阅读</em></span> </span> </li> </ul> </div> </main> </div> </div> <aside id="secondary" class="widget-area sidebar"> <div class="sidebar__inner"> <div id="search-3" class="widget widget_search"><form id="searchform" method="get" action="http://www.weicankao.com/"> <input type="search" name="s" class="search-input" placeholder="请输入关键词" autocomplete="off"> <button type="submit" class="search-submit">搜索</button> </form></div><div id="iux-recent-3" class="widget widget-iux-recent widget_posts_thumbnail"><h2 class="widget-title">近期文章</h2><ul><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/3395.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//085d2a44-08.jpg&w=150&h=90" alt="如何以慢动作播放安卓上的Vue动画效果？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/3395.html" rel="bookmark">如何以慢动作播放安卓上的Vue动画效果？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/3394.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//dfba98fc-08.jpg&w=150&h=90" alt="CSS3: 前端设计的新纪元带来了哪些创新？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/3394.html" rel="bookmark">CSS3: 前端设计的新纪元带来了哪些创新？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/3393.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//e77147dd-08.jpg&w=150&h=90" alt="ECS在前端技术领域中扮演着怎样的角色？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/3393.html" rel="bookmark">ECS在前端技术领域中扮演着怎样的角色？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/3392.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//39b7d544-08.jpg&w=150&h=90" alt="空格在前端设计中代表什么符号？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/3392.html" rel="bookmark">空格在前端设计中代表什么符号？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/3391.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//6962d7fb-08.jpg&w=150&h=90" alt="如何运用CSS梯度生成器创建多彩背景效果？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/3391.html" rel="bookmark">如何运用CSS梯度生成器创建多彩背景效果？</a><div class="entry-meta">2024年 8月 19日</div></div></li></ul></div><div id="media_image-3" class="widget widget_media_image"><img width="300" height="300" src="http://www.weicankao.com/wp-content/uploads/2024/05/1-300x300.png" class="image wp-image-125 attachment-medium size-medium" alt="" style="max-width: 100%; height: auto;" decoding="async" srcset="http://www.weicankao.com/wp-content/uploads/2024/05/1-300x300.png 300w, http://www.weicankao.com/wp-content/uploads/2024/05/1-150x150.png 150w, http://www.weicankao.com/wp-content/uploads/2024/05/1-768x768.png 768w, http://www.weicankao.com/wp-content/uploads/2024/05/1.png 1000w" sizes="(max-width: 300px) 100vw, 300px" loading="eager" /></div><div id="iux-views-3" class="widget widget-iux-views widget_posts_thumbnail"><h2 class="widget-title">浏览最多的文章</h2><ul><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/1729.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/Z68gk0aTi4.jpg&w=150&h=90" alt="如何处理CSS下拉菜单被遮挡的问题"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/1729.html" rel="bookmark">如何处理CSS下拉菜单被遮挡的问题</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a href="http://www.weicankao.com/css/30.html" rel="bookmark"><div class="thumbnail-wrap"><img width="150" height="90" src="http://www.weicankao.com/wp-content/uploads/2024/05/qROfSNf8dp-150x90.jpg" class="attachment-iux_widget_thumb size-iux_widget_thumb wp-post-image" decoding="async" loading="eager" title="如何运用CSS提升网页视觉效果缩略图" alt="如何运用CSS提升网页视觉效果缩略图" /></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/30.html" rel="bookmark">如何运用CSS提升网页视觉效果</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/245.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/5wQI4KFnj7.jpg&w=150&h=90" alt="如何清除Vue路由的缓存"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/245.html" rel="bookmark">如何清除Vue路由的缓存</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/3030.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//a5fdd251-07.jpg&w=150&h=90" alt="如何设计Vue页面以支持多模板架构？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/3030.html" rel="bookmark">如何设计Vue页面以支持多模板架构？</a><div class="entry-meta">2024年 7月 23日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/3360.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//19ea8d06-08.jpg&w=150&h=90" alt="在前端开发中，ECS代表了什么？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/3360.html" rel="bookmark">在前端开发中，ECS代表了什么？</a><div class="entry-meta">2024年 8月 9日</div></div></li></ul></div><div id="iux-random-3" class="widget widget-iux-random widget_posts_thumbnail"><h2 class="widget-title">随机文章</h2><ul><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/2292.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://www.weicankao.com/wp-content/uploads/2024/06/q8fY7Jv.jpg&w=150&h=90" alt="HTML5与CSS3的最新特性有哪些"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/2292.html" rel="bookmark">HTML5与CSS3的最新特性有哪些</a><div class="entry-meta">2024年 6月 28日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/2768.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//63f4f239-07.jpg&w=150&h=90" alt="如何调整CSS中的元素厚度？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/2768.html" rel="bookmark">如何调整CSS中的元素厚度？</a><div class="entry-meta">2024年 7月 17日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/js/869.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/8mwWU6sXs.jpg&w=150&h=90" alt="JavaScript中＂join＂方法的使用指南"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/js/869.html" rel="bookmark">JavaScript中＂join＂方法的使用指南</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/1885.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/U8H08.jpg&w=150&h=90" alt="学习前端开发中的Node.js难度如何？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/1885.html" rel="bookmark">学习前端开发中的Node.js难度如何？</a><div class="entry-meta">2024年 5月 30日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/3312.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//ab375e18-08.jpg&w=150&h=90" alt="CSS 层的深度如何调整？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/3312.html" rel="bookmark">CSS 层的深度如何调整？</a><div class="entry-meta">2024年 8月 9日</div></div></li></ul></div><div id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="widget-title">标签</h2><div class="tagcloud"><a href="http://www.weicankao.com/tag/div" class="tag-cloud-link tag-link-27 tag-link-position-1" style="font-size: 11.5pt;" aria-label="div (7 项)">div</a> <a href="http://www.weicankao.com/tag/%e4%bc%aa%e7%b1%bb" class="tag-cloud-link tag-link-35 tag-link-position-2" style="font-size: 11.5pt;" aria-label="伪类 (7 项)">伪类</a> <a href="http://www.weicankao.com/tag/%e5%87%bd%e6%95%b0" class="tag-cloud-link tag-link-7 tag-link-position-3" style="font-size: 21.066666666667pt;" aria-label="函数 (52 项)">函数</a> <a href="http://www.weicankao.com/tag/%e5%8f%82%e6%95%b0" class="tag-cloud-link tag-link-18 tag-link-position-4" style="font-size: 14.766666666667pt;" aria-label="参数 (14 项)">参数</a> <a href="http://www.weicankao.com/tag/%e5%90%ab%e4%b9%89" class="tag-cloud-link tag-link-30 tag-link-position-5" style="font-size: 13.6pt;" aria-label="含义 (11 项)">含义</a> <a href="http://www.weicankao.com/tag/%e5%ae%9a%e4%b9%89" class="tag-cloud-link tag-link-24 tag-link-position-6" style="font-size: 18.383333333333pt;" aria-label="定义 (30 项)">定义</a> <a href="http://www.weicankao.com/tag/%e5%af%b9%e9%bd%90" class="tag-cloud-link tag-link-33 tag-link-position-7" style="font-size: 8pt;" aria-label="对齐 (3 项)">对齐</a> <a href="http://www.weicankao.com/tag/%e5%b1%85%e4%b8%ad" class="tag-cloud-link tag-link-10 tag-link-position-8" style="font-size: 14.416666666667pt;" aria-label="居中 (13 项)">居中</a> <a href="http://www.weicankao.com/tag/%e5%b1%9e%e6%80%a7" class="tag-cloud-link tag-link-15 tag-link-position-9" style="font-size: 22pt;" aria-label="属性 (62 项)">属性</a> <a href="http://www.weicankao.com/tag/%e5%b5%8c%e5%85%a5" class="tag-cloud-link tag-link-9 tag-link-position-10" style="font-size: 10.916666666667pt;" aria-label="嵌入 (6 项)">嵌入</a> <a href="http://www.weicankao.com/tag/%e5%ba%94%e7%94%a8" class="tag-cloud-link tag-link-23 tag-link-position-11" style="font-size: 18.733333333333pt;" aria-label="应用 (32 项)">应用</a> <a href="http://www.weicankao.com/tag/%e5%be%aa%e7%8e%af" class="tag-cloud-link tag-link-17 tag-link-position-12" style="font-size: 13.6pt;" aria-label="循环 (11 项)">循环</a> <a href="http://www.weicankao.com/tag/%e6%8f%92%e5%85%a5" class="tag-cloud-link tag-link-25 tag-link-position-13" style="font-size: 11.5pt;" aria-label="插入 (7 项)">插入</a> <a href="http://www.weicankao.com/tag/%e6%95%88%e6%9e%9c" class="tag-cloud-link tag-link-13 tag-link-position-14" style="font-size: 15pt;" aria-label="效果 (15 项)">效果</a> <a href="http://www.weicankao.com/tag/%e6%96%87%e5%ad%97" class="tag-cloud-link tag-link-29 tag-link-position-15" style="font-size: 9.1666666666667pt;" aria-label="文字 (4 项)">文字</a> <a href="http://www.weicankao.com/tag/%e6%96%87%e6%9c%ac" class="tag-cloud-link tag-link-20 tag-link-position-16" style="font-size: 13.95pt;" aria-label="文本 (12 项)">文本</a> <a href="http://www.weicankao.com/tag/%e6%a0%87%e7%ad%be" class="tag-cloud-link tag-link-16 tag-link-position-17" style="font-size: 20.95pt;" aria-label="标签 (50 项)">标签</a> <a href="http://www.weicankao.com/tag/%e6%a0%b7%e5%bc%8f" class="tag-cloud-link tag-link-11 tag-link-position-18" style="font-size: 18.966666666667pt;" aria-label="样式 (34 项)">样式</a> <a href="http://www.weicankao.com/tag/%e6%a1%86%e6%9e%b6" class="tag-cloud-link tag-link-22 tag-link-position-19" style="font-size: 18.616666666667pt;" aria-label="框架 (31 项)">框架</a> <a href="http://www.weicankao.com/tag/%e6%b3%a8%e9%87%8a" class="tag-cloud-link tag-link-8 tag-link-position-20" style="font-size: 13.95pt;" aria-label="注释 (12 项)">注释</a> <a href="http://www.weicankao.com/tag/%e6%b5%ae%e5%8a%a8" class="tag-cloud-link tag-link-38 tag-link-position-21" style="font-size: 8pt;" aria-label="浮动 (3 项)">浮动</a> <a href="http://www.weicankao.com/tag/%e6%bb%9a%e5%8a%a8" class="tag-cloud-link tag-link-12 tag-link-position-22" style="font-size: 12.083333333333pt;" aria-label="滚动 (8 项)">滚动</a> <a href="http://www.weicankao.com/tag/%e7%bd%91%e9%a1%b5" class="tag-cloud-link tag-link-14 tag-link-position-23" style="font-size: 12.666666666667pt;" aria-label="网页 (9 项)">网页</a> <a href="http://www.weicankao.com/tag/%e8%8f%9c%e5%8d%95" class="tag-cloud-link tag-link-19 tag-link-position-24" style="font-size: 14.416666666667pt;" aria-label="菜单 (13 项)">菜单</a> <a href="http://www.weicankao.com/tag/%e8%a7%84%e5%88%99" class="tag-cloud-link tag-link-39 tag-link-position-25" style="font-size: 9.1666666666667pt;" aria-label="规则 (4 项)">规则</a> <a href="http://www.weicankao.com/tag/%e8%a7%a3%e6%9e%90" class="tag-cloud-link tag-link-28 tag-link-position-26" style="font-size: 15pt;" aria-label="解析 (15 项)">解析</a> <a href="http://www.weicankao.com/tag/%e8%be%b9%e8%b7%9d" class="tag-cloud-link tag-link-37 tag-link-position-27" style="font-size: 10.916666666667pt;" aria-label="边距 (6 项)">边距</a> <a href="http://www.weicankao.com/tag/%e9%94%9a%e7%82%b9" class="tag-cloud-link tag-link-21 tag-link-position-28" style="font-size: 8pt;" aria-label="锚点 (3 项)">锚点</a> <a href="http://www.weicankao.com/tag/%e9%97%b4%e8%b7%9d" class="tag-cloud-link tag-link-31 tag-link-position-29" style="font-size: 11.5pt;" aria-label="间距 (7 项)">间距</a> <a href="http://www.weicankao.com/tag/%e9%9a%90%e8%97%8f" class="tag-cloud-link tag-link-26 tag-link-position-30" style="font-size: 11.5pt;" aria-label="隐藏 (7 项)">隐藏</a></div> </div> </div> </aside> </div> <footer id="colophon" class="site-footer clear"> <div class="clear"></div> <div id="site-bottom" class="clear"> <div class="container"> <div class="menu-primary-container"><ul id="footer-menu" class="footer-nav"><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7"><a href="http://www.weicankao.com/./css">css</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-9"><a href="http://www.weicankao.com/./js">js</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10"><a href="http://www.weicankao.com/./vue">vue</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2153"><a href="http://www.weicankao.com/./qianduan">前端问答</a></li> </ul></div> <div class="site-info"> © 2024 <a href="http://weicankao.com">微参考</a> </div> </div> </div>  </footer> </div> <div class="bottom-right"> <div id="back-top" class="bottom-icon"> <a href="#top" title="返回顶部"> <span class="icon"><i class="fa fa-chevron-up"></i></span> <span class="text">返回顶部</span> </a> </div> </div> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/superfish.js?ver=6.6.2" id="superfish-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/jquery.slicknav.js?ver=6.6.2" id="slicknav-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/modernizr.js?ver=6.6.2" id="modernizr-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/html5.js?ver=6.6.2" id="html5-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/jquery.bxslider.js?ver=6.6.2" id="bxslider-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/index.js?ver=20200320" id="index-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/qrcode.js?ver=6.6.2" id="qrcode-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/social-share.js?ver=6.6.2" id="social-share-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/jquery.custom.js?ver=20220101" id="iux-custom-js"></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <script> (function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; /*-----------------------------------------------------------------------------------*/ /* Slick Mobile Menu /*-----------------------------------------------------------------------------------*/ $('#primary-menu').slicknav({ prependTo: '#slick-mobile-menu', allowParentLinks: true, label: '导航' }); }); })(jQuery); </script> <script src="http://www.weicankao.com/wp-content/themes/iux/assets/js/sticky-sidebar.min.js"></script> <script> (function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; $(window).load(function() { var stickySidebar = new StickySidebar('#secondary', { topSpacing: 20, bottomSpacing: 20, containerSelector: '.site_container', innerWrapperSelector: '.sidebar__inner' }); }); }); })(jQuery); </script> <script> (function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; if ($(window).width() >= 960) { var mn = $(".site-header"); var mns = "main-nav-scrolled"; var hdr = $('.top-bar').height(); $(window).scroll(function() { if( $(this).scrollTop() > hdr ) { mn.addClass(mns); $('.header-space').css('display','block'); } else { mn.removeClass(mns); $('.header-space').css('display','none'); } }); } }); })(jQuery); </script> </body> </html>