Embedded Files
jQuery Hands-On Practical Course
--------------------------
HTML
===================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery Tutorial</title>
</head>
<body>
<p id="myPara">First Jquery</p>
<button id="btnClick">Click Me!!</button>
<script src="/js/jquery-3.7.1.min.js"></script>
<script>
$("#btnClick").click(function(){
$("#myPara").css("background-color","pink");
});
</script>
</body>
</html>
===========================
Selectors
===========================
All selector
-----------
<script type="text/javascript">
$(document).ready(function(){
$("#btnFirst").click(function(){
$("*").css("background-color", "yellow");
});
})
</script>
------------
TagName selector
------------
$("#btnFirst").click(function(){
$("p").css("background-color", "yellow");
//$("ol").css("background-color", "yellow");
//$("li").css("background-color", "yellow");
//$("button").css("background-color", "yellow");
});
-------------
Multiple Selector
-------------
$("#btnFirst").click(function(){
$("button, p").css("background-color", "yellow");
// $("ol, p").css("background-color", "yellow");
});
-------------
ID Selector
-------------
$("#btnFirst").click(function(){
$("#sub1").css("background-color", "blue");
//$("#sub1").css("color", "blue");
//$("#sub1, #sub3, #firstPara").css("color", "blue");
});
---------------
Class Selector
---------------
$("#btnFirst").click(function(){
$(".subject").css("color", "blue");
});
--------------
Class selector 2
--------------
$(".odd").css("background-color", "lightblue");
$(".even").css("background-color", "lightgray");
............
<table>
<tr>
<th>ID</th><th>First Name</th><th>Last Name</th><th>Email</th>
</tr>
<tr class="odd">
<td>1</td><td>John</td><td>Smith</td><td>johnsmith@abc.com</td>
</tr>
<tr class="even">
<td>2</td><td>James</td><td>White</td><td>james.white@test.com</td>
</tr>
</table>
--------------------
this selector
--------------------
$("#btnFirst").click(function(){
$(this).css("background-color", "blue");
});
/* $("p").hover(function(){
$(this).css("color", "blue");
}); */
-------------------
this and tagname selector
--------------------
<head>
<title>Selectors</title>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "lightgray");
});
$("input").blur(function(){
$(this).css("background-color", "white");
});
});
</script>
</head>
<body>
<label for="fName">First Name:</label>
<input type="text" id="fName" /><br />
<label for="lName">Last Name:</label>
<input type="text" id="lName" />
</body>
---------------------------------------------------
attributes based selectors -1
-------------------
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$("[class]").css("color", "red");
//$("[id]").css("color", "red");
//$("[id=firstDiv]").css("color", "red");
//$("[class=paras]").css("color", "red");
//$("p[class!=paras]").css("color", "red");
});
});
</script>
</head>
<body>
<p id="first-para" class="paras">First Paragraph. First Paragraph.</p>
<p id="second-para">Second Paragraph. Second Paragraph.</p>
<p id="third-para">Third Paragraph. Third Paragraph.</p>
<div id="firstDiv">First div</div>
<div id="divSecond" class="divs">Second div</div>
<div id="divFourth">Fourth div</div>
<div id="divFifth" class="divs">Fifth div</div><br />
<button id="btnClick">Click!!!</button>
</body>
</html>
-------------
attribute selector-2
-------------
<html>
<head>
<title>Selectors</title>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$("[id ^= first]").css("color", "red"); // selects id value that start with "first"
//$("[id $= th]").css("color", "red"); // selects id value that ends with "th"
//$("[id $= para]").css("color", "red");
//$("[id *= first]").css("color", "red"); // selects id that contains "first"
});
});
</script>
</head>
<body>
<p id="first-para" class="paras">First Paragraph. First Paragraph.</p>
<!--
<p id="pafirstra" class="paras">First Paragraph. First Paragraph.</p>
-->
<p id="second-para">Second Paragraph. Second Paragraph.</p>
<p id="third-para">Third Paragraph. Third Paragraph.</p>
<div id="firstDiv">First div</div>
<div id="divSecond" class="divs">Second div</div>
<div id="divFourth">Fourth div</div>
<div id="divFifth" class="divs">Fifth div</div><br />
<button id="btnClick">Click!!!</button>
</body>
</html>
-------------------
attribute selector-3
-------------------
<head>
<title>Selectors</title>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$("[id |= first]").css("color", "red"); // "first" or "first-" will be selected
//$("[id ~= first]").css("color", "red"); // "first" or "first " will be selected
});
});
</script>
</head>
<body>
//this will be selected
<p id="first-para" class="paras">First Paragraph. First Paragraph.</p>
<p id="second-para">Second Paragraph. Second Paragraph.</p>
<p id="third-para">Third Paragraph. Third Paragraph.</p>
<div id="first">First div</div>
<div id="divSecond" class="divs">Second div</div>
<div id="divFourth">Fourth div</div>
<div id="divFifth" class="divs">Fifth div</div><br />
<button id="btnClick">Click!!!</button>
</body>
</html>
-----------------------------------------------------------------------------------
position based selectors - 1
-----------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$("p:first").css("color", "red");
//$("li:first").css("color", "red");
//$("tr:first").css("color", "red");
//$("tr:last, li:last, p:last").css("color", "red");
//$("tr:first, li:last, p:last").css("color", "red");
//$("li:even").css("color", "red");
//$("tr:even").css("color", "red");
//$("p:even").css("color", "red");
//$("p:odd").css("color", "red");
//$("li:odd").css("color", "red");
});
});
</script>
</head>
<body>
<p id="first para">First Paragraph. First Paragraph.</p>
<ol>
<li>John Smith</li>
<li>Aaron White</li>
<li>Sarah Brown</li>
<li>Aidan Jones</li>
<li>Maria Williams</li>
</ol>
<p id="second-para">Second Paragraph. Second Paragraph.</p>
<table>
<tr><th>ID</th><th>Name</th><th>Department</th></tr>
<tr><td>1</td><td>John Smith</td><td>Accounts</td></tr>
<tr><td>2</td><td>Aaron White</td><td>Sales</td></tr>
<tr><td>3</td><td>Sarah Brown</td><td>Sales</td></tr>
<tr><td>4</td><td>Aidan Jones</td><td>Accounts</td></tr>
<tr><td>5</td><td>Maria Williams</td><td>Marketing</td></tr>
</table>
<p id="third-para">Third Paragraph. Third Paragraph.</p>
<button id="btnClick">Click!!!</button>
</body>
</html>
-----------------------------------
position based selectors - 2
-----------------------------------
$("#btnClick").click(function(){
$("li:eq(3)").css("color", "red");
//$("tr:eq(3)").css("color", "red");
//$("tr:lt(3)").css("color", "red");
//$("li:lt(2)").css("color", "red");
//$("li:gt(2)").css("color", "red");
});
-------------------------------------------------------------------------------------------
relationship based selectors -1
-----------------------------------
$("#btnClick").click(function(){
$("p:first-child").hide(2000);
//$("span:first-child").hide(2000);
//$("p:last-child").hide(2000);
//$("span:last-child").hide(2000);
});
----------
$('#myUL :first-child').css('outline','red solid');
relationship based selectors -2
$("#btnClick").click(function(){
$("span:nth-child(2)").hide(2000);
//$("p:nth-child(3)").hide(2000);
//$("p:nth-last-child(3)").hide(2000);
});
relationship based selectors -3
$("#btnClick").click(function(){
$("p:first-of-type").hide(2000);
//$("p:last-of-type").hide(2000);
//$("p:nth-of-type(1)").hide(2000);
//$("p:nth-last-of-type(1)").hide(2000);
});
relationship based selectors -4
$("#btnClick").click(function(){
//$("p:only-child").hide(2000);
//$("span:only-child").hide(2000);
$("p:only-of-type").hide(2000);
});
-----------------------------------------------------------------------------------------
Child and sibling selectors
-------------------------------
$("#btnClick").click(function(){
$("div > span").hide(2000); //direct child
//$("div > p").hide(2000);
//$("div span").hide(2000); //all descendand type
//$("p + span").hide(2000); //adjecent sibling
//$("p ~ span").hide(2000); // General sibling or all sibling
});
-----------------------------------------------------------------------------------------
Form Based Selectors // input types
----------------------------
$("#btnClick").click(function(){
alert("There are " + $(':input').length + " inputs in this webpage.");
//alert("There are " + $(':text').length + " text inputs in this webpage.");
//alert("There is/are " + $(':password').length + " password input(s) in this webpage.");
//alert("There is/are " + $(':image').length + " image input(s) in this webpage.");
//alert("There is/are " + $(':radio').length + " radio input(s) in this webpage.");
//alert("There is/are " + $(':checkbox').length + " checkbox(es) in this webpage.");
//alert("There is/are " + $(':file').length + " file(s) in this webpage.");
//alert("There is/are " + $(':button').length + " button(s) in this webpage.");
//alert("There is/are " + $(':reset').length + " reset button(s) in this webpage.");
});
<body>
<label for="name">Name:</label>
<input type="text" id="user" /><br />
<label for="uName">User Name:</label>
<input type="text" id="uName" hidden/><br />
<label for="pwd"></label>
<input type="password" id="pwd" /><br />
<label for="gender">Gender:</label>
<input type="radio" name="sex" value="m" checked>Male
<input type="radio" name="sex" value="f">Female<br />
<label for="appliances">Home appliances you own:</label><br />
<select name="appliances" multiple="multiple">
<option selected>Refrigerator</option>
<option>Washing Machine</option>
<option>Microwave Oven</option>
</select><br />
<label for="flower">Which flower you like?</label>
<input type="checkbox" name="flower" value="dahlia">Dahlia
<input type="checkbox" name="flower" value="tulips" checked>Tulips<br />
<input type="image" src="flower1.jpeg">
<input type="image" src="flower2.jpeg"><br />
<input type="reset" value="Reset">
<button id="btnClick">Submit</button>
</body>
------------------------------------------------------------------------------------------------
state based selectors
---------------------------
$("#btnClick").click(function(){
$("body :hidden").show(2000);
//$(":visible").hide(2000);
//$(":disabled").hide(2000);
//$(":enabled").hide(2000);
//$(":checked").hide(2000);
//$(":selected").hide(2000);
});
$(document).ready(function(){
function animating()
{
$("#box").slideToggle(5000);
}
animating();
$("#btnClick").click(function(){
$("div:animated").css("background-color", "purple");
});
});
<body>
<div></div>
<div id="box"></div>
<div></div>
<button id="btnClick">Submit</button>
</body>
-----------------------------------------------------------------------------------------------
Content based selectors
-------------------------------
$(document).ready(function(){
$("#btnClick").click(function(){
$("p:contains(First)").css("background-color", "red");
//$("p:contains(first)").css("background-color", "red");
//$("span:contains(First)").css("background-color", "red");
//$("p:has(span)").css("background-color", "red");
//$(":empty").css("background-color", "red");
//$(":parent").css("background-color", "red");
//$(":parent").css("color", "red");
//$(":not(:parent)").css("background-color", "red");
});
});
Page updated
Google Sites
Report abuse