JQuery讲课流程.docVIP

Jquery讲课流程 目录 目录 2 Jquery简介 3 1 入门的Jquery的小例子 4 2 选择符 6 3 事件处理 12 4 增加动态效果 20 5 DOM操作 27 6 ajax异步请求 32 7 Jquery操作表单元素 39  Jquery简介 Jquery是继prototype之后又一个优秀的Javascrīpt框架。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jouml;rn Zaefferer，罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。/去下载最新的jquery的产品库，说白了，就是一个核心JS文件，当然如果实现一些其他的基本效果之外的效果，那就需要更多的JS文件，一般我们都称作为叫做Jquery插件。 下载的插件分为压缩版和未压缩版，未压缩的有换行空格退格等，可读性比较好，但文件比较大，适合程序员阅读，压缩版的去掉了多余的空行回车退格空格，语法也进行了压缩，文件比较小，适合于直接使用，不读源码的时候。 下面介绍一下Jquery的基本功能： 获得页面的元素对象：例如获得一个表格对象，或者一个文本框对象 修改页面的外观：例如动态改变一个单元格的背景色 改变页面的内容：例如在表格或段落中插入文本 响应用户的操作：就是事件处理，例如单击，鼠标移上等 为页面增加动态效果：例如飞来飞去，淡入淡出等 无需刷新页面从服务器获得信息：这其实就是ajax了 简化常见的javascript操作：简化我们的传统js写法 myeclipse8.6配置jquery语法提示办法： 在项目中右键——properties，然后在MyEclipse-JavaScript-BuildPath-Librairies选项卡，Add Librairies添加Jquery库 1 入门的Jquery的小例子 实现一个功能：当页面载入时弹出一个对话框，先将Jquery.js文件放入到站点目录中，然后在网页中引入 1.1.html !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head title1.html/title meta http-equiv=content-type content=text/html; charset=UTF-8 script type=text/javascript src=../js/jquery.js/script script type=text/javascript function m1(){ alert(hello,jquery); } //相当于window.onload事件监听,m1为函数名 $(document).ready(m1); /script /head body /body /html $(document).ready(m1)，就相当于window.onload，或者说在body标签中加一个onload属性，m1是当事件触发是回调的函数，可以加入多个$(document).ready语句，会按照加入的顺序在页面载入时依次执行 在Jquery中,$被定义成了一个全局标识符 当时我们为了不浪费m1这个标识符，我们可以采取匿名函数写法 1.2.html 片段 script type=text/javascript $(document).ready(function (){ alert(hello,jquery); }); /script 总结：以上的例子其实都可以把自定义js代码抽象出来形成一个单独的js文件，然后在网页中引入，实现代码和网页完全分离 下面再举一个完整例子：给一个按钮增加一个单击事件，单击后把一个段落的文字改变颜色，这次把css文件和js文件和html文件分离 1.3