Rumah > Artikel > hujung hadapan web > jQuery yang ringkas dan mudah difahami: Borang HTML dan jQuery
Menggunakan jQuery, anda boleh melumpuhkan elemen borang dengan mudah dengan menetapkan nilai atributnya yang dilumpuhkan kepada dilumpuhkan. Untuk melakukan ini, kami hanya memilih input dan menggunakan kaedah attr()
untuk menetapkan atribut dilumpuhkan input kepada nilai dilumpuhkan. attr()
方法,将输入的禁用属性设置为禁用值。
<!DOCTYPE html> <html lang="en"> <body> <input name="button" type="button" id="button" value="Click me"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { $('#button') .attr('disabled', 'disabled'); })(jQuery); </script> </body> </html>
要启用禁用的表单元素,我们只需使用 removeAttr()
删除禁用的属性,或使用 attr()
将禁用的属性值设置为空。
<!DOCTYPE html> <html lang="en"> <body> <input name="button" type="button" id="button" value="Click me" disabled="disabled"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function($){ $('#button').removeAttr('disabled'); // or // $('#button').attr('disabled', ''); })(jQuery); </script> </body> </html>
使用 jQuery 表单过滤器表达式 :disabled
或 :enabled,
可以很容易地选择和确定(布尔值)表单元素是否被禁用或启用。检查下面的代码以进行澄清。
<!DOCTYPE html> <html lang="en"> <body> <input name="button" type="button" id="button1"> <input name="button" type="button" id="button2" disabled="disabled"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { // Is it enabled? alert($('#button1').is(':enabled')); // Alerts true // Or, using a filter alert($('#button1:enabled').length); // Alerts "1" // Is it disabled? alert($('#button2').is(':disabled')); // Alerts "true" // Or, using a filter alert($('#button2:disabled').length); // Alerts "1" })(jQuery); </script> </body> </html>
您可以通过使用 attr()
将其 checked
属性设置为 true
来选择单选按钮输入或复选框。
<!DOCTYPE html> <html lang="en"> <body> <input name="" value="" type="checkbox"> <input name="" value="" type="radio"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function($){ // Set all check boxes or radio buttons to selected $('input:checkbox,input:radio').attr('checked', 'checked'); })(jQuery); </script> </body> </html>
要清除单选按钮输入或复选框,只需使用 removeAttr()
方法删除选中的属性或将 checked
属性值设置为空字符串即可。
<!DOCTYPE html> <html lang="en"> <body> <input name="" type="checkbox" value="Test1" checked="checked"> <input name="" type="radio" value="Test2" checked="checked"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function($){ $('input').removeAttr('checked'); })(jQuery); </script> </body> </html>
您可以在多个复选框输入或单选按钮输入上使用 jQuery 的 val()
将输入设置为选中。这是通过向 val()
方法传递一个数组来完成的,该数组包含与复选框输入或单选按钮输入值属性一致的字符串。
<!DOCTYPE html> <html lang="en"> <body> <input type="radio" value="radio1"> <input type="radio" value="radio2"> <input type="checkbox" value="checkbox1"> <input type="checkbox" value="checkbox2"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function($){ // Check all radio and check box inputs on the page. $('input:radio,input:checkbox').val(['radio1', 'radio2', 'checkbox1', 'checkbox2']); // Use explicit iteration to clear. // $('input:radio,input:checkbox').removeAttr('checked'); // or // $('input:radio,input:checkbox').attr('checked', ''); })(jQuery); </script> </body> </html>
注意:如果已选中复选框或单选按钮,则使用 val()
将不会清除输入元素。
我们可以使用 :checked
表单过滤器来确定复选框输入或单选按钮输入是否被选中或清除。检查下面的代码以了解 :checked
过滤器的几种用法。
<!DOCTYPE html> <html lang="en"> <body> <input checked="checked" type="checkbox"> <input checked="checked" type="radio"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function($){ // Alerts "true" alert($('input:checkbox').is(':checked')); // Or, added to wrapper set if checked. Alerts "1" alert($('input:checkbox:checked').length); // Alerts "true" alert($('input:radio').is(':checked')); // Or, added to wrapper set if checked. Alerts "1" alert($('input:radio:checked').length); })(jQuery); </script> </body> </html>
您可以使用 :hidden
表单过滤器确定表单元素是否隐藏。检查下面的代码以了解 :checked
过滤器的几种用法。
<!DOCTYPE html> <html lang="en"> <body> <input type="hidden"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { // Alerts "true" alert($('input').is(':hidden')); // Or, added to wrapper set if hidden. Alerts "1" alert($('input:hidden').length); })(jQuery); </script> </body> </html>
val()
方法可用于设置和获取输入元素的属性值(按钮、复选框、隐藏、图像、密码、单选、重置、提交、文本)。下面,我在 val()
中设置每个输入的值,然后使用 val()
方法提醒该值。
<!DOCTYPE html> <html lang="en"> <body> <input type="button"> <input type="checkbox"> <input type="hidden"> <input type="image"> <input type="password"> <input type="radio"> <input type="reset"> <input type="submit"> <input type="text"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { $('input:button').val('I am a button'); $('input:checkbox').val('I am a check box'); $('input:hidden').val('I am a hidden input'); $('input:image').val('I am an image'); $('input:password').val('I am a password'); $('input:radio').val('I am a radio'); $('input:reset').val('I am a reset'); $('input:submit').val('I am a submit'); $('input:text').val('I am a text'); // Alerts input's value attribute alert($('input:button').val()); alert($('input:checkbox').val()); alert($('input:hidden').val()); alert($('input:image').val()); alert($('input:password').val()); alert($('input:radio').val()); alert($('input:reset').val()); alert($('input:submit').val()); alert($('input:text').val()); })(jQuery); </script> </body> </html>
使用 val()
方法,您可以通过向 val()
方法传递一个表示分配给 <option><select></select></option>
元素的选定值> 元素。
要获取 <select></select>
元素的值,请再次使用 val()
方法来确定选择哪个选项。此场景中的 val()
方法将返回所选选项的属性值。
<!DOCTYPE html> <html lang="en"> <body> <select id="s" name="s"> <option value="option1">option one</option> <option value="option2">option two</option> </select> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { // Set the selected option in the select element to "option two" $('select').val('option2'); // Alerts "option2" alert($('select').val()); })(jQuery); </script> </body> </html>
使用 val()
方法,我们可以通过向 val()
方法传递一个包含相应值的数组来设置多选元素的选定值。
为了获取多选元素中的选定选项,我们再次使用 val()
方法来检索所选选项的数组。该数组将包含所选选项的值属性。
<!DOCTYPE html> <html lang="en"> <body> <select size="4" multiple="multiple"> <option value="option1">option one</option> <option value="option2">option two</option> <option value="option3">option three</option> <option value="option4">option four</option> </select> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function($){ // Set the value of the selected options $('select').val(['option2', 'option4']); // Get the selected values alert($('select').val().join(', ')); // Alerts, "option2, option4" })(jQuery); </script> </body> </html>
您可以通过向 val()
方法传递一个要用作文本的文本字符串来设置 <textarea></textarea>
元素的文本节点内容。为了获取 <textarea></textarea>
元素的值,我们再次使用 val()
方法来检索其中包含的文本。
<!DOCTYPE html> <html lang="en"> <body> <textarea></textarea> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { // Set the text contained within $('textarea').val('I am a textarea'); // Alerts "I am a textarea" alert($('textarea').val()); })(jQuery); </script> </body> </html>
您可以通过向 val()
方法传递一个文本字符串来设置按钮元素的 value 属性。要获取按钮元素的值,请再次使用 val()
方法来检索文本。
<!DOCTYPE html> <html lang="en"> <body> <button>Button</button> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { // Set the value: <button value="I am a Button Element"> $('button').val('I am a Button Element') // Alerts "I am a Button Element" alert($('button').val()); })(jQuery); </script> </body> </html>
jQuery 使一些与编辑选择元素相关的常见任务变得微不足道。以下是其中一些带有编码示例的任务。
// Add options to a select element at the end $('select').append('<option value="">option</option>'); // Add options to the start of a select element $('select').prepend('<option value="">option</option>'); // Replace all the options with new options $('select').html('<option value="">option</option><option value="">option</option>'); // Replace items at a certain index using the :eq() selecting filter to // select the element, and then replace it with the .replaceWith() method $('select option:eq(1)').replaceWith('<option value="">option</option>'); // Set the select elements' selected option to index 2 $('select option:eq(2)').attr('selected', 'selected'); // Remove the last option from a select element $('select option:last').remove(); // Select an option from a select element via its // order in the wrapper set using custom filters $('#select option:first'); $('#select option:last'); $('#select option:eq(3)'); $('#select option:gt(5)'); $('#select option:lt(3)'); $('#select option:not(:selected)'); // Get the text of the selected option(s), this will return the text of // all options that are selected when dealing with a multi-select element $('select option:selected').text(); // Get the value attribute value of an option in a select element $('select option:last').val(); // Getting the :last option element // Get the index (0 index) of the selected option. // Note: Does not work with multi-select elements. $('select option').index($('select option:selected')); // Insert an option after a particular position $('select option:eq(1)').after('<option value="">option</option>'); // Insert an option before a particular position $('select option:eq(3)').before('<option value="">option</option>');
可以按类型选择表单元素,例如$('输入:复选框')
<!DOCTYPE html> <html lang="en"> <body> <input type="button" value="Input Button"> <input type="checkbox"> <input type="file"> <input type="hidden"> <input type="image"> <input type="password"> <input type="radio"> <input type="reset"> <input type="submit"> <input type="text"> <select> <option>Option</option> </select> <textarea></textarea> <button>Button</button> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function($){ // Alerts "13" form elements alert($(':input').length); })(jQuery); </script> </body> </html>🎜Untuk mendayakan elemen borang yang dilumpuhkan, kami hanya menggunakan
removeAttr()
untuk mengalih keluar atribut yang dilumpuhkan, atau gunakan attr()
untuk menetapkan nilai atribut yang dilumpuhkan kepada null. 🎜
rrreee
:disabled
atau :enabled,
untuk memilih dan menentukan (boolean) dengan mudah sama ada elemen borang dilumpuhkan atau didayakan. Semak kod di bawah untuk penjelasan. 🎜
rrreee
checked
nya kepada true
menggunakan attr()
. 🎜
rrreee
🎜Untuk mengosongkan input atau kotak pilihan butang radio, hanya gunakan kaedah removeAttr()
untuk mengalih keluar atribut yang diperiksa atau tetapkan nilai atribut checked
kepada rentetan kosong. 🎜
rrreee
val()
jQuery pada berbilang input kotak semakan atau input butang radio untuk menetapkan input untuk diperiksa. Ini dilakukan dengan menghantar kaedah val()
tatasusunan yang mengandungi rentetan yang konsisten dengan input kotak semak atau atribut nilai input butang radio. 🎜
rrreee
🎜Nota: Menggunakan val()
tidak akan mengosongkan elemen input jika kotak semak atau butang radio ditandakan. 🎜
:checked
untuk menentukan sama ada input kotak pilihan atau input butang radio ditandakan atau dikosongkan. Semak kod di bawah untuk melihat beberapa kegunaan penapis :checked
. 🎜
rrreee
:hidden
untuk menentukan sama ada elemen borang disembunyikan. Semak kod di bawah untuk melihat beberapa kegunaan penapis :checked
. 🎜
rrreee
val()
boleh digunakan untuk menetapkan dan mendapatkan nilai atribut elemen input (butang, kotak semak, tersembunyi, imej, kata laluan, radio, tetapkan semula, serahkan, teks). Di bawah, saya menetapkan nilai setiap input dalam val()
dan kemudian menggunakan kaedah val()
untuk memaklumkan nilai tersebut. 🎜
rrreee
val()
, anda boleh menetapkan val()
rentetan yang mewakili nilai yang diberikan kepada <option nilai yang dipilih bagi elemen select></option>
element>. 🎜
🎜Untuk mendapatkan nilai elemen <select></select>
, gunakan kaedah val()
sekali lagi untuk menentukan pilihan yang dipilih. Kaedah val()
dalam senario ini akan mengembalikan nilai atribut pilihan yang dipilih. 🎜
rrreee
val()
, kita boleh menetapkan nilai yang dipilih bagi elemen berbilang pilih dengan menghantar tatasusunan yang mengandungi nilai yang sepadan kepada kaedah val()
. 🎜
🎜Untuk mendapatkan pilihan yang dipilih dalam elemen berbilang pilih, kami sekali lagi menggunakan kaedah val()
untuk mendapatkan semula tatasusunan pilihan yang dipilih. Tatasusunan akan mengandungi atribut nilai bagi pilihan yang dipilih. 🎜
rrreee
Atas ialah kandungan terperinci jQuery yang ringkas dan mudah difahami: Borang HTML dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!