11_jQuery_COMP3322A_f2019.pdf - COMP 3322A Modern Technologies on World Wide Web 1st semester 2019-2020 jQuery Dr C Wu Department of Computer Science

11_jQuery_COMP3322A_f2019.pdf - COMP 3322A Modern...

This preview shows page 1 - 11 out of 34 pages.

Dr. C Wu Department of Computer Science The University of Hong Kong jQuery 1st semester 2019-2020 COMP 3322A Modern Technologies on World Wide Web
Image of page 1
Overview jQuery is a JavaScript library jQuery aims to simplify JavaScript programming wraps many common tasks, that require many lines of JavaScript code to accomplish, into methods that one can call with a single line of code mainly for HTML/CSS manipulation through DOM, HTML event handling, AJAX, effects and animations, etc. jQuery is a very popular JavaScript framework in use today, free and open sourced, supporting all major browsers used on platforms of Google, Microsoft, IBM, etc. advantages of using jQuery simplicity a consistent interface that works across different browsers extensible
Image of page 2
Downloading jQuery jQuery library does not come with a web browser To use jQuery in one’s web pages: <head> <script src="jquery.js"></script> </head> or point to jQuery library on the Web <head> <script src=“"></script> </head> a single JavaScript file! the name may differ according to different versions you downloaded Google’s CDN server download jQuery library (e.g., from jQuery.com), store it together with your web pages, and link to it in your web pages
Image of page 3
Basic syntax $ : used as a shortcut to specify using jQuery action : to perform on the element(s) examples $("div").hide() $(".aaa").hide() $("#bbb").hide() At its core, jQuery is a DOM manipulation library $ ( selector ). action ( parameter(s) ) selector : used to select HTML elements based on name, id, class, type, attribute, value of attribute, etc. use the existing CSS selectors, plus jQuery’s own custom selectors hides all <div> elements hides all elements with class "aaa" hides the element with id "bbb" $(this).hide() hides the current element
Image of page 4
Document ready A good practice is to place jQuery methods inside event handler function of document ready event $(document).ready(function(){ // jQuery methods }); Purpose : to prevent any jQuery code from running before the DOM (document object model) of the HTML page has been loaded $(function(){ // jQuery methods }); or a callback function, executed when the event is triggered $() is shorthand for $(document).ready()
Image of page 5
Event Handling Most HTML DOM events have an equivalent jQuery method click() dblclick() mousedown() mouseup() mouseover() blur() focus() hover() submit() etc.
Image of page 6
Event Handling (cont’d) Event handler is commonly registered as a callback function of the event $( "p" ). click (function(){ $(this).hide(); }); $( "#p1" ). mousedown (function(){ alert("Mouse down over p1!"); }); $( "input" ). focus (function(){ $(this).css("background-color", "#cccccc"); }); the current element
Image of page 7
Or use on() to attach one or more event handlers to the selected element(s) $( "div" ). on ({ mouseenter : function(){ $(this).css("background-color", "lightgray"); }, mouseleave : function(){ $(this).css("background-color", "lightblue"); }, click : function(){ $(this).css("background-color", "yellow"); } }); Event Handling (cont’d)
Image of page 8
HTML Manipulation — Get/Set Content text() - gets or sets the text content of selected element(s) html() - gets or sets the HTML content of selected element(s) (including HTML markup) val() - gets or sets the value of form fields attr() - gets or sets attribute values
Image of page 9
<!DOCTYPE html>
Image of page 10
Image of page 11

You've reached the end of your free preview.

Want to read all 34 pages?

  • Fall '19

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture