Contoh dalam artikel ini menerangkan cara melaksanakan kesan kotak carian jquery. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut: Salin kod Kod adalah seperti berikut: jquery: kesan kotak carian <br> $(fungsi(){<br> $('#search').val("Sila masukkan kandungan carian").addClass("c1");<br> $('#search').focus(function(){//Apabila kotak carian mendapat fokus<br> $('#search').val("").addClass("c2");<br> });<br> $('#search').blur(function(){//Apabila kotak carian hilang fokus<br> If($('#search').val()==""){<br> $('#search').val("Sila masukkan kandungan carian").attr("class","c1");<br> }<br> });<br> });<br> </skrip><br> <style type="text/css"><br> .c1{color:grey;font-style:italic;}<br> .c2{color:#000;font-style:normal;}<br> </style><br> </head><br> <badan><br> <input type="text" size="38" id="search" /><button>Cari</button><br> </body><br> </html></div> <br> Nota tambahan: Ia tidak sempurna Jika kotak carian pada asalnya mempunyai gaya lain, apabila ia hilang fokus, jika kod dalam contoh digunakan, gaya lain akan hilang, kerana attr() adalah untuk menetapkan gaya. Jika anda menggunakan addClass() untuk menambah gaya, ia tidak begitu sesuai Walaupun ia boleh mencapai kesan, gaya c2 asal masih ada, dan ia hanya digantikan dengan gaya c1 apabila dipaparkan (ini memerlukan gaya c1 untuk. ditulis selepas c2). Nampaknya tiada cara untuk menggantikan gaya? <p>Selepas pengubahsuaian, masalah di atas diselesaikan, dan ia adalah versi yang lebih sempurna (kod juga boleh dioptimumkan untuk menjadikannya lebih mudah)<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="20464" class="copybut" id="copybut20464" onclick="doCopy('code20464')"><u>Salin kod</u></a></span> Kod adalah seperti berikut:</div> <div class="codebody" id="code20464"><html><br> <kepala><br> <tajuk>jquery: kesan kotak carian</title><br> <script type="text/javascript" src="jquery-1.8.2.min.js"> <br> $(fungsi(){<br> $('#search').val("Sila masukkan kandungan carian").addClass("c1");<br> $('#search').focus(function(){//Apabila kotak carian mendapat fokus<br> If($('#search').val()=="Sila masukkan kandungan carian"){<br> $('#search').val("").addClass("c2").removeClass("c1");<br> }<br> });<br> $('#search').blur(function(){//Apabila kotak carian hilang fokus<br> If($('#search').val()==""){<br> $('#search').val("Sila masukkan kandungan carian").addClass("c1").removeClass("c2");<br> }<br> });<br> });<br> </skrip><br> <style type="text/css"><br> .c1{color:grey;font-style:italic;}<br> .c2{color:#000;font-style:normal;}<br> </style><br> </head><br> <badan><br> <input type="text" size="38" id="search" /><button>Cari</button><br> </body><br> </html></div> <p>Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang. </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
