04 introducing jquery
-
Upload
rap-payne -
Category
Technology
-
view
290 -
download
0
Transcript of 04 introducing jquery
INTRODUCING JQUERY WRITE LESS. DO MORE
jQuery is a JavaScript library
Why jQuery? • Free and open source • Makes JavaScript sooo much easier • Everybody is doing it • Lots of plug-ins • Small file size
You can get jQuery in two ways 1. CDN – Content distribution network
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> Advantages:
Less space on your site (minor) May take advantage of caching (major) Google/M$ use router tricks to serve from local servers (major)
2. Download and save <script src="scripts/jquery-1.8.3.js"></script> Advantages:
Google/M$/jQuery.com may be down (yeah, right.) Can run your site offline, like at a kiosk or tradeshow
You add jQuery to a page with just a few lines of code <script type='text/javascript'>!$(document).ready(function() {! // initializations! // wiring-up of clicks and other events!});!// all other jQuery coding!</script>!
Dynamically modifying a web page takes just two steps
1. Select the element(s) 2. Do something with them
• Change a property • Change the content • Remove the element • Get information from the element • Any combination of the above
The DOM is a tree of elements • So how do you select one or more elements?
• Native JavaScript provides • getElementById(id); • getElementsByTagName('tag');
• Rigid • Underpowered • Tough to code
window
document
textarea
input
form
p
image
link article
image
link
div div div
link
link
jQuery is incredibly flexible in selecting elements
$('selector')!
Basic selectors are the simplest types • ID var theElement = $('#Id');!
• Element type var allDivs = $('div');!var allListElements = $('li');!
• Class var allOfThem = $('.className');!
Advanced selectors give you a more control • Descendent
• Points to: Tag somewhere inside another tag • Example: $('#navBar a') // All links under the navBar
• Child • Points to: Tag directly beneath another tag • Example: $('#navBar > a') // All links directly within navBar
• Adjacent sibling • Points to: Tag directly adjacent to another tag • Example: $('#navBar + a') // The link right next to another
Attribute selectors • Put the attribute in square brackets after the selector • Targets: elements based on the existence or value of an
attribute. • Examples: $('img[alt]') //images with the alt attribute set!$('input[type="checkbox"]') //checkboxes in the form!$('a[href^="http://"]') //all external links!$('img[src$=".png"]') //all png images!$('a[href*="google.com"]') //all links to Google!
Filters allow even finer-grained control • :even and :odd • :first and :last • :hidden and :visible • :not() • :has() • :contains()
jQuery allows a fluent interface $('#popup')! .width(300)! .height(300)! .text('Hi')! .fadeIn(1000);!
Let's learn to change pages
The rest of the chapter shows formulas for how to change pages.
html() and text() allow us to read and add content to a page //To read the html!var x = $('selector').html();!//To change the html!$('selector').html(newHtml);!//To read the inner text!var x = $('selector').text();!//To change the inner text!$('selector').text(newText);!!
append() and prepend(), before() and after() allow adding content
//To add as the last child of an element!$('selector').append(newHtml);!//To add as the first child of an element!$('selector').prepend(newHtml);!//To add just after an element!$('selector').after(newHtml);!//To change immediately before an element!$('selector').before(newHtml);!!
Replacing and removing selections //Take it out of the DOM!$('selector').remove();!//Replace it !$('selector').replaceWith(newContent);!//Create an exact copy of an element!var x = $('selector').clone();!x.insertAfter('selector');!
Setting and reading classes
/*!Note: The classes must pre-exist. Does not destroy other classes. Merely adds this class.!*/!//Add a class!$('selector').addClass('className');!//Remove a class!$('selector').removeClass('className');!//Add if it isn't there. Remove if it is.!$('selector').toggleClass('className');!!
Setting and reading CSS properties // To read a css property!var x = $(selector).css('property');!// To set a css property!$(selector).css('property','value');!// To set multiple css properties!$(selector).css(! {! 'property1':'value2',! 'property2':'value2'! }!);!
Reading and setting HTML attributes • Reading an attribute var x = $(selector).attr('attributeName');!• Setting an attribute $(selector).attr('attributeName',value);!• Removing an attribute $(selector).removeAttr('attributeName');!
each(function(){}); allows us to run code on each matched member in the set $('a[href^="http://"]').each(function() {//do something});!
this and $(this) this $(this)
A JavaScript built-in A jQuery thing
Will point to the entire wrapped set
Will point to each thing in the wrapped set
Can be accessed any time
Can only be accessed via jQuery
Conclusion • jQuery is a library that helps you to write JavaScript much
faster and effectively • You copy it and link to your copy or just link to the CDN • With jQuery you can alter just about anything on a page
using selectors, which are very flexible • We saw how to do several things:
• Replacing text and html • Apply and remove CSS classes • Adding and removing HTML attributes