jQuery val方法使用详解与常见场景解析

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，使 Web 开发更加便捷。在 jQuery 中，.val() 方法是一个非常常用的函数，用于获取或设置表单元素的值。本文将深入探讨 .val() 方法的使用、应用场景、注意事项以及相关的扩展知识，确保字数不少于 1000 字。

1. .val() 方法的基本用法

.val() 方法用于获取或设置表单元素的值。它可以应用于以下类型的元素：、</code> 和 <code><select></code>。</p> <h4>1.1 获取值</h4> <p>当 <code>.val()</code> 方法不带参数时，它返回*个匹配元素的值。例如：</p> <pre><code class="language-javascript">var value = $('#inputId').val();</code></pre> <p>这段代码将获取 <code>id</code> 为 <code>inputId</code> 的输入框的值，并将其存储在变量 <code>value</code> 中。</p> <h4>1.2 设置值</h4> <p>当 <code>.val()</code> 方法带参数时，它将设置所有匹配元素的值。例如：</p> <pre><code class="language-javascript">$('#inputId').val('New Value');</code></pre> <p>这段代码将 <code>id</code> 为 <code>inputId</code> 的输入框的值设置为 <code>'New Value'</code>。</p> <h3>2. <code>.val()</code> 方法的应用场景</h3> <p><code>.val()</code> 方法在 Web 开发中有广泛的应用场景，以下是一些常见的例子：</p> <h4>2.1 表单验证</h4> <p>在表单提交之前，通常需要验证用户输入的内容是否符合要求。使用 <code>.val()</code> 方法可以轻松获取用户输入的值，并进行验证。</p> <pre><code class="language-javascript">$('#submitBtn').click(function() { var username = $('#username').val(); if (username.length < 5) { alert('用户名长度不能少于5个字符'); return false; } });</code></pre> <h4>2.2 动态设置表单值</h4> <p>在某些情况下，需要根据用户的操作动态设置表单元素的值。例如，当用户选择某个选项时，自动填充其他输入框。</p> <pre><code class="language-javascript">$('#country').change(function() { var country = $(this).val(); if (country === 'USA') { $('#state').val('California'); } else { $('#state').val(''); } });</code></pre> <h4>2.3 获取多个表单元素的值</h4> <p><code>.val()</code> 方法还可以用于获取多个表单元素的值，并将它们组合成一个数组或对象。</p> <pre><code class="language-javascript">var formData = { username: $('#username').val(), email: $('#email').val(), password: $('#password').val() };</code></pre> <h3>3. <code>.val()</code> 方法的注意事项</h3> <p>虽然 <code>.val()</code> 方法非常方便，但在使用过程中需要注意以下几点：</p> <h4>3.1 处理空值</h4> <p>如果表单元素没有值，<code>.val()</code> 方法将返回空字符串 <code>''</code>。在处理返回值时，需要考虑到这种情况。</p> <pre><code class="language-javascript">var value = $('#inputId').val(); if (value === '') { console.log('输入框为空'); }</code></pre> <h4>3.2 处理 <code><select></code> 元素</h4> <p>对于 <code><select></code> 元素，<code>.val()</code> 方法返回选中的选项的值。如果没有选中的选项，它将返回 <code>null</code>。</p> <pre><code class="language-javascript">var selectedValue = $('#selectId').val(); if (selectedValue === null) { console.log('没有选中的选项'); }</code></pre> <h4>3.3 处理复选框和单选按钮</h4> <p>对于复选框和单选按钮，<code>.val()</code> 方法的行为略有不同。它返回的是选中项的值，而不是布尔值。</p> <p style="text-align:center;"></p> <pre><code class="language-javascript">var checkboxValue = $('#checkboxId').val(); if (checkboxValue === 'on') { console.log('复选框被选中'); }</code></pre> <h3>4. <code>.val()</code> 方法的扩展知识</h3> <p>除了基本的用法，<code>.val()</code> 方法还有一些扩展知识，可以帮助你更灵活地处理表单元素。</p><p><img src="http://jingzhunchuanmei.com/uploads/20260619/1781866982263_d1daae30.png" alt="jQuery val方法使用详解与常见场景解析（图2）" title="jQuery val方法使用详解与常见场景解析（图2）" style="display:block;margin:0 auto;max-width:100%;height:auto;border-radius:6px;" loading="lazy"></p> <h4>4.1 链式调用</h4> <p><code>jQuery</code> 支持链式调用，<code>.val()</code> 方法也可以与其他方法一起使用。</p> <pre><code class="language-javascript">$('#inputId').val('New Value').addClass('highlight');</code></pre> <p>这段代码将设置输入框的值，并为其添加 <code>highlight</code> 类。</p> <h4>4.2 使用函数作为参数</h4> <p><code>.val()</code> 方法可以接受一个函数作为参数，该函数返回要设置的值。这在需要根据当前值动态设置新值时非常有用。</p> <pre><code class="language-javascript">$('#inputId').val(function(index, currentValue) { return currentValue.toUpperCase(); });</code></pre> <p>这段代码将输入框的值转换为大写。</p> <h4>4.3 处理多个表单元素</h4> <p><code>.val()</code> 方法可以同时处理多个表单元素。例如，以下代码将所有输入框的值设置为 <code>'Default Value'</code>。</p> <pre><code class="language-javascript">$('input').val('Default Value');</code></pre> <h3>5. <code>.val()</code> 方法与其他方法的比较</h3> <p>在 <code>jQuery</code> 中，还有其他一些方法可以获取或设置元素的值，例如 <code>.text()</code> 和 <code>.html()</code>。以下是它们之间的比较：</p> <h4>5.1 <code>.val()</code> 与 <code>.text()</code></h4> <p><code>.val()</code> 方法用于获取或设置表单元素的值，而 <code>.text()</code> 方法用于获取或设置元素的文本内容。例如：</p><p><img src="http://jingzhunchuanmei.com/uploads/20260619/1781866982727_2027cf97.png" alt="jQuery val方法使用详解与常见场景解析（图3）" title="jQuery val方法使用详解与常见场景解析（图3）" style="display:block;margin:0 auto;max-width:100%;height:auto;border-radius:6px;" loading="lazy"></p> <pre><code class="language-javascript">var value = $('#inputId').val(); // 获取输入框的值 var text = $('#divId').text(); // 获取 div 的文本内容</code></pre> <h4>5.2 <code>.val()</code> 与 <code>.html()</code></h4> <p><code>.val()</code> 方法用于获取或设置表单元素的值，而 <code>.html()</code> 方法用于获取或设置元素的 HTML 内容。例如：</p><p><img src="http://jingzhunchuanmei.com/uploads/20260619/1781866984029_b665e8df.png" alt="jQuery val方法使用详解与常见场景解析（图4）" title="jQuery val方法使用详解与常见场景解析（图4）" style="display:block;margin:0 auto;max-width:100%;height:auto;border-radius:6px;" loading="lazy"></p> <pre><code class="language-javascript">var value = $('#inputId').val(); // 获取输入框的值 var html = $('#divId').html(); // 获取 div 的 HTML 内容</code></pre> <h3>6. 实际案例</h3> <p>为了更好地理解 <code>.val()</code> 方法的使用，以下是一个实际案例：创建一个简单的表单，用户输入用户名和密码后，点击提交按钮时，验证输入内容并显示结果。</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery .val() Example</title> <script src=""></script> <script type="text/javascript">var ey_1564127251 = {"ClosePage":0,"get_url":"\/index.php?m=api&c=Ajax&a=get_arcrank&aid=9574","buy_url":"\/index.php?m=user&c=Media&a=media_order_buy&_ajax=1","VideoLogicUrl":"\/index.php?m=api&c=Ajax&a=video_logic&_ajax=1","LevelCentreUrl":"\/index.php?m=user&c=Level&a=level_centre","aid":9574};</script> <script type="text/javascript" src="/public/static/common/js/view_arcrank.js?v=v1.5.1"></script> </head> <body> <form id="loginForm"> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <button type="submit">提交</button> </form> <p id="result"></p> <script> $('#loginForm').submit(function(event) { event.preventDefault(); var username = $('#username').val(); var password = $('#password').val(); if (username.length < 5) { $('#result').text('用户名长度不能少于5个字符').css('color', 'red'); } else if (password.length < 6) { $('#result').text('密码长度不能少于6个字符').css('color', 'red'); } else { $('#result').text('登录成功').css('color', 'green'); } }); </script> <script type="text/javascript" src="/public/static/common/js/footprint.js?v=v1.5.1"></script> <script type="text/javascript">footprint_1606269933('9574', '');</script> </body> </html></code></pre> <p>在这个案例中，我们使用 <code>.val()</code> 方法获取用户名和密码的值，并进行验证。如果验证失败，显示错误信息；如果验证成功，显示登录成功的信息。</p> <h3>7. 总结</h3> <p><code>.val()</code> 方法是 <code>jQuery</code> 中一个非常强大的工具，用于获取或设置表单元素的值。它在表单验证、动态设置表单值、获取多个表单元素的值等场景中有着广泛的应用。在使用 <code>.val()</code> 方法时，需要注意处理空值、<code><select></code> 元素、复选框和单选按钮等特殊情况。此外，<code>.val()</code> 方法还支持链式调用、使用函数作为参数等高级用法，使得处理表单元素更加灵活和高效。</p> <p>通过本文的详细讲解，你应该对 <code>.val()</code> 方法有了更深入的理解，并能够在实际项目中灵活运用它来处理表单元素。希望本文能够帮助你更好地掌握 <code>jQuery</code> 的使用，提升 Web 开发的效率和质量。</p></div> <hr /> <div class="row"> <div class="col-lg-7 mb-25"> </div> <div class="col-lg-5 mb-25"> <ul class="share-this-post-list text-lg-end"> <li>分享本文:</li> <li><a href="https://service.weibo.com/share/share.php?url=https://www.jingzhunchuanmei.com/seo_zixun/9574.html&title=jQuery val方法使用详解与常见场景解析" target="_blank" class="facebook-color" rel="noopener"><i class="fab fa-weibo"></i></a></li> <li><a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://www.jingzhunchuanmei.com/seo_zixun/9574.html&title=jQuery val方法使用详解与常见场景解析" target="_blank" class="twitter-color" rel="noopener"><i class="fas fa-share-alt"></i></a></li> </ul> </div> </div> <div class="article-permalink mb-25"> <strong>本文链接：</strong><a href="https://www.jingzhunchuanmei.com/seo_zixun/9574.html">https://www.jingzhunchuanmei.com/seo_zixun/9574.html</a> </div> </article> <div class="box-comment-main mb-50"> <div class="block-title mb-30"> <h2 class="border-dark">上下篇导航</h2> </div> <ul class="category-widget mb-30"> <li><a href="/seo_zixun/9569.html">上一篇：网站必备功能有哪些？提升用户体验的关键要素解析<span></span></a></li> <li><a href="/seo_zixun/9579.html">下一篇：低成本建站怎么做到？5个策略帮你节省预算<span></span></a></li> </ul> </div> </div> <div class="col-lg-4"> <aside class="sidebar"> <div class="block-title mb-30"> <h2 class="border-dark">热门推荐</h2> </div> <div class="owl-carousel owl-theme carousel-arrow-style-1 mb-50"> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://111.170.7.147:99/uploads/collect/20260120/1768890693863_cfaacadb.jpg" alt="网站页面资源预加载策略" title="网站页面资源预加载策略" loading="lazy" decoding="async" /> <a href="/seo_zixun/" class="post-label bg-danger">SEO 资讯</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/seo_zixun/5256.html" class="font-size-18">网站页面资源预加载策略</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-05-05</li> </ul> </div> </div> </div> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://jingzhunchuanmei.com/uploads/20260423/1776909372226_40a11f44.png" alt="邮件营销：沉淀私域互动，让用户复购不停歇 | 出海指南" title="邮件营销：沉淀私域互动，让用户复购不停歇 | 出海指南" loading="lazy" decoding="async" /> <a href="/seo_zixun/" class="post-label bg-danger">SEO 资讯</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/seo_zixun/3795.html" class="font-size-18">邮件营销：沉淀私域互动，让用户复购不停歇 | 出海指南</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-04-23</li> </ul> </div> </div> </div> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://jingzhunchuanmei.com/uploads/20260601/1780302576702_e978ac79.png" alt="揭秘专业布局与设计要点" title="揭秘专业布局与设计要点" loading="lazy" decoding="async" /> <a href="/seo_zixun/" class="post-label bg-danger">SEO 资讯</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/seo_zixun/7422.html" class="font-size-18">揭秘专业布局与设计要点</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-06-01</li> </ul> </div> </div> </div> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://jingzhunchuanmei.com/uploads/20260507/1778113650902_3f19a369.png" alt="谷歌广告投放避坑" title="谷歌广告投放避坑" loading="lazy" decoding="async" /> <a href="/seo_zixun/" class="post-label bg-danger">SEO 资讯</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/seo_zixun/6210.html" class="font-size-18">谷歌广告投放避坑</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-05-07</li> </ul> </div> </div> </div> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://jingzhunchuanmei.com/uploads/20260507/1778110524779_8b991641.png" alt="php pathinfo" title="php pathinfo" loading="lazy" decoding="async" /> <a href="/seo_zixun/" class="post-label bg-danger">SEO 资讯</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/seo_zixun/6123.html" class="font-size-18">php pathinfo</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-05-07</li> </ul> </div> </div> </div> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://jingzhunchuanmei.com/uploads/20260606/1780699506189_614b0ba4.png" alt="用户隐私协议生成工具，如何轻松搞定合规难题？" title="用户隐私协议生成工具，如何轻松搞定合规难题？" loading="lazy" decoding="async" /> <a href="/seo_zixun/" class="post-label bg-danger">SEO 资讯</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/seo_zixun/7900.html" class="font-size-18">用户隐私协议生成工具，如何轻松搞定合规难题？</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-06-06</li> </ul> </div> </div> </div> </div> <div class="block-title mb-30"> <h2 class="border-dark">相关文章</h2> </div> <ul class="trending-box mb-50"> <li> <div class="item-info">2026-06-20</div> <h4><a href="/seo_zixun/9656.html">网站流量异常波动怎么快速定位？12种排查方法全解析</a></h4> </li> <li> <div class="item-info">2026-06-20</div> <h4><a href="/seo_zixun/9655.html">网站到底值不值？2026年老板们别再被短视频误导</a></h4> </li> <li> <div class="item-info">2026-06-20</div> <h4><a href="/seo_zixun/9645.html">网站Schema标记应用案例解析：提升SEO效果的关键</a></h4> </li> <li> <div class="item-info">2026-06-20</div> <h4><a href="/seo_zixun/9639.html">Swift编程语言的核心特性与高效开发解析</a></h4> </li> <li> <div class="item-info">2026-06-19</div> <h4><a href="/seo_zixun/9621.html">如何优化字体加载提升网站速度？</a></h4> </li> <li> <div class="item-info">2026-06-19</div> <h4><a href="/seo_zixun/9616.html">awk变量使用全解析：从基础到进阶的实用技巧</a></h4> </li> <li> <div class="item-info">2026-06-19</div> <h4><a href="/seo_zixun/9610.html">网站设计独特之处：如何打造用户体验与视觉创意的完美结合？</a></h4> </li> <li> <div class="item-info">2026-06-19</div> <h4><a href="/seo_zixun/9605.html">搭建外贸站需要多少钱？成本明细全解析</a></h4> </li> <li> <div class="item-info">2026-06-19</div> <h4><a href="/seo_zixun/9600.html">官网VR展厅开发成本揭秘：高转化价值如何实现？</a></h4> </li> <li> <div class="item-info">2026-06-19</div> <h4><a href="/seo_zixun/9595.html">企业网站制作全流程解析：如何实现标准化项目落地？</a></h4> </li> <li> <div class="item-info">2026-06-19</div> <h4><a href="/seo_zixun/9589.html">无代码建站选哪个平台？功能对比与实用建议</a></h4> </li> <li> <div class="item-info">2026-06-19</div> <h4><a href="/seo_zixun/9584.html">网站维护难题怎么破？实用技巧全解析</a></h4> </li> </ul> <div class="block-title mb-30"> <h2 class="border-dark">最新文章</h2> </div> <ul class="trending-box mb-50"> <li> <div class="item-info">2026-06-20</div> <h4><a href="/guanjianciyanjiu/9657.html">网站制作别踩坑！这些注意事项必须知道</a></h4> </li> <li> <div class="item-info">2026-06-20</div> <h4><a href="/guanjianciyanjiu/9652.html">网站Cookie弹窗合规设置怎么操作？</a></h4> </li> <li> <div class="item-info">2026-06-20</div> <h4><a href="/guanjianciyanjiu/9651.html">Vue.js中如何高效运用SVG打造交互界面？</a></h4> </li> <li> <div class="item-info">2026-06-20</div> <h4><a href="/guanjianciyanjiu/9650.html">网站表单设计如何提升留资率？7个细节帮你优化用户体验</a></h4> </li> <li> <div class="item-info">2026-06-20</div> <h4><a href="/guanjianciyanjiu/9649.html">Docker info命令详解：全面解析系统信息与配置</a></h4> </li> <li> <div class="item-info">2026-06-20</div> <h4><a href="/guanjianciyanjiu/9648.html">网站建设用户测试怎么优化？提升体验与转化率的关键方法全解析</a></h4> </li> <li> <div class="item-info">2026-06-20</div> <h4><a href="/guanjianciyanjiu/9647.html">开发一个SaaS平台要多少钱？成本影响因素全解析</a></h4> </li> <li> <div class="item-info">2026-06-20</div> <h4><a href="/guanjianciyanjiu/9644.html">外贸CRM系统选型：如何找到适合企业的解决方案？</a></h4> </li> </ul> </aside> </div> </div> </div> <link rel="stylesheet" type="text/css" href="/template/pc/skin/css/seo-footer.css?t=1777445529" /><footer class="seo-footer"> <!-- 顶部装饰带 --> <div class="seo-footer__deco"></div> <div class="seo-footer__inner container"> <!-- 品牌简介 --> <div class="seo-footer__col seo-footer__col--brand"> <h3 class="seo-footer__logo">启芯精准传媒 SEO 资讯</h3> <p class="seo-footer__desc"> 专注SEO优化、搜索引擎排名、网站流量增长与数字营销策略，为站长和企业提供实战干货与行业前沿资讯。 </p> <div class="seo-footer__tags"> <span>🔍 SEO优化</span> <span>📈 排名提升</span> <span>📊 数据分析</span> </div> </div> <!-- 栏目导航 --> <div class="seo-footer__col seo-footer__col--nav"> <h4 class="seo-footer__heading">快速导航</h4> <ul class="seo-footer__nav-list"> <li><a href="http://jingzhunchuanmei.com">网站首页</a></li> <li><a href="/seo_zixun/">SEO 资讯</a></li> <li><a href="/youhuajiaocheng/">优化教程</a></li> <li><a href="/guanjianciyanjiu/">关键词研究</a></li> <li><a href="/wangzhanyunying/">网站运营</a></li> <li><a href="/shizhananli/">实战案例</a></li> <li><a href="http://jingzhunchuanmei.com/sitemap.xml" target="_blank">XML 地图</a></li> </ul> </div> <!-- 联系方式 + 关于 --> <div class="seo-footer__col seo-footer__col--contact"> <h4 class="seo-footer__heading">联系与备案</h4> <ul class="seo-footer__info-list"> <li> <span class="seo-footer__info-icon">🏢</span> <span>启芯精准传媒 SEO 资讯</span> </li> <li> <span class="seo-footer__info-icon">🌐</span> <a href="http://jingzhunchuanmei.com">http://jingzhunchuanmei.com</a> </li> <li> <span class="seo-footer__info-icon">📋</span> <span><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">鲁ICP备2026018278号-45</a></span> </li> </ul> </div> </div> <!-- 版权栏 --> <div class="seo-footer__bottom"> <div class="container seo-footer__bottom-inner"> <p class="seo-footer__copyright"> Copyright © <span id="seoYear"></span> 启芯精准传媒 SEO 资讯 All Rights Reserved. </p> <p class="seo-footer__desc-mobile">启芯精准传媒 SEO 资讯专注分享 SEO 优化技巧、搜索引擎算法更新、网站运营策略、关键词排名方法、SEO 工具与实战案例，为站长与从业者提供专业 SEO 资讯。</p> </div> <div style="text-align: center;"> <p style="margin: 0; font-size: 14px; line-height: 1.5;color:#000"> 联系人电话：18632164144 | 联系人邮箱：yaling_chen0923@163.com </p> </div> </div> </footer> <!-- 返回顶部按钮 --> <button class="seo-scroll-top" id="seoScrollTop" aria-label="返回顶部"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/> </svg> </button> <script type="text/javascript" src="/template/pc/skin/mblog/js/jquery-3.6.0.min.js?t=1615440220"></script><script type="text/javascript" src="/template/pc/skin/mblog/js/bootstrap.bundle.min.js?t=1708442068"></script><script type="text/javascript" src="/template/pc/skin/mblog/js/owl.carousel.min.js?t=1524230530"></script><script type="text/javascript" src="/template/pc/skin/mblog/js/custom.js?t=1772623786"></script><!-- SEO utility: outbound rel, image lazy loading, and semantic enrichment --> <script> (function () { var origin = location.origin; // Harden external links and keep internal links clean. var links = document.querySelectorAll('a[href]'); for (var i = 0; i < links.length; i++) { var link = links[i]; var href = link.getAttribute('href') || ''; if (!href || href.indexOf('javascript:') === 0 || href.indexOf('#') === 0) continue; var isExternal = href.indexOf('http://') === 0 || href.indexOf('https://') === 0; if (isExternal && href.indexOf(origin) !== 0) { link.setAttribute('rel', 'nofollow noopener noreferrer'); if (!link.getAttribute('target')) link.setAttribute('target', '_blank'); } } // Normalize image accessibility and loading strategy. var allImgs = document.querySelectorAll('img'); var criticalQuota = 2; for (var j = 0; j < allImgs.length; j++) { var img = allImgs[j]; var alt = img.getAttribute('alt'); var title = img.getAttribute('title'); if (!alt || !alt.trim()) { alt = document.title; img.setAttribute('alt', alt); } if (!title || !title.trim()) { img.setAttribute('title', alt); } if (!img.getAttribute('decoding')) { img.setAttribute('decoding', 'async'); } var isCritical = false; if (criticalQuota > 0) { if (img.closest('.logo-brand') || img.closest('.header-middle .advertisement-banner') || img.closest('.featured-post-item-img') || img.closest('.single-post-img')) { isCritical = true; criticalQuota--; } } if (!img.getAttribute('loading')) { img.setAttribute('loading', isCritical ? 'eager' : 'lazy'); } if (isCritical && !img.getAttribute('fetchpriority')) { img.setAttribute('fetchpriority', 'high'); } } // Mark empty dynamic blocks so CSS can show graceful placeholders. function markEmptyBlocks(containerSelector, itemSelector) { var blocks = document.querySelectorAll(containerSelector); for (var k = 0; k < blocks.length; k++) { if (!blocks[k].querySelector(itemSelector)) { blocks[k].classList.add('is-empty'); } } } markEmptyBlocks('.trending-box, .category-widget, .tags-list', 'li'); markEmptyBlocks('.featured-post-carousel, .carousel-arrow-style-1, .instagram-carousel', '.item, .owl-item'); // Fallback article tags: build clickable keyword tags when article has no bound tags. function buildArticleKeywordTags() { var lists = document.querySelectorAll('.js-article-keywords'); if (!lists.length) return; for (var m = 0; m < lists.length; m++) { var list = lists[m]; if (list.querySelector('li')) continue; var rawKeywords = (list.getAttribute('data-keywords') || '').trim(); if (!rawKeywords) { var keywordsMeta = document.querySelector('meta[name="keywords"]'); rawKeywords = keywordsMeta ? (keywordsMeta.getAttribute('content') || '').trim() : ''; } if (!rawKeywords) continue; var searchBase = (list.getAttribute('data-search-base') || location.origin).replace(/\/+$/, ''); var items = rawKeywords .replace(/，/g, ',') .replace(/、/g, ',') .replace(/\|/g, ',') .replace(/;/g, ',') .split(','); var seen = {}; var count = 0; for (var n = 0; n < items.length && count < 10; n++) { var word = (items[n] || '').trim(); if (!word || seen[word]) continue; seen[word] = true; var li = document.createElement('li'); var a = document.createElement('a'); a.href = searchBase + '/index.php?m=home&c=Search&a=lists&keywords=' + encodeURIComponent(word); a.textContent = '#' + word; li.appendChild(a); list.appendChild(li); count++; } } } buildArticleKeywordTags(); // Keep home channel columns visually aligned on desktop. function equalizeHomeChannelColumns() { var cols = document.querySelectorAll('.home-channel-row .home-channel-col'); if (!cols.length) return; for (var i2 = 0; i2 < cols.length; i2++) { cols[i2].style.minHeight = ''; } if (window.innerWidth < 1200) return; var maxHeight = 0; for (var j2 = 0; j2 < cols.length; j2++) { var h = cols[j2].offsetHeight; if (h > maxHeight) maxHeight = h; } if (!maxHeight) return; for (var k2 = 0; k2 < cols.length; k2++) { cols[k2].style.minHeight = maxHeight + 'px'; } } var equalizeTimer = null; function scheduleEqualizeHomeChannelColumns() { if (equalizeTimer) window.clearTimeout(equalizeTimer); equalizeTimer = window.setTimeout(equalizeHomeChannelColumns, 80); } scheduleEqualizeHomeChannelColumns(); window.addEventListener('load', scheduleEqualizeHomeChannelColumns); window.addEventListener('resize', scheduleEqualizeHomeChannelColumns); })(); </script> <script> document.getElementById('seoYear').textContent = new Date().getFullYear(); // 返回顶部 (function() { var btn = document.getElementById('seoScrollTop'); window.addEventListener('scroll', function() { btn.style.display = window.scrollY > 500 ? 'flex' : 'none'; }); btn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); })(); </script> <script type="text/javascript" src="/public/static/common/js/footprint.js?v=v1.5.1"></script> <script type="text/javascript">footprint_1606269933('9574', '');</script> </body> </html>