JQuery 学习

1,182 views

Published on

jquery,jquery学习,jquery笔记

Published in: Education, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,182
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JQuery 学习

  1. 1. Write Less , Do more jQuery 介绍 Cssrain.cn
  2. 2. 1. jQuery 概述 1.1 基本概念 jQuery是一个轻量级 javascript库 . 兼容各种浏览器( I E 6.0+ , FF 1.5+ , Safari 2.0+ , Opera9.0+ ),也支持 CSS 1-3 选择器 . 能将 JavaScript代码和 HTML 代码完全分离,便于代码维护和修改。 使用户能更方便地处理 HTML 文档、事件、实现动画效果,并且方便地为网站 提供 Ajax 交互 容易扩展,插件丰富
  3. 3. 1.2 能做什么 获取页面的内容 修改页面的外观 修改页面的内容 在页面中响应用户的交互 给页面加上动画 无刷新返回服务器端的信息 还提供了改进函数,如迭代和数组操作 1. jQuery 概述
  4. 4. 1.3 主流 javascript 库 Prototype YUI D ojo mooTools jQuery: 短小精悍,支持 dom1-3 , css支持;简单的动画实现,支持自定义动画;支持插 件开发,现有插件多;完整的 api 文 档以及范例,易学;拥有官方 UI 程序供使 用,效果好。 性能测试: http://mootools.net/slickspeed 1. jQuery 概述
  5. 5. 1. jQuery 下载和引入 2.1 jQuery 下载 当前版本 1.4.4 官方网站下载: http://www.jquery.com/ 2.2 jQuery 引入 在页面头部 head 中,引入 js : < script type="text/javascript" src="./script/jquery.js"> < /script> 2.3 Dw和 VS2008 中可以实现 jQuery 的智能提示 http://code.google.com/p/jquery-api-zh-cn/downloads/list
  6. 6. 1. 学习 jQuery ,主要从哪些方面下 手 ( 1 ) 核心函数 ( 2 ) 选择器 ( 3 ) D OM 操作 ( 4 ) 事件和动画 ( 5 ) Ajax ( 6 ) 常用工具函数 ( 7 ) 插件
  7. 7. 4. jQuery 基础 4.1 jQuery 核心函数 $( expression,[ context] ) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元 素。 jQuery 的核心功能都是通过这个函数实现的。 这个函数最基本的用法就是向它传递 一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 $( html) 根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 D OM 元素 $( elements) 将一个或多个 D OM 元素转化为 jQuery对象。 $( callback) $(document).ready() 的简写。允许你绑定一个在 D OM 文档载入完成后执行的函数。这个函数 的作用如同 $(document).ready() 一样,只不过用这个函数时,需要把页面中所有需要在 D OM 加载完成时执行的 $() 操作符都包装到其中来。
  8. 8. 4. jQuery 基础 4.2 jQuery 选择器 返回 jQuery 对象。 基本选择器 (如: $(“#id”) , $(“.class”) ) 层次选择器 (如: $(“div > span”) ) 简单选择器 (如: $(“tr:last”) ) 内容选择器 ( 如: $("div:contains(' John' )") ) 可见性选择器 ( 如: $("tr:hidden") ) 属性选择器 (如: $("input[name= ‘john' ]") ) 子元素选择器 (如: $("ulli:first-child") ) 表单选择器 (如: $(":input") ) 表单对象选择器 (如: $("select option:selected") ) 自定义选择器 (自己写选择器插件 )
  9. 9. 4. jQuery 基础 4.3 jQuery Dom 操作 属性操作(如: $("img").attr("src","test.jpg") ) 样式操作(如: $("p").addClass("selected") ) 设置和获取 HTML 代码 (如: $(“p”). html(‘val’) ) 设置和获取文本(如: $(“p”). text(‘val’) ) 设置和获取值(如: $(“input”). val(‘val’) ) 查找操作 (如: $(“p”). find(“a”) , $(“p”). find(“a”) .end() ) 插入操作 ( 如: $("p").appendTo("div") ) 删除操作 ( 如: $("p").remove() ) 复制操作 ( 如: $("b").clone().prependTo("p") ) 设置样式 ( 如: $("p").css({ color: "#ff0011", background: "blue"}) ) 获取尺寸 ( 如: $("p").height() )
  10. 10. 4. jQuery 基础 4.4 jQuery 事件和动画 页面载入事件 ( 如: $(document).ready(function(){ // 在这里写你的代码 ... }); ) 事件处理 ( 如: bind , trigger, unbind ) 交互处理 ( 如: hover, toggle ) 普通事件 ( 如: click, mouseover 等 ) 基本效果 ( 如: $("p").show() ) 滑动效果 ( 如: $("p").slideD own("slow") ) 淡入淡出效果 ( 如: $("p").fadeI n("slow") ) 自定义效果 ( 如: $(".block").animate({left: ' -50px' }, "slow") )
  11. 11. 4. jQuery 基础 4.5 jQuery 中的 Ajax $.ajax( options) : 通过 HTTP 请求加载远程数据 $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); $.get(”search.do”,{id:1},rend); function rend(xml){ alert(xml);} $.post(”search.do”,{id:1},rend); function rend(xml){alert(xml);} $(”#msg”).ajaxStart(function(){$(this).html(”正在载入 ..”);}); $(”#msg”).ajaxSuccess(function(){$(this).html(” ”加载完成! ); });
  12. 12. 4. jQuery 基础 4.6 jQuery 中的工具函数 $.browser.msie $.each() $.trim() $.param() $.isArray() …等等 .
  13. 13. 4. jQuery 基础 4.7 jQuery 插件 (1) 官方: http://ui.jquery.com (2)240 插件: http://www.cnblogs.com/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html (3) http://www.cssrain.cn 参考网站: jQuery官方网站 http://jquery.com jQuery 中文社区 http://bbs.jquery.org.cn jQuery中文 API 站点 http://code.google.com/p/jquery-api-zh-cn/downloads/list
  14. 14. Thank you http://www.cssrain.cn

×