3. What is Jquery
• jQuery is library of JavaScript file, containing all jQuery
functions.jQuery developing Ajax base Application.
• jQuery does not offer any new functionality, but it takes existing
hard-to-understand-and-write JavaScript APIs (application
programming interfaces) and makes them available to a wider
audience through easy-to-understand-and-write jQuery syntax
• jQuery is useful in HTML document like Event
Handling, Traversing, Animating Effect, Ajax Interacting and much
more.
• jQuery helps to the Programmers to create easy simple and concise
code. jQuery Library is a content of the event handling, Animation
Effect , Ajax Interactions, Lightweight, DOM manipulation and more.
Following is some jQuery Features.
4. Feature Of jQuery
• Event Handling - jQuery library is support to creating an your own events.
and also provide event model. It is very easy to handle events.
• Animation Effect - jQuery support to built the animation effects which you
want to need.
• Ajax Interactions - jQuery help to develop lot of features using in AJAX
Technology.
Ex. AJAX Technology use to connect on database and also we can fetch the
data from server without refreshing the current page.
• Lightweight - In jQuery, lightweight means "write less code, improve more
feature" using jQuery library.
• DOM manipulation - jQuery using easy to selecting DOM elements and
traversing to modifying their content. When you use CSS, easy select
element id, class and build events to increase or improve more
functionality.
• Compatibility All Dynamic Languages - jQuery script can be use with all
most Dynamic Web Languages like PHP, ASP, JSP, CGI etc.
5. Install Jquery
• First of all we have to need Jquery library file before writing any code on Jquery . Download
latest version of jquery.js file from www.jquery.com Website.
• Current version is 1.8.0 is Select the Production (32KB, Minified and Gzipped) and click on
Download jquery-1.10.2.min.js/jquery-1.10.2.js.
• How to use jQuery Library?
• So first thing is that you need to Add Jquery Library on Page.
Ex:-
<html><head> <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript"> $(document).ready(function() {
$("div").click(function() { alert("Wel-Cometo the jQuery..!"); }); }); </script>
</head>
<body>
<div id=“test">
Hey welcome to Jquery.
</div></body></html>
6. Jquery Syntax
• jQuery syntax is made by using HTML elements selector and
perform some action on the elements are manipulation in Dot
sign(.)
• jQuery syntax: $(selector).method()
• $ sign define the jQuery,
• Selector define the Query Elements in HTML document, and
• method() define the action performed on the elements
7. jQuery Selectors
• jQuery selectors is most important aspects of the jQuery library. jQuery library allow you to
select elements in your HTML document by wrapping them in $(" ") (also you have to use
single quotes), which is the jQuery wrapper. Selectors are useful and required at every step
while using jQuery.
• jQuery Selector Syntax
• jQuery offers a powerful set of selector operations, which can be used like wild cards to
identify specific elements in a page.
Selector Description
TagName Selects all element match of given elements.
this Selects current elements.
#ID Selects element whose id is match of given elements.
.CLASS Selects element whose class is match of given elements.
* Selects all elements in the document.
8. Selectors Example
Selector Example Description
* $("table *") Select All Elements.
#id $("#name") Selected element with id="name".
.class $(".name") Selected elements with class="name".
tag $("p") Selected All p elements.
:input $(":input") selected All input elements
:text $(":text") selected All input elements with type="text"
:button $(":button") selected All input elements with type="button".
:password $(":password") selected All input elements with type="password"
:radio $(":radio") selected All input elements with type="radio"
:checkbox $(":checkbox") selected All input elements with type="checkbox".
:image $(":image") selected All input elements with type="image".
:file $(":file") selected All input elements with type="file".
:submit $(":submit") selected All input elements with type="submit"
9. Selector Example Description
:reset $(":reset") selected All input elements with type="reset".
:hidden $("p:hidden
")
Selected All hidden p elements.
:visible $("tr:visible"
)
Selected All visible table rows
:empty $(":empty") Selected All elements with no child of the elements.
:contains(text) $(":contains
(‘hello')")
Select All elements which contains is text.
[attribute] $("[href]") Select All elements with a href attribute.
[attribute$=value] $("a:[href$=.
org]")
Selected elements with a href attribute value ending
with ".org"
[attribute=value] $("a:[href=#
]")
elected elements with a href attribute value equal to
"#".
[attribute!=value] $("a:[href!=
#]")
Selected elements with a href attribute value not equal
to "#".
10. 1. JQUERY TYPE SELECTORS
• input[type="text"].css(‘color’,’blue’); //jquery Text selectors
• $('textarea') .css(‘color’,’blue’); //jquery TextAreaSelectors
• input[type="hidden"].val(); //jquery Hidden Selectors
• input[type="password"] //jquery password selctors
• $('select') // jQuery dropdown selector
• input[type="radio"] //jQuery Radio Selectors
• input[type="checkbox"] //jQuery checkbox selector
• $('image') //jQuery image selector
• input[type="button"] //jQuery button selector
2. JQUERY ID SELECTORS
$("#ID") //Select any elements by ID (#) denotes ID
3. Jquery Class Selectors
$(“.classname") //Select any elements by class name ( . ) denotes Class
Ex.
4. Attribute Exist selectors
$([attribute name]) //select all elements in a page which have a specific attribute.
Ex. $("[border]").css(‘color’,’red’);
11. 4 .Attribute value selector
• $([attribute name = attribute value]) // attribute value selector to select all elements in a page
which have a specific attribute, with the specified value.
Here is example which have the attribute “border”, and a value of 0 for the border attribute
ex. $("[border='0']")
5. jQuery attribute with type selector
$("input[type=<type name>][<attribute name>]") // to select all text elements in a page which have
the following attribute.
Here is example which select text elements in the page which have the attribute “class”
Ex. $("input[type=text][class]")
6.Jquery attribute with type and value IN selector
$("input[type=<type name>][<attribute name> = <attribute value>]") // Select all text elements in a
page which have the class attribute, and a value of mycalss .
$("input[type=text][class='mycalss']")
FOR NOT IN:-
Calss attribute value != mycalss .
$("input[type=<type name>][<attribute name> != <attribute value>]")
$("input[type=text][class!='mycalss']")
6.Jquery attribute with dropdown type selector
$("select[<attribute name> = <attribute value>]")
$("select[class=“abc']")
12. 8. Attribute with checkbox type selector
input[type=checkbox][checked]
jQuery attribute with checkbox type selector to select all the checkboxes which are
checked in a page.
JQUERY METHODS
$('#TextBoxID').val(); // Get value of textbox by using val() method
$('#TextBoxID').val(‘your values'); //Set value inside textbox.
$('#TextBoxID').css("Attribute Name ", "Attribute Value") }); //set css attribute name
$('#<TextBoxID>').addClass("css class name"); //Apply css class from Textboxes in the Page
$('#<TextBoxID>').removeClass("class name"); //remove css class from Textboxes in the
Page
$('#TextBoxID').attr(‘id’,’abc’); // Add Attribute
$('#TextBoxID').removeAttr(‘id'); //remove attribute
$(‘#chekboxListId’).find(‘input’) //find input control inside checkboxlist
Disable /Enable Textbox select
$('#txtEnableDisable').prop("disabled", true); //disable textbox
$('#txtEnableDisable').prop("disabled", false); //enable textbox
