J Query简介及入门指南

  • 1,723 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,723
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
Comments
0
Likes
0

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 简介及入门指南 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