How to learn j query

2,350 views

Published on

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

No Downloads
Views
Total views
2,350
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
63
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

How to learn j query

  1. 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. 2. 理解原生 JavaScript <ul><li>Everything is Object, Based on prototype </li></ul><ul><li>jQuery 是对原生 JS 的封装,增强 </li></ul>
  3. 3. 理解 Dom
  4. 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. 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. 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. 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. 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. 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. 10. <ul><li>Thx! </li></ul>

×