《精编最新jQuery基础教程》由会员分享，可在线阅读，更多相关《精编最新jQuery基础教程（13页珍藏版）》请在金锄头文库上搜索。
1、jQ u e r y 基 础 教 程1jQueryjQuery 基础教程一基础教程一首先我们来说明一下什么是 JqueryjQuery 是一个新型的 JavaScript 库.jQuery 是一个简洁快速的 JavaScript 库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加 Ajax 交互。jQuery 的设计会改变你写 JavaScript 代码的方式。jQuery适合于设计师、 开发者以及那些还好者， 同样适合用于商业开发， 可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。jQuery 是一个轻量级的脚本，其代码非常小巧，JavaS
2、cript 包只有 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()执行的代码效果，这样就花费了很长的等待时间，这不
3、是我们想要的.$(document).ready(fn):当 DOM 载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高 web 应用程序的响应速度。 简单地说，这个方法纯粹是对向window.load 事件注册事件的替代方法。通过使用这个方法，可以在 DOM 载入就绪能够读取并操纵时立即调用你所绑定的函数.(document)意思是说，获取整个网页文档对象（类似的于 window.document），$(document).ready 意思就是说，获取文档对象就绪的时候。$(document).ready(function() / do stu
4、ff when DOM is ready/当文档载入后从此处开始执行代码);jqueryjquery 基础教程二基础教程二( (鼠标点击事件鼠标点击事件) )下面我们来看看 jquery 如何给 DOM 各个元素批量绑定事件$(“div“).click$(“div“)就是页面中所有的 div 标签 这句话就是给所有的标签为 div 的元素 绑定了一个 click 事件 即当所有 div 被鼠标单击的时候 执行 alert(“Hello World!“);jquery 基础教程二（demo 鼠标点击事件）Hello World!jqueryjquery 基础教程三基础教程三(css(css 的操
5、作之的操作之 addClassaddClass 和和 removeClass)removeClass)下面我们看看 jquery 对 css 的操作方法addClassaddClass和removeClassremoveClassaddClass为每个匹配的元素添加指定的类名。removeClass为每个匹配的元素移除指定的类名。jQ u e r y 基 础 教 程3$(“div“).addClass(“redborder“);/当页面加载完成后给每个 div 标签 加上 redborder 样式$(this).removeClass(“redborder“);/当鼠标单击 div 标签的时候
6、 移除当前 div 标签的 redborder 样式这里我们注意$(this) 因为jquery 选择器 都是返回当前对象,通过$(“div“) 我们是给页面所有的div标签都绑定了 click 事件 而$(this) 即使当前鼠标单击的标签对象jquery 基础教程二（demo 鼠标点击事件）.redborderborder:2px dashed #ff0000 jquery 基础教程二（demo 鼠标点击事件）1jquery 基础教程二（demo 鼠标点击事件）2jQ u e r y 基 础 教 程4jqueryjquery 基础教程四基础教程四(css(css 的操作之的操作之 css,
7、heightcss,height 和和 width)width)上面我们学习了 jquery 的 addClass 和 removeClass 方法下面我们来看看 css,height 和 width首先我们看看 css(key, value) 和 css(name)css(key, value)在所有匹配的元素中，设置一个样式属性的值。css(name)访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。css(properties)把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式。首先我们看看cs
8、s(key, value)我们看看下面代码$(“#css1“).click(function()$(this).css(“border“,“2px dashed #000000“);)当鼠标单击 ID 等于 css1 的元素 此元素的 border 属性设置成 “2px dashed #000000“css(name)$(“#css2“).click(function()$(this).css(“border“,“2px dashed #6600FF“);alert($(this).css(“border“);)$(this).css(“border“,“2px dashed #6600FF“
9、);当鼠标单击 ID 等于 css2 的元素 此元素的 border 属性设置成 “2px dashed #6600FF“alert($(this).css(“border“);jQ u e r y 基 础 教 程5获得 border 的属性值.css(properties)$(“#css3“).click(function()$(this).css( color: “red“, background: “blue“ );)当鼠标单击 ID 等于 css3 的元素 样式 color 为 red background 为 blue下面我们看看 height 和 width 用法 其实从单词意思上
10、也应该知道的差不多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) wid
11、th() 和 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) 访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。jq
12、uery 基础教程四(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)为每
13、个匹配的元素设置 CSS 高度(height)属性的值。如果没有明确指定单位（如：em 或%） ，使用 px。jquery 基础教程四(css 的操作之 css,height 和 width) 当鼠标点击 执行$(this).height(“200px“);alert($(this).height(); jQ u e r y 基 础 教 程7jqueryjquery 基础教程五基础教程五( (渐变效果函数之渐变效果函数之 fadeIn,fadeOutfadeIn,fadeOut 和和 fadeTo)fadeTo)我们来看看 jquery 是如何实现淡入 淡出效果的.fadeOut(speed,
14、callback)fadeOut(speed,callback)通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。$(“#fadeOut1“).click(function()$(“#fadeOut“).fadeOut(“slow“,function()alert(“是不是下面这个层慢慢消失了！“);)这里我们说需要说明的是speed (String|Number): (可选) 三种预定速度之一的字符串(“slow“, “normal“, or “fast“)或表示动画时长的毫秒数
15、值(如：1000)fadeIn(speed,fadeIn(speed, callback)callback)通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 |用法和 fadeOut 一样,只不过是一个相反的过程fadeTo(speed,opacity,callback)fadeTo(speed,opacity,callback)把所有匹配元素的不透明度以渐进方式调整到指定的不透明度， 并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高
16、度和宽度不会发生变化。$(“#fadeTo1“).click(function()$(“#fadeTo“).fadeTo(“slow“,0.5,function()alert(“是不是下面这个层透明度变成 50%了！“);)0.5 表示将不透明度设置成 50%所有代码jQ u e r y 基 础 教 程8jquery 基础教程五(效果函数之 fadeIn,fadeOut 和 fadeTo).redborderborder:2px dashed #ff0000 fadeOut(speed,callback) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。点击 fadeOut1 将执行$(#fadeOut).fadeOut(slow,function()alert(是不是下面这个层慢慢消失了！);fadeIn(speed, callback)通过不透明度的变化来实现所有匹配元素的淡入效果，
