masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

pemilih borang jQuery

Sama ada menghantar atau menghantar data, peranan elemen borang dalam halaman interaktif dinamik adalah sangat penting. Pemilih borang telah ditambahkan khas pada jQuery, yang menjadikannya amat mudah untuk mendapatkan jenis elemen borang tertentu

Penerangan kaedah khusus bagi pemilih borang:

333.png


Nota:

Selain pemilih penapis input, hampir setiap penapis kategori bentuk sepadan dengan nilai jenis elemen input. Kebanyakan penapis kategori bentuk boleh digantikan dengan penapis atribut. Contohnya, $(':password') == $('[type=password]')

Jika anda ingin mendapatkan bilangan elemen borang dalam borang, kodnya adalah seperti berikut: 

$("#form1  :input").length;        //注意与$("#form1   input")的区别

Jika anda ingin mendapatkan bilangan elemen borang dalam borang Bilangan kotak teks satu baris, kodnya adalah seperti berikut: 

$("#form1   :text").length;

Jika anda ingin mendapatkan bilangan kotak kata laluan dalam borang, kodnya adalah seperti berikut: 

$("#form1   :password").length;

Begitu juga, operasi pemilih borang lain adalah serupa

Dapatkan semua <p> tambahkan acara onclick pada setiap elemen <p>, contohnya: 

$("p").click(function({
            //doing somethingr（操作）
})

Dapatkan elemen dengan id tb, Kemudian cari teg tbody di bawahnya, kemudian cari elemen tr dengan nilai indeks genap di bawah tbody untuk menukar warna latar belakangnya (css("property", "value"); digunakan untuk menetapkan gaya objek jQuery Sebagai contoh:

$('#tb tbody tr:even'). css("backgroundColor","#888");

Mula-mula gunakan pemilih atribut, kemudian gunakan atribut objek bentuk untuk menapis, dan akhirnya dapatkan Panjang objek jQuery, contohnya: 

$('#btn').click(function(){
                  var   length=$("input[name='check']:checked").length;
                  alert("选中的个数为："+length);
})

Kosongkan semua kandungan kotak teks jenis input="teks": $("input:text").val("");


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> input{ display: block; margin: 10px; padding:10px; } </style> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <style> input{ display: block; margin: 10px; padding:10px; } </style> </head> <body> <h2>子元素筛选选择器</h2> <h3>input、text、password、radio、checkbox</h3> <h3>submit、image、reset、button、file</h3> <div class="left first-div"> <form> <input type="text" value="text类型"/> <input type="password" value="password"/> <input type="radio"/> <input type="checkbox"/> <input type="submit" /> <input type="image" /> <input type="reset" /> <input type="button" value="Button" /> <input type="file" /> </form> </div> <script type="text/javascript"> //查找所有 input, textarea, select 和 button 元素 //:input 选择器基本上选择所有表单控件 $(':input').css("border", "1px groove red"); </script> <script type="text/javascript"> //匹配所有input元素中类型为text的input元素 $('input:text').css("background", "#A2CD5A"); </script> <script type="text/javascript"> //匹配所有input元素中类型为password的input元素 $('input:password').css("background", "yellow"); </script> <script type="text/javascript"> //匹配所有input元素中的单选按钮,并选中 $('input:radio').attr('checked','true'); </script> <script type="text/javascript"> //匹配所有input元素中的复选按钮,并选中 $('input:checkbox').attr('checked','true'); </script> <script type="text/javascript"> //匹配所有input元素中的提交的按钮,修改背景颜色 $('input:submit').css("background", "#C6E2FF"); </script> <script type="text/javascript"> //匹配所有input元素中的图像类型的元素,修改背景颜色 $('input:image').css("background", "#F4A460"); </script> <script type="text/javascript"> //匹配所有input元素中类型为按钮的元素 $('input:button').css("background", "red"); </script> <script type="text/javascript"> //匹配所有input元素中类型为file的元素 $('input:file').css("background", "#CD1076"); </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492875 permainan