JQuery - vijayetar/seattle-301d55 GitHub Wiki

JQuery

JQuery is version of simplified JavaScript code, where instead of providing simple statements to reach the end, you can complete the entire interaction in full statement. While JS was a 5 year old child, using JQuery is like interacting with a teenager.

pages 296-301

FIND elements using CSS-style selectors

  • The $() creates a JQuery OBJECT, and the selector within it identifies the element. For e.g. $('li.hot')

DO something with the element using method

  • For example - $('li.hot').addClass('complete'); uses a member operator ('.') to a method with parameter in brackets to change the value of the class for that element.
  • $('a[href="..google"]') only a tag with that href.
  • second element $('li:nth=child(2)')$(li)(2);
  • Data -
  • Cherries
  • $(#form).submit(()=>{});
  • selector.event(callback) OR selector.on(event,callback) - but they only work on hard coded elements, and not in dynamically rendered list. Avoid it by doing EVENT DELEGATION. $('ul').on('click','li',callback); *$().ready(callback);
  • ajax() is a built in jQuery to call data, but it is asynchoronous. It can be either a file or url.
  • $.ajax('http://google.com') or
    $.ajax('/filepath',{method:"GET", dataType:"JSON"}).then(data=>//do something)

KEY take aways

  • J Query is across browsers
  • simpler to select elements (similar to CSS-syntax)
  • event handling is easier
  • methods affect all of the selected elements
  • multiple methods can be applied at the same time.

IMPORTANT LINKS

slides

cheatsheet

⚠️ **GitHub.com Fallback** ⚠️