Unit-III_JQuery.pptx engineering subject for third year students

1. Introduction to JQuery • 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. • jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. • Many of the biggest companies on the Web use jQuery, such as: Google, Microsoft, IBM, Netflix

jQuery library The jQuery library contains the following features: • HTML/DOM manipulation • CSS manipulation • HTML event methods • Effects and animations • AJAX • Utilities

2. JQuery Syntax • With jQuery you select (query) HTML elements and perform "actions" on them. • The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). • jQuery uses CSS syntax to select elements.

JQuery Syntax (Cont..) Basic syntax is: $(selector).action() • A $ sign to define/access jQuery • A (selector) to "query (or find)" HTML elements • A jQuery action() to be performed on the element(s) • jQuery uses a format, $(selector).action() to assign an element(s) to an event. • To explain it in detail, $(selector) will call jQuery to select selector element(s), and assign it to an event API called .action().

jQuery Examples 1) $(this).hide() - hides the current element. 2) $("p").hide() - hides all <p> elements. 3) $(".test").hide() - hides all elements with class="test". 4) $("#test").hide() - hides the element with id="test". • The Document Ready Event: All jQuery methods are inside a document ready event. The ready event is executed as soon as the document is fully loaded. • $(document).ready(function(){ // jQuery methods go here... });

3. Selectors • jQuery selectors allow you to select and manipulate HTML element(s). • jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes etc. • It's based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector • The jQuery element selector selects elements based on the element name. You can select all <p> elements on a page like this: $("p") • Example: When a user clicks on a button, all <p> elements will be hidden: $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });

The #id Selector • The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. • Example: When a user clicks on a button, the element with id="test" will be hidden: $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });

The .class Selector • The jQuery .class selector finds elements with a specific class. To find elements with a specific class, write a period character, followed by the name of the class: $(".test") • Example: When a user clicks on a button, the elements with class="test" will be hidden: $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });

jQuery Selectors List Syntax Description $("*") Selects all elements $(this) Selects the current HTML element $("p.intro") Selects all <p> elements with class="intro" $("p:first") Selects the first <p> element $("ul li:first") Selects the first <li> element of the first <ul> $("ul li:first-child") Selects the first <li> element of every <ul>

Syntax Description $("[href]") Selects all elements with an href attribute $("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank" $("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank" $(":button") Selects all <button> elements and <input> elements of type="button" $("tr:even") Selects all even <tr> elements $("tr:odd") Selects all odd <tr> elements

4. JQuery Event Methods • jQuery is designed to respond to events in an HTML page. • All the different user actions that a web page can respond to are called events. • An event represents the precise moment when something happens. • The term "fires/fired" is often used with events. • Example: "The keypress event is fired, the moment you press a key".

Common DOM events Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload

Commonly Used jQuery Event Methods

i. $(document).ready(): The $(document).ready() method allows us to execute a function when the document is fully loaded. ii. click(): The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. The following example says: When a click event fires on a <p> element; hide the current <p> element: Example $("p").click(function(){ $(this).hide(); });

iii. dblclick(): The dblclick() method attaches an event handler function to an HTML element. The function is executed when the user double-clicks on the HTML element: Example $("p").dblclick(function(){ $(this).hide(); }); iv. mouseenter(): The mouseenter() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer enters the HTML element: Example $("#p1").mouseenter(function(){ alert("You entered p1!"); });

v. mouseleave(): The mouseleave() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer leaves the HTML element: Example $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); vi. mousedown(): The mousedown() method attaches an event handler function to an HTML element. The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element: Example $("#p1").mousedown(function(){ alert("Mouse down over p1!"); });

vii. mouseup(): The mouseup() method attaches an event handler function to an HTML element. The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element: Example $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); viii. hover(): The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: Example $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); });

ix. focus(): The focus() method attaches an event handler function to an HTML form field. The function is executed when the form field gets focus: Example $("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); x. blur(): The blur() method attaches an event handler function to an HTML form field. The function is executed when the form field loses focus: Example $("input").blur(function(){ $(this).css("background-color", "#ffffff"); });

xi. The on() Method: The on() method attaches one or more event handlers for the selected elements. • Attach multiple event handlers to a <p> element: Example $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } });

5. HTML Manipulation • jQuery comes with a group of DOM related methods that make it easy to access (get) and manipulate (set) elements and attributes. • Three simple, but useful, jQuery methods for DOM manipulation are: 1. text() - Sets or returns the text content of selected elements 2. html() - Sets or returns the content of selected elements (including HTML markup) 3. val() - Sets or returns the value of form fields • Examples

6. Effects • jQuery provides a trivially simple interface for doing various kind of animation effects. • jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. • The following are the jQuery effects: Hide, Show, Toggle, Slide, Fade, and Animate. • Hide, Show, Toggle Examples

Fade in, Fade out • The jQuery fadeIn() method is used to fade in a hidden element. • The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. • The jQuery fadeOut() method is used to fade out a visible element. Examples

Sliding methods • With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: 1. slideDown(): used to slide down an element. 2. slideUp(): used to slide up an element 3. slideToggle(): toggles between the slideDown() and slideUp() methods Examples

Animate • The jQuery animate() method is used to create custom animations. • Syntax: $(selector).animate({params}); • Example

Getting and Setting CSS properties • The css() method sets or returns one or more style properties for the selected elements. 1. To return the value of a specified CSS property, use the following syntax: css("propertyname"); Example: $("p").css("background-color"); 2. To set a specified CSS property, use the following syntax: css("propertyname","value"); Example: $("p").css("background-color", "yellow"); 3. To set multiple CSS properties, use the following syntax: css({"propertyname":"value","propertyname":"value",...}); Example:$("p").css({"background-color": "yellow", "font- size": "200%"});

Unit-III_JQuery.pptx engineering subject for third year students

More Related Content

Similar to Unit-III_JQuery.pptx engineering subject for third year students

More from MARasheed3

Recently uploaded

Unit-III_JQuery.pptx engineering subject for third year students