| Module 2 |
|
| GETTING STARTED WITH JQUERY |
|
| The first article of the jquery begins here by exploring the syntax of jquery, how it is set up, and how its functions are called. Later than we explain the core functions in the library and how it uses its powerful selectors and filters to make DOM traversal easy and straightforward. This tutorial is basically for that who have the prior knowledge about basics JavaScript s, css syntax and the DOM syntax. |
|
| Before getting the fun with jquery, we need to get the basics, out of the way- how to install it and how to start and so on. |
|
| Functions: |
|
| Before we explain about jquery, I want to explain the selectors, attributes and functions used in the jquery. |
|
| Selectors |
|
| The term “Selectors” are used in jQuery, it serves some of the best features to jQuery, when it comes to dom manipulation. They allow you to quickly select all elements or groups of elements of a given tag name, attribute name or their contents and allow you to manipulate them as a group or a single node. |
|
| Example of jQuery selectors |
|
| Some of the main Selector which is frequently used in jquery is listed below: |
|
| 1. #id – This selector is most commonly used selector which matches a simgle element with the given id attribute. |
|
| Example: |
|
| $("div").css("border"," 5px solid green"); |
|
| 2. element- This selector is also commonly used, This selector will collect all elements in a document with the given tag name i.e. table, ul, li, a etc. |
|
| Example: |
|
| $("div").css("border"," 5px solid green"); |
|
| Note:* It differs from the ‘id ‘attribute (above one) only for it select all the div with the given name in the script. |
|
| 3. class- The class selector will mathes all elements in the document with the given class name. |
|
| Example: |
|
| $(".myClass").css("border","3px solid red"); |
|
| 4. class- Matches all the element with the given classes. |
|
| Example |
|
| $(".myClass").css("border","5px solid green"); |
|
| 5. selector1, selector2, and selectorN- This selector is for the matches of combined result of the specified selector. |
|
| Example: |
|
| $("div,span,p.myClass").css("border","3px solid red"); |
|
| Here we describe about the basic terms used in the jQuery – |
|
| 1- :hidden – It is used for matching all of the elements which are hidden. |
|
| Example: |
|
$("span:first").text("We here found total of " +
$(":hidden", document.body).length +" hidden elements ");
$("div:hidden").show(3000);
$("span:last").text( $("input:hidden").length + " hidden inputs are found here.");
|
|
| 2- : visible – It is just reverse of the hidden it matches all of the elements which are visible. |
|
| Example: |
|
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});
|
|
| Some of the term is used as a filter/separator, which are commonly used as a filter to separate the term. |
|
| 1- : First – It matches the element which is to be selected first. |
|
| Example: |
|
| $("tr:first").css("font-style", "bold"); |
|
First Element
Second element
Third Element |
|
| 2- : Last – It matches the element which is selected last. |
|
| Example: |
|
| $("tr:last").css({backgroundColor: 'red', fontWeight: 'bolder'}); |
|
First Element
Second element
Third Element |
|
| 3- : Not (selector) – It filters out the all the element matching the given selector.; |
|
| Example: |
|
$("input:not(:checked) + span").css("background-color", "orange");
$("input").attr("disabled", "disabled");
|
|
| 4- : Even – It matches the even no of elements. |
|
| Example: |
|
| $("tr:even").css("background-color", "996699"); |
|
| 5- : Odd – It matches the odd no of elements. |
|
| Example: |
|
| $("tr:odd").css("background-color", "#996699"); |
|
| 6- : Header -It matches all the element that are headers, like h1, h2, h3 and so on. |
|
| Example: |
|
| $(":header").css({ background:'#CAB', color:'green' }); |
|
| Attribute filters- |
|
| • [attribute]- Matches elements that have the specific attribute. |
|
| Example: |
|
$("div[id]").one("click", function(){
var strId = $(this).text() + " = " + $(this).attr("id");
$(this).text(strId);
});
|
|
| • [attribute=value]- Matches elements that have the specific attribute with a certain value. A little more definition and tone comes in through this selector. We can use the < a> element again. For example, use$('[href=http://www.ebizelindia.com]') to select all < a> elements with a link to foxnews, the only reputable news source in America (of course). |
|
| Example: |
|
$("div[id]").one("click", function(){
var strId = $(this).text() + " = " + $(this).attr("id");
$(this).text(strId);
})
|
|
| • [attribute!=value] - Matches elements that either don’t have the specific attribute or do have the specific attribute but not having a certain value.There are many of the filter are there expect them, which will be known by you on practicing more example. |
|
| Example: |
|
| $("input[name=attrName]").next().text(" a text "); |
|
| Now after a short view on the elements used in jquery let us we describe the basic term used form: |
|
| Inputs- it matches all the inputs, text area, select and button elements etc. It Returns only input Elements of the tag name input, select, text area and button. |
|
| Example: |
|
var totalinput = $(":input");
var formChild= $("form > *");
$("#messages").text("Found " + totalinput.length + " inputs are called, form has " +
formChild.length + " children.");
;
|
|
| : Text – it matches all the inputs of the text type. |
|
| Example: |
|
var txtInput = $("form input:text").
css({background:"red", border:"5px
yellow solid"});
$("div").text("For this type jQuery found " + txtInput.length + ".")
.css("color", "green");
|
|
| : Password – matches all the input element of typed password. |
|
| Example: |
|
var inputPass = $("input:password").
css({background:"red", border:"5px red solid"});
$("div").text("A Password Field is found " + inputPass.length + ".")
.css("color", "green");
|
|
| Some more Selectors- |
|
| : Enable- It is used in a script to display all the inputs that are enable. |
|
| Example: |
|
| $("input:enabled").val("enable field"); |
|
| : Disable- It is used in a script to display all the inputs that are disable. |
|
| Example: |
|
| $("input:disabled").val("disable field"); |
|
| Like these all the others element have the same meaning with respect to its name. |
|
|
|
|
|
|
0 comments: