How to program using JQuery
We can download jQuery from
[url]http//www.code.jQuery.com[/url]
jQuery is a library of JavaScript Functions.
The jQuery library contains the following features:
- 1.HTML element selections
2.HTML element manipulation
3.CSS manipulation
4.HTML event functions
5.JavaScript Effects and animations
6.HTML DOM traversal and modification
7.AJAX
8. Utilities
Before starting you need to add jQuery to webpage like this
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
Basic syntax is: $(selector).action()
A dollar sign to define jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Eg: $("H1").hide() - hides all h1 elements.
$("p.styleclass").hide() - hides all paragraph with class styleclass
$("#myid").hide() - hides the element with id myid.
--------------------------
$(document).ready(function(){
--- jQuery functions will be here ----
});
Document.ready will ensure that the jQuery codes run only after the page fully loaded.
More examples for jQuery selectores are
Syntax Description
$(this) -Current HTML element
$("p") -All <p> elements
$("p.intro")- All <p> elements with class="intro"
$(".intro") -All elements with class="intro"
$("#intro") -The first element with id="intro"
$("ul li:first") -The first <li> element of each <ul>
$("[href$='.jpg']") -All elements with an href attribute that ends with ".jpg"
$("div#intro .head") -All elements with class="head" inside a <div> element with id="intro"
Some other JavaScript libraries also use the dollar sign for their functions (like Prototype).
jQuery has a method called noConflict() to deal with this.
var jr=jQuery.noConflict(), lets you use your own name (like jr) instead of the dollar sign.
Play with following code,
- Code: Select all
<html>
<head>
<script type="text/javascript"src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$("H2").hide();
$("#lnk").hide(1000);
});
$("button#btnshow").click(function()
{
$("H2").show();
$("#lnk").show(500);
$("div").css("background-color","yellow");
});
$("button#btntoggle").click(function()
{
$("H2").toggle(500);
$("#lnk").show(500);
$("div").fadeTo("slow",0.25);
});
});
</script>
</head>
<body>
<div id="dv" style="height:100px;background-color:red">
<h2>Share Knowledge</h2>
<a id="lnk" href="www.Tctcworld.com" >Tctcworld.com.</a>
</div>
<button type="button">Hide Me</button>
<button id="btnshow" type="button">Show me</button>
<button id="btntoggle" type="button">Toggle me</button>
</body>
</html>
Manipulate Description
$(selector).html(content) Set the content (inner HTML) of selected elements
$(selector).text(text) same as html(), but tags will be escaped
$(selector).attr(attr,value) Set an attribute and value of selected elements
$(selector).val(value) Set the value of the first selected element
Getting Contents
$(selector).html() Get the contents (inner HTML) of the first selected element
$(selector).text() Get the text content of all selected elements (combined)
$(selector).attr(attr) Get the value of an attribute from selected elements
$(selector).val() Get the current value of the first selected element
Adding Content
$(selector).after(content) Add content after selected elements
$(selector).before(content) Add content before selected elements
$(selector).insertAfter(selector) Add selected elements after selected elements
$(selector).insertBefore(selector) Add selected elements before selected elements
Manipulate CSS Description
$(selector).addClass(content) Add a class to selected elements
$(selector).removeClass(content) Remove a class from selected elements
$(selector).toggleClass(content) Toggle between adding/removing a class from selected elements
$(selector).hasClass(content) Check if the selected elements have a specified class
Adding Inner Content
$(selector).append(content) Append content to the inner content of selected elements
$(selector).prepend(content) "Prepend" content to the inner content of selected elements
$(content).appendTo(selector) Append selected elements to the inner content of selected elements
$(content).prependTo(selector) "Prepend" selected elements to the inner content of selected elements
Wrapping
$(selector).wrap(content) Wrap each selected element within a content
$(selector).wrapAll(content) Wrap all selected elements into one content
$(selector).wrapinner(content) Wrap selected inner child contents within a content
$(selector).unwrap() Remove and replace the parents of the specified elements
Copy, Replace, Remove
$(content).replaceAll(selector) Replace selected elements with selected elements
$(selector).replaceWith(content) Replace selected elements with new content
$(selector).empty() Remove all content and child elements from selected elements
$(selector).remove() Remove all selected elements
$(selector).removeAttr(attr) Remove a specified attribute from all selected elements
$(selector).clone() Clone all selected elements
$(selector).detach() Remove the specified elements from the DOM
