CGS 3066 Web Programming and Design Fall 2019
CGS 3066: Web Programming and Design Fall 2019 j. Query
Java. Script libraries and Frameworks Java. Script libraries are collections of prewritten code snippets that can be used (and reused) to perform common Java. Script functions. Java. Script frameworks are a full toolset that help shape and organize your website or web application compared to Java. Script libraries are a specialized tool for on-demand use Mostly used Java. Script Libraries: • • • j. Query React JS D 3 JS Mostly used Java. Script Frameworks: • Angular • Ember JS • Vue
j. Query is an open source Java. Script library that provides a simple and easy to DOM traversal and manipulation, event handling, animations and AJAX interactions. Lightweight, “write less, do more” Features: • HTML/DOM manipulation • CSS manipulation • HTML event methods • Effects and animations • AJAX • Utilities
Why use j. Query • Same as pure Java. Script but much simple to code. • Problem with Java. Script • Older browsers do not support the latest methods for selecting elements. • IE does not treat whitespace between elements as text nodes, while other browsers do. • Uses a language familiar to front-end web developers: CSS selectors • Much faster at selecting elements • Can be much more accurate about which elements to select • Lot less code than DOM • Widely used
Common tasks for j. Query • Methods that allows simple way to do common task • Loop through elements • Add/remove elements from the DOM tree. • Handle events • Fade elements into/out of view • Handle Ajax requests
Start coding with j. Query • Include j. Query library - Download the file and add source <head> <script src="jquery-3. 4. 1. min. js"></script> </head> - Include directly from any CDN (Content Delivery Network) <head> <script src="https: //ajax. googleapis. com/ajax/libs/jquery/3. 4. 1/jquery. min. js"></script> </head> • Usually start from document ready function $(document). ready(function(){ // Your code here }); Reference: https: //api. jquery. com/ https: //www. w 3 schools. com/jquery_get_started. asp
window. onload We cannot use the DOM before the page has been rendered by the browser. j. Query gives us a more compatible way to do this. Javascript: window. onload = function() { // do stuff with the DOM } j. Query: OR $(document). ready(function() { // do stuff with the DOM }); $(function() { // do stuff with the DOM });
Selecting DOM nodes by Java. Script Name Description get. Element. By. Id returns array of descendents with the given tag, such as "div" get. Elements. By. Tag. Name returns array of descendants with the given tag, such as "div" get. Elements. By. Name returns array of descendents with the given name attribute (mostly useful for accessing form controls) query. Selector * returns the first element that would be matched by the given CSS selector string query. Selector. All * returns an array of all elements that would be matched by the given CSS selector string
DOM Selection – Java. Script vs j. Query JS method j. Query equivalent get. Element. By. Id("id") $("#id") get. Elements. By. Tag. Name("tag") $("tag") get. Elements. By. Name("somename") $("[name='somename']") query. Selector("selector") $("selector") query. Selector. All("selector") $("selector")
j. Query Terminology • the j. Query function refers to the global j. Query object or the $ function depending on the context • a j. Query object the object returned by the j. Query function that often represents a group of elements • selected elements the DOM elements that you have selected for, most likely by some CSS selector passed to the j. Query function and possibly later filtered further
The j. Query object • The $ function always (even for ID selectors) returns an array-like object called a j. Query object. • The j. Query object wraps the originally selected DOM objects. • You can access the actual DOM object by accessing the elements of the j. Query object. // false document. get. Element. By. Id("id") == $("#myid"); document. query. Selector. All("p") == $("p"); // true document. get. Element. By. Id("id") == $("#myid")[0]; document. get. Element. By. Id("id") == $("#myid"). get(0); document. query. Selector. All("p")[0] == $("p")[0];
Using $ as a wrapper • $ adds extra functionality to DOM elements • passing an existing DOM object to $ will give it the j. Query upgrade // convert regular DOM objects to a j. Query object var elem = document. get. Element. By. Id("myelem"); elem = $(elem); var elems = document. query. Selector. All(". special"); elems = $(elems);
DOM Tree Traversal <p id="foo">This is a paragraph of text with a <a href="/path/to/another/page. html">link</a>. </p> name(s) description first. Child, last. Child start/end of this node's list of children child. Nodes array of all this node's children next. Sibling, previous. Sibling neighboring nodes with the same parent. Node the element that contains this node
DOM Manipulation with j. Query Method Description append(content) Inserts content to the end of element(s) which is specified by a selector. prepend(content) Insert content at the beginning of an element(s) specified by a selector. before(content) Inserts content (new or existing DOM elements) before an element(s) which is specified by a selector. after(content) Inserts content (new or existing DOM elements) after an element(s) which is specified by a selector. insert. Before( selector ) Insert all of the matched elements before another, specified, set of elements. insert. After( selector ) Insert all of the matched elements after another, specified, set of elements. empty() Remove all child nodes from the set of matched elements. remove() Removes element(s) from DOM which is specified by selector. replace. All(selector) Replace target element(s) with specified element. replace. With( content ) Replaces all matched elements with the specified HTML or DOM elements. wrap(html) Wrap an HTML structure around each element which is specified by selector. Examples here: https: //www. tutorialspoint. com/jquery-dom. htm
Events handling – j. Query vs DOM Category Form events j. Query Method blur change focus select submit Keyboard events keydown keypress keyup Document loading load ready unload DOM Event onblur onchange onfocus onselect onsubmit onkeydown onkeypress onkeyup onload onunload Examples here: https: //www. tutorialsteacher. com/jquery-event
Events handling – j. Query vs DOM Category j. Query Method DOM Event Mouse events click onclick mousedown onmousedown mouseenter onmouseenter mouseleave onmouseleave mousemove onmousemove mouseout onmouseout mouseover onmouseover error onerror() resize onresize scroll onscroll load onload Browser events Document loading ready unload onunload Examples here: https: //www. tutorialsteacher. com/jquery-event
Finding Elements • Elements are selected using CSS-style selectors, also offer extra selectors • Basic Selectors • * All elements • Element All elements with that element name • #id elements whose id attribute has the value specified • . class elements whose class attribute has the value specified • Selector 1, selector 2 Elements that match more than one selector • Hierarchy • Ancestor descendant An elements that is a descendant of another element (e. g. li) • Parent > child An element that is a direct child of another element • Previous+next Adjacent sibling selector only selects elements that are immediately follow by previous element • Previous-siblings Sibling selector will select any elements that are a sibling of the previous elements
Finding Elements cont…. • Basic Filters • : not(selector) All elements except the one in the selector (e. g. , div: not(‘#summary’)) • : first j. Q The first element from the selection • : last j. Q The last element from the selection • : even j. Q element with an even index number from the selection • : odd j. Q element with an odd index number from the selection • : eq(index) j. Q element with index # equal to one in the paramenter • : gt(index) j. Q element with index # greater to one in the paramenter • : header j. Q All <h 1>--<h 6> elements • : animated j. Q Elements that are currently being animated • : focus j. Q The elements that currently has focus
Cont. . Content filters : contains(‘text’) elements with specified text as a paramenter : empty elements that has no children : parents j. Q elements that has children nodes Has(selector) j. Q elements that contain at least one element that matches the selector (e. g. , div: has(p)) Visibility Filters : hidden j. Q all elements that are hidden : visible j. Q all elements that consume space in the layout of the page (not selected if displayed: none/width: 0) Child filters : nth-child(expr) not a zero based eg. ul li: nth-child(2) : first-child first child Last-child: last child Only-child: only child (eg div p: onlychild)
Attributes filters and form [attribute] [attribute=‘value’] value Elements that carry the specified attribute elements that carry the specified attribute with the specified != (j. Q not carry that attribute), ^= (begin with), *= (value apper somewhere), |= (equal to given string or starting with string and followed by a hyphen), ~= (value should be one of the value) Form (j. Q) : input, : text, : password, : radio, : checkbox, : submit, : image, : reset, : button, : file, : selected, : enabled (all enabled form elements), : disabled (all disabled form elements), : checked (all checked radio buttons or checkboxes)
Examples- basic, get • Single selector $(function() { var $list. HTML = $('ul'). html(); $('ul'). append($list. HTML); }); • Multiple selector $(': header'). add. Class('headline'); $('li: lt(3)'). hide(). fade. In(1500); $('li'). on('click', function() { $(this). remove(); }); • Get and Set Data • Get information • $(‘li’) • If a j. Query selection holds more than one elements, if the method is used which get information form selected information then it will receive from only one element, . each() method can be used to get all elements • var content = $(‘li’). html(); // only from the first element of the list item • Set Elements • $(‘li’). html(‘Updated’); //updates all elements
Looping, Chaining $(‘li em’). add. Class(‘seasonal’); $(‘li. hot’). add. Class(‘favorite’); Chaining: $('li[id!="one"]'). hide(). delay(500). fade. In(1400); // semi-colon indicates end of chaining - can be writen on separate lines
- Slides: 22