J Query简介及入门指南

jQuery 简介及入门指南 The Write Less, Do More, JavaScript Library

jQuery 官方介绍 jQuery 是一个简明快速的 JavaScript 框架，它可以简化遍历 HTML 文档、处理事件、演示动画和在网页中加入 Ajax 交互的过程。 jQuery 的设计目的是改变 JavaScript 的编码方式。 jQuery 官方网站 http://jquery.com/

特点—优雅表现和逻辑分离 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”

Let’s Enjoy jQuery 主要内容 1. 选择器 (selector) 2. 事件 (event) 3. 遍历 DOM 对象 4. 特效 (Effect) 5.CSS 6.Ajax 交互

从 $(document).ready() 开始我们一般在页面载入之后马上执行代码，以前我们使用 window.onload = function(){ ... } ，其实它并不够快，因为 window.onload 表示客户端页面载入完成（包括图片等）。有了 jQuery ，我们可以在不包括图片等的页面文档 (document) 载入后马上执行代码，更加迅速： $ (document). ready (function(){ // just do something here :-) }); 选择器 (selector) 事件 (event) 更懒的写法： $(function(){ //do something interesting here });

$()— 选择器 (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> 标签的 标签 ; 5. $(“div:visible”) —— 选择当前状态为可见的 <div> 标签 . 更多选择器的用法可以参考： http://docs.jquery.com/Selectors

事件 (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

遍历 DOM 对象 (Traversing) 在进行 JavaScript 编程时经常会涉及到 DOM 对象的操作， jQuery 提供了很多关于操作 DOM 对象的方法，利用这些方法可以很方便地对 DOM 对象进行遍历节点，增加节点，删除节点等操作。 Example: HelloHello AgainSay Hello $(“p”).next(); // 获取下一个 节点 (Hello Again) $(“p”).next(“.selected”). html() ;// 获取下一个 class 属性为” selected” 的 节点的内容更多关于遍历 DOM 的方法可以参考 jQuery 官方文档 http://docs.jquery.com/Traversing 链式功能 (Chainability)

特效 (Effect) jQuery 提供了很多特效方法，利用这些方法可以很容易地创建一些非常酷的动画效果。 Example: Hello 要显示这段内容有两种方法： CSS 法： $(“p”).css(“display”,“”); 特效法 : $(“p”).show(“slow”); 用 jQuery 提供的特效法可以控制内容显示的快 (fast) 、慢 (slow) ，具有动画效果。更多精彩特效及其用法参考 jQuery 官方文档 : http://docs.jquery.com/Effects

CSS 利用 jQuery 的 CSS 方法可以很方便地控制页面内容的 CSS 样式，如要给一个 div 标签加上红色背景可以这么做： $(“div”).css(“background-color”,“red”); css() 方法根据所提供的参数的不同具有不同的功能 : 1. css(name) 返回 name 所指定的属性的值 ; 2. css(properties) 给所选择的标签指定一个由“键 / 值”对应的对象作为其 css 样式的属性 var cssObj = { backgroundColor: "#ddd", fontWeight: “” } $(“div”).css(cssObj); 3. css( name, value) 给 name 所指定的 css 属性加上 value 值 jQuery 还提供了其它一些控制 css 样式的方法，可以参考其官方文档 : http://docs.jquery.com/CSS

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("test.php", function(data){ alert("Data Loaded: " + data); });

Ajax 交互以 GET 发送参数并返回数据 $.get("test.php", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); }); $.post() 的使用方式跟 $.get() 一样 $.post( url, [data], [callback] ) 。 jQuery 还提供了一些 Ajax 事件函数来处理 Ajax 过程发生的一些事件，如 ajaxComplete,ajaxError 等，具体使用可参照官方文档 http://docs.jquery.com/Ajax_Events 更多 Ajax 资料 http://docs.jquery.com/Ajax

J Query简介及入门指南

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to J Query简介及入门指南 (20)

J Query简介及入门指南