jquery 教程 订阅 jquery 教程

概述

jQuery 是

继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻

量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不jquery及的，它兼容 CSS3，还兼容各种浏览器

（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，

使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。

jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟

的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在

html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在Kollermedia.at上发现了一篇JQuery插

件列表的文章，特推荐如下。

jquery傻瓜教程七 选择器(selectors 的xpath语法应用)
我们根据实例来解释jquery选择器

（selectors）中xpath几种常用的用法

html代码如下：
<ul>
<li

class=”aaaa” title=”ttt”>li-1</li>
<li class=”bbbb”>li-

2</li>
<li title=”fffff”>li-2</li>
</ul>
<div

class=”aaaa” title=”ttt”>li-1</div>
<div class=”bbbb”>li-

2</div>
<div title=”fffff”>li-2</div>
－－－－－－－－－－－－－－

－－－－－－－－－－－－－

jquery傻瓜教程六(滑动效果函数之

slideDown,slideToggle和slideUp)
slideDown(speed,callback)

通过高度变化（向下增大

）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调

整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

这里的 speed

(String|Number): (可选) 三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长

的毫秒数值(如：1000)

我们看看下面代码

$(“#slideDown”).slideDown

(“slow”,function(){alert(“是不是下面这个层滑动显示了！”)});

当然我们可以设置速度

$(“#slideDown”).slideDown(“normal”,function(){alert(“是不是下面这个层滑动显示

了！”)});//正常速度
$(“#slideDown”).slideDown(“fast”,function(){alert(“是不是下面这个层

滑动显示了！”)});//快速
$(“#slideDown”).slideDown(3000,function(){alert(“是不是下面这个

层滑动显示了！”)});//显示一共用3秒显

jquery傻瓜教程五(渐变效果之

fadeIn,fadeOut和fadeTo)

我们来看看jquery是如何实现淡入 淡出效果的.
fadeOut

(speed,callback)

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选

地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽

度不会发生变化。

$(“#fadeOut1″).click(function(){
$(“#fadeOut”).fadeOut

(“slow”,function(){alert(“是不是下面这个层慢慢消失了！”)});
})

这里我们说需要

说明的是
speed (String|Number): (可选) 三种预定速度之一的字符串(“slow”, “normal”, or

“fast”)或表示动画时长的毫秒数值(如：1000)

fadeIn(speed, callback)

通过不

透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这

个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 |

用法

和 fadeOut 一样,只不过是一个相反的过程

fadeTo(speed,opacity,callback)

把

所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数

。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

$(“#fadeTo1″).click(function(){
$(“#fadeTo”).fadeTo(“slow”,0.5,function

(){alert(“是不是下面这个层透明度变成50%了！”)});
})
0.5表示将不透明度设置成50%

jquery傻瓜教程四(css操作之css,height和

width)
上面我们学习了jquery 的 addClass和removeClass方法

下面我们来看看

css,height和width
首先我们看看 css(key, value) 和 css(name)

css(key, value)

在所有匹配的元素中，设置一个样式属性的值。

css(name)

访问第一个匹配

元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。

css

(properties)

把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配

的元素上设置大量样式属性的最佳方式。

jquery傻瓜教程三[css操作之增加（addClass）和移除

（removeClass）]
下面我们看看jquery对css的操作方法 addClass和

removeClass

addClass

为每个匹配的元素添加指定的类名。

removeClass

为每个匹配的元素移除指定的类名。

jquery傻瓜教程二(鼠标点击事件)
下面我们来看看jquery如何给 DOM 各个元素批量绑定事件

<SCRIPT LANGUAGE=”JavaScript”>
<!–
$(document).ready(function() {

$(“div”).click(function(){//$(“div”)就是页面中所有的 div标签
alert(“Hello

World!”);
})
})
//–>
</SCRIPT>

$(“div”).click

$(“div”)就是页面中所有的 div标签 这句话就是给所有的标签为div的元素 绑定了一个click事件 即当

所有div 被鼠标单击的时候 执行 alert(“Hello World!”);

什么是Jquery？
jQuery 是一

个新型的JavaScript库.
jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作

文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。

jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任

何JavaScript应用的地方，可用于不用的应用程序。

jQuery是一个轻量级的脚本，其代码非常

小巧，JavaScript包只有15K左右。

jQuery支持CSS1-CSS3,以及基本的xPath

jQuery是

跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+