What is jquery?

Size: px

Start display at page:

Download "What is jquery?"

Toby Kelley
6 years ago
Views:

1 jquery part 1

2 What is jquery? jquery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, special functions to interact directly with CSS, event handling, animation, Ajax and also base for a wide range of plug-ins and other utilities. Works across a multitude of browsers. Now installed on over 60 percent of all websites.

3 Including jquery Two ways to include jquery in your web pages. Download it and install in your website Via Content Delivery Network (CDN) Choosing the Right Version 1.x if any of your users will be using older versions of IE 2.x series, which no longer supports versions of Internet Explorer lower than 9. 2.x is more tighter, faster, and more-efficient code than 1.x.

4 Including jquery Compressed or Editable Minified (compressed) in size to minimize bandwidth and decrease loading time Use an uncompressed version if you want to make an edit it yourself Downloading Download version you prefer and upload it to your web server then include it within <script> tags, like this. <script src='

5 Using a Content Delivery Network if you don t need to modify the jquery source code. your users are certain to have a live Internet connection. All you need to know is the filename you wish to access. <script src='

6 Others CDN <script src=' <script src=' Always Using the Latest Version <script src=' <script src='

7 jquery Syntax $ symbol, acts as the jquery factory method It was chosen because the symbol is legal injavascript, is short, and is different from customary variable, object, or function/method names.

8 A Simple Example You can access jquery by typing a $ symbol, followed by a selector in parentheses, and then a period and a method to apply to the selected element(s) $('p').css('font-family', 'monospace') to change the font family of all paragraphs to monospace $('code').css('border', '1px solid #aaa') to add a border to a <code> element

10 Avoiding Library Conflict $.noconflict() jq = $.noconflict() jq('p').css('font-family', 'monospace')

11 Selectors The Element Selector if you wish to change the background color of all <blockquote> elements $('blockquote').css('background', 'lime')

12 Selectors The ID Selector refer to elements by their Ids $('#advert').css('border', '3px dashed red')

13 Selectors The Class Selector you can manipulate groups of elements according to the class they use $('.new').css('text-decoration', 'underline')

14 Selectors Combining Selectors you may combine selectors into a single jquery selection $('blockquote, #advert,.new').css('font-weight', 'bold')

17 Waiting Until the Document is Ready jquery is so closely related to the DOM you may need to wait until a web page has loaded before manipulating parts of it Without jquery, this can be achieved with the onload event In jquery use method called ready $('document').ready(function() { // Your code goes here })

18 Handling Events events are triggered by user interaction a mouse passes over an element the mouse button is clicked a key is pressed A document completes loading... $('#clickme').click(function() { $('#result').html('you clicked the button!') })

19 Event Functions and Properties

20 The blur and focus Events

21 The this Keyword When an event is called, the element on which it was triggered is passed in the object this this is a standard JavaScript object You could replace this :

22 The click and dblclick Events

23 The keypress Event preventdefault method of event is used when you don t want the event to trigger any other handlers

24 The mousemove Event

25 The submit Event

26 Hiding and Showing

27 The toggle Method

28 Fading In and Out There are four methods for managing fades: fadein, fadeout, fadetoggle, and fadeto

29 Sliding Elements Up and Down

30 Animations

32 References

33 Questions?

34 jquery Part 2

35 DOM The html method to change the innerhtml property of an element. This method can be used either to set the HTML or retrieve it from an HTML document

36 The Difference between.text() set and get the innerhtml property of an element..html() set and get the innerhtml property of an element. it s designed for use only with HTML. (can not use with XML doc).val() you can set and get the value of an input element..attr() you can get and set the attributes of elements.

38 Adding and Removing Elements.append().prepend().after().before().remove().empty()

39 Adding and Removing Elements

40 $('a').prepend('link: ') $("[href^='http']").append(" <img src='link.png'>") $('code').before('<hr>').after('<hr>') $('#b').click(function() { $('#quote').empty() } ) $('#a').click(function() { $('#ball').remove() } )

41 Dynamically Applying Classes Using the addclass and removeclass method <style>.read {... } </style> <p id='post23'> Blah blah blah. </p> $('#post23').addclass('read') $('#post23').removeclass('read')

42 Modifying Dimensions

44 jquery Dimensions The innerwidth and innerheight Methods The outerwidth and OuterHeight Methods

46 DOM Traversal

47 Parent Elements To refer to an element s direct parent Only one level my_parent = $('#elem').parent() my_parent = $('li').parent() alert($('li').parent().length) $('li').parent().css('font-weight', 'bold')

48 filter argument

49 Selecting all ancestor elements $('#elem').parents('div').css('background', 'yellow') select all <div> elements in the ancestry chain $('#elem').parentsuntil('div').css('background', 'yellow') traverses up the ancestry chain in the same way as parents, but stops at the first element that matches the selection filter

51 Child Elements Just like the parent method, this goes only one level and returns a list of none, one, or more matching selections. You can also pass a filter argument to it to select between the children, my_children = $('#elem').children() li_children = $('#elem').children('li') li_descendants = $('#elem').find('li') all_descendants = $('#elem').find('*') you must provide a filter selector to the find method

52 Sibling Elements The siblings method will return all the matching elements that are children of the same parent $('#two').siblings().css('font-weight', 'bold') $('#two').siblings('.new').css('font-weight', 'bold')

54 Selecting the Next and Previous Elements $('#new').next().css('font-weight', 'bold') $('#new').nextall().css('font-weight', 'bold') $('#new').nextall('.info').css('font-weight', 'bold') Do nothing $('#new').nextuntil('#old').css('font-weight', 'bold')

55 Traversing jquery Selections $('ul>li').first().css('text-decoration', 'underline') $('ul>li').last().css('font-style', 'italic') $('ul>li').eq(1).css('font-weight', 'bold') $('ul>li').filter(':even').css('background', 'cyan') $('ul>li').not('#new').css('color', 'blue') $('ul>li').has('ol').css('text-decoration', 'line-through')

57 The is Method

58 Using jquery Without Selectors The $.each method is passed the array, along with an anonymous function to process it. The function takes two arguments, the index of the array (called name), and the contents of each element (called type)

59 Using Ajax using just a single call $.load() $.get() $.post()

60 jquery Ajax Load The jquery load() method loads data from the server and place the returned HTML into the selected element. $(selector).load(url, data, complete) The parameters of the load() method has the following meaning: The required URL parameter specifies the URL of the file you want to load. The optional data parameter specifies a set of query string (i.e. key/value pairs) that is sent to the web server along with the request. The optional complete parameter is basically a callback function that is executed when the request completes. The callback is fired once for each selected element.

61 load-demo.html test-content.html

62 load-demo.html with callback function the callback function can have three different parameters: responsetxt Contains the resulting content if the request succeeds. statustxt Contains the status of the request such as success or error. jqxhr Contains the XMLHttpRequest object.

63 jquery Ajax GET and POST Requests jquery's $.get() and $.post() methods provide simple tools to send and retrieve data asynchronously from a web server $.get(url, data, success); Or $.post(url, data, success); The parameters in the above syntax have the following meaning: The required URL parameter specifies the URL to which the request is sent. The optional data parameter specifies a set of query string (i.e. key/value pairs) that is sent to the web server along with the request. The optional success parameter is basically a callback function that is executed if the request succeeds. It is typically used to retrieve the returned data.

64 $.get() with callback function date-time.php <?php // Return current date and time from the server echo date("f d, Y h:i:s A");?>

$php $number = htmlspecialchars($_get["number"]); if(is_numeric($number) && $number > 0){ echo "<table>"; for($i=0; $i<11; $i++){ echo "<tr>"; echo "<td>$number$

65 $.get() with data and callback function create-table.php <?php $number = htmlspecialchars($_get["number"]); if(is_numeric($number) && $number > 0){ echo "<table>"; for($i=0; $i<11; $i++){ echo "<tr>"; echo "<td>$number x $i</td>"; echo "<td>=</td>"; echo "<td>". $number * $i. "</td>"; echo "</tr>"; } echo "</table>"; }?>

66 $.post() with form values and callback function display-comment.php <?php $name = htmlspecialchars($_post["name"]); $comment = htmlspecialchars($_post["comment"]); echo "Hi, $name. Your comment has been received successfully.<br>"; echo "Here's the comment what you've entered: $comment";?>

67 $.ajax() ศ กษาเพ มเต มได ท

68 References

69 Questions?

HTML5 and CSS3 The jquery Library Page 1

HTML5 and CSS3 The jquery Library Page 1 1 HTML5 and CSS3 THE JQUERY LIBRARY 8 4 5 7 10 11 12 jquery1.htm Browser Compatibility jquery should work on all browsers The solution to cross-browser issues is