jQuery基础教程

jQuery基础教程一(传说中的ready)首先我们来说明一下什么是JqueryjQuery是一个新型的JavaScript库.jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。jQuery支持CSS1-CSS3,以及基本的xPathjQuery是跨浏览器的，它支持的浏览器包括IE6.0+,FF1.5+,Safari2.0+,Opera9.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(){//dostuffwhenDOMisready//当文档载入后从此处开始执行代码});jquery基础教程二(鼠标点击事件)下面我们来看看jquery如何给DOM各个元素批量绑定事件SCRIPTLANGUAGE=JavaScript!--$(document).ready(function(){$(div).click(function(){//$(div)就是页面中所有的div标签alert(HelloWorld!);})})//--/SCRIPT$(div).click$(div)就是页面中所有的div标签这句话就是给所有的标签为div的元素绑定了一个click事件即当所有div被鼠标单击的时候执行alert(HelloWorld!);例子：htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/titlejquery基础教程二（demo鼠标点击事件）/titlescriptlanguage=javascriptsrc==JavaScript!--$(document).ready(function(){$(div).click(function(){alert(HelloWorld!);})})//--/SCRIPT/headbodydivHelloWorld!/div/body/htmljquery基础教程三(css的操作之addClass和removeClass)下面我们看看jquery对css的操作方法addClass和removeClass1）addClass：为每个匹配的元素添加指定的类名。2）removeClass：为每个匹配的元素移除指定的类名。SCRIPTLANGUAGE=JavaScript!--$(document).ready(function(){$(div).addClass(redborder);//当页面加载完成后给每个div标签加上redborder样式$(div).click(function(){$(this).removeClass(redborder);//当鼠标单击div标签的时候移除当前div标签的redborder样式})})//--/SCRIPT$(div).addClass(redborder);//当页面加载完成后给每个div标签加上redborder样式$(this).removeClass(redborder);//当鼠标单击div标签的时候移除当前div标签的redborder样式这里我们注意$(this)因为jquery选择器都是返回当前对象,通过$(div)我们是给页面所有的div标签都绑定了click事件而$(this)即使当前鼠标单击的标签对象例子htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/titlecss的操作之addClass和removeClass/titlescriptlanguage=javascriptsrc={border:2pxdashed#ff0000}/styleSCRIPTLANGUAGE=JavaScript!--$(document).ready(function(){$(div).addClass(redborder);$(div).click(function(){$(this).removeClass(redborder);})})//--/SCRIPT/headbodydivjquery基础教程二（demo鼠标点击事件）1/divdivjquery基础教程二（demo鼠标点击事件）2/div/body/htmljquery基础教程四(css的操作之css,height和width)下面我们来看看css,height和width首先我们看看css(key,value)和css(name)1）css(key,value)：在所有匹配的元素中，设置一个样式属性的值。$(#css1).click(function(){$(this).css(border,2pxdashed#000000);})//当鼠标单击ID等于css1的元素此元素的border属性设置成2pxdashed#0000002）css(name)：访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。$(#css2).click(function(){$(this).css(border,2pxdashed#6600FF);alert($(this).css(border));})//$(this).css(border,2pxdashed#6600FF);当鼠标单击ID等于css2的元素此元素的border属性设置成2pxdashed#6600FF//alert($(this).css(border));获得border的属性值.3）css(properties)：把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。$(#css3).click(function(){$(this).css({color:red,background:blue});})//当鼠标单击ID等于css3的元素样式color为redbackground为blue下面我们看看height和width用法其实从单词意思上也应该知道的差不多1）height(val)：为每个匹配的元素设置CSS高度(height)属性的值。如果没有明确指定单位（如：em或%），使用px。$(#ht1).click(function(){$(this).height(200px);alert($(this).height());})//$(this).height(200px);当鼠标单击ID等于ht1的元素此元素的高度将变成200px//alert($(this).height());显示height的值width(val)width()和height是一样的只不过就是设置宽度.例子htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/titlejquery基础教程四(css的操作之css,height和width)/titlescriptlanguage=javascriptsrc={border:2pxdashed#ff0000}/styleSCRIPTLANGUAGE=JavaScript!--$(document).ready(function(){$(div).addClass(redborder);$(#css1).click(function(){$(this).css(border,2pxdashed#000000);})$(#css2).click(function(){$(this).css(border,2pxdashed#6600FF);alert($(this).css(border));})$(#css3).click(function(){$(this).css({color:red,background:blue});})$(#ht1).click(function(){$(this).height(200px);alert($(this).height());})})//--/SCRIPT/headbodydivID=css1当鼠标点击执行$(this).css(border,2pxdashed#000000);/divdivID=css2当鼠标点击执行/divdivID=css3当鼠标点击执行$(this).css({color:red,background:blue});/divdivID=ht1当鼠标点击执行$(this).height(200px);alert($(this).height());/div/body/htmljquery基础教程五(渐变效果函数之fadeIn,fadeOut和fadeTo)1）fadeOut(speed,callback)：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。$(#fadeOut1).click(function(){$(#fadeOut).fadeOut(slow,function(){alert(是不是下面这个层慢慢消失了！)});})//这里我们说需要说明的是speed(String|Number):(可选)三种预定速度之一的字符串(slow,normal,orfast)或表示动画时长的毫秒数值(如：1000)2）fadeIn(speed,callback)：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。用法和fadeOut一样,只不过是一个相反的过程3）fadeTo(speed,opacity,callb