《第2章jquery剖析.》由会员分享，可在线阅读，更多相关《第2章jquery剖析.（115页珍藏版）》请在金锄头文库上搜索。
1、1,第2章：JQuery,2,主要内容,2,jQuery基础 jQuery的由来及简介 jQuery对象和DOM对象 jQuery选择器 jQuery中的DOM操作 用jQuery 设计页面 基于jQuery 的应用,3,JavaScript框架简介,随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架） 当前流行的 JavaScript 库有:,4,jQuery的优势,轻量级 （Lightweight） 强大的选择器 出色的DOM操作封装 可靠的事件处理机制 出色的浏览器兼容性,jQue
2、ry 理念: 写得少, 做得多,5,jQuery的使用,下载：提供了最新的jQuery框架下载。通常只需下载最小的jQuery包（Minified）即可。 引用： 将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。,6,第一个jQuery程序, $(document).ready(function() alert(“Welcome to jQuery!“); ); ,引入jQuery,等待DOM文档载入后执行类似于window.onload,7,jQuery对象与DOM对象,8,jQuery对象,jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对
3、象 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#tab”).html(); document.getElementById(“tab“).innerHTML; jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法 建议约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $. var $variable = jQuery 对象 var variable = DOM 对象,9,jQuery对象转成DOM对象,两种转换方式将一个jQuery
4、对象转换成DOM对象：index和.get(index); (1) jQuery对象是一个数组对象，可以通过index的方法，来得到相应的DOM对象 (2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象,10,DOM对象转成jQuery对象,对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 转换后就可以使用 jQuery 中的方法了,11,jQuery对象与dom对象的转换举例,以下几种写法都是正确的： $(“#msg“).html(); $(“#msg“)0.innerHTML; $(“#msg“)
5、.eq(0)0.innerHTML; $(“#msg“).get(0).innerHTML; 如：$(“#msg“)0，$(“div“).eq(1)0，$(“div“).get()1，$(“td“)5这些都是dom对象，可以使用dom中的方法，但不能再使用jQuery的方法,12,jQuery的选择器,13,jQuery 选择器,选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法 完善的事件处理机制,14,基本选择器,基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器,
6、 它通过元素 id, class 和标记名来查找 DOM 元素,15,基本选择器示例,改变 id 为 one 的元素的背景色为红色 $(“#one“).css(“backgroundColor“,“red“); 改变元素名为 的所有元素的背景色为 # bbffaa，字体颜色为红色 $(“p“).css(color:“red“,backgroundColor:“#bbffaa“); 改变第一个元素的背景色为红色 $(“p“).eq(0).css(“backgroundColor“,“red“); 改变所有元素和 id 为 one 的元素的背景色为 # bbffaa $(“h1,#one“).cs
7、s(“backgroundColor“,“#bbffaa“);,16,17,18,19,练习,给网页中所有的 元素添加 onclick 事件,20,层次选择器,如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器 注意: (“prev div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取。,21,层次选择器示例,改变 内所有 的背景色为 # bbffaa $(“body div“) 改变 内子 的背景色为 #
8、bbffaa $(“bodydiv“) 改变 id 为 one 的下一个 的背景色为 # bbffaa $(“#one+div“) 改变 id 为 two 的元素后面的所有兄弟的元素的背景色为 # bbffaa $(“#twodiv“) 改变 id 为 two 的元素所有 兄弟元素的背景色为 # bbffaa $(“#two“). siblings(“p“),22,练习,查看页面中div元素下的所有p元素的个数, $().ready(function () var $p = $(“div p“); var btn = $(“#btn“)0; btn.onclick = function ()
9、alert($p.length); ) ,23,过滤选择器,过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头 按照不同的过滤规则, 过滤选择器又可分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.,24,基本过滤选择器,25,基本过滤选择器示例,改变第一个 div 元素的背景色为 # bbffaa $(“div:first“) 改变id不为 one 的所有p元素的背景色为 # bbffaa $(“p:not(#one)“) 改变索引值为偶数的 tr元素的背景色为 # bbffaa $(“tr:even“) 改变
10、索引值为大于 3 且为奇数的 p元素的背景色为 # bbffaa $(“p:gt(3):odd“) 改变所有的标题元素的背景色为 # bbffaa $(“:header“),26,$(function() $(“tr:odd“).addClass(“odd“); $(“tr:even“).addClass(“even“); );,27,实例1,利用基本过滤选择器修改指定div的颜色样式,28, $().ready(function () var test = $(“div:not(#myid)“); var btn = $(“#btn“).get(0); btn.onclick = funct
11、ion () test.css(“background“,“yellow“); ),29,内容过滤选择器,内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上,30,内容过滤选择器示例,改变含有文本 di 的 p元素的背景色为 # bbffaa $(“p:cotains(di)“) 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa 改变含有 class 为 mini 元素的 p元素的背景色为 # bbffaa $(“p:has(.mini)“) 改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa,31, $().ready(func
12、tion () var test = $(“div:contains(张三)“); var btn = $(“#btn“).get(0); btn.onclick = function () test.css(“background“,“yellow“); ),32,实例2, 张三 ,33,可见性过滤选择器,可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素 可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 ()和 visible:hidden 之类的元素,34,实例3,利用可见性过滤选择器修改指定div的显隐性,35, $().
13、ready(function () var test = $(“div:hidden“); var btn = $(“#btn“).get(0); btn.onclick = function () test.css(“display“,“block“); alert(“测试“); ) ,36,子元素过滤选择器,nth-child() 选择器详解如下： (1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素 (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素 (3):nth-child(3n): 能选取每个父元素下的索引值是
14、3 的倍数 的元素 (3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素,37,实例4,利用子元素过滤选择器修改指定div的样式,38, $().ready(function () var test = $(“div:first-child“); var btn = $(“#btn“)0; btn.onclick = function () test.css(“background“,“yellow“); ) ,39,属性过滤选择器,属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,40,实例5, /*高亮显示*/ .highlight bac
15、kground-color: gray ,41, Hello ID为test的DIV 足球 排球 篮球 其他 ,42,$(“divid“).addClass(“highlight“); /查找所有含有ID属性的div元素,$(“inputname=basketball“).attr(“checked“,true); /name属性值为basketball的input元素选中,$(“inputname!=basketball“).attr(“checked“,true); /name属性值不为basketball的input元素选中 /此选择器等价于:not(attr=value)要匹配含有特定
16、属性但不等于特定值的元素，请使用attr:not(attr=value) $(“input:not(inputname=basketball)“).attr(“checked“,true);,$(“inputname=foot“).attr(“checked“,true); /查找所有 name 以 foot 开始的 input 元素,$(“inputname$=ball“).attr(“checked“,true); /查找所有 name 以 ball 结尾的 input 元素,43,$(“inputname*=sket“).attr(“checked“,true); /查找所有 name 包含 sket
