j
Query
Created by John Resig in 2006
Most popular JavaScript library in use today
MIT License
JQuery exposes itself to the global object:
window.jQuery = window.$ = jQuery;
Getting started
<ol> <li>Yerevan</li> <li>Vanadzor</li> <li>Gyumri</li> </ol> <script src="../js/lib/jquery.js"></script> <script> jQuery(document).ready(function($) { // document.onload var lis = $('li'); // select all elements of type 'li' // resulting list is an array, with splice, .length, etc for ( var i = 0; i < lis.length; i++) console.log(lis[i].innerHTML); console.log('num LIs: ' + lis.length); }); </script>
Using CSS Selectors
$( '#myID' ); // select an element by ID
$( 'li' ); // select all LIs
$( 'ul li' ); // select LIs that are in ULs
$( '.person' ); // select elements by class
$( '[data-foo="bar"]' ); // select by attribute
Using CSS Selectors
$( element ); // wrap an element
$( [element1, element2] ); // wrap an array of elements
$( '.foo', element ); // select by class only nodes under 'element'
$( '.foo', $(element) ); // select by class only nodes under the given jquery object
html, text, attr, css, val
<label></label> <input type='text' /> <div class='msg'></div> <script> jQuery(document).ready(function($) { // document.onload $('label').html("<b>Name:</b>"); // .innerHTML $('.msg').text("some content"); // sets inner text (use a text node) $('input').attr('title', 'This is my title'); // sets an attribute $('.msg').css('background', 'lightblue').css({ 'font-weight' : 'bold', 'font-color' : 'red' }); $('input').val('input value'); // .value }); </script>
Add/remove css classes
<style> .testClass { background: red } </style> <div class='sample'>hello world</div> <script> jQuery(document).ready(function($) { // document.onload var s = $('.sample'); s.addClass('testClass'); //s.removeClass('testClass'); //s.toggleClass('testClass'); }); </script>
Chaining
<div></div> <script> jQuery(document).ready(function($) { // document.onload //var node = $('div'); //node.html('hello world'); //node.css('font-weight', 'bold'); //node.attr('title', 'hello!'); $('div').html('hello world').css('font-weight', 'bold').attr('title', 'hello!'); }); </script>
Finding elements relative to a selection
<ul class='className'> <li> <span><h5>hello</h5></span> </li> <li>world</li> </ul> <script> jQuery(document).ready(function($) { // document.onload var s = $('li').first(); // select the first li (also .last()) s.siblings(); // get all siblings s.next(); // next sibling (also prev()) s.parent(); // get parent s.children(); // get immediate children s.find('h5'); // same as $('h5', s); s.parents('.className'); // find ALL ancestors that match the selector s.closest('.className'); // find the FIRST ancestor that matches the selector }); </script>
Creating new elements
<script> jQuery(document).ready(function($) { // document.onload // create h3 with text in it var hello = $('<h3>hello world</h3>'); // add the h3 to the 'body' element $('body').append(hello); // same as calling .appendChild }); </script>
Removing elements
If we lose the Teghut forest, we are in <span>LOTS of</span> trouble <script> jQuery(document).ready(function($) { // document.onload //$('span').remove(); // removes element AND unhooks all event handlers //$('span').replaceWith( '<b>big</b>' ); // remove and append // use .detach to detach from parent element }); </script>
Events (on/off)
<style> .over { background: lightblue } </style> <div> HELLO!!! <a href='javascript:void(0)'>Unhook events</a> </div> <div> GOOD BYE!!! </div> <script> jQuery(document).ready(function($) { var func = function(e) { if (e.type === 'mouseenter') $(this).addClass('over'); else $(this).removeClass('over'); }; $('div').on('mouseenter mouseleave', func); // OR $('body').on('mouseenter mouseleave', 'div', func); $('a').on('click', function(evt) { $('div').off('mouseenter mouseleave', func); // OR $('body').off("mouseenter mouseleave", "div", func); $(this).off('click'); event.preventDefault(); }); $('body').append('<div>New div!</div>'); }); </script>
Events
click
keydown
keypress
keyup
mouseover
mouseout
mouseenter
mouseleave
scroll
focus
blur
resize
JQuery docs
Animations
<button>Run</button> <div style='background: red; width: 30px; height: 30px;'></div> <script> jQuery(document).ready(function($) { // document.onload $('button').click(function() { $('div').animate({ width : '400px', height : '100px' }, 500, function() { $(this).html("All Done"); }); }); }); </script>
JQuery docs
$.ajax
<script> $.ajax({ url : "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", type : 'get', dataType : 'json', data : { tags : "armenia", tagmode : "any", format : "json" }, success : function(data) { $.each(data.items, function(i, item) { $('body').append($('<img src="'+item.media.m+'"/>')); }); }, error : function(data) { alert(JSON.stringify(data)); } }); </script>
$.getJson (see also $.get $.post)
<script> $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { tags : "armenia", tagmode : "any", format : "json" }, function(data) { if (!data) return; $.each(data.items, function(i, item) { $('body').append($('<img src="'+item.media.m+'"/>')); }); }); </script>
Plugin template
<script> (function($) { $.fn.yourFunc = function(options) { // add your func to JQuery's prototype // Create some defaults, extending them with any options that were provided var settings = $.extend({ 'location' : 'top', // attributes 'background-color' : 'blue' }, options); return this.each(function() { var $this = $(this); // apply your code to $this }); }; })(jQuery); </script>
Credits
Some examples inspired by http://jqfundamentals.com
Rouben Meschian
rmeschian@gmail.com
