网页设计与制作 教学课件 ppt 作者 朱金华 第10章 jQuery

第10章 jQuery,教学目标,1. 理解jQuery的基本功能。 2. 掌握jQuery语法。 3. 掌握jQuery的基本选择器 4. 掌握jQuery对元素的访问方法，包括访问元素属性、访问元素内容、获取或设置元素值以及元素样式的操作方法。 5. 掌握节点的增删改查方法，包括如何创建、插入、复制、替换、包裹、遍历和删除节点的方法。、层次选择器、过滤选择器和表单选择器的使用方法。,教学目标,6. 掌握jQuery中的常用事件使用方法。 7. 掌握基本动画、滑动动画、淡入淡出动画的使用方法。 8. 自行熟悉自定义动画。 9. 掌握jQuery UI的交互性插件（拖动、放置、缩放、复选、排序）的使用方法。 10. 掌握jQuery微型插件（折叠面板、日历、对话框、进度条、滑动模块、标签页）的使用方法。,教学内容,1. jQuery概述（10.1） 2. jQuery选择器（10.2） 3. jQuery操作DOM(10.3) 4. jQuery中的事件(10.4) 5. jQuery动画与特效(10.5) 6. jQuery UI插件(10.6),教学重点和难点,重点：jQuery选择器、对元素的操作、jQuery常用事 件的使用方法、 jQuery动画动画、jQuery UI 常用交互插件和微件的使用。 难点：区别jQuery选择器和CSS选择器、对元素的操作、 自定义动画、 jQuery UI微件复杂的参数使用。,教学目标,6. 掌握jQuery中的常用事件使用方法。 7. 掌握基本动画、滑动动画、淡入淡出动画的使用方法。 8. 自行熟悉自定义动画。 9. 掌握jQuery UI的交互性插件（拖动、放置、缩放、复选、排序）的使用方法。 10. 掌握jQuery微型插件（折叠面板、日历、对话框、进度条、滑动模块、标签页）的使用方法。,教学内容,1. jQuery概述（10.1） 2. jQuery选择器（10.2） 3. jQuery操作DOM(10.3) 4. jQuery中的事件(10.4) 5. jQuery动画与特效(10.5) 6. jQuery UI插件(10.6),教学重点和难点,重点：jQuery选择器、对元素的操作、jQuery常用事件的使用方法、 jQuery动画动画、jQuery UI常用交互插件和微件的使用。 难点：区别jQuery选择器和CSS选择器、对元素的操作、自定义动画、 jQuery UI微件复杂的参数使用。,导入：,因为jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的JS库，它兼容CSS3，还兼容各种浏览器（IE、Firefox、Safari、Opera、Chrome等）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的HTML页面保持JS代码和HTML内容分离，也就是说，不用再在HTML里面插入一堆JS来调用命令了，只需定义id即可。,jQuery由美国人John Resig于2006年创建的一个开源项目，至今已吸引了来自世界各地的众多JavaScript高手加入其团队，jQuery是继Prototype之后又一个优秀的JavaScript框架，其宗旨是：Write less， do more。,10.1 jQuery概述,1. 访问和操作DOM元素 2. 控制页面样式 3. 对页面事件的处理 4. 大量插件在页面中的运用 5. 与Ajax技术的完美结合,10.1.1 jQuery的基本功能,基础语法是：$(selector).action() 美元符号定义jQuery 选择符（selector）“查询”和“查找”HTML元素 jQuery action()执行对元素的操作 实例： $(this).hide() - 隐藏当前元素 $(“p“).hide() - 隐藏所有段落 $(“p.test“).hide() - 隐藏所有 class=“test“ 的段落 $(“#test“).hide() - 隐藏所有 id=“test“ 的元素 提示：jQuery 使用的语法是XPath与CSS选择器语法的组合。有了CSS基础就不难学习jQuery的选择器了。,10.1.2 jQuery语法,10.1.3 jQuery实例,10.2 jQuery选择器,根据所获取页面中元素的不同，可以将jQuery选择器为分：基本选择器、层次选择器、过滤选择器和表单选择器四大类，其中，在过滤选择器中又可分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器6种。,10.2.1 基本（Basics）选择器,10.2.2 层次（Hierarchy）选择器,层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素。,10.2.3 过滤选择器,过滤选择器中又可分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器6种。,1. 基本过滤（Basic Filters）选择器,2. 内容过滤（Content Filters）选择器,3. 可见性过滤（Visibility Filters）选择器,4. 属性过滤（Attribute Filters）选择器,5. 子元素过滤（Child Filters）选择器,6. 表单对象属性过滤（Form Filters）选择器,10.2.4 表单（Form）选择器,DOM（Document Object Model，文档对象模型），DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，DOM技术使得页面的交互性大大地增强。,10.3 jQuery操作DOM,在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性、内容、值、CSS的操作。 1. 元素属性操作 在jQuery中，可以对元素的属性执行获取、设置、删除的操作，通过attr()方法可以对元素属性执行获取和设置操作，而removeAttr()方法则可以轻松删除某一指定的属性。 （1）获取元素的属性 语法格式：attr(name) 其中，参数name表示属性的名称。,10.3.1 访问元素,在页面中，attr()方法不仅可以获取元素的属性值，还可以设置元素的属性。 语法格式：attr(key, value) 其中，参数key表示属性的名称，value表示属性的值。如果要设置多个属性，也可以通过attr()方法实现，其语法格式为：attr(key0:value0, key1:value1)。 另外，attr()方法还可以绑定一个function()函数，通过该函数返回的值作为元素的属性值，其语法格式为：attr(key, function(index)。其中，参数index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。,（2）设置元素的属性,（3）删除元素的属性,jQuery中通过attr()方法设置元素的属性后，使用removeAttr()方法可以将元素的属性删除。 语法格式：removeAttr(name) 其中，参数name为元素属性的名称。例如，可以通过“$(“img“).removeAttr(“src“);”代码删除标记中的src属性。,2. 元素内容操作,在jQuery中，操作元素内容的方法包括html()和text()。前者与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者类似于JavaScript中的innerText属性，即获取或设置元素的文本内容。二者的格式与区别如下表所示。 说明：html()方法仅支持XHTML的文档，不能用于XML文档，而text()则既支持HTML文档，也支持XML文档。,3. 获取或设置元素值,在jQuery中，如果要获取元素的值，是通过val()方法实现的。 语法格式：val(val) 其中，如果不带参数val，则是获取某元素的值；反之，则是将参数val的值赋给某元素，即设置元素的值。该方法常用于获取或设置对象的值。 另外，通过val()方法还可以获取select标记中的多个选项值，其语法格式为：val().join(“,“)。,4. 元素样式操作,在页面中，元素样式的操作包括：直接设置样式、增加CSS类别、类别切换、删除类别几部分。 （1）直接设置元素样式值 在jQuery中，可以通过css()方法为某个指定的元素设置样式值。 语法格式：css(name, value) 其中，name为样式名称，value为样式的值。,（2）增加CSS类别,通过addClass()方法增加元素类别的名称。 语法格式：addClass(class) 其中，参数class为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可，其语法格式为：addClass(class0 class1 .),（3）类别切换,通过toggleClass()方法切换不同的元素类别。 语法格式：toggleClass(class) 其中，参数class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别。,（4）删除类别,与增加CSS类别的addClass()方法相对应，removeClass()方法用于删除类别. 语法格式：removeClass(class) 其中，参数class为类别名称，该名称是可选项，当选该名称时，则删除名称是class的类别，有多个类别时用空格隔开。如果不选名称，则删除元素中的所有类别。 例如使用“$(“p“).removeClass(“cls0“);”代码可以删除p标记是cls0的类别。 注意：toggleClass()方法可以实现类别间的切换，而css()或addClass()方法仅是增加新的元素样式，并不能实现类别的切换功能。 如果要删除p标记是cls0和cls1的类别，则可以使用的代码： $(“p“).removeClass(“cls0 cls1“); 如果要删除p标记的全部类别，则代码为： $(“p“).removeClass();,10.3.2 创建节点元素,整个页面是一个DOM模型，页面中的各元素通过模型的节点相互关联形成树状，若要在页面中增加某元素，只需要找到元素的上级节点，通过函数$(html)完成元素的创建后，增加到该节点中。 函数$()用于动态创建页面元素，其语法格式为：$(html) 其中，参数html表示用于动态创建DOM元素的HTML标记字符串，即如果要在页面中动态创建一个div标记，并设置其内容和属性，可以加入如下代码： var $div = $(“Write Less Do More“); $(“body“).append($div); 执行上述代码后，将在页面文档body中创建一个div标记，其内容为“Write Less Do More”，属性title的值为“jQuery理念”。,10.3.3 插入节点,在页面中动态创建元素需要执行节点的插入或追加操作。而在jQuery中，有多种方法可以实现该功能，append()方法仅是其中之一，按照插入元素的顺序来分，可以分为内部和外部两种插入方法。下面将分别对这些方法进行详细介绍。 1. 内部插入节点方法,（1）append(function(index,html),