Scribd
Upload
7 views

Lecture 2

Uploaded by

moinuddeen.1999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Lecture 2

Uploaded by

moinuddeen.1999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Lecture 2<jQuery Selectors> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l .

c o m )
jQuery Selectors
LECTURE (2)

What are jQuery selectors?

jQuery selectors allow you to select and manipulate HTML element(s).


jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types,
attributes, values of attributes and much more.
All selectors in jQuery start with the dollar sign and parentheses: $().

What is element selector?

The jQuery element selector selects elements based on the element name.

Example
<!DOCTYPE html>
<html>
<head>
<title>Element selector</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
$("h1").hide('slow');
$("img").hide(4000);
});
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<img src="pic/abc.jpg" width="300px" height="300px" /><br>
<button>Click me to hide paragraphs</button>
</body>
</html>

1 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 2<jQuery Selectors> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
What is id selector?

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a single,
unique element.

Example
<!DOCTYPE html>
<html>
<head>
<title>ID selector</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("button").click(function(){
$("#hone").fadeOut(2000);
$("#htwo").fadeOut(3000);
$("#hthree").fadeOut(4000);
$("#pone").fadeOut();
$("#ptwo").fadeOut('slow');
});
});
</script>
</head>
<body>
<h1 id="hone">This is a heading</h1>
<h1 id="htwo">This is a heading</h1>
<h1 id="hthree">This is a heading</h1>
<p id="pone">This is a paragraph.</p>
<p id="ptwo">This is another paragraph.</p>
<button>Click me to fadeOut</button>
</body>
</html>

What is class selector?

The jQuery class selector finds elements with a specific class.


Example
<!DOCTYPE html>
<html>
2 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 2<jQuery Selectors> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
<head>
<title>Class selector</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("button").click(function(){
$(".hone").hide(2000);
$(".htwo").hide(3000);
$(".hthree").hide(4000);
$(".pone").hide();
$(".ptwo").hide('slow');
});
});
</script>
</head>
<body>
<h1 class="hone">This is a heading</h1>
<h1 class="htwo">This is a heading</h1>
<h1 class="hthree">This is a heading</h1>
<p class="pone">This is a paragraph.</p>
<p class="ptwo">This is another paragraph.</p>
<button>Click me to hide</button>
</body>
</html>

What are First and Last selectors?

First selector is used to select the first element while last selector is used to select the last element.
Example
<!DOCTYPE html>
<html>
<head>
<title>First and Last selector</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("li:first").addClass('red');
$("li:last").addClass('blue');
});
</script>
3 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 2<jQuery Selectors> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
<style type="text/css">
.red{
background-color:red;
border:5px groove #cccccc;
width:500px;
}
.blue{
background-color:blue;
border:5px groove #cccfff;
width:500px;
}
</style>
</head>
<body>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</body>
</html>

What are even and odd selectors?

Even selector is used to select the even elements while odd selector is used to select the odd elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>Even and Odd Selector</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("li:even").addClass('red');
$("li:odd").addClass('blue');
});
</script>
<style type="text/css">
4 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 2<jQuery Selectors> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
.red{
background-color:red;
border:5px groove #cccccc;
width:500px;
}
.blue{
background-color:blue;
border:5px groove #cccfff;
width:500px;
}
</style>
</head>
<body>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</body>
</html>

What is attribute selector?

Attribute selector is used to select elements with the help of attributes.


Example
<!DOCTYPE html>
<html>
<head>
<title>My first Program</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("[align='center']").addClass('red');
$("[name='one']").addClass('red');
$("[id]").addClass('green');
});
</script>
<style type="text/css">
.red{
5 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 2<jQuery Selectors> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
background-color:red;
color:white;
}
.green{
background-color:green;
color:white;
}
</style>
</head>
<body>
<h1 align="center" id="two">This is a sample heading 1</h1>
<p align="justify" name="one">This is a sample paragraph</p>
<h3 align="right" name="one">This is a sample heading 3</h3>
<p align="center">This is another sample paragraph</p>
<table border="1px" width="500px">
<tr align="center" id="two">
<td>Name</td>
<td>Class</td>
<td name="one">Rno.</td>
</tr>
<tr align="center">
<td id="two">Faizan</td>
<td id="two">WG</td>
<td name="one" >23</td>
</tr>
</table>
</body>
</html>

What is header selector?

Header selector is used to select all heading tags.


Example
<!DOCTYPE html>
<html>
<head>
<title>Header Selector</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
6 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 2<jQuery Selectors> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
//$("h1,h2,h3,h4,h5,h6").hide(2000);
//Header selector
$(":header").hide(2000);
});
</script>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>

What is first-child and last-child selector?

First-child is used to select first element of any tag while last-child is used to select last element of any tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Fist-child & Last-child Selector</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("ul li:first-child").hide(3000);
$("ul li:last-child").hide(3000);
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
7 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 2<jQuery Selectors> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )

<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
</body>
</html>

8 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial

You might also like