Javascript Week 14 Lesson 1 jQuery Examples (1) PPT PDF

Global Leader, YEUNGJIN UNIVERSITY JavaScript Week 14. jQuery Examples Lesson 1. jQuery Examples(1) Prof. Sunhee Lee Learning Contents & Learning Objectives Learning Contents jQuery Selectors jQuery Events Learning Objectives Can explain and use the jQuery Selectors....

Global Leader, YEUNGJIN UNIVERSITY JavaScript Week 14. jQuery Examples Lesson 1. jQuery Examples(1) Prof. Sunhee Lee Learning Contents & Learning Objectives Learning Contents jQuery Selectors jQuery Events Learning Objectives Can explain and use the jQuery Selectors. Can explain and use the jQuery Events. 1. jQuery Selectors 2. jQuery Events 1. jQuery Selectors(1) 1 Understanding of jQuery Selectors(1) Concept of jQuery Selectors - jQuery selectors are one of the most important parts of the jQuery library. - 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 and much more. - 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: $(). 1. jQuery Selectors(2) 1 Understanding of jQuery Selectors(2) Basic syntax of jQuery Selectors - 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). Basic $(selector).action() syntax A $ sign to define/access jQuery of A (selector) to "query (or find)" HTML elements jQuery A jQuery action() to be performed on the element(s) 1. jQuery Selectors(3) 2 Examples of jQuery Selectors(1) Examples of jQuery Selectors Examples and Description $("p").hide() - Hide all elements $("#test").hide() - Hide the element with id="test" $(".test").hide() - Hide the elements with class="test" $(this).hide() - Hide the current HTML element 1. jQuery Selectors(4) 2 Examples of jQuery Selectors(2) Examples of jQuery Selectors Syntax Description $("*") Selects all elements $(this) Selects the current HTML element $("p.intro") Selects all elements with class="intro" $("p:first") Selects the first element $("ul li:first") Selects the first element of the first $("ul li:first-child") Selects the first element of every 1. jQuery Selectors(5) 2 Examples of jQuery Selectors(3) Examples of jQuery Selectors Syntax Description $("[href]") Selects all elements with an href attribute Selects all elements with a target attribute value equal to $("a[target='_blank']") "_blank" Selects all elements with a target attribute value NOT $("a[target!='_blank']") equal to "_blank" Selects all elements and elements of $(":button") type="button" $("tr:even") Selects all even elements $("tr:odd") Selects all odd elements 1. jQuery Selectors(6) 2 Examples of jQuery Selectors(4) Examples of The element Selector - When a user clicks on a button, all "p1" elements will be hidden. jQuery1 jQuery $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); 1. jQuery Selectors(7) 2 Examples of jQuery Selectors(5) Examples of The #id Selector - When a user clicks on a button, the elements with id="p1" will be hidden. jQuery1 jQuery $(document).ready(function(){ $("button").click(function(){ $("#p1").hide(); }); }); 1. jQuery Selectors(8) 2 Examples of jQuery Selectors(6) Examples of The.class Selector - When a user clicks on a button, the elements with class="ps" will be hidden. jQuery1 jQuery $(document).ready(function(){ $("button").click(function(){ $(".ps").hide(); }); }); 1. jQuery Selectors(9) 2 Examples of jQuery Selectors(7) Examples of The *all Selector - Selects all elements jQuery1 jQuery2 $(document).ready(function(){ jQuery $("button").click(function(){ $("*").hide(); }); }); 1. jQuery Selectors(10) 2 Examples of jQuery Selectors(8) Examples of The :first Selector - Selects the first element jQuery1 jQuery2 $(document).ready(function(){ jQuery $("button").click(function(){ $("p:first").hide(); }); }); 1. jQuery Selectors(11) 2 Examples of jQuery Selectors(9) Examples of The "[attribute]" Selector - Selects all elements with an href attribute jQuery1 jQuery2 $(document).ready(function(){ jQuery $("button").click(function(){ $("[id]").hide(); }); }); 1. jQuery Selectors 2. jQuery Events 2. jQuery Events(1) 1 Understanding of jQuery Events(1) Concept of jQuery Events - All the different visitors' actions that a web page can respond to are called events. - An event represents the precise moment when something happens. moving a mouse over an element Examples selecting a radio button clicking on an element 2. jQuery Events(2) 1 Understanding of jQuery Events(2) Basic syntax of jQuery Events - In jQuery, most DOM events have an equivalent jQuery method. - To assign a click event to all paragraphs on a page, you can do this. Syntax $("p").click(); - The next step is to define what should happen when the event fires. - You must pass a function to the event: $("p").click(function(){ Syntax // action goes here!! }); 2. jQuery Events(3) 2 Examples of jQuery Events(1) Examples of jQuery 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 2. jQuery Events(4) 2 Examples of jQuery Events(2) Examples of jQuery DOM Events Syntax Description click() Attaches/Triggers the click event dblclick() Attaches/Triggers the double click event mouseenter() Attaches/Triggers the mouseenter event mouseleave() Attaches/Triggers the mouseleave event mousedown() Attaches/Triggers the mousedown event mouseup() Attaches/Triggers the mouseup event 2. jQuery Events(5) 2 Examples of jQuery Events(3) Examples of jQuery DOM Events Syntax Description hover() Attaches two event handlers to the hover event focus() Attaches/Triggers the focus event blur() Attaches/Triggers the blur event on() Attaches event handlers to elements 2. jQuery Events(6) 2 Examples of jQuery Events(4) 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 element; hide the current element: Click me away! $(document).ready(function(){ Click me too! $("p").click(function(){ $(this).hide(); }); }); 2. jQuery Events(7) 2 Examples of jQuery Events(5) 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. Click me away! $(document).ready(function(){ Click me too! $("p").dbclick(function(){ $(this).hide(); }); }); 2. jQuery Events(8) 2 Examples of jQuery Events(6) 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. $(document).ready(function(){ $("p").hover(function(){ alert("You entered p1!"); jQuery! }, function(){ alert("Bye! You now leave p1!"); }); }); 2. jQuery Events(9) 2 Examples of jQuery Events(7) focus() and blur() - The focus() and blur() method attaches an event handler function to an HTML form field. - The focus() method is executed when the form field gets focus. - The blur() method is executed when the form field loses focus. $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color", "yellow"); Name: });