What is jQuery and why web designers use it?
jQuery is a lightweight, “write less, do more” JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website.
What you should already know before you start studying jQuery?
You should have a basic knowledge of
- HTML
- CSS
- JavaScript
Note – If you don’t have basics knowledge of HTML, CSS & JavaScript then you may face some problems in knowing it perfectly.
How to Write jQuery?
jQuery is a JavaScript library, we have to download jQuery library from www.jquery.com and save it in your computer and attach in the head part of web page.
Example:
<head> <script type="text/javascript" src="jquery.js"></script> </head>
We can also use CDN link and it is recommended too.
<script type="text/JavaScript" src="https://code.jquery.com/jquery-latest.js" >
After attaching your library file to you html page you can start writing your first jQuery code inside the <script> your jQuery code </script> tag in the body.
And finally your coding will start with this line
//here dollar sign shows jQuery
$(‘document’).ready(function () {
//Your code will be here
});
What are jQuery selectors?
jQuery selectors are used to select html elements based on their id, class, element type, attributes, and many more. jQuery selectors select HTML elements to manipulate them.
Now lets see all types of selectors in jQuery.
1. Element Selector (“element”)
Element selectors select elements by elements tags name.
Ex-
$(“p”).css(“color”,”red”);// text color of all the p elements will be red $(“div”).css(“color”,”red”);// text color of all div elements will be red
2. All Selector (“*”)
All selector select all HTML elements at a time.
Ex-
$(“*”).css(“color”, “blue”);//change all elements text color to blue
3. Id Selector (“#id”)
Selects all elements with the given id.
Ex-
$(“#id”).css(“background”, “black”);
4. Class Selector (“.class”)
Class selector selects all elements with the given class.
Ex-
$(“.class”).css(“color”, “black”);
5. Last-Child Selector (“:last-child”)
Last-Child selector selects last child elements of all parents.
Ex-
$(“p:last-child”).css(“border”, “2px solid #f00”);
6. First-Child Selector (“:first-child”)
First-Child selector selects all first elements of all parents.
Ex-
$(“p:first-child”).css(“border”, “2px solid #f00”);
7. Animated Selector (“:animated”)
Animated selector selects those type of elements which are being animated currently.
Ex-
$(“div:animated”).css(“background”, “black”);
8. Button Selector (“:button”)
Button selector selects all button or input type button.
Ex-
$(“:button”).css(“background: black”, “ border:2px solid red”);
9. Checkbox Selector (“:checkbox”)
Checkbox selector selects all checkbox or input type checkbox.
Ex-
$(“form input:checkbox”).css(“border”, “1px solid red”);
10. Header Selector (“:header”)
Header selector selects all headers elements like h1, h2, h3, h4, h5 and h6.
Ex-
$(“:header”).css(“background:#ccc”, “color:#f00”);
Summary
The above code is good enough for understanding selectors in jQuery. You know now that jQuery language is “write less do-more” JavaScript library. jQuery based on its APIs, therefore we should remember all selectors API, effects API, events API, CSS API, Dimensions API, Ajax API, DOM API, and traversing API.
About the Writer
Author of the post is Pradeep Kumar Jha, a student of web designing and UI development course in ADMEC Multimedia Institute, Delhi.
