J Query Modified Tutorials

1.
JQuery Selectors
Basic jQuery Selectors
Where to write jQuery Code
For examples in this tutorial we will write code inside html page. Inside HTML we will have
<script></script> block where we will put HTML code.
We’ll write all jQuery selectors code inside document.ready() function as follows-
<script type="text/javascript">
$("document").ready(function() {
//Selectors code goes here
});
</script>
<style type="text/css">
Examples-
//select all paragraphs of the document
$("p").css("border", "3px solid red");
//Select all elements who has class a

$(".a").css("border", "3px solid red");
//select the item who has id list1

$("#list1").css("border", "3px solid red");
//select all paragraphs who has class b attrbute

$("p.b").css("border", "3px solid red");
//select all paragraphs and all list items

//that has b class on those lists
$("p, li.b").css("border", "3px solid red");
//Select all list items those are inside the unordered list
//and also has class a
$("ul li.a").css("border", "3px solid red");
//Select all paragraphs those are next to

//the Unordered list (Ul)
$("ul + p").css("border", "3px solid red");
//select all paragraphs those are the siblings of List1

$("#list1 ~ p").css("border", "3px solid red");
});
</script>
Basic jQuery Filter Selectors
//create border of the first paragraph
$("p:first").css("border","3px solid red");
//create border of the last paragraph

$("p:last").css("border","3px solid red");
//create border of the even no paragraph

$("p:even").css("border","3px solid red");
//create border of the odd no paragraph

$("p:odd").css("border","3px solid red");
//create border of the first item of a class

$(".a:first").css("border","3px solid red");
//create border of the b class items even no

$(".b:even").css("border","3px solid red");
//create border of the greater than index 1

$("p:gt(1)").css("border","3px solid red");
//create border of the even no paragraph
$("p:even").css("border","3px solid red");
//create border of the not and equalt to

$("p:not(p:eq(2))").css("border","3px solid red");
});
</script>
Basic jQuery Attribute Selectors
Example
//Select paragraph that has Class Attribute

$("p[class]").css("border","3px solid red");
//Select paragraph that has id Attribute value = para1

$("p[id=para1]").css("border","3px solid red");
//Select paragraph that has id Attribute value starts with para

$("p[id^=para]").css("border","3px solid red");
//Select paragraph that has id Attribute not starts with para1

$("p[id$=para1]").css("border","3px solid red");
/* Select paragraph that has id Attribute value value starts with para and
also has contains the value of lang attribute = en-
note during placing multiple attributes in following way no space should
allowed. if space given no outcome should seen in brower*/
$("p[id^=para][lang*=en-]").css("border","3px solid red");
Content & Visibility Filters
//find the paragraph tag that contains text 3
$("p:contains(3)").css("border","3px solid red");
//find the all tags that contains text 3

$(":contains(3)").css("border","3px solid red");
//find the paragrap tag that are parent

$("p:parent").css("border","3px solid red");
//find the ul that has a li and the li has class attribute with name a
$("ul:has(li[class=a])").css("border","3px solid red");
//find the li inside ul that has nth child = 3 i.e. 3rd child
$("ul li:nth-child(3)").css("border","3px solid red");
//select the last li of ul i.e. select the last child (li) of parent (ul)
$("ul li:last-child").css("border","3px solid red");
//find the paragrap tag that are parent

$("ul li:nth-child(2n)").css("border","3px solid red");
//2n = 2* loop over no of elements. so in above case
//we have 4 elements i.e. 4 li inside ul. so loop 4 times
//where looping starts from 0 and ends after 3.
//during looping it will select matching element based on loop value * 2
//where 2 is given constant value.
//2*0 = 0 no element selected
//2*1 = 2 so second element will select
//2*2 = 4 so 4th element will select
//2*3 = 6 no element found
Forms Selectors
//Set border to all input boxes of the document
$("form :input").css("border", "3px solid red");
//set bort to all elements that's has text

$("form :text").css("border", "3px solid red");
//select textboxs that's are enabled

$("form :text:enabled").css("border", "3px solid red");
//Slect all checked items i.e. radio and checkbox

$("form :checked").css("border", "3px solid red");
//Select all checkbox that's are checked

$("form :checkbox:checked").css("border", "3px solid red");
Traversing
alert("There are "+ $("p").length+ "<p> elements");
var elems = $('li').get();

alert("There are "+elems.length+ " li tags");
alert($('li')).get(0);
$("ul").find("li.b").css("border", "3px solid red");
var leftmargin = 0;
var border = 3;
$("p").each(function(){
$(this).css("border", border+"px solid red");
$(this).css("margin-left",leftmargin);
border+=2;
leftmargin+=10;
})
});
jQuery Statement Chaining
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Automatic PDF Icons</title>
li {
margin: 5pt 0 0 5pt;
}
</style>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
//Place pdf icon beside those links who are ends with pdf
$("a[href$=pdf]").after("<img src='images/small_pdf_icon.gif' />");
});
</script>
</head>
<body>
<h1>Example: Automatic Insertion of Icons for PDF Links</h1>
<p>This example demonstrates how to examine the contents of a link to see if it points to a
PDF file and automatically insert a PDF icon if it does.</p>
<ul class="navlist" id="navlinks">
<li><a href="someurl.html">Link #1</a></li>
<li><a name="#anchor1">Named Anchor Link</a></li>
<li><a href="someurl.pdf">Link #3</a></li>
<li><a href="mailto:[email protected]">Email Link</a></li>
</ul>
</body>
</html>
2. Manipulating Contents using jQuery
//When click on any link (<a> tag) of the page it will open in the new
window
//In our image case- when we will click on the image it (the image) will
open a new window
$("a").attr("target", "_blank");
//we remove href attribute from link. When we need to turn link on or off
we need it
$("a").removeAttr("href");
//Setting an object as a attribute. In this way we can set multiple

properties on a single object
$("img").attr({src:"images/spring.jpg", alt:"Sprint"});
//Append some content to an element e.g- p
$("p").append(" with some content are appended");
//Appending content at the beginning of the element e.g- p

$("p").prepend("Hello ");
//take last element and appned it to first element [last p appended to

first p]
$("p:last").appendTo("p:first");
// last element appended before first element

//in this case last paragrahp appended before first paragraph
$("p:last").prependTo("p:first");
//Wrap all the paragraph tags into a div that's style has
//been set to red color
//in this case color only set on those paragraph’s that's
//has no class attribute
$("p").wrap("<div style='color:red'/>");
//Wrap all paragraphs by solid red colored border

$("p").wrapAll("<div style='border:3px solid red'/>");
//Use empty function and remove everything of

//<ul> and it's child elements
$("ul").empty();
$("#height").html($("#theDiv").height());
$("#width").html($("#theDiv").width());
$("#innerH").html($("#theDiv").innerHeight());
$("#innerW").html($("#theDiv").innerWidth());
$("#outerH").html($("#theDiv").outerHeight());
$("#outerW").html($("#theDiv").outerWidth());
$("#offset").html($("#theDiv").offset().top + ", " + $("#theDiv").offset().left);
$("#position").html($("#theDiv").position().top + ", " + $("#theDiv").position().left);
Complete Example-
AutoTOC_finished.html
3. Working with jQuery Events
In jQuery we will write event handling code inside jQuery function that we will declare as follows-
$(function() {
//Write event binding and event handling code here
});
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Binding and Unbinding Events with jQuery</title>
$(function() {
//bind the evtTarget div with moseover & mouseleave event with
//highlight function
$("#evtTarget").bind("mouseover mouseleave", highlight);
//bind the div with click event handler

//it will unbind previously moseover and mouseleave event handler
//
$("#evtTarget").bind("click", function(evt) {
//unbind both mouseover and mouseleave events
$("#evtTarget").unbind("mouseover mouseleave", highlight);
//after click a paragraph will take place inside the div
//with some texts given below inside html() function.
$("#evtTarget").html("<p>You shut off the hover effect!</p>");
});
});
//highlight function.
//Note: eventhandler function in jQuery always take an event object e.g.-evt as parameter
//Thsi is (parameter taking) applicable even we're not going use them
function highlight(evt) {
//refer the eventTarget div
//also called toggleClass function and
//it will accept highlighted call as argument of the function
$("#evtTarget").toggleClass("highlighted");
}
</script>
<style type='text/css'>
.normal {
width:300px;
height:200px;
background-color:Yellow;
font-size:18pt;
}
/*highlighted class*/
.highlighted {
background-color:Red;
}
</style>
</head>
<body>
<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the
mouseover.</div>
</body>
</html>
Output: Before mouse hover-
Output: after mouse hover
Output: after click
After click text also changed

Example:

<head>
<title>Binding and Unbinding Events with jQuery</title>
$(function() {
//called hover function and passed
//highlight function for both parameters of hover function
//This behave same as mouseenter and mouseleave event as
//we seen in previous example
$("#evtTarget").hover(highlight, highlight);
//called toggle function that will get

//fnClick1 and fnClick2 functions as argument
$("#evtTarget").toggle(fnClick1, fnClick2);
});
function highlight(evt) {
$("#evtTarget").toggleClass("highlighted");
}
//function for click1 where html will show Click!
function fnClick1() {
$("#evtTarget").html("Click!");
}
//function for click2 where html will show Clack! instead of click
function fnClick2() {
$("#evtTarget").html("Clack!");
}
</script>
.normal {
width:300px;
height:200px;
background-color:Yellow;
font-size:18pt;
}
.highlighted {
background-color:Red;
}
</style>
</head>
<body>
<h1>Using Event Helpers</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to change the
content.</div>
</body>
</html>
Output: when first time run the page-

Output when hover the mouse
After first Click
After second click

<head>
<title>Using the jQuery Event Object</title>
$(function() {
//Write an event that will set some information in all div
//so when click on those divs it will show those informations
$("div").click(function(evt) {
$(this).html("pageX: " + evt.pageX + ", pageY: "
+ evt.pageY + ", type: " + evt.type + ", target: " +
evt.target);
});
});
</script>
.normal {
width:300px;
height:200px;
background-color: Silver;
font-size:18pt;
margin:5pt 5pt 5pt 5pt;
}
</style>
</head>
<body>
<h1>Using the jQuery Event Object</h1>
<div id="Div1" class="normal">Click on this div (Div1) to see the event information</div>
</body>
</html>
Example:

<head>
<title>Miscellaneous jQuery Events</title>
$(function() {
//called one function. when click on the content
//it will change the css set background = red and cursor = auto
//Due to using one function after first click
//it will change. after that
//the function will not perform because
//one function will work only once
$("div").one("click", function() {
$(this).css({ background: "red",
cursor: "auto"
});
});
});
</script>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p{
font-size: 18pt;
}
</style>
</head>
<body>
<p>
Click on each square to change color</p>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
Combined Example

<head>
<title>Striping/Hover Highlighting a Table</title>
$(function() {
$("#theList tr:even").addClass("stripe1");
$("#theList tr:odd").addClass("stripe2");
$("#theList tr").hover(
function() {
$(this).toggleClass("highlight");
},
function() {
$(this).toggleClass("highlight");
}
);
});
</script>
th,td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width:200px;
padding:3px;
}
th {
background-color:#D2E0E8;
color:#003366
}
table {
border: 1pt solid gray;
}
.clickable {
cursor:pointer;
}
.stripe1 {
background-color:#0f0;
}
.stripe2 {
background-color:#afa;
}
.highlight {
background-color: #ffcc00;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Using jQuery to stripe and hover-highlight a table</h1>
<table id="theList">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1.99</td>
</tr>
<tr>
<td>Eggs</td>
<td>2.29</td>
</tr>
<tr>
<td>Butter</td>
<td>3.49</td>
</tr>
<tr>
<td>Bread</td>
<td>0.99</td>
</tr>
<tr>
<td>Pasta</td>
<td>1.19</td>
</tr>
<tr>
<td>Honey</td>
<td>4.39</td>
</tr>
<tr>
<td>Cookies</td>
<td>2.99</td>
</tr>
<tr>
<td>Apples</td>
<td>0.59</td>
</tr>
<tr>
<td>Sugar</td>
<td>1.78</td>
</tr>
<tr>
<td>Pepper</td>
<td>1.56</td>
</tr>
</tbody>
</table>
</body>
</html>

J Query Modified Tutorials

Uploaded by

Copyright:

Available Formats

J Query Modified Tutorials

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

J Query Modified Tutorials

Uploaded by

Copyright:

Available Formats

1.

Where to write jQuery Code

//Select all elements who has class a

//select the item who has id list1

//select all paragraphs who has class b attrbute

//select all paragraphs and all list items

//Select all paragraphs those are next to

//select all paragraphs those are the siblings of List1

//create border of the last paragraph

//create border of the even no paragraph

//create border of the odd no paragraph

//create border of the first item of a class

//create border of the b class items even no

//create border of the greater than index 1

//create border of the not and equalt to

//Select paragraph that has Class Attribute

//Select paragraph that has id Attribute value = para1

//Select paragraph that has id Attribute value starts with para

//Select paragraph that has id Attribute not starts with para1

$("p:contains(3)").css("border","3px solid red");

//find the all tags that contains text 3

//find the paragrap tag that are parent

//find the paragrap tag that are parent

$("form :input").css("border", "3px solid red");

//set bort to all elements that's has text

//select textboxs that's are enabled

//Slect all checked items i.e. radio and checkbox

//Select all checkbox that's are checked

alert("There are "+ $("p").length+ "<p> elements");

var elems = $('li').get();

$("ul").find("li.b").css("border", "3px solid red");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

//Setting an object as a attribute. In this way we can set multiple

//Appending content at the beginning of the element e.g- p

//take last element and appned it to first element [last p appended to

// last element appended before first element

//Wrap all paragraphs by solid red colored border

//Use empty function and remove everything of

//bind the div with click event handler

Output: after mouse hover

Output: after click

After click text also changed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

//called toggle function that will get

Output: when first time run the page-

After first Click

After second click

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

You might also like