Published on

Published in: Education, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. JQUERY Author :- Pankaj Srivastava Email:-Pankajshrivastav6@gmail.com Contact No: +91-9716921436
  2. 2. Topics • Jquery Intro • jQuery Syntax • jQuery Selectors • jQuery Attributes • jQuery Events • jQuery Effects • Animations Effect • jQuery with AJAX
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  13. 13. Jquery Events 1. KEYUP $('#txtEventHandler').keyup(function(event) { //Bind Keyup events in jquery alert('Keyup event fired for the key: ' + event.which); alert('Textbox Value: ' + $(this).val()); }); 2. KeyPress $('#txtEventHandler').keypress(function(event) { alert('Keypress event fired for the key: ' + event.which); // Bind keypress events in jquery alert('Textbox Value: ' + $(this).val()); }); 3. KeyDown $('#txtEventHandler').keydown(function(event) { alert('Keydown event fired for the key: ' + event.which); //keyDown events alert('Textbox Value: ' + $(this).val()); }); 4. FocusIn :- $('#txtEventHandler').focusin(function(event) { alert('Focusin event fired'); });
  14. 14. 5. Focusout events:- $('#txtEventHandler').focusout(function(event) { alert('Focusout event fired'); }); Jquery Mouse Events // Click Event $("#btnId").click(function(event) { $("#spanid").text('Click Event'); }); // Double Click Event Replace .click to .dblclick // Mouse Position Event $("# btnId ").mousemove(function(event) { $("#spnid").text('Mouse Position: ' + event.pageX +', ' + event.pageY); }); // Mouse Down Event . Mousedown //mouseUp .mouseup
  15. 15. //mouse over .mouseover // Mouse Hover Event . Hover function(event) //Mouse Left Button Click Event . Mousedown // event.which == 1 // Mouse Middle Button Click Event .mousedown // event.which == 2 .mousedown //event.which==3 .dblclick //dbl click
  16. 16. JQuery Table Selected Row Values $("#tblEmployee tr").click(function(event) { var ID = $(this).find("td:nth-child(1)").html(); var Name = $(this).find("td:nth-child(2)").html(); alert('ID: ' + ID + 'nName: ' + Name); });
  17. 17. THANK YOU