Jquery selectors and basics part 1
In this tutorial i will show you how to use jquery selector to select element in DOM (Document Object Model which is our Html Document) and get the value of element ,text of element ,add new value or text or html element to Dom elements.
Let's Get Started.
Example 1 : id selector
id selector is unique it select only one element in DOM . if we created multiple id element with same name then it will select only select first id element in DOM.
<html>
<head>
<script src=”js/jquery.min.js”></script>
<!--calling local jquery script →
</head>
<body>
<p>Hello</p>
<p id=”demo1”>Jquery</p>
<p id=”demo”>Here this text we will be change by using jquery selector and functions.</p>
<script>
$(document).ready(function(){
$(“#demo”).text(“This is new text “);
//Here # Represent the id and .text() method is used to set text in demo.
$(“#demo1”).html(“<span>World</span>”);
//since .text method only change text if we want to.add html elements inside selected elements then we will use .html() method.
});
//Every jquery function we will not call until our DOM is not ready (document).ready is a function we call our all function inside this .this function defines that our dom is ready now we are ready to call function inside (document).ready.
</script>
</body>
</html>
Example 2 : Class selector
Class is not unique so we can select all element having same class and change text or what we want.
<html>
<head>
<script src=”js/jquery.min.js”></script>
<!--calling local jquery script →
</head>
<body>
<p class=”mdemo”>Hello</p>
<p class=”demo”>Jquery</p>
<p class=”demo”>Here this text we will be change by using jquery selector and functions.</p>
<p class=”mdemo1”>Jquery Class also supports multiple class selector we can select multiple class in a single selector.</p>
<script>
$(document).ready(function(){
$(“.demo”).text(“This is new text “);
//Here (.) Represent the class and .text() method is used to set text in demo.
$(“.mdemo1,.mdemo”).text(“This text change by multiple class selector”);
//multiple class selector can be use by class names separated by comma (,)
});
</script>
</body>
</html>
Example 3 : Element Selector
Element selector selects all element in DOM .
<html>
<head>
<script src=”js/jquery.min.js”></script>
<!--calling local jquery script →
</head>
<body>
<p>Hello</p>
<p id=”demo1”>Jquery</p>
<p id=”demo”>Here this text we will be change by using jquery selector and functions.</p>
<h2>Jquery Multiple element selector </h2>
<span>This text all change using multiple selector</span>
<script>
$(document).ready(function(){
$(“p”).text(“This is new text added in all p tag elements “);
//Here p Represent the tag name and .text() method is used to set text in demo.
$(“h2,span”).text(“This is multiple text selector “);
//This is multiple jquery selector where elements are separated by comma (,).
});
</script>
</body>
</html>
Example 4 : first last first-child selector
:first - select only first element in dom
:last - select only last element in dom
:first-child - select all elements of first child elements
<script src="js/jquery.min.js"></script>
<!--calling local jquery script -->
</head>
<body>
<br />
<div id="demo1">
Jquery</div>
<div id="demo">
Here this text we will be change by using jquery selector and functions.</div>
<div>
Hello i am first-child selector element
This text not change<br />
</div>
<div>
Hello i am first-child selector element again<br />
This text not change<br />
</div>
<script>
$(document).ready(function(){
$("p:first").text("This is new text added in first p tag element ");
$("p:last").text("this is text added in last p elements");
$("div:first-child").text("This is first child selector first child in div element");
//Here p Represent the tag name and .text() method is used to set text in demo.
});
</script>
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
No comments:
Post a Comment