jQuery教程.doc

jQuery入门教程jQuery基础教程一(传说中的ready)来源：cnjquery原创 作者：snake 时间：2008-07-29 Tag：JQuery 基础教程 中文入门指南 首先我们来说明一下什么是JqueryjQuery 是一个新型的JavaScript库.jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。jQuery支持CSS1-CSS3,以及基本的xPathjQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+第一步 ready函数如果你需要一些函数需要在DOM加载就绪以后才能执行,当然window.onload()能实现同样的功能，但当window.onload函数执行的时候，要说明所有东西已经载入，包括图像和横幅等等。要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的.$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。 简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数.(document)意思是说，获取整个网页文档对象（类似的于window.document），$(document).ready意思就是说，获取文档对象就绪的时候。$(document).ready(function() / do stuff when DOM is ready/当文档载入后从此处开始执行代码);jquery基础教程二(鼠标点击事件)来源：cnjquery原创 作者：snake 时间：2008-07-29 Tag：JQuery 基础教程 中文入门指南 实例教程 鼠标 click事件， 点击： 1132 下面我们来看看jquery如何给 DOM 各个元素批量绑定事件$(div).click $(div)就是页面中所有的 div标签 这句话就是给所有的标签为div的元素 绑定了一个click事件 即当所有div 被鼠标单击的时候 执行 alert(Hello World!);jquery基础教程二（demo鼠标点击事件）Hello World!程序演示地址 : /demo/jquery基础教程二demo鼠标点击事件.htmljquery基础教程三(css的操作之addClass和removeClass)来源：cnjquery原创 作者：snake 时间：2008-07-29 Tag：removeClass addClass 基础教程 JQuery 中文入门指南 实例教程 点击： 906 下面我们看看jquery对css的操作方法 addClass和removeClassaddClass为每个匹配的元素添加指定的类名。 removeClass为每个匹配的元素移除指定的类名。$(div).addClass(redborder);/当页面加载完成后给每个div标签 加上 redborder样式$(this).removeClass(redborder);/当鼠标单击div标签的时候 移除当前div标签的redborder样式这里我们注意$(this) 因为jquery 选择器 都是返回当前对象,通过$(div) 我们是给页面所有的div标签都绑定了click事件 而$(this) 即使当前鼠标单击的标签对象jquery基础教程二（demo鼠标点击事件） .redborderborder:2px dashed #ff0000 jquery基础教程二（demo鼠标点击事件）1jquery基础教程二（demo鼠标点击事件）2程序演示: /demo/jquery基础教程三(css的操作之addClass和removeClass).htmljquery基础教程四(css的操作之css,height和width)来源：cnjquery原创 作者：snake 时间：2008-07-29 Tag：width height css css操作 基础教程 JQuery 中文入门指南 点击： 840 上面我们学习了jquery 的 addClass和removeClass方法下面我们来看看 css,height和width首先我们看看 css(key, value) 和 css(name) css(key, value)在所有匹配的元素中，设置一个样式属性的值。 css(name)访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。 css(properties)把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式。首先我们看看css(key, value) 我们看看下面代码$(#css1).click(function() $(this).css(border,2px dashed #000000); )当鼠标单击ID等于css1的元素 此元素的border属性设置成 2px dashed #000000css(name)$(#css2).click(function() $(this).css(border,2px dashed #6600FF); alert($(this).css(border); )$(this).css(border,2px dashed #6600FF);当鼠标单击ID等于css2的元素 此元素的border属性设置成 2px dashed #6600FFalert($(this).css(border);获得border的属性值.css(properties) $(#css3).click(function() $(this).css( color: red, background: blue ); )当鼠标单击ID等于css3的元素 样式color为red background为blue下面我们看看height和width用法 其实从单词意思上也应该知道的差不多height(val)为每个匹配的元素设置CSS高度(height)属性的值。如果没有明确指定单位（如：em或%），使用px。height()取得第一个匹配元素当前计算的高度值（px）。height(val)$(#ht1).click(function() $(this).height(200px); alert($(this).height(); )$(this).height(200px); 当鼠标单击ID等于ht1的元素 此元素的高度将变成200pxalert($(this).height();显示height的值width(val) width() 和height是一样的 只不过就是设置宽度.这里就不多说了.jquery基础教程四(css的操作之css,height和width) .redborderborder:2px dashed #ff0000 css(key, value) 在所有匹配的元素中，设置一个样式属性的值。 jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).css(border,2px dashed #000000);css(name) 访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).css(border,10px dashed #6600FF); alert($(this).css(border);css(properties)把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).css( color: red, background: blue ); height(val)为每个匹配的元素设置CSS高度(height)属性的值。如果没有明确指定单位（如：em或%），使用px。jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).height(200px);alert($(this).height(); 程序演示地址:/demo/jquery基础教程四(css的操作之css,height和width).htmljquery基础教程五(渐变效果函数之fadeIn,fadeOut和fadeTo)来源：cnjquery原创 作者：snake 时间：2008-07-30 Tag：实例教程 中文入门指南 JQuery 基础教程 fadeIn fadeOut fadeTo 点击： 875 我们来看看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基础教程五(效果函数之fadeIn,fadeOut和fadeTo) .redborderborder:2px dashed #ff0000 fadeOut(speed,callback) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 点击fadeOut1将执行$("#fadeOut").fadeOut("slow",function()alert("是不是下面这个层慢慢消失了！");fadeIn(speed, callback)通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 点击fadeIn1将执行 $("#fadeIn").fadeIn("slow",function()alert("是不是下面这个层慢慢出现了！");fadeTo(speed,opacity,callback)把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。点击fadeIn1将执行 $("#fadeTo").fadeTo("slow",0.5,function()alert("是不是下面这个层透明度变成50%了！");演示地址:/demo/jquery基础教程五(效果函数之fadeIn,fadeOut和fadeTo).htmljquery基础教程六(滑动效果函数之slideDown,slideToggle和slideUp)来源： 作者： 时间：2008-07-31 Tag：JQuery 基础教程 滑动 slideDown slideToggle slideUp) 点击： 867 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秒显让ID为slideDown的div 通过向下增大的方式显示出来,slideToggle(speed,callback) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。代码$(#slideToggle).slideToggle(slow,function()alert(hello！);这个东西实际上就是 slideDown slideUp 的集合体 如果元素当前可见 则 滑动隐藏 如果当前元素已经隐藏则滑动显示slideUp(speed, callback)通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。与slideDown用法相同.只不过就是效果都是反的演示程序:/demo/jquery基础教程六(滑动效果函数之slideDown,slideToggle和slideUp).htmljquery基础教程七 选择器(selectors 的xpath语法应用)来源： 作者： 时间：2008-08-01 Tag：基础教程 JQuery 选择器