jQuery | change() 与示例

change()是 jQuery 中的一个内置方法，用于检测输入字段值的变化。此方法仅适用于“、和 <select>”元素。</p><p><strong>句法：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-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 undefined-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>  <script> $(document).ready(function() { $("button").click(function() { $("input").change(); }); }); </script> </head> <body> <p>Click the button to see the changed value !!!</p>  <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 src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/jQuery_%7C_change()_with_Examples_0.jpg" alt class="aligncenter size-full wp-image-550018"></p><p>点击“点击我”按钮后—— <br><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/jQuery_%7C_change()_with_Examples_1.jpg" alt width="438" height="117" class="aligncenter size-full wp-image-550020"></p><br><div style="min-height:280px" id="d6f45c53-ff16-4cc5-8b91-eb6ee7037116" class="_ap_apex_ad"></div><br><p><strong>代码#2：</strong><br>在下面的代码中，函数被传递给 change 方法。 </p><div class="hcb_wrap"><pre class="prism undefined-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>  <script> $(document).ready(function() { $(".field").change(function() { $(this).css("background-color", "#7FFF00"); }); }); </script> <style> .field { padding: 5px; } </style> </head> <body>  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 src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/jQuery_%7C_change()_with_Examples_2.jpg" alt width="531" height="93" class="aligncenter size-full wp-image-550026"></p><p>在“输入值：”框中输入“GeeksforGeeks”的值并在框外单击后- <br><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/jQuery_%7C_change()_with_Examples_3.jpg" alt width="535" height="80" class="aligncenter size-full wp-image-550027"></p><p> jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其<strong>“少写，多做”</strong>的理念而广为人知。<br>您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。 </p><div style="min-height:280px" id="82d2079a-8120-480f-9fc7-5cda825d56e7" class="_ap_apex_ad"></div><br></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>  <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>  <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>  <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>