Fun With jQuery

7/28/2019 Fun With jQuery

1/23

Fun with jQuery

A quick start to this powerful JavaScriptLibrary

Paul [email protected]


2/23

jQuery

What is it?

A JavaScript library

Why use it?

When you wish some programmaticallymanipulate your client-side HTML pages

Makes it easy to interact with HTML pages

Reduces the pain involved when scripting pages Does not matter what (if any) server-side

technology you are using


3/23

Key Parts of jQuery

jQuery parts

jQuery function: $() or jQuery()

jQuery selector goes inside of parens to create

wrapped set

jQuery methods are things you can do with your

wrapped set

jQuery events are how you hook your code upjQuery document ready handler is the master

event to use to run code as the page loads


4/23

Calling jQuery

Three requirements

1. Load jQuery library using a tag

2. Decide how to call your code

Using document ready executes after page loads; e.g., $(document).ready(function() {

your-code});

Using event handler setup from your document readyfunction, e.g.,

$(selector).click( your-code);

3. Create your code $(selector).do something


5/23

A Simple Example


6/23

Selectors

$(html-element-class)

Example: $(div)

$(#id)

Example: $(#txtFirstName) $(.css-class)

Example: $(.divQuestion)

Various and sundry modifiers Example: $(#divQuestion #answer)

Example: $('div.question1 > input:checkbox:checked')


7/23

Selector Modifiers

Attribute modifier

$(selector[attribute=value]) only selects an elementif it has the attribute set to value

Example: $(input*type=text+) Selecting by position

$(selector:position) match elements by position inwrapped set. E.g., :first, :last, :odd, :even, :eq(n)

CSS/Custom filter selector modifiers :input, :button, :checked, :radio, :disabled, :enabled,

:contains(x), :has(selector), :header, :not(selector)


8/23

More Selector Examples

$('#section1a .question1 input.q1') Input controls of class q1 following any element of class question1 following

element with id of section1a

$('#RecommendTx input[type=radio]') Input elements of type radio following element with id of RecommendTx

$('div.question1 > input:checkbox:checked') Selected checkbox controls immediately following a div tag of class question1

$('#section1a .q1:checked') Elements of class q1 that are checked following an element of class section1a

$('#section1a .q3:checked, #section1a .q3a:checked') Elements of class q3 following element with id of section1a that are checked

OR elements of class q3a that are checked following element with id ofsection1a

$('input:hidden[name="HistologyForm.ViewerStartTime"]') Hidden input control with name = HistologyForm.ViewerStartTime

NOTE: There are almost always multiple ways to select same wrapped set


9/23

Document Ready Event

$(document).ready(function () {

// call all my

// jQuery/JavaScript

// code from here});


10/23

Events

Setting up event handlers

There are a number of ways to do it

On/Off (subsumes bind/unbind & live/die)

$(selector).on(event, handler);

$(selector).off(event, handler);

Shortcuts

$(selector).click(handler) $(selector).blur(handler)

$(selector).hover(handlerIn, handlerOut)


11/23

Methods

Once youve triggered your code (using an

event) and selected your wrapped set (using a

selector), its time to do something

You can use the standard JavaScript DOM

methods, but jQuery has some helpful

methods


12/23

jQuery Methods

.toggle() toggles visibility; optionally using ananimation and optional callback when animationis done

$("#q1").toggle(); $(#q1).toggle(true);

Equivalent to $(#q1).show();

$(#q1).toggle(false);

Equivalent to $(#q1).hide(); $(#q1).toggle(slow);

$(#q1).toggle(slow, function() -);


13/23

jQuery Methods

.attr(attribute) determines value of

attribute

var bChecked = $(ctl).attr('checked')

.attr(attribute, value) sets value of

attribute

$(ctl).attr('checked', false);

$('#txtIMBreslow').attr('value', '');


14/23

jQuery Methods

.val() gets value of first element in wrapped

set

.val(value) sets value of all elements in

wrapped set


15/23

jQuery Methods

.html() gets html contents of first element in

wrapped set

.html(htmlString) sets html of all elements

in wrapped set


16/23

jQuery Methods

.css(attribute, value) gets/sets css attribute

.addClass(className) adds class name to

class attribute of wrapped set

.removeClass(className) removes class

name to class attribute of wrapped set

.toggleClass(className) adds (if not

there)/removes (if there) class name to class

attribute of wrapped set


17/23

What Might I do with jQuery?

For me, I have broken it down to 4 basic

classes things I do with jQuery

1. Work on a control passed in to an event handler

2. Work on wrapped set

3. Test for state of wrapped set and do some work

on related set of controls

4. Same as #3 but within a loop


18/23

Example using this

$('input[name="q0Answer"]').click(q0AnswerClick);

function q0AnswerClick() {var ctl = this;$(".surveyEnd").toggle(false);$("#q1").toggle(false);

$("#q2").toggle(false);switch (this.value) {

case "1":$("#q1").toggle(true);break;

case "2":

$("#q2").toggle(true);break;}

}


19/23

Another Example

function toggleMyChildren(ctl, bChecked) {

var ctlRoot = $(ctl).parent();

// Toggle display

$(ctlRoot).children('div').toggle(bChecked);

$(ctlRoot).children('div').children().toggle(bChecked);

}


20/23

Looping

$('div.question1 > input:checkbox:checked').

each(toggleChildrenUponLoad);


21/23

Debugging jQuery

Use browsers debugger (usually F12)

Dont bother with VS debugger

But do add IntelliSense links in your .js files

Debugging tips

Check your selector: are you using . when you

mean # or vice-versa?

Are you treating a wrapped set as if its only onevalue?

You may need to use .first() or [0]


22/23

Writing Solid jQuery Code

You can usually simplify your job by

Creating a good style sheet with good CSS classes

Thoughtfully assigning styles and IDs to your

elements

Designing a good containership model for your

elements


23/23

Tools & Resources

Jquery.com

jsfiddle.net

http://codylindley.com/jqueryselectors/ jsperf.com

Fun With jQuery

Documents

Transcript of Fun With jQuery