Jquery Introduction

1Wednesday, 28 April 2010

What are we talking about

What are we talking aboutclient side scripting implemented as part of a browser to provide:

enhanced UI

dynamic websites

Why should I care?“JavaScript sucks”

it’s different - prototypal inheritance

DOM is key BUT “sucks”

Element selection sucks

x-Browser DOM sucks

DOM selection and Cross Browser DOM selection code demovar 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 simplifies 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?

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

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

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

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

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

Grouping

h1 { font-family: sans-serif }h2 { font-family: sans-serif }h3 { 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>

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

body > P { line-height: 1.3 }

The following example combines descendant selectors and child selectors:

div ol>li p

It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.

h1.opener + h2 {margin-top: -5px }div#navigation > p.help { font-size: 0.1em }

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

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

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

Hello worldDemo

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

BrightTALK Conventions$.bt

Check time

filenames

Check time

filenames

bt.XXX.js

Check time

filenames

bt.XXX.js

jquery.XXX.js

Check time

filenames

bt.XXX.js

jquery.XXX.js

custom events

Check time

filenames

bt.XXX.js

jquery.XXX.js

custom events

plugins

Check time

filenames

bt.XXX.js

jquery.XXX.js

custom events

plugins

Reasons

Check time

filenames

bt.XXX.js

jquery.XXX.js

custom events

plugins

Reasons

reusable

Check time

filenames

bt.XXX.js

jquery.XXX.js

custom events

plugins

Reasons

reusable

maintable

Check time

PS take over

$.btnamespace - globals are evil

PS take over

static functions

PS take over

static functions

public / private conventions

PS take over

static functions

$.bt.publicFunction

PS take over

static functions

$.bt.publicFunction

$.bt._privateFunction

PS take over

static functions

$.bt.publicFunction

$.bt._privateFunction

common way to extend bt object

PS take over

$.btDemo

16Wednesday, 28 April 2010extension demo (PS)examples - discuss good and bad

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

early prototype jquery.btuserbetter 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 EventDemo

19Wednesday, 28 April 2010Custom 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 pluginsLearn how to write plugins

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

Find plugins at

http://plugins.jquery.com/

Custom plugins on the platform

csvreport

Benefits vs static functions

Plugin Demo

21Wednesday, 28 April 2010Check time (prob not time for this)

Walkthrough

CSVreport or jquery docs authoring page??

Jquery Introduction

Documents

Transcript of Jquery Introduction

Learning jQuery 1 - Packt Publishing · Learning jQuery 1.3 ... client-side scripting occasion. Learning jQuery provides a gentle introduction to jQuery ... downloading and setting

jQuery Introduction (Source:w3schools.com) 250/jQueryNotes.pdf · jQuery Introduction (Source: ... There are a lots of other JavaScript frameworks out there, but jQuery seems to be

Introduction to jQuery :: CharlotteJS

Jquery Introduction Hebrew

Introduction to jQuery

jQuery Mobile Introduction

Javascript & jQuery: A pragmatic introduction

Quick introduction jQuery

Introduction to jquery mobile with Phonegap

Introduction to jQuery jQuery syntax CSS attribute ... · Introduction to jQuery jQuery syntax CSS attribute selectors review Intro to jQuery Mobile . ... $.ajax() = is equal to jquery.ajax()

A Short Introduction To jQuery

jQuery Mobile Introduction ( demo on EZoapp )

Web Development Introduction to jQuery

An Introduction to Jquery

JavaScript & jQuery JavaScript and jQuery introduction.

jQuery - Ajax Experienceajaxexperience.techtarget.com/...IntrotojQuery.pdf · jQuery Introduction Ajax Experience - July 2007 John Resig (ejohn.org)

jQuery | Introduction

jQuery For Beginners A Basic Introduction

Introduction to jQuery Mobile

Introduction to jQuery (for Drupal)