JQuery- Multiple Selectors

jquery-selector


Bilindiği üzere HTML elementlerine id tanımlayarak Jquery ile kontrol edilebilmekte ve bu sayede tarayıcı bazlı birçok işlemi gerçekleştirebilmekteyiz.

MULTIPLE SELECTORS
Multiple Selector örneği ile type’ları number olan 2 adet input alanına sayı girilerek toplama yaptıracağım. Burada, button olmayacak ve hangi input alanına sayı girdiğine bakmaksızın, biz sayıyı yazmaya başladıkça fonksiyonumuzda bizimle birlikte toplama yapacak.

Multiple Selector Örneği:

HTML – JQurey

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Multiple Selector</title>
		<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

		<script>
			$(document).ready(function(){
				$("#number1, #number2").keyup(function(){
				
					var number1 = parseInt($("#number1").val());
					var number2 = parseInt($("#number2").val());
					var sonuc = number1 + number2;
				
					$("#sonuc").text(sonuc);
					
				});
			});
		</script>

    </head>
    <body>
        <h1>Multiple Selector Örneği</h1>
		
		<label>Sayı 1 : </label>
        <input type="number" id="number1" value="0"/> <br/><br/>
		
		<label>Sayı 2 : </label>
		<input type="number" id="number2" value="0"/> <br/><br/>
		
		<label id="sonuc"></label>
    </body>
</html>

Örneği satır satır açıklamak gerekirse;
Öncelikle, 6.satırda jquery’nin 3.4.1 min.js versiyonunu projemize ekliyoruz. Sonrasında, <body> </body> etiketleri içine eklediğimiz Html kodları ile 2 adet input, 1 adet de label oluşturuyoruz. Buradaki amaç, input alanlarına girilen sayıların toplanarak label alanına yazılmasıdır.

8.satırda; <script> ile JQuery kodlarına başlanmaktadır.
9.satırda; sayfanın tamamının yüklenmesinin ardından kodların çalışacağıı belirtilmektedir.
10.satırda; number1 ve number2 id’li label’lere değer girildiğinde toplamanın yapılması için label’lerin id’sini yazarak keyup metodu tetiklenmektedir. Bu sayede number1 ve number2 id’li inputlarda her değişiklik olduğunda fonksiyonun içine girilmektetir.
12. ve 13. satırda; inputtan gelen değerleri değişkenlere atılmaktadır.
14. satırda; toplama işlemi yapılmaktadır.
16. satırda ise; sonuc id’li label’e toplamanın sonucu yazdırılmaktadır.

Bu yazıda Jquery’de Multiple Sections ile ilgili basit bir örnek vermeye çalıştım. Faydalı olması dileğiyle. Hoşça kalın.

Bir cevap yazın