change()是 jQuery 中的一个内置方法，用于检测输入字段值的变化。此方法仅适用于“、 和 <select>”元素。</p> <p><strong>句法 ：</strong> </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-js" data-lang="JavaScript"><code class="replace">$(selector).change(function) </code></pre> </div> <p><strong>参数：</strong>它接受一个可选参数“函数”。<br/><strong>返回值：</strong>返回修改后的元素。<br/><strong>显示 change() 方法工作的 jQuery 代码：</strong><br/><strong>代码#1：</strong><br/>在下面的代码中，没有函数传递给 change 方法。 </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-js" data-lang="JavaScript"><code class="replace"><html> <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.3.1/jquery.min.js"></script> <!--Demo of change method without passing function--> <script> $(document).ready(function() { $("button").click(function() { $("input").change(); }); }); </script> </head> <body> <p>Click the button to see the changed value !!!</p> <!--click on this button and see the change --> <button>Click Me!</button> <p>Enter value: <input value="Donald" onchange="alert(this.value)" type="text"></p> </body> </html> </code></pre> </div> <p><strong>输出：</strong><br/>在点击“点击我”按钮之前—— <br/><img alt="" class="img-fluid" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/jQuery_%7C_change()_with_Examples_0.jpg"/></p> <p>点击“点击我”按钮后—— <br/><img alt="" class="img-fluid" height="117" loading="lazy" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/jQuery_%7C_change()_with_Examples_1.jpg" width="438"/></p> <p></p> <div class="_ap_apex_ad" id="d6f45c53-ff16-4cc5-8b91-eb6ee7037116" style="min-height:280px"></div> <p></p> <p><strong>代码#2：</strong><br/>在下面的代码中，函数被传递给 change 方法。 </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-js" data-lang="JavaScript"><code class="replace"><html> <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.3.1/jquery.min.js"></script> <!--Here function is passed to the change method--> <script> $(document).ready(function() { $(".field").change(function() { $(this).css("background-color", "#7FFF00"); }); }); </script> <style> .field { padding: 5px; } </style> </head> <body> <!--write something and click outside --> Enter Value: <input class="field" type="text"> <p>Write something in the input field, and then press enter or click outside the field.</p> </body> </html> </code></pre> </div> <p><strong>输出：</strong><br/>在“输入值：”框中输入任何值之前 – <br/><img alt="" class="img-fluid" height="93" loading="lazy" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/jQuery_%7C_change()_with_Examples_2.jpg" width="531"/></p> <p>在“输入值：”框中输入“GeeksforGeeks”的值并在框外单击后- <br/><img alt="" class="img-fluid" height="80" loading="lazy" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/jQuery_%7C_change()_with_Examples_3.jpg" width="535"/></p> <p> jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其<strong>“少写，多做”</strong>的理念而广为人知。<br/>您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。 </p> <div class="_ap_apex_ad" id="82d2079a-8120-480f-9fc7-5cda825d56e7" style="min-height:280px"></div> <p></p></div> </article> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://www.imangodoc.com/static/javascript/meili_custom.js"></script> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>