jQuery | change（）及其示例-yiteyi-C++库

这个改变是jQuery中的一个内置方法，用于检测输入字段值的变化。此方法仅适用于“ ，和<select> </p><div class='code-block code-block-2' style='margin: 8px 0; clear: both;'> null</div> <p> <strong> 语法： </strong> </p> <pre> $(selector).change(function) </pre> <p> <strong> 参数： </strong> 它接受一个可选参数“function”。 <strong> 返回值： </strong> 它返回修改后的元素。 <strong> 显示change（）方法工作的jQuery代码： </strong> <strong> 代码#1： </strong> 在下面的代码中，没有函数传递给change方法。 </p> <div class="code-block"> <div class="code-gutter"> <div class="editor-buttons-container"> <div class="editor-buttons"> <div class="editor-buttons-div" title="Run and Edit"> <i class="gfg-icon gfg-icon_copy code-sidebar-button padding-2px copy-code-button" id="copy-code-button" title="Copy Code"> </i> </p> <div class="ring-load" id="run-and-edit-loader"> </div> <p> <i class="gfg-icon gfg-icon_edit_1 padding-2px code-sidebar-button" id="run-and-edit-button" lang="xml" title="Edit Code"> </i> <i class="gfg-icon gfg-icon_close-editor padding-2px code-sidebar-button close-code-editor-button" id="close-code-editor-button" title="Close Editor"> </i> </p> <div class="ring-load" id="run-code-loader"> </div> <p> <i class="gfg-icon gfg-icon_play padding-2px code-sidebar-button" id="run-code-button" lang="xml" title="Run Code and See Output"> </i> </p> <div class="ring-load" id="generate-url-loader"> </div> <p> <i class="gfg-icon gfg-icon_link padding-2px code-sidebar-button generate-url-and-run-button" id="generate-url-and-run-button" lang="xml" title="Run Code and Generate IDE URL"> </i> <i class="gfg-icon gfg-icon_dark-toggle padding-2px code-sidebar-button dark-editor-button" title="Dark Mode"> </i> <i class="gfg-icon gfg-icon_code padding-2px code-sidebar-button edit-on-ide-button" id="edit-on-ide-button" lang="xml" title="Edit on IDE"> </i> </p> </p></div> </p></div> </p></div> </p></div> <div class="code-container"> <div class="syntaxhighlighter nogutter" id="highlighter_434844"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="plain"> < </code> <code class="keyword"> html </code> <code class="plain"> > </code> </div> <div class="line number2 index1 alt1"> <code class="undefined spaces"> </code> </div> <div class="line number3 index2 alt2"> <code class="plain"> < </code> <code class="keyword"> head </code> <code class="plain"> > </code> </div> <div class="line number4 index3 alt1"> <code class="undefined spaces"> </code> <code class="plain"> < </code> <code class="keyword"> script </code> <code class="plain"> src=" <a href="https://www.yiteyi.com/?golink=aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvbGlicy8=" > https://ajax.googleapis.com/ajax/libs/ </a> </code> </div> <div class="line number5 index4 alt2"> <code class="undefined spaces"> </code> <code class="plain"> jquery/3.3.1/jquery.min.js"></ </code> <code class="keyword"> script </code> <code class="plain"> > </code> </div> <div class="line number6 index5 alt1"> <code class="undefined spaces"> </code> <code class="comments">  </code> </div> <div class="line number7 index6 alt2"> <code class="undefined spaces"> </code> <code class="plain"> < </code> <code class="keyword"> script </code> <code class="plain"> > </code> </div> <div class="line number8 index7 alt1"> <code class="undefined spaces"> </code> <code class="plain"> $(document).ready(function() { </code> </div> <div class="line number9 index8 alt2"> <code class="undefined spaces"> </code> <code class="plain"> $("button").click(function() { </code> </div> <div class="line number10 index9 alt1"> <code class="undefined spaces"> </code> <code class="plain"> $("input").change(); </code> </div> <div class="line number11 index10 alt2"> <code class="undefined spaces"> </code> <code class="plain"> }); </code> </div> <div class="line number12 index11 alt1"> <code class="undefined spaces"> </code> <code class="plain"> }); </code> </div> <div class="line number13 index12 alt2"> <code class="undefined spaces"> </code> <code class="plain"> </ </code> <code class="keyword"> script </code> <code class="plain"> > </code> </div> <div class="line number14 index13 alt1"> <code class="plain"> </ </code> <code class="keyword"> head </code> <code class="plain"> > </code> </div> <div class="line number15 index14 alt2"> <code class="undefined spaces"> </code> </div> <div class="line number16 index15 alt1"> <code class="plain"> < </code> <code class="keyword"> body </code> <code class="plain"> > </code> </div> <div class="line number17 index16 alt2"> <code class="undefined spaces"> </code> <code class="plain"> < </code> <code class="keyword"> p </code> <code class="plain"> >Click the button to see the changed value !!!</ </code> <code class="keyword"> p </code> <code class="plain"> > </code> </div> <div class="line number18 index17 alt1"> <code class="undefined spaces"> </code> <code class="comments">  </code> </div> <div class="line number19 index18 alt2"> <code class="undefined spaces"> </code> <code class="plain"> < </code> <code class="keyword"> button </code> <code class="plain"> >Click Me!</ </code> <code class="keyword"> button </code> <code class="plain"> > </code> </div> <div class="line number20 index19 alt1"> <code class="undefined spaces"> </code> <code class="plain"> < </code> <code class="keyword"> p </code> <code class="plain"> >Enter value: </code> </div> <div class="line number21 index20 alt2"> <code class="undefined spaces"> </code> <code class="plain"> < </code> <code class="keyword"> input </code> <code class="color1"> value </code> <code class="plain"> = </code> <code class="string"> "Donald" </code> <code class="color1"> onchange </code> <code class="plain"> = </code> <code class="string"> "alert(this.value)" </code> </div> <div class="line number22 index21 alt1"> <code class="undefined spaces"> </code> <code class="color1"> type </code> <code class="plain"> = </code> <code class="string"> "text" </code> <code class="plain"> ></ </code> <code class="keyword"> p </code> <code class="plain"> > </code> </div> <div class="line number23 index22 alt2"> <code class="plain"> </ </code> <code class="keyword"> body </code> <code class="plain"> > </code> </div> <div class="line number24 index23 alt1"> <code class="undefined spaces"> </code> </div> <div class="line number25 index24 alt2"> <code class="plain"> </ </code> <code class="keyword"> html </code> <code class="plain"> > </code> </div> </p></div> </td> </tr> </tbody> </table></div> </p></div> <div class="code-editor-container"> </div> </p></div> <div class="code-output-container"> <div class="output-block"> <i class="gfg-icon gfg-icon_arrow-right-editor padding-2px code-sidebar-button output-icon" id="output-icon" title="Output"> </i> </p> <pre class="output-pre"></pre> </p></div> <div class="ide-link-div"> <i class="gfg-icon gfg-icon_copy padding-2px code-sidebar-button copy-url-button" id="copy-url-button" title="Copy Generated Ide URL"> </i> </p> <pre id="ide-url"></pre> </p></div> </p></div> <p> <strong> 输出： </strong> 单击“单击我”按钮之前- <img alt="图片[1]-jQuery | change（）及其示例-yiteyi-C++库" decoding="async" class="aligncenter size-full wp-image-550018" src="https://www.yiteyi.com/wp-content/uploads/geeks/20200416/geeks_Screenshot-from-2020-04-16-01-33-26.png"/> </p> <p> 点击“点击我”按钮后- <img alt="图片[2]-jQuery | change（）及其示例-yiteyi-C++库" fetchpriority="high" decoding="async" class="aligncenter size-full wp-image-550020" height="117" src="https://www.yiteyi.com/wp-content/uploads/geeks/20200416/geeks_Screenshot-from-2020-04-16-01-33-39.png" width="438"/> </p> <div id="AP_G4GR_5"> </div> <p> <strong> 代码#2： </strong> 在下面的代码中，函数被传递给change方法。 </p> <div class="code-block"> <div class="code-gutter"> <div class="editor-buttons-container"> <div class="editor-buttons"> <div class="editor-buttons-div" title="Run and Edit"> <i class="gfg-icon gfg-icon_copy code-sidebar-button padding-2px copy-code-button" id="copy-code-button" title="Copy Code"> </i> </p> <div class="ring-load" id="run-and-edit-loader"> </div> <p> <i class="gfg-icon gfg-icon_edit_1 padding-2px code-sidebar-button" id="run-and-edit-button" lang="xml" title="Edit Code"> </i> <i class="gfg-icon gfg-icon_close-editor padding-2px code-sidebar-button close-code-editor-button" id="close-code-editor-button" title="Close Editor"> </i> </p> <div class="ring-load" id="run-code-loader"> </div> <p> <i class="gfg-icon gfg-icon_play padding-2px code-sidebar-button" id="run-code-button" lang="xml" title="Run Code and See Output"> </i> </p> <div class="ring-load" id="generate-url-loader"> </div> <p> <i class="gfg-icon gfg-icon_link padding-2px code-sidebar-button generate-url-and-run-button" id="generate-url-and-run-button" lang="xml" title="Run Code and Generate IDE URL"> </i> <i class="gfg-icon gfg-icon_dark-toggle padding-2px code-sidebar-button dark-editor-button" title="Dark Mode"> </i> <i class="gfg-icon gfg-icon_code padding-2px code-sidebar-button edit-on-ide-button" id="edit-on-ide-button" lang="xml" title="Edit on IDE"> </i> </p> </p></div> </p></div> </p></div> </p></div> <div class="code-container"> <div class="syntaxhighlighter nogutter" id="highlighter_205104"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="plain"> < </code> <code class="keyword"> html </code> <code class="plain"> > </code> </div> <div class="line number2 index1 alt1"> <code class="undefined spaces"> </code> </div> <div class="line number3 index2 alt2"> <code class="plain"> < </code> <code class="keyword"> head </code> <code class="plain"> > </code> </div> <div class="line number4 index3 alt1"> <code class="undefined spaces"> </code> <code class="plain"> < </code> <code class="keyword"> script </code> <code class="plain"> src=" <a href="https://www.yiteyi.com/?golink=aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvbGlicy/CoA==" > https://ajax.googleapis.com/ajax/libs/ </a> </code> </div> <div class="line number5 index4 alt2"> <code class="undefined spaces"> </code> <code class="plain"> jquery/3.3.1/jquery.min.js"></ </code> <code class="keyword"> script </code> <code class="plain"> > </code> </div> <div class="line number6 index5 alt1"> <code class="undefined spaces"> </code> <code class="comments">  </code> </div> <div class="line number7 index6 alt2"> <code class="undefined spaces"> </code> <code class="plain"> < </code> <code class="keyword"> script </code> <code class="plain"> > </code> </div> <div class="line number8 index7 alt1"> <code class="undefined spaces"> </code> <code class="plain"> $(document).ready(function() { </code> </div> <div class="line number9 index8 alt2"> <code class="undefined spaces"> </code> <code class="plain"> $(".field").change(function() { </code> </div> <div class="line number10 index9 alt1"> <code class="undefined spaces"> </code> <code class="plain"> $(this).css("background-color", "#7FFF00"); </code> </div> <div class="line number11 index10 alt2"> <code class="undefined spaces"> </code> <code class="plain"> }); </code> </div> <div class="line number12 index11 alt1"> <code class="undefined spaces"> </code> <code class="plain"> }); </code> </div> <div class="line number13 index12 alt2"> <code class="undefined spaces"> </code> <code class="plain"> </ </code> <code class="keyword"> script </code> <code class="plain"> > </code> </div> <div class="line number14 index13 alt1"> <code class="undefined spaces"> </code> <code class="plain"> < </code> <code class="keyword"> style </code> <code class="plain"> > </code> </div> <div class="line number15 index14 alt2"> <code class="undefined spaces"> </code> <code class="plain"> .field { </code> </div> <div class="line number16 index15 alt1"> <code class="undefined spaces"> </code> <code class="plain"> padding: 5px; </code> </div> <div class="line number17 index16 alt2"> <code class="undefined spaces"> </code> <code class="plain"> } </code> </div> <div class="line number18 index17 alt1"> <code class="undefined spaces"> </code> <code class="plain"> </ </code> <code class="keyword"> style </code> <code class="plain"> > </code> </div> <div class="line number19 index18 alt2"> <code class="plain"> </ </code> <code class="keyword"> head </code> <code class="plain"> > </code> </div> <div class="line number20 index19 alt1"> <code class="undefined spaces"> </code> </div> <div class="line number21 index20 alt2"> <code class="plain"> < </code> <code class="keyword"> body </code> <code class="plain"> > </code> </div> <div class="line number22 index21 alt1"> <code class="undefined spaces"> </code> <code class="comments">  </code> </div> <div class="line number23 index22 alt2"> <code class="undefined spaces"> </code> <code class="plain"> Enter Value: </code> </div> <div class="line number24 index23 alt1"> <code class="undefined spaces"> </code> <code class="plain"> < </code> <code class="keyword"> input </code> <code class="color1"> class </code> <code class="plain"> = </code> <code class="string"> "field" </code> <code class="color1"> type </code> <code class="plain"> = </code> <code class="string"> "text" </code> <code class="plain"> > </code> </div> <div class="line number25 index24 alt2"> <code class="undefined spaces"> </code> <code class="plain"> < </code> <code class="keyword"> p </code> <code class="plain"> >Write something in the input field, and then </code> </div> <div class="line number26 index25 alt1"> <code class="undefined spaces"> </code> <code class="plain"> press enter or click outside the field.</ </code> <code class="keyword"> p </code> <code class="plain"> > </code> </div> <div class="line number27 index26 alt2"> <code class="plain"> </ </code> <code class="keyword"> body </code> <code class="plain"> > </code> </div> <div class="line number28 index27 alt1"> <code class="undefined spaces"> </code> </div> <div class="line number29 index28 alt2"> <code class="plain"> </ </code> <code class="keyword"> html </code> <code class="plain"> > </code> </div> </p></div> </td> </tr> </tbody> </table></div> </p></div> <div class="code-editor-container"> </div> </p></div> <div class="code-output-container"> <div class="output-block"> <i class="gfg-icon gfg-icon_arrow-right-editor padding-2px code-sidebar-button output-icon" id="output-icon" title="Output"> </i> </p> <pre class="output-pre"></pre> </p></div> <div class="ide-link-div"> <i class="gfg-icon gfg-icon_copy padding-2px code-sidebar-button copy-url-button" id="copy-url-button" title="Copy Generated Ide URL"> </i> </p> <pre id="ide-url"></pre> </p></div> </p></div> <p> <strong> 输出： </strong> 在“输入值：”框中输入任何值之前- <img alt="图片[3]-jQuery | change（）及其示例-yiteyi-C++库" decoding="async" class="aligncenter size-full wp-image-550026" height="93" src="https://www.yiteyi.com/wp-content/uploads/geeks/geeks_g3-7.png" width="531"/> </p> <p> 在“输入值：”框中输入“Geeksforgeks”的值，然后在框外单击- <img alt="图片[4]-jQuery | change（）及其示例-yiteyi-C++库" decoding="async" class="aligncenter size-full wp-image-550027" height="80" src="https://www.yiteyi.com/wp-content/uploads/geeks/geeks_g4-5.png" width="535"/> </p> <p> jQuery是一个开源JavaScript库，可以简化HTML/CSS文档之间的交互，它以其独特的编程理念而广为人知 <strong> “少写多做” </strong> . 通过以下步骤，您可以从头开始学习jQuery <a href="https://www.yiteyi.com/jquery-tutorials/" rel="noopener" target="_blank"> jQuery教程 </a> 和 <a href="https://www.yiteyi.com/jquery-examples/" rel="noopener" target="_blank"> jQuery示例 </a> . </p> <div id="AP_G4GR_6"> </div> <p> </select>

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript