Basics of JQuery...

Twitter: #quintons Github: https://github.com/quintons Stackoverflow: http://stackoverflow.com/users/684855/quinton 'The most misunderstood language has become the worlds most popular programming language'Douglas Crockford - Javascript architect, yahoo Q: How do you comfort a JavaScript bug? A: You console it!

Agenda

• In the beginning...
• $ Demistified
• Working with Selectors
• Create/Add elements in the DOM
• Clone elements in the DOM
• Delete elements in the DOM
• Chaining
• Basics of Traversing
• Manipulation - Elements & Attributes
• Styling elements
• Basics of Event handling
• Basics of Animation

In the beginning

'$'

$("id_of_element").setStyle({color: "#ffffff"});

In the beginning

In the beginning...code before...

example of a function fetching an elements font size

    function getStyle(oElm, sCssRule){
        var val;
        if(document.defaultView && document.defaultView.getComputedStyle){
            var style = document.defaultView.getComputedStyle(oElm, "");
            if(style){
                val = style.getPropertyValue(sCssRule);
            }else{
                console.log('unable to find element');
            }
        }else if(oElm.currentStyle){
            sCssRule = sCssRule.replace(/\-(\w)/g, function(sMatch, p1){
                return p1.toUpperCase();
            });
            val = oElm.currentStyle[sCssRule];
        }
        if(val === undefined){
            console.log('unable to find style "' + sCssRule + '" on passed element.');
        }
        return val;
    }

calling the function...

var fStyle = getStyle(document.getElementById("container"), "font-size");

In the beginning...then came...(JQuery)

accessing the elements font size...

var fStyle = $("container").css("font-size");
// fStyle = font-size of 'container' element

'Code less, Do more'John Resig

'$' demistified

different ways of accessing the jquery object...

// using the jquery/$ object
var mySelector = jQuery("selector");

var mySelector = $("selector");

// under the hood
...
window.jQuery = window.$ = jQuery;
...

This will be my notes

Working with Selectors

Other ways to create a jQuery object

// create a jquery object from a DOM element
var jqObj = $(document.body.children[0]);

// make a selection in the context of a DOM element
var jqObj = $('ul.myclass li', document.body.children[0]);

// make a selection within a previous selection
var jqObj = $('a', $('p'));

Getting an element from a selection

var items = $('ul.myclass li');
var jsObj = $('ul.myclass li').get(0);
var html = jsObj.innerHTML;

If you try this it will fail

var html = jsObj.html(); // jsObj is a DOM object 'not' a jq object

Working with Selectors...

(continued)

accessing single elements from a list

var items = $('ul.myclass li');
var secondItem = items.eq(1); // eq() returns a jq object of a single element

Checking if a list exist then Looping over the UL list of LI's

if(items.length > 0){
    // there are 1 or more li's in the ul
    items.each(function(index, elem){
        // this: current context, raw DOM element of li
        // index: the current elements index
        // elem: same as this
        $(elem).prepend('<b>' + index + '</b>'); // inserts into each li item '<b>[n]</b>'
    });
}

Create/Add elements in the DOM

Creating an element

// creates a new p element
var pObj = $('p');

// creates a p element with text
var pObj = $('<p>this is some text<p/>');

// creates a p element with text, a class and inline style
var pObj = $('<p class="someClass" style="text-align:left">this is some text</p>')

Create/Add elements in the DOM

Add an element

take the following html

<div class="someClass">
    <h4>Insert element before/after</h4>
    <div class="content">my content goes here</div>
</div>

If we execute the following jquery...

$('<p>some text</p>').insertAfter('.someClass div'); // there is also insertBefore() method

the HTML will change to...

<div class="someClass box">
    <h4>Insert element after</h4>
    <div class="content">my content goes here</div>
    <p class="blue">some text after</p>
</div>

Clone elements in the DOM

The clone method performs a deep copy of a set of elements, it copies the matched elements as well as all of there descendant elements and text nodes. Any events or user data applied to elements being cloned, will be set to there defaults and not be included.

take the following html

<div class="someClass">
    <h2>some heading</h2>
    <div class="content">my content</div>
</div>

$('.content').clone().appendTo('.someClass');

the HTML will change to...

<div class="someClass">
    <h2>some heading</h2>
    <div class="content">my content</div>
    <div class="content">my content</div>
</div>

Clone elements in the DOM

Clone element with bound data and/or event handlers

Remember if you clone an element with an ID attribute, this is supposed to be unique in the DOM.

<button>Lets Clone!</button>
<div class="someClass">
    <div class="myElement">my content</div>
</div>
<div class="container"></div>

    var elem = $('.someClass');
    elem.data('names' , ['john', 'ben', 'paul']);

    $('button').on('click', function(){
        // passes true (withDataAndEvents attribute) to clone data and events
        elem.clone(true).appendTo('div.container');
        return false;
    });

    $('.someClass').on('click', function(){
        var dataResult = elem.data('names');
        dataResult.forEach(function(ele, idx){
            console.log(ele);
        });
        console.log(dataResult);
    });

Delete elements in the DOM

remove(), empty(), detach()

using remove() you will remove an element from the DOM including 'any' attached events/data

<ul class="container">
    <li><p>content</p></li>
    <li><p>content&nbsp;<a href="#link">a link</a></p></li>
    <li><p>content</p></li>
</ul>

$('ul.container li').on('click', function(){
    // does an '<a>' tag exist in the clicked on li?
    if($(this).find('a').length > 0){
        // removes element that contains an '<a>' tag, including its click event handler
        $(this).remove();
    }
})

the HTML will change to...

<ul class="container">
    <li><p>content</p></li>
    <li><p>content</p></li>
</ul>

Delete elements in the DOM

remove(), empty(), detach()

using empty() you will remove all child nodes inside matched elements

<ul class="container">
    <li><p>content</p></li>
    <li><p>content&nbsp;<a href="#link">a link</a></p></li>
    <li><p>content</p></li>
</ul>

$('ul.container').empty();

the HTML will change to...

<ul class="container">
</ul>

Delete elements in the DOM

remove(), empty(), detach()

using detach() is the same as remove() the exception is that it will not delete all the data/event handlers associated with the matched elements.

<div class="myDetail">
    <p>Foo bar</p>
</div>
<a href="#" class="button">remove</a>

$('.myDetail p').on('click', function(){
    alert('my name is ' + $(this).html())
})

var detail;
$('a.button').on('click', function(){
    var that = $(this); // grab the JQ object
    if(detail){
        detail.appendTo('.myDetail'); // append detail to container
        detail = null;
        that.html('remove');
    }else{
        detail = $('.myDetail p').detach(); // detach element from dom, not the event handler
        that.html('add');
    } return false;
});

Chaining

basic chaining

$('ul.someClass li').click(function(){
    $(this).addClass('clickedMe');
}).find('span').attr('title', 'I am a title')

better way...

var someClassList = $('ul.someClass li');
var someClassSpans = someClassList.find('span');

someClassList.click(function(){
    $(this).addClass('clickedMe');
});

someClassSpans.attr('title', 'I am a title');

Manipulation - elements & attributes

take the following

<ul>
    <li>
        <span><b>foo</b></span>
    </li>
    <li class="last">bar</li>
</ul

altering classes & styling

$('li:first-child').addClass('hidden'); // add class hidden
$('ul li').eq(1).removeClass('last'); // remove class last from 2nd li

// adds hidden class if not present, removes hidden class if it is present
$('ul li').eq(1).toggleClass('hidden');

// changes the CSS on an element
$('ul li span').css({
    font-family: 'helvetica',
    color: '#000'
})

Basics of Event handling

Material references

• JQuery site (http://jquery.com/)
• JQ Fundamentals by Rebecca Murphey (http://jqfundamentals.com/) -