Jquery write less do more
Sponsored Links
This presentation is the property of its rightful owner.
1 / 25

jQuery "Write less, do more" PowerPoint PPT Presentation


  • 46 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

jQuery "Write less, do more"

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"

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

  • 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

before user clicks Item One

after user clicks Item One


jQuery code

<script>

$(function() {

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

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

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

para.toggle();

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');});

</script>

Notice the use of the jQuery symbol, $

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


JavaScript code

<script>

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;

</script>


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?

  • 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

<!-- 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

<script type="text/javascript">

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

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

}); //end of ready function

</script>

  • Placed in Page Head

  • Runs when page loads

Shorthand Version

<script type="text/javascript">

$(function() {

alert("The page just loaded!");

}); //end of ready function

</script>

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

SCRIPT

BASIC HTML

<script type="text/javascript">

$(function() {

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

}); //end of ready function

</script>

<body>

<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>

</ul>

<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>

</body>

STYLES

<style>

.a (color: navy;}

.b {color: maroon;}

</style>


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

  • Used to select/target content elements

  • Syntax

    $('selector')

  • Selector can be any combination of html elements and css selectors


jQuery selector examples

$('document')

$('h2')

$('ul li a')

$('h2+p') adjacent siblings

$('#wrapper')

$('.myclass')

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

$('li:first-child')

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

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

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

$('tr:even')

$('tr:odd')

$('form:checked')

form elemsw checked attribute

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

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


jQuery method

  • Action carried out on selected/targeted content elements

  • Syntax

    $('selector').methodname(parameters);

  • Parameters

    • Vary for each method

    • May need to be enclosed in quotes and/or curly braces


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.)

  • hide([duration])

  • show([duration])

  • toggle([duration])

  • fadeIn

  • fadeOut

  • FadeTo

  • slideUp([duration])

  • slideDown([duration])

  • slideToggle([duration])

  • animate(properties, options)


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");

$("a").removeAttr("href");

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

$("table#theListtr:even").addClass("stripe1");

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


jQuery method examples-animate

$('nav').animate({'height':'0px'},500);

$("div").animate({'left':'250px'},2000);

$('img.prev').animate({'opacity':0},1000);

$('#div').animate({width:'100px','opacity':0.8},"slow");


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>')

.addClass('reverse');

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

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


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

  • Action resulting from user or browser interaction with selected/targeted content elements

  • Syntax

    $('selector').eventname(function(){

    //what the event handler is to do

    });


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

$("#image_listimg").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

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

$("#theDiv").show("normal");

});

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

$("#theDiv").hide("normal");

});

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

$("#theDiv").toggle("slow");

});


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.

$('div').click(function(event){

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

});


  • Login