JQuery -1

jQuery Hands-On Practical Course

--------------------------

HTML

===================

<!DOCTYPE html>

<head>

<title>JQuery Tutorial</title>

</head>

<body>

<p id="myPara">First Jquery</p>

<button id="btnClick">Click Me!!</button>

$("#btnClick").click(function(){

$("#myPara").css("background-color","pink");

});

</script>

</body>

</html>

===========================

Selectors

===========================

All selector

-----------

$(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>

<td>1</td><td>John</td><td>Smith</td><td>johnsmith@abc.com</td>

</tr>

<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>

$(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>

</body>

---------------------------------------------------

attributes based selectors -1

-------------------

<!DOCTYPE html>

<html>

<head>

<title>Selectors</title>

$(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>

$(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>

$(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>

$(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="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 />

<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 />

<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>

<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");

});