Tut 4 - JQuery.pptx - Tutorial 4 jQuery Web Application Design and Development(COMP 3421 Dr Lei Yang [email protected] Tutorial 4 roadmap \u2022 4.1

Tut 4 - JQuery.pptx - Tutorial 4 jQuery Web Application...

This preview shows page 1 - 10 out of 43 pages.

Tutorial 4: jQuery Web Application Design and Development (COMP 3421) Dr. Lei Yang [email protected]
Image of page 1
Tutorial 4: roadmap 4.1 Introduction 4.2 jQuery Effects 4.3 jQuery HTML 4.4 jQuery Traversing 4.5 jQuery AJAX
Image of page 2
4.1 Introduction
Image of page 3
Recall: JavaScript is one of the 3 languages of web development jQuery is a lightweight JavaScript library (write less, do more) jQuery greatly simplifies JavaScript programming jQuery is easy to learn What is jQuery? jQuery is probably the most popular and extendable JavaScript library. Many of the biggest companies on the web use jQuery, such as Google, Microsoft and IBM. jQuery will run exactly the same in all major browsers.
Image of page 4
Download the jQuery library from jQuery.com Production version - this is for your live website because it has been minified and compressed Development version - this is for testing and development (uncompressed and readable code) Include jQuery from a CDN, like Google Add jQuery to your Web Pages < head > < script src ="jquery-3.4.1.min.js">< /script > < /head > < head > < script src =" jquery.min.js">< /script > < /head >
Image of page 5
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). 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 Syntax $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test".
Image of page 6
jQuery Syntax You might have noticed that all jQuery methods in our examples, are inside a document ready event This is to prevent any jQuery code from running before the document is finished loading (is ready). It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section. 7 $(document).ready( function (){ // jQuery methods go here... });
Image of page 7
jQuery selectors allow you to select and manipulate HTML element(s). It's based on the existing CSS Selectors, and in addition, it has some own custom selectors. The element selector The #id selector The .class selector jQuery Selectors $(document).ready( function (){ $( "button" ).click( function (){ $( ".test" ).hide(); }); }); $(document).ready( function (){ $( "button" ).click( function (){ $( "p" ).hide(); }); }); $(document).ready( function (){ $( "button" ).click( function (){ $( "#test" ).hide(); }); }); ilename=tryjquery_hide_p ? filename=tryjquery_hide_id lename=tryjquery_hide_class
Image of page 8
jQuery Selectors 9 Syntax Description Example $("*") Selects all elements Try it $(this) Selects the current HTML element Try it $("p.intro") Selects all <p> elements with class="intro" Try it $("p:first") Selects the first <p> element Try it $("ul li:first") Selects the first <li> element of the first <ul> Try it $("ul li:first-child") Selects the first <li> element of every <ul> Try it $("[href]") Selects all elements with an href attribute Try it
Image of page 9
Image of page 10

You've reached the end of your free preview.

Want to read all 43 pages?

  • Spring '19
  • Document Object Model, HTML element, jQuery Effects

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture