Menggunakan Selector Input jQuery Dengan Simbol

Halo teman – teman, berjumpa kembali dengan saya di website tips dan trik Dumet School. Pada artikel sebelumnya kita sudah membahas dan mempraktekkan Mengenal Fungsi Attribute Selector Input Pada jQuery dimana dengan fungsi ini kita dapat menggunakan selecsi seperti biasa nya kita menngunakan class pada css. Dan pada kesempatan kali ini kita kan belajar tentang Menggunakan Selector Input jQuery Dengan Simbol kita akan membuat sebuah seleksi dengan menggunakan

simbol ~ berfungsi untuk menseleksi text yang di tentukan
simbol ^ berfungsi untuk menseleksi text paling pertama

Oke lanjut pada artikel kali ini tentang Menggunakan Selector Input jQuery Dengan Simbol siapkan text editornya, dan buat sebuah form input. Kali ini saya menggunakan bootstrap

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title><strong>Menggunakan Selector Input jQuery Dengan Simbol</strong></title>
</head>
<body>
 <div class="container">
 	<div class="row">
 		<div class="col-md-12">
	 		<h1>Menggunakan  selector Input jQuery Dengan Simbol</h1>
	 		<form>
			    <div class="form-group">
			      <input type="text" class="form-control" name="first">
			    </div>
			    <div class="form-group">
			      <input type="password" class="form-control" name="first-Name">
			    </div>
			    <div class="form-group">
			      <input type="password" class="form-control" name="Name first">
			    </div>
			    <input type="submit" class="btn btn-info" value="Submit Button">
		  </form>
	  </div>
 	</div>
 </div>
</body>
</html>

Save dengan nama index.html, selanjutnya kita masukkan library bootstrap dan jQuery nya

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Lalu kita berikan script jQuery nya yang akan menggunakan seleksi simbol ~

<script>
$( "input[name~='first']" ).attr('placeholder','Selecsi hanya name=first');
</script>

Maka akan menghasilkan output

Maka placeholder akan di tampilkan sesuai seleksi (input name=first) saja berlaku hanya name first selain itu semua akan tidak di jalankan. Misalkan firstname, name-first maka tidak akan di jalankan simbol ini akan menjalankan text sesuai name saja tidak dengan yang lain. Selanjutnya tambahkan form input nya untuk mengetahui simbol ^

 <div class="form-group">
  <input type="password" class="form-control" name="info">
</div>
<div class="form-group">
  <input type="password" class="form-control" name="Beritainfo">
</div>
<div class="form-group">
  <input type="password" class="form-control" name="berikan info">
</div>

Kemudian berikan script jQuery nya

$( "input[name^='info']" ).attr('placeholder','membaca name=info paling awal');

Simbol ^ hanya akan membaca name=info paling awal saja, jika ada name info di belakang text yang lain maka tidak akan di jalankan.

Demikianlah contoh sederhana selector input dengan simbol ~ dan simbol ^

Jika masih bingung bisa post komentar di bawah ini ya teman – teman, sekian pada artikel kali ini tentang Menggunakan Selector Input jQuery Dengan Simbol kita berjumpa kembali di tips dan trik yang akan datang.

Terimakasih dan sampai jumpa, semoga bermanfaat.

Menggunakan Selector Input jQuery Dengan Simbol

Kategori