jQuery基本教程.docVIP

jQuery基础教程一(传说中的ready) 首先我们来说明一下什么是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+ 第一步 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基础教程二(鼠标点击事件) 下面我们来看看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!); 例子： html head meta http-equiv=Content-Type content=text/html; charset= gb2312 / titlejquery基础教程二（demo鼠标点击事件）/title script language=javascript src=/demo/jquery.js/script SCRIPT LANGUAGE=JavaScript !-- $(document).ready(function() { $(div).click(function(){ alert(Hello World!); }) }) //-- /SCRIPT /head body divHello World!/div /body /html jquery基础教程三(css的操作之addClass和removeClass) 下面我们看看jquery对css的操作方法 addClass和removeClass 1）addClass：为每个匹配的元素添加指定的类名。 2）removeClass：为每个匹配的元素移除指定的类名。 SCRIPT LANGUAGE=JavaScript !-- $(document).ready(function() { $(div).addClass(redborder);//当页面加载完成后给每个div标签 加上 redborder样式 $(div).click(function(){ $(this).removeClass(redborder);//当鼠标单击div标签的时候 移除当前div标签的redborder样式 }) }) //-- /SCRIPT