jquery基础入门_谭波波.pptVIP

jQuery 基础教程;内容简介;随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架） 当前流行的 JavaScript 库有: ;轻量级 （Lightweight） 强大的选择器 出色的DOM操作封装 可靠的事件处理机制 出色的浏览器兼容性 ;下载：提供了必威体育精装版的jQuery框架下载。通常只需下载最小的jQuery包（Minified）即可。目前必威体育精装版的版本jquery-1.3.2.min.js文件只有55.9 KB 引用： script src=jquery.min.js /script 将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。 ;jQuery对象与DOM对象;jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#tab”).html(); jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法;jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM方法的时候, 有如下两种处理方法: (1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象. $(#msg)[0] (2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象 $(#msg).get(0) ;对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象. 例如： $(document.getElementById(“msg”)) 转换后就可以使用 jQuery 中的方法了 ;选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法 完善的事件处理机制;要使某个动作应用于特定的html元素，需要有办法找到这个元素。在jQuery中，执行这一任务的方法称为jQuery选择器。 jQuery选择器把网页的结构和行为完全分离。利用jQuery选择器，能快速地找出特定的html元素，然后轻松的给元素添加一系列行为动作。 jQuery的选择器主要有三大类，即CSS 3的基本选择器，CSS3的位置选择器和过滤选择器。;基本选择器是 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元素和 id 为 one 的元素的背景色为 # bbffaa $(h1,#one).css(backgroundColor,#bbffaa);;如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器 注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取;改变 body 内所有 div 的背景色为 # bbffaa $(“body div) 改变 body 内子 div 的背景色为 # bbffaa $(“bodydiv) 改变 id 为 one 的下一个 div 的背景色为 # bbffaa $(#one+div) 改变 id 为 two 的元素后面的所有兄弟div的元素的背景色为 # bbffaa $(#two~div) 改变 id 为 two 的元素所有 p 兄弟元素的背景色为 # bbffaa $(#two). siblings(p) ;过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头 按照不同的过滤规则, 过滤选择器又可分为基本过滤, 内容过滤, 可见性过