jquery_邹华栋_word的整理版本(含备注).docVIP

Jquery Jquery 课前说明 内容：掌握JQuery编程思想，使用JQuery进行常见网页效果开发。 目标：能够使用JQuery开发常见网页效果。演示JQueryDom的那个例子。 参考书：《锋利的JQuery》 JavaScript封装库 普通的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的JS程序非常麻烦。 因此出现了很多对JavaScript的封装库，比如:JQuery、Prototype、Dojo、ExtJS等，这些库对JavaScript进行了封装，简化了开发。也就是咱们调用JQuery的一个函数，JQuery内部这句函数帮我们调用JavaScript中的代码n句，Jquery本身就是一堆JavaScript函数，内部仍然是调用JavaScript实现的，所以并不是别于JavaScript的另一种语言。 Jquery是最火的JavaScript库，已经被集成到VS2010了，得到了MS的支持，MS的Ajax toolkit和JQuery结合也是最方便，JQuery的扩展插件也是非常多。 JQuery简介 就是1个js文件 Jquery由美国人John Resig创建。是继prototype之后又一个优秀的JavaScript框架。 JQuery能做什么？JQuery能做的普通的Dom能做，普通Dom能做的JQuery也能做。JQuery的优点： 轻量级的js库(压缩后32kb左右)，兼容css3 使用简单方便 ¨C 宗旨：Write Less, Do More。写得少，做得多。吃得少干得多 链式编程 $(#div1).show().css(color:red) 隐式迭代(自动对于多个元素进行迭代方法调用) 屏蔽浏览器差异跨浏览器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome） 插件丰富、开源、免费。 对比dom方式和JQuery方式根据id获得界面元素。 简单的JQuery //注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样的事件。 $(document).ready(function() { alert(加载完毕！); }); //当页面Dom元素加载完毕时执行代码，可以简写为： $(function() { alert(加载完毕！); }); 1.JQuery的ready和Dom的onload的区别（*）： a.onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发； b.ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度； c.在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机； d.和onload类似，但是onload只能注册一次(window.onload=function...)，后注册 的取代先注册的，而ready则可以多次注册都会被执行。 PS: $(document).ready(function () {// //alert(ready123= + $(#imgs).attr(src)); }); window.onload = function () {////alert(onload123); } Jquery对象与DOM对象 神马是jQuery对象？ JQuery对象就是通过jQuery包装Dom对象后产生的对象，JQuery对象是JQuery独有的，Dom对象要想通过jQuery进行操作，先要转换为JQuery对象，如： alert($(#div1).html()) $(#div1).html()等价于： document.getElementById(div1).innerHTML; $(#div1)得到的就是jQuery对象，jQuery对象只能调用jQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用jQuery对象的方法，所以alert($(#div1).innerHTML)是错的，因为innerHTML是DOM对象的属性。 规范：如果获取的是JQuery对象，那么要在变量前加上$： var variable = document.getElementById(div1); var $variable = $(#div1); PS: function test() { var div1 =