jquery write less do more n.
Skip this Video
Download Presentation
jQuery "Write less, do more"

Loading in 2 Seconds...

play fullscreen
1 / 25

jQuery "Write less, do more" - PowerPoint PPT Presentation

  • Uploaded on

jQuery "Write less, do more". What is it, why use it, how to use it. jQuery – "Write Less, Do More". jQuery is a JavaScript library, collection of functions that extends JavaScript's capabilities

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'jQuery "Write less, do more"' - caia

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
jquery write less do more
jQuery"Write less, do more"

What is it, why use it, how to use it

jquery write less do more1
jQuery– "Write Less, Do More"
  • jQuery is a JavaScript library, collection of functions that extends JavaScript's capabilities
  • What would take 20 lines or more of JavaScript can be achieved in just two or three lines of jQuery
  • The same code runs in all browsers—there's no need to write special code for Internet Explorer
  • Uses HTML elements and CSS selectors, leveraging knowledge that most web designers already have
simple hide show content
Simple Hide-Show Content

before user clicks Item One

after user clicks Item One

jquery code
jQuery code


$(function() {

$('h2 + p').hide();

$('h2').click(function(e) {

varpara = $(this).next('p');


if (para.css('display') == 'none') {

$(this).css('background-image', 'url(images/arrow-r.png)');

} else {

$(this).css('background-image', 'url(images/arrow-down.png)');



.css('cursor', 'pointer');});


Notice the use of the jQuery symbol, $

You can also "call" for jQuery by its name instead of using $

javascript code
JavaScript code


function init() {

var headings = document.getElementsByTagName('h2'),

dom= headings[0].addEventListener, len= headings.length,i, para;

for (i=0; i < len; i++) {

para = getNextSibling(headings[i]);

para.style.display = 'none';

if (dom) {

headings[i].addEventListener('click', toggle, false);

headings[i].addEventListener('mouseover', showHand, false);

} else {

headings[i].attachEvent('onclick', toggle);



function getNextSibling(elem) {

vartemp = elem.nextSibling;

while (temp.nodeType !=1 && temp.nextSibling != null) {

temp = temp.nextSibling;


return temp;


function toggle(event) {

varevt, tgt, para;

evt = event ? event : window.event;

tgt = evt.target || evt.srcElement;

para = getNextSibling(tgt);

if (para.style.display == 'none') {

para.style.display= 'block'; tgt.style.backgroundImage= 'url(images/arrow-down.png)';

} else {

para.style.display= 'none'; tgt.style.backgroundImage= 'url(images/arrow-r.png)'; }


function showHand(event) {

varevt, tgt;

evt= event ? event : window.event;

tgt= evt.target || evt.srcElement; tgt.style.cursor= 'pointer';



window.onload = init;


why less code with jquery
Why less code with jQuery?
  • jQuery has built in widgets like tabs, menus, accordions
  • jQuery simplifies targeting of elements
    • Does not traverse the Document Object Model (DOM)
    • Instead it uses HTML and CSS to target content
what do you need to know
What do you need to know?
  • HTML tags and how they are hierarchically arranged, i.e. nesting of tags that creates parent child relationships
  • CSS selectors: tag, descendant, class, id
  • CSS rules, for example
    • background-color
    • position with top, bottom, right, left
    • display – inline, inline-block, block, none
    • color
    • margin
  • "little " bit of programming experience; the more the better
step 1 include jquery core library
Step 1: Include jQuery core library

<!-- from CDN-->

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- from your domain -->

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>

  • Script tag placed in Page Head
    • Can be linked to Content Delivery Network, may be faster for end user if already cached
    • File can be downloaded from www.jquery.com to your domain and linked from that location

1.9.1 may not be the most current version;you can also use the minified version of the file

step2 create a jquery document ready function
Step2: Create a jQuery document ready function

<script type="text/javascript">

$('document').ready(function() {

alert("The page just loaded!"); //tell user with popup

}); //end of ready function


  • Placed in Page Head
  • Runs when page loads

Shorthand Version

<script type="text/javascript">

$(function() {

alert("The page just loaded!");

}); //end of ready function


Alternative to alert:

console.log('Page loaded');

In Chrome open the console pane usingWin  ctrl+shift+j or Mac  cmd+opt+j

step3 try out a jquery selector method
Step3: Try out a jQuery Selector & Method



<script type="text/javascript">

$(function() {

$('p').css("border", "3px solid red");

}); //end of ready function



<ul id="list1">

<li class="a">item 1</li>

<li class="a">item 2</li>

<li class="b">item 3</li>

<li class="b">item 4</li>


<p class="a">This is paragraph 1</p>

<p>This is paragraph 2</p>

<p class="b">This is paragraph 3</p>

<p>This is paragraph 4</p>




.a (color: navy;}

.b {color: maroon;}


use console to quick test code
Use console to quick-test code
  • You can type jQuery code directly into the browser console
    • Just type filter selectors and browser will return an array of all elements it found matching that filter
  • Chrome: Opening the console
    • Viewmenu > Developer> JavaScript Console
    • Win ctrl+shift+j or Mac cmd+opt+j
  • Firefox: Opening Firebug to access console
    • View menu > Firebug (or press F12)
    • Developer Tools > Open Firebug
jquery selector
jQuery selector
  • Used to select/target content elements
  • Syntax


  • Selector can be any combination of html elements and css selectors
jquery selector examples
jQuery selector examples



$('ul li a')

$('h2+p') adjacent siblings



$('p.b') paragraphs w class b


$('p:first')first is a jQuery extension

$('p:last ')last is a jQuery extension

$('#lcol p, #rcol p')




form elemsw checked attribute

$('input:text') input elems w text attribute

a[href$='.pdf']href attribute's value ends with .pdf

jquery method
jQuery method
  • Action carried out on selected/targeted content elements
  • Syntax


  • Parameters
    • Vary for each method
    • May need to be enclosed in quotes and/or curly braces
useful jquery methods
Useful jQuery methods
  • next([selector])
  • prev([selector])
  • attr(attributeName)
  • attr(attributeName, value)
  • css(propertyName)
  • css(propertyName, value)
  • addClass(className)
  • removeClass([className])
  • toggleClass(className)
  • html(content)
  • text(content)
  • before(content)
  • after(content)
  • append(content)
useful jquery methods cont
Useful jQuery methods (cont.)
  • hide([duration])
  • show([duration])
  • toggle([duration])
  • fadeIn
  • fadeOut
  • FadeTo
  • slideUp([duration])
  • slideDown([duration])
  • slideToggle([duration])
  • animate(properties, options)
jquery method examples 1
jQuery method examples, 1

$("h2").css("color", "blue");

$("p:first").css("border", "3px solid red");

$('div').css({'font-size': '13px', 'background': '#f60'});

$("li a[href$='.pdf']").after("<imgsrc='images/pdf_icon.gif'>');

$("a").attr("target", "_blank");


$("p:last").text("this is the last paragraph");


$("img").attr({ src: "images/Spring.jpg", alt: "spring" });

jquery method examples animate
jQuery method examples-animate





chaining jquery methods
Chaining jQuery methods
  • One of the biggest time-saving features of jQuery is the ability to chain methods.
  • You can apply multiple methods to the same selected element(s) using dot notation.

$('body').append('<p>This paragraph was added dynamically.</p>')



$("#menu").fadeIn("fast").addClass("active").css("marginRight", "10px");

important points about chaining
Important points about Chaining
  • It makes your code short and easy to manage.
  • It gives better performance – because jQuery has to find the element only once to perform multiple actions.
  • The chain starts from left to right; so left most will be called first and so on.

BTW, chaining also works for events which we will cover next.

jquery events
jQuery events
  • Action resulting from user or browser interaction with selected/targeted content elements
  • Syntax


//what the event handler is to do


useful jquery events
Useful jQuery events
  • ready(handler)
  • unload(handler)
  • error(handler)
  • click(handler)
  • toggle(handlerEven, handlerOdd)
  • dblclick(handler)
  • mouseenter(handler)
  • mouseover(handler)
  • mouseout(handler)
  • hover(handlerIn, handlerOut)
jquery event example hover
jQuery event example – hover


function() {

alert("The mouse pointer has moved into an img element");


function() {

alert("The mouse pointer has moved out of an imgelement");


); // end hover

jquery event examples click
jQuery event examples – click

$("#showbtn").click(function() {



$("#hidebtn").click(function() {



$("#togglebtn").click(function() {



the this selection keyword
The this selection keyword
  • When working inside of a jQuery function you may want to select the element in which was referenced inside of the original selector.
  • In this code example the this keyword refers to the element selected in the current handler.


$(this); //here this refers to the div that was clicked