Introduction:
Jquery is a lightweight JavaScript Open Source library. jQuery is to make it much easier to use JavaScript on your website since it is a Lightweight Component.jQuery almost simplifies lots and lots of lines in basic javascript and do the same task within a single line. So most of developers use jquery only instead javacsript.
The scope of jquery just not end with javascript task, With this jquery we can do
->Ajax calls(with this you can call a PHP page and insert or change data)
->DOM (Document Object Model) Manipulation
->We can change CSS of the Page
->Add Effects to text or images
->And lots more
Before Starting to work on this you must know,
- HTML
- CSS
- Javascript
How to use:
Before using Jquery You must have jquery library. You can download it from Jquery.com for free of cost. Then insert it in your html page like you insert your javacsript page that is it. Here i will show you a demo,
<head>
<script src="jquery.js"></script> //this is your downloaded jquery librray
</head>
<script src="jquery.js"></script> //this is your downloaded jquery librray
</head>
Syntax:
<script type="text/javascript">
$(document).ready(function(){
//here goes your jquery functions
});
//here goes your jquery functions
});
</script>
$(document).ready(function(): Always we must start to use jquery function within this function. The Reason is we must start functions once our document is fully loaded in the page else it will not be a safe one, It results in unwanted actions.
Examples with explanation:
Let's say we want to hide all <h2> elements in the page. It can be done easily in this jquery.
HTML: <h2>Heading name</h2>
to hide the h2 element You just use this:
$(document).ready(function(){
$("h2").hide(); //this will hide the h2 elements fully
});
$("h2").hide(); //this will hide the h2 elements fully
});
The above code hides all h2 elements in the entire page. But if we need to hide only a particular h2 element in the page then we have to use selectors.
What is selector?
Selector is a Class or ID of the particular element. Let me explain with our above h2 example
HTML: <h2 class="classname" id="idname">Heading name</h2>
In this example we have two selectors "classname" (via class) and "idname" (via id).
Note: We have to use classname selector as .classname and idname as #idname in jquery function
Now move to our problem, Our jquery code here hides all h2 elements. We have clear this problem with this selectors help. Here is the trick
$("#idname").hide(); //this will hide elements only with "idname"
$(".classaname").hide(); //this will elements only with "classname".
Other Selectors in Jquery:
| $("*") It selects all elements $(this) It selects current element $("p.intro") It selects <p> element with 'intro' as classname $("p:first") It selects first <p> element in the entire DOM $("ul li:first") It selects first <li> element in first <ul> $("ul li:first-child") It selects first <li> element in all <ul> $("[href]") It selects all element with href as attribute $("a[target='_blank']") it selects all links with target value as blank $("a[target!='_blank']") it selects all links with target not as blank |
Wonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging!
ReplyDeleteOffshore Yii Development in India