jquery
Download
Skip this Video
Download Presentation
Jquery

Loading in 2 Seconds...

play fullscreen
1 / 8

Jquery - PowerPoint PPT Presentation


  • 251 Views
  • Uploaded on

Jquery. http://www.flickr.com/photos/yukop/7130306255/sizes/c/in/photostream/. A good language for questioning JavaScripters. What?. JQuery is a library of JavaScript functions. JQuery ensures identical functionality across platforms . JQuery works by

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Jquery' - lupita


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
jquery

Jquery

http://www.flickr.com/photos/yukop/7130306255/sizes/c/in/photostream/

A good language for questioning JavaScripters

slide2
What?
  • JQuery is a library of JavaScript functions.
  • JQuery ensures identical functionality across platforms.
  • JQuery works by
    • Using CSS selectors to select a set of DOM elements
    • Apply functions to each selected element
  • Examples
    • $(\'p\').hide();
    • $(\'.highlight\').attr(\'background-color\', \'red\');
installing jquery
Installing JQuery
  • Include the library
    • Download JQuery (a js file) to your server and link to it from your HTML documents
      • <script src=“jquery.min.js”>
    • Link to a hosted JQuery implementation
      • <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
      • <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js">
the function
The $ function
  • Access to the JQuery library is through the jQuery function
    • jQuery() also known as $()
  • This function is extremely flexible:
    • $(function) : defines the ‘ready’ handler
    • $(‘selector’) : selects DOM elements using CSS selectors
    • $(element) : attaches behavior to an element
    • $.function() : executes a jQuery function
ready
Ready!?
  • Can invoke javascript when the web page is loaded into the browser.
    • window.onload = function(){ alert("welcome"); }
    • Unfortunately, the Javascript code isn\'t run until all images are finished downloading (this includes banner ads).
  • JQuery allows coders to invoke a function when the DOM is ready even if some content (images for example) has not been loaded.
    • $(document).ready(function(){ … });
example
Example

<!doctype html>

<html>

<head><title>Demo</title></head>

<body>

<a href="http://jquery.com/">jQuery</a>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("a").click(function(event){

alert(“What’s up with that?");

});

});

</script>

</body>

</html>

jquery selectors
Jquery Selectors
  • One of the most powerful JQuery features is selection.
  • JQuery allows programmers to use CSS selectors in the context of JavaScript code. The result is an iterable set of DOM elements.
    • $(‘#x33’)
    • $(‘p’)
    • $(‘.bordered’)
    • $(‘a[href$=“.pdf”]’)
functions on elements
Functions on Elements
  • Functions can be easily applied to the selected elements
    • $(‘#x33’).hide()
    • $(‘p’).fadeOut()
    • $(‘.bordered’).slideDown(‘slow’)
    • $(‘a[href$=“.pdf”]’).fadeTo(‘slow’, .5,)
    • $(‘#x33’).show()
ad