教学课件任务1 jQuery开发基础知识-3 jQuery操作DOM元素的几个基本方法.pptx

《教学课件任务1 jQuery开发基础知识-3 jQuery操作DOM元素的几个基本方法.pptx》由会员分享，可在线阅读，更多相关《教学课件任务1 jQuery开发基础知识-3 jQuery操作DOM元素的几个基本方法.pptx（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教材配套资源页完整PPT课件教学课件任务1 jQuery开发基础知识-3 jQuery操作DOM元素的几个基本方法1任务1 jQuery开发基础知识2n要选择body中的第3个段落，如何操作？n要得到body中第3个段落的下一个元素，如何操作？n$(span).parent()获取的元素有几个？n$(span).parents()获取的元素有几个？n代码$(p).parent()获取的元素有几个？n代码$(p).parent(div)获取的元素有几个？3n要根据div2-2-1找到div2-2-2，有哪几种查找路径？n要根据div2-2-1找到div2-1，有哪几种查找路径？n要根据div2-

2、2-1找到div1，有哪几种查找路径？4n1.1 JavaScript简介n1.2 jQuery概述n1.3 jQuery选择器n1.4 jQuery中元素的查找操作n1.5 jQuery中操作DOM元素的几个基本方法n1.6 jQuery中的事件机制n1.7 实例开发-实现输入框外围的阴影5n这里要介绍的方法只是为了在实现表单输入框外部div的动态阴影效果中使用，更多的操作方法将在后续的任务中根据任务需求展开讲解。ujQuery中操作属性的attr()方法ujQuery中的each()方法u关于元素的索引index的问题u为元素添加和移除类6n作用一：u返回被指定元素的某个属性的取值。n格式

3、：ujQuery().attr(attribute)，其中参数attribute代表属性名称。n用法：u需要通过遍历的方式，逐个获取每个元素的属性取值，若是不使用遍历，则只能获取到jQuery对象中第一个DOM元素的相应属性取值。7n作用二：u设置被指定元素的某个属性的取值.n格式：ujQuery().attr(attribute, value)，其中参数attribute代表属性名称，value代表为该属性设置的新的取值。n用法：u可以同时将jQuery对象中的一组DOM元素的某个指定属性设置为相同取值。u例如$(img).attr(width, 500)，能够直接将页面中所有的图像元素宽度

4、都设置为500像素。8njQuery中经常可以使用prop()方法取代attr()方法，两者在获取属性取值和设置属性取值方面基本是一致的，但是两者之间也有区别，主要体现在元素的布尔属性取值方面。使用复选框的checked属性说明如下：u假设存在某个复选框元素，对元素使用了属性checked设置初始状态是选中的，若是使用代码console.log($(.ctrl).attr(checked)获取属性checked取值，页面运行过程中，对复选框的操作无论是选中还是取消选中，输出结果都是“checked”，若是将元素改为，也就是去掉初始的checked，则对复选框来说，无论选中与否，获取到的结果都是

5、“undefined”。u若是使用代码console.log($(.ctrl).prop(checked)获取属性checked取值，无论初始时是否设置了checked属性，页面运行过程中，若是选中复选框，则获取结果为“true”，取消选中，则获取结果为“false”。9n页面中添加一个复选框元素，初始状态设置checked，再添加一个button按钮，分别在选中和取消选中复选框时单击button按钮，输出复选框元素的attr(checked)和prop(checked)结果n去掉初始状态的checked，再观察上面操作结果10n观察并思考u代码console.log($(li).attr(i

6、d)能否获取并输出5个li的id？u示例1-10u要如何解决？-引入each()遍历11njQuery().each()方法是jQuery对象实现的each()方法，可以简写为$().each()n格式：ujQuery().each(function(index,Element)u其中jQuery()表示使用jQuery选择器获取到的jQuery对象。n作用：u对jQuery对象中的每一个DOM元素执行function()函数。nfunction()函数的参数：uindex表示当前DOM元素在jQuery对象（DOM元素组）中的索引（从0开始），Element表示当前DOM元素。两个参数可以都

7、省略，也可以只使用第一个参数。12n第一种用法-带着两个参数ueach(function(index,ele)n第二种用法-不带任何参数ueach(function()u借助index()方法获取索引n示例1-10输出格式如下：13n页面中有一组超链接，加载完成后，将所有超链接的热点设置为title属性的取值u能否使用$(a).attr(title,$(a).text()代码实现？u能否使用$(a).attr(title,$(this).text()代码实现？u使用each()实现u直接为title属性定义函数，函数返回值为当前超链接的text()内容14n$(selector).each(f

8、unction(index)中的参数index取值与$(selector).index()方法获取到的取值并不一定是相同的，这取决于给定的选择器selector所指向的元素是否属于同一个父元素以及在其父元素中是否有其他兄弟元素。n给定左图的页面元素，单击类名是list_2的三个元素，右侧两个图中输出结果有什么差别？（示例1-10）15n结论u对于each(function(index)中的index而言，是将所选择的全部元素（无论其是否属于同一个父元素）从0开始设置索引，故而对其中的第一个元素而言，索引永远是0；u而对index()方法来说，得到的则是当前元素在其父元素所属的全部子元素（索引从

9、0开始）中的位置索引，并不是以选择器所选择的元素集合为单位设置索引的。16n获取并输出body中每个元素的class属性取值；17n为所有的超链接设置title属性内容是“这是超链接的title属性效果”n为所有的图片设置宽度为300像素n将每个超链接的热点文本设置为其title属性的取值n页面中有4个img元素，文件夹中有4幅图，分别是img1.jpgimg4.jpg，为4个img元素设置其src属性的取值分别是这4个文件18n使用为元素添加和移除类的方法能够快速动态更改元素的样式效果naddClass()方法u格式：$(selector).addClass(class)。u该方法不会移除已存在的 class 属性，仅仅添加一个或多个class属性；如果要添加多个类，需要使用空格分隔类名。n removeClass()方法u格式：$(selector).removeClass(class)u如果要移除多个类，类名之间需要使用空格分隔；如果没有规定参数，则该方法将从被选元素中删除所有类。19本课件制作整理者：郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权，请联系删除。 20