Your SlideShare is downloading. ×
0
How to learn j query
How to learn j query
How to learn j query
How to learn j query
How to learn j query
How to learn j query
How to learn j query
How to learn j query
How to learn j query
How to learn j query
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to learn j query

2,104

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,104
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
62
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 如何学习 jQuery <ul><li>www.w3school.com.cn </li></ul><ul><li>http://docs.jquery.com/Main_Page </li></ul><ul><li>JavaScript Code GuideLines </li></ul><ul><li>Apple JavaScript Coding Guidelines </li></ul><ul><li>Google JavaScript Style Guide </li></ul><ul><li>JQuery Core Style Guidelines </li></ul>
  • 2. 理解原生 JavaScript <ul><li>Everything is Object, Based on prototype </li></ul><ul><li>jQuery 是对原生 JS 的封装,增强 </li></ul>
  • 3. 理解 Dom
  • 4. 基于 CSS 选择器构建 <ul><li>了解 CSS 样式规则 </li></ul><ul><li>The jQuery() function </li></ul><ul><li>jQuery('#intro') </li></ul><ul><li>jQuery('div.section > p') </li></ul><ul><li>jQuery(dom) </li></ul><ul><li>return jQuery collections </li></ul>
  • 5. Traversing the DOM <ul><li>jQuery provides enhanced methods for traversing the DOM </li></ul><ul><li>$('div.section').next() </li></ul><ul><li>$('div.section').prev() </li></ul><ul><li>$('div.section').prev('a') </li></ul><ul><li>$('div.section').parent() </li></ul>
  • 6. Manipulating collections <ul><li>$('div.section').addClass('highlighted') </li></ul><ul><li>$('img.photo').attr('src', '/default.png'); </li></ul><ul><li>$('a.foo').html('<em>Click me now!</em>'); </li></ul><ul><li>$('p:odd').css('background-color', '#ccc'); </li></ul>
  • 7. Handling events <ul><li>jQuery provides methods for assigning event </li></ul><ul><li>handlers to elements in a cross-browser way </li></ul><ul><li>$('a').click(function(ev) { </li></ul><ul><li>$(this).css({backgroundColor: 'orange'}); </li></ul><ul><li>}); </li></ul><ul><li>$(document).ready(function() { </li></ul><ul><li>alert('The DOM is ready!'); </li></ul><ul><li>}); </li></ul>
  • 8. Ajax <ul><li>$('div#intro').load('/some/file.html'); </li></ul><ul><li>More advanced methods include: </li></ul><ul><li>$.get(url, params, callback) </li></ul><ul><li>$.post(url, params, callback) </li></ul><ul><li>$.getJSON(url, params, callback) </li></ul><ul><li>$.getScript(url, callback) </li></ul>
  • 9. Plugins <ul><li>jQuery is extensible through plugins, which can add new methods to the jQuery object </li></ul><ul><li>fancy effects </li></ul><ul><li>UI: drag and drop, datepicker, pagingTool, tree, editor, slider, progressBar </li></ul>
  • 10. <ul><li>Thx! </li></ul>

×