Jquery Introduction

What are we talking about

Wednesday, 28 April 2010 2

client side scripting implemented as part of a
browser to provide:


browser to provide:

enhanced UI


browser to provide:

enhanced UI

dynamic websites


Why should I care?
“JavaScript sucks”


Why should I care?
it’s different - prototypal inheritance


Why should I care?

DOM is key BUT “sucks”


Why should I care?

Element selection sucks


Why should I care?

Element selection sucks

x-Browser DOM sucks


Demo


DOM selection and Cross Browser DOM selection code demo
var objById = getElementById('id');
var objById = $('#id');
var firstParagraph = getElementByTagName('p')[0];
var firstParagraph = $('p:first');

/////////// example cross browser functions ////

/*********************************************************************
* Get an object, this function is cross browser
* Usage:
* var object = get_object(element_id);
* @Author Hamid Alipour http://blog.code-head.com/
**/
function get_object(id) {
var object = null;
if (document.layers) { // Mozilla 4.0 based browsers
object = document.layers[id];
} else if (document.all) { // IE6
object = document.all[id];
} else if (document.getElementById) { // Modern browsers
object = document.getElementById(id);
}
return object;
}
/*********************************************************************/

var obj = get_object('id');

// jquery

var obj = $('#id');

What is jQuery?

"jQuery is a fast and concise JavaScript
Library that simpliﬁes HTML document
traversing, event handling, animating, and
Ajax interactions for rapid web development.
jQuery is designed to change the way that
you write JavaScript." http://jquery.com

“Write less, do more”


What is jQuery?


What is jQuery?

A fast concise library with an OO interface


What is jQuery?

A fast concise library with an OO interface

Features
Lightweight

Cross-browser

CSS3 Compliant


CSS3 Compliant???


CSS3 Compliant???
We really mean “selectors” as in DOM
selection


CSS3 Compliant???
selection

Starts with CSS2


CSS3 Compliant???
selection

Starts with CSS2

Id, Class, Type, Universal, Grouping,
Descendant, Child, Adjacent Sibling,
Attribute, etc.


CSS Selector
Demo
Id, Class, Type, Universal, Grouping, Descendant,
Child, Adjacent Sibling, Attribute, etc.


CSS Selector Demo with CSS code
From to http://www.w3.org/TR/CSS2/selector.html

Id

#idvalue {
font-family: sans-serif;
}

Class

.classname {
font-family: Sans-Serif;
}

.classone.classtwo {
font-family: Sans-Serif;
}

Grouping

h1 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }

Descendant

For example, consider the following rules:

h1 { color: red }
em { color: red }

Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:

<H1>This headline is <EM>very</EM> important</H1>
We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1:

h1 { color: red }
em { color: red }
h1 em { color: blue }

The third rule will match the EM in the following fragment:

<H1>This <SPAN class="myclass">headline
is <EM>very</EM> important</SPAN></H1>

Child

The following rule sets the style of all P elements that are children of BODY:

body > P { line-height: 1.3 }

CSS3 Compliant???
selection

Start with CSS2

More at
http://api.jquery.com/category/selectors/

http://www.w3.org/TR/CSS2/selector.html

http://www.w3.org/TR/css3-selectors/

http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

http://www.w3schools.com/css/css_examples.asp


jQuery Core Concepts
$()

Get then Act

Chainability

$("p.neat").addClass("ohmy").show("slow");


KS take over here

$() = jQuery()
$ is a jquery object.

$ is used to keep the code shorter,
javascript is downloaded

$(selector) is how you get an element as a
jQuery object.


Chainability
Get then Act

Chainability

jQuery has chainablity of commends you
can link one commend to an other

$("p.neat").addClass("ohmy").show("slow");

$('#boo').filter(':funny').addClass('funny').css('color',
'red').show();


Hello world
Demo


jQuery DOM selection (get) then act (PS do)
http://jquery.com - show this demo do a couple different things

ask what is the code going to do, discuss and run, then ask for do something different?

BrightTALK Conventions


Check time

$.bt


Check time

$.bt

ﬁlenames


Check time

$.bt

ﬁlenames

bt.XXX.js


Check time

$.bt

ﬁlenames

bt.XXX.js

jquery.XXX.js


Check time

$.bt

ﬁlenames

bt.XXX.js

jquery.XXX.js

custom events


Check time

$.bt

ﬁlenames

bt.XXX.js

jquery.XXX.js

custom events

plugins


Check time

$.bt Reasons

ﬁlenames

bt.XXX.js

jquery.XXX.js

custom events

plugins


Check time

$.bt Reasons

ﬁlenames reusable

bt.XXX.js

jquery.XXX.js

custom events

plugins


Check time

$.bt Reasons

ﬁlenames reusable

bt.XXX.js maintable

jquery.XXX.js

custom events

plugins


Check time

$.bt


PS take over

$.bt
namespace - globals are evil


PS take over

$.bt

static functions


PS take over

$.bt

static functions

public / private conventions


PS take over

$.bt

static functions


$.bt.publicFunction


PS take over

$.bt

static functions


$.bt.publicFunction

$.bt._privateFunction


PS take over

$.bt

static functions


$.bt.publicFunction

$.bt._privateFunction

common way to extend bt object


PS take over

$.bt
Demo

extension demo (PS)
examples -
discuss good and bad

good - doesn’t pollute global name space
bad
- still global static functions just namespaced
- leads to tight coupling

early prototype jquery.btuser
better example bt.operations.js

.bind() & custom events

The .bind() method is the primary means of
attaching behavior to a document. All
JavaScript event types, such as focus,
mouseover, and resize, are allowed for
eventType.

With the help of .bind we can create our
custom events.


KS take over

Creating custom event

Creating custom event.
$(document).bind('foo', function() {

alert('hello world');

})

Calling custom event

$(document).trigger("foo");


Custom Event
Demo

Custom event - login handler vs registration, date time locale conversion (KS DO)

$(document).bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$(document).trigger("myCustomEvent", [ "John" ]);
});

/// BRIGHTTALK
$(document).bind('localiseDate', function(e) {
$.btTimeZone.updateDateItem(0, e.target);
});

$('#csv-report-date', $('#report-XXX')).trigger("localiseDate", jQuery(this));

jQuery plugins
Learn how to write plugins

http://docs.jquery.com/Plugins/Authoring

Find plugins at

http://plugins.jquery.com/

Custom plugins on the platform

csvreport

Beneﬁts vs static functions


Plugin
Demo

Check time (prob not time for this)

Walkthrough

CSVreport or jquery docs authoring page??

Jquery Introduction

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Jquery Introduction

Semelhante a Jquery Introduction (20)

Jquery Introduction