使用jQuery中的getindex方法得到相应的DOM对象.PPTVIP

基于Web标准的网页设计与制作(第2版) 唐四薪 编著 清华大学出版社 jQuery 基础教程 唐四薪 《基于Web标准的网页设计与制作(第2版)》配套课件 清华大学出版社 内容简介 RIA技术 RIA(Rich Internet Applications)富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户端。 常见的RIA技术 Ajax Flex Sliverlight JavaScript及其框架是实现RIA的重要工具 JavaScript框架简介 随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架） 当前流行的 JavaScript 库有: jQuery的优势 轻量级 （Lightweight） 强大的选择器 出色的DOM操作封装 可靠的事件处理机制 出色的浏览器兼容性 jQuery的使用 下载：提供了最新的jQuery框架下载。通常只需下载最小的jQuery包（Minified）即可。目前最新的版本jquery-1.3.2.min.js文件只有55.9 KB 引用： script src=jquery.min.js /script 将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。 第一个jQuery程序 script src=jquery.min.js/script script $(document).ready(function(){ alert(Hello World!); }); /script jQuery对象与DOM对象 jQuery 对象 jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#tab”).html(); jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法 建议约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $. var $variable = jQuery 对象 var variable = DOM 对象 jQuery 对象转成 DOM 对象 jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM方法的时候, 有如下两种处理方法: (1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象. $(#msg)[0] (2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象 $(#msg).get(0) DOM 对象转成 jQuery 对象 对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象. 例如： $(document.getElementById(“msg”)) 转换后就可以使用 jQuery 中的方法了 jQuery对象与dom对象的转换举例 以下几种写法都是正确的：$(#msg).html();$(#msg)[0].innerHTML;$(#msg).eq(0)[0].innerHTML;$(#msg).get(0).innerHTML; 如：$(#msg)[0]，$(div).eq(1)[0]，$(div).get()[1]，$(td)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用jQuery的方法 jQuery的选择器 jQuery 选择器 选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法 完善的事件处理机制 基本选择器 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素 基本选择器示例 改变 id 为 one 的元素的背景色为 红色 $(#one).css(backgroundColor,red); 改变元素名为 p 的所有元素的背景色为 # bbffaa，字体颜色为红色 $(p).css({color:red,backgroundColor:#bbffaa}); 改变第一个p元素的背景色为红色 $(p).eq(0).css(backgroundColor,red); 改变所有h1元