08-jQuery.pdf - jQuery 2018\/19 COMP3322A Modern Technologies on WWW Contents Intro to jQuery Selectors Events Manipulating the DOM DOM Traversal Special

08-jQuery.pdf - jQuery 2018/19 COMP3322A Modern...

This preview shows page 1 - 9 out of 40 pages.

jQuery 2018/19 COMP3322A Modern Technologies on WWW
Image of page 1
Contents Intro to jQuery Selectors Events Manipulating the DOM DOM Traversal Special effects Using AJAX Others
Image of page 2
What is jQuery?
Image of page 3
Including jQuery You must either: Download jQuery to your Website and link to it You can download a copy from jQuery.com. There is usually a choice between a Production (compressed) version and a Development (uncompressed) version. For learning, use the Development version as it is uncompressed and readable code. In your HTML document, reference it with the <script> tag in the <head> section. Reference to a third-party CDN, such as Google and Microsoft <head> <script src = "jquery-3.3.1.js" ></script> </head> < head > < script src ="">< /script > < /head >
Image of page 4
Including jQuery Using a third-party content delivery network (CDN) is advantageous for several reasons. The bandwidth of the file is offloaded to reduce the demand on your servers. The user may already have cached the third-party file and thus not have to download it again, thereby reducing the total loading time. A disadvantage to the third-party CDN is that your jQuery will fail if the third-party host fails (unlikely but possible)
Image of page 5
jQuery Syntax A jQuery statement consists of:A $ symbol, followed by a Selector in parentheses, and then a period and a method to apply to the selected element(s)which is the same as this vanilla JavaScript code:Actually, $ is just an alias for jQuery; another way to issue the jQuery request is:$("#divTest1").text("Hello, world!");document.getElementById("divTest2").innerHTML="Hello, world!";jQuery("#divTest1").text("Hello, world!");
Image of page 6
Waiting until DOM is ready jQuery is so closely related to DOM, it is good practice to wait for the document to be fully loaded and ready, before manipulating the document. Instead of placing the JavaScript script at the end of the HTML document, you can use this jQuery feature: This makes sure the page DOM is ready for the code to execute. In that case, you can place the JavaScript (and jQuery) code in the <head> section $(document).ready( function () { // your code goes here }); $( function () { // your code goes here }); A shorter version
Image of page 7
Selectors jQuery can help us find elements based on their ID, classes, types, attributes, values of attributes, . . . which works in exactly the same way as CSS selectors. Selectors The element selector The #id selector The .class selector The attribute selector Compound and contextual selector
Image of page 8
Image of page 9

You've reached the end of your free preview.

Want to read all 40 pages?

  • Summer '19
  • Ajax, Document Object Model, baz, modern technologies

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture