Jquery selectors and basic part 1 - Web Development and Design | Tutorial for Java, PHP, HTML, Javascript Jquery selectors and basic part 1 - Web Development and Design | Tutorial for Java, PHP, HTML, Javascript

Breaking

Post Top Ad

Post Top Ad

Friday, April 14, 2017

Jquery selectors and basic part 1





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>

4 comments:

  1. nice post if you are looking for Mobile apps for small business, Ecommerce android apps India, iOS ecommerce apps, Ecommerce website Pune, Ready ecommerce website and apps. Android ecommerce apps then visit now Ecommerce android apps India, iOS ecommerce apps, ecommerce website for small business call us 9850889625

    ReplyDelete
  2. HI,

    I am very thankful for reading this blog. I love reading web development, design, software technology blogs. I have taken many web services companies but i would like suggest you the name of Brian Cozzi, Inc. for best Web development company in Chicago. Brian Cozzi, Inc. is a Chicago based web design and software development firm, providing logo design, graphic design, SEO, web hosting and security.

    ReplyDelete
  3. Thanks for sharing your post. I read your blog and found useful. Yburis Infotech Inc is website design company in New York.

    ReplyDelete

Post Top Ad