J Query简介及入门指南
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

J Query简介及入门指南

on

  • 2,202 views

 

Statistics

Views

Total Views
2,202
Views on SlideShare
2,198
Embed Views
4

Actions

Likes
0
Downloads
20
Comments
0

1 Embed 4

http://www.slideshare.net 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

J Query简介及入门指南 Presentation Transcript

  • 1. jQuery 简介及入门指南 The Write Less, Do More, JavaScript Library
  • 2. jQuery 官方介绍
    • jQuery 是一个简明快速的 JavaScript 框架,它可以简化遍历 HTML 文档、处理事件、演示动画和在网页中加入 Ajax 交互的过程。
    • jQuery 的设计目的是改变 JavaScript 的编码方式。
    • jQuery 官方网站 http://jquery.com/
  • 3. 特点—优雅
    • 表现和逻辑分离 Without jQuery : <a href=“#” onclick=“alert(‘Hello,world!’)” >Click Me</a> With jQuery : <a href=“#”>Click Me</a> $ (“a”). click (function(){ alert(“Hello,world!”); });
    • Write less ,do more! $(“#test”).addClass(“test”).show(“slow”).html(“foo”); 简单的一行代码就对 id 为 test 的标签作了三个处理 : (1) 附加名为” test” 的 CSS 样式 ; (2) 显示 ; (3) 将其内容改为” foo”
  • 4. Let’s Enjoy jQuery
    • 主要内容 1. 选择器 (selector) 2. 事件 (event) 3. 遍历 DOM 对象 4. 特效 (Effect) 5.CSS 6.Ajax 交互
  • 5. 从 $(document).ready() 开始
    • 我们一般在页面载入之后马上执行代码,以前我们使用 window.onload = function(){ ... } ,其实它并不够快,因为 window.onload 表示客户端页面载入完成(包括图片等)。有了 jQuery ,我们可以在不包括图片等的页面文档 (document) 载入后马上执行代码,更加迅速: $ (document). ready (function(){ // just do something here :-) });
    选择器 (selector) 事件 (event) 更懒的写法: $(function(){ //do something interesting here });
  • 6. $()— 选择器 (selector)
    • $() 是一个 jQuery 选择器,可以用它来选择指定的标签,比如 $(“a”) 表示选择所有的 <a> 标签。
    • $() 是 jQuery “ 类 ” (jQuery “class”) 的一个别称,因此 $() 构造了一个新的 jQuery 对象 (jQuery object) 。
    • $() 支持 CSS 和 XPath 。
    • Example : 1. $(“div”) —— 选择所有 div 标签 ; 2. $(“#content”) —— 选择 id 属性为” content” 的标签,相当于 document.getElementById(“content”); 3. $(“.title”) —— 选择所有 class 属性为” title” 的标签 ; 4. $(“p[a]”) —— 选择包含 <a> 标签的 <p> 标签 ; 5. $(“div:visible”) —— 选择当前状态为可见的 <div> 标签 .
    • 更多选择器的用法可以参考: http://docs.jquery.com/Selectors
  • 7. 事件 (event)
    • jQuery 的事件用来表示选择器所选择的对象发生了什么事件。
    • 前面提到的 $(document).ready() 和 $(“a”).click() 中的 ready 和 click 都称为 jQuery 的事件 (event) 。
    • JavaScript 中的 onClick,onMouseover,onSubmit 等事件在去掉 on 后都可以成为 jQuery 的事件,如 click, mouseover, submit 等。
    • Example: 当鼠标移入 div 时, div 里面的文字变红色,移出时变黑色 $(“div”).hover( function(){ $(this).css(“color”,”red”); }, function(){ $(this).css(“color”,”black”); } );
    • 更多关于事件的用法可以参考 jQuery 官方文档 http://docs.jquery.com/Events
  • 8. 遍历 DOM 对象 (Traversing)
    • 在进行 JavaScript 编程时经常会涉及到 DOM 对象的操作, jQuery 提供了很多关于操作 DOM 对象的方法,利用这些方法可以很方便地对 DOM 对象进行遍历节点,增加节点,删除节点等操作。
    • Example: <p>Hello</p><p>Hello Again</p><p class=“selected”>Say Hello</p> $(“p”).next(); // 获取下一个 <p> 节点 (Hello Again) $(“p”).next(“.selected”). html() ;// 获取下一个 class 属性为” selected” 的 <p> 节点的 内容
    • 更多关于遍历 DOM 的方法可以参考 jQuery 官方文档 http://docs.jquery.com/Traversing
    链式功能 (Chainability)
  • 9. 特效 (Effect)
    • jQuery 提供了很多特效方法,利用这些方法可以很容易地创建一些非常酷的动画效果。
    • Example: <p style=“display: none”>Hello</p> 要显示这段内容有两种方法: CSS 法: $(“p”).css(“display”,“”); 特效法 : $(“p”).show(“slow”); 用 jQuery 提供的特效法可以控制内容显示的快 (fast) 、慢 (slow) ,具有动画效果。
    • 更多精彩特效及其用法参考 jQuery 官方文档 : http://docs.jquery.com/Effects
  • 10. CSS
    • 利用 jQuery 的 CSS 方法可以很方便地控制页面内容的 CSS 样式,如要给一个 div 标签加上红色背景可以这么做: $(“div”).css(“background-color”,“red”);
    • css() 方法根据所提供的参数的不同具有不同的功能 : 1. css(name) 返回 name 所指定的属性的值 ; 2. css(properties) 给所选择的标签指定一个由“键 / 值”对应的对象作为其 css 样式的属性 var cssObj = {
    • backgroundColor: &quot;#ddd&quot;,
    • fontWeight: “” } $(“div”).css(cssObj); 3. css( name, value) 给 name 所指定的 css 属性加上 value 值
    • jQuery 还提供了其它一些控制 css 样式的方法,可以参考其官方文档 : http://docs.jquery.com/CSS
  • 11. Ajax 交互
    • jQuery 用非常简单的方式来处理 Ajax ,比如要载入一块 HTML 代码到 div 中,只需使用 load() 函数即可: $(“div”).load(“mail.html”);
    • jQuery 提供了六个函数来处理 Ajax 请求,分别是 $.ajax(), $.load(), $.get(),$.post, $getJSON(), $getScript()
    • $.get(“test.php”);// 请求 test.php 页面,忽略返回的数据
    • $.get(“test.php”, { name: “John”, time: “2pm” } );// 以 GET 方式发送参数
    • 请求并返回数据 $.get(&quot;test.php&quot;, function(data){
    • alert(&quot;Data Loaded: &quot; + data);
    • });
  • 12. Ajax 交互
    • 以 GET 发送参数并返回数据 $.get(&quot;test.php&quot;, { name: &quot;John&quot;, time: &quot;2pm&quot; },
    • function(data){
    • alert(&quot;Data Loaded: &quot; + data);
    • });
    • $.post() 的使用方式跟 $.get() 一样 $.post( url, [data], [callback] ) 。
    • jQuery 还提供了一些 Ajax 事件函数来处理 Ajax 过程发生的一些事件,如 ajaxComplete,ajaxError 等,具体使用可参照官方文档 http://docs.jquery.com/Ajax_Events
    • 更多 Ajax 资料 http://docs.jquery.com/Ajax