1、jQuery,内容简介,JavaScript框架简介,随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架） 当前流行的 JavaScript 库有:,jQuery的优势,轻量级 （Lightweight） 强大的选择器 出色的DOM操作封装 可靠的事件处理机制 出色的浏览器兼容性,jQuery 理念: 写得少, 做得多,jQuery的使用,下载：http:/提供了最新的jQuery框架下载。通常只需下载最小的jQuery包（Minified）即可。目前最新的版本jquery-1.7.2.
2、min.js文件只有89.4 KB 引用：将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。,第一个jQuery程序,$(document).ready(function() alert(“Hello World!“); ); ,引入jQuery,等待DOM文档载入后执行类似于window.onload,弹出一个对话框,jQuery对象与DOM对象,jQuery 对象,jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法:
3、 $(“#tab”).html(); jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法 建议约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $. var $variable = jQuery 对象 var variable = DOM 对象,jQuery 对象转成 DOM 对象,jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM方法的时候, 有如下两种处理方法: (1) jQuery 对象是一个数组对象, 可以通过 index 的方法得到对应的 DOM对象.
4、 $(“#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
5、“)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 中最常用的选
6、择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素,基本选择器示例,改变 id 为 one 的元素的背景色为 红色 $(“#one“).css(“backgroundColor“,“red“);改变元素名为 的所有元素的背景色为 # bbffaa，字体颜色为红色 $(“p“).css(color:“red“,backgroundColor:“#bbffaa“);改变第一个元素的背景色为红色 $(“p“).eq(0).css(“backgroundColor“,“red“);改变所有元素和 id 为 one 的元素的背景色为 # bbffaa $(“h1,
7、#one“).css(“backgroundColor“,“#bbffaa“);得到ID为one元素的颜色 $(“#one“).css(“color“);,练习,使用Jquery做出如下图所示效果：当点击不同颜色时，页面背景色也修改文字颜色 如何得到文字颜色 如何将文字颜色赋予页面背景色,层次选择器,如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器注意: (“prev div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈
8、节点就可以选取,层次选择器示例,改变 内所有 的背景色为 # bbffaa $(“body div“) 改变 内子 的背景色为 # bbffaa $(“bodydiv“) 改变 id 为 one 的下一个 的背景色为 # bbffaa $(“#one+div“) 改变 id 为 two 的元素后面的所有兄弟的元素的背景色为 # bbffaa $(“#twodiv“) 改变 id 为 two 的元素所有 兄弟元素的背景色为 # bbffaa $(“#two“). siblings(“p“),练习,实现点击中国，出现中国相应省份目录结构当点击中国时，出现中国的省份,过滤选择器,过滤选择器主要是通过
9、特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头 按照不同的过滤规则, 过滤选择器又可分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.,基本过滤选择器,基本过滤选择器示例,改变第一个 div 元素的背景色为 # bbffaa $(“div:first“) 改变id不为 one 的所有p元素的背景色为 # bbffaa $(“p:not(#one)“) 改变索引值为偶数的 tr元素的背景色为 # bbffaa $(“tr:even“) 改变索引值为大于 3 且为奇数的 p元素的背景色为 # bbffaa $(“p:gt(3):od
10、d“) 改变所有的标题元素的背景色为 # bbffaa $(“:header“) 改变当前正在执行动画的所有元素的背景色为 # bbffaa,问题,使用Jquery实现隔行变色 在页面中，通过一个标记展示数据列表信息，在元素标记中，奇数行和偶数行的背景色不同，从而实现隔行变色的页面展示效果。,内容过滤选择器,内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上,内容过滤选择器示例,改变含有文本 di 的 p元素的背景色为 # bbffaa $(“p:cotains(di)”).css(“background”,”#bbffaa”) 改变含有 class 为 mini 元素的 p元素的
11、背景色为 # bbffaa $(“p:has(.mini)“) 改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa $(“div:parent“).css(“background”,”#bbffaa”),练习,实现过滤器效果，将某些敏感字符进行过滤实现文章内容检索效果，用户检索某些内容时，将这些内容变色显示,可见性过滤选择器,可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 ()和 visible:hidden 之类的元素,可见性过滤选择器示例,改变所有可见的d
12、iv元素的背景色为 # bbffaa 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 # bbffaa 选取所有的文本隐藏域, 并打印它们的值sdf,属性过滤选择器,属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,属性过滤选择器示例,选取下列元素,改变其背景色为 # bbffaa 含有属性title 的div元素. 属性title值等于“test“的div元素. 属性title值不等于“test“的div元素(没有属性title的也将被选中). 属性title值 以“te“开始 的div元素. 属性title值 以“est“结束
13、 的div元素. 属性title值 含有“es“的div元素. 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素.,子元素过滤选择器,nth-child() 选择器详解如下： (1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素 (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素 (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素 (3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素,子元素过滤选择器示例,选
14、取下列元素,改变其背景色为 # bbffaa 每个class为one的div父元素下的第2个子元素. 每个class为one的div父元素下的第一个子元素 每个class为one的div父元素下的最后一个子元素 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素,表单对象属性过滤选择器,此选择器主要对所选择的表单元素进行过滤,表单对象属性过滤选择器示例,利用 jQuery 对象的 val() 方法改变表单内可用 元素的值 利用 jQuery 对象的 val() 方法改变表单内不可用 元素的值 利用 jQuery 对象的 length 属性获取多选框选中的个数 利用 jQuery 对象的 text() 方法获取下拉框选中的内容,表单选择器,练习,1. 给网页中所有的 元素添加 onclick 事件2. 对多选框进行操作, 输出选中的多选框的个数,
