Scribd
Upload
58 views

Fun With Jquery

This document provides an overview of jQuery, a popular JavaScript library: 1. jQuery allows for programmatic manipulation of HTML pages through selectors, events, and methods to reduce pain when scripting pages. 2. Key parts include the jQuery function, selectors to create wrapped sets of elements, methods to perform actions on wrapped sets, and events to hook up code. 3. Examples demonstrate selecting elements, handling events, and toggling the display of elements.

Uploaded by

destmars
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
58 views

Fun With Jquery

This document provides an overview of jQuery, a popular JavaScript library: 1. jQuery allows for programmatic manipulation of HTML pages through selectors, events, and methods to reduce pain when scripting pages. 2. Key parts include the jQuery function, selectors to create wrapped sets of elements, methods to perform actions on wrapped sets, and events to hook up code. 3. Examples demonstrate selecting elements, handling events, and toggling the display of elements.

Uploaded by

destmars
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Fun with jQuery

A quick start to this powerful JavaScript Library Paul Litwin [email protected]

jQuery
What is it?
A JavaScript library

Why use it?


When you wish some programmatically manipulate 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

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 up jQuery document ready handler is the master event to use to run code as the page loads

Calling jQuery
Three requirements
1. Load jQuery library using a <script> 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 ready function, e.g.,
$(selector).click( your-code);

3. Create your code


$(selector).do something

A Simple Example

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

Selector Modifiers
Attribute modifier
$(selector[attribute=value]) only selects an element if it has the attribute set to value Example: $(input*type=text+)

Selecting by position
$(selector:position) match elements by position in wrapped 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)

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

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

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

Document Ready Event


$(document).ready(function () { // call all my // jQuery/JavaScript // code from here });

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)

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

jQuery Methods
.toggle() toggles visibility; optionally using an animation and optional callback when animation is done
$("#q1").toggle(); $(#q1).toggle(true);
Equivalent to $(#q1).show();

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

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

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

jQuery Methods
.val() gets value of first element in wrapped set .val(value) sets value of all elements in wrapped set

jQuery Methods
.html() gets html contents of first element in wrapped set .html(htmlString) sets html of all elements in wrapped set

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

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

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

Another Example
function toggleMyChildren(ctl, bChecked) { var ctlRoot = $(ctl).parent();
// Toggle display $(ctlRoot).children('div').toggle(bChecked); $(ctlRoot).children('div').children().toggle(bChecked); }

Looping
$('div.question1 > input:checkbox:checked'). each(toggleChildrenUponLoad);

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 one value?
You may need to use .first() or [0]

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

Tools & Resources


Jquery.com jsfiddle.net http://codylindley.com/jqueryselectors/ jsperf.com

You might also like