《jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第4章 》由会员分享，可在线阅读，更多相关《jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第4章 （57页珍藏版）》请在金锄头文库上搜索。
1、,jQuery程序设计基础教程,授课教师： 职务：,第4章 操作HTML元素,课程描述 每个HTML元素都可以转换为一个DOM对象，而每个DOM对象都有一组属性，通过这些属性可以设置HTML元素的外观和特性。jQuery可以很方便地获取和设置HTML元素的属性。,本章知识点,4.1 访问HTML元素的属性和内容 4.2 管理HTML元素,4.1 访问HTML元素的属性和内容,4.1.1 获取HTML元素对应的jQuery对象 4.1.2 获取和设置HTML元素的内容 4.1.3 获取和设置HTML元素的属性 4.1.4 删除HTML元素的属性,4.1.1 获取HTML元素对应的jQuery对象
2、,在标准JavaScript中，可以使用document.getElementById()方法根据ID获取HTML元素对应的DOM对象，语法如下： var DOM对象 = document.getElementById(对象id) 然后通过DOM对象的innerText属性可以获取和设置HTML元素的显示文本。,【例4-1】,在标准JavaScript中获取HTML元素对应的DOM对象的实例，代码如下： function showa() var ida=document.getElementById(a); alert(idtext.innerText); window.addEventLis
3、tener(“load“, showa, true); aa bb cc ,get()方法,如果通过选择器选取了多个HTML元素，则可以使用get()方法得到其中的一个HTML元素。语法如下： var jQuery对象 = jQuery选择器.get(索引); 索引是从0开始的整数，如果要得到第一个HTML元素，则索引使用0；如果要得到第2个HTML元素，则索引使用1；以此类推。,【例4-2】, $(document).ready(function() $(“a“).click(function() alert($(“a“).get(0).innerText); ); ); aa bb cc
4、,each()方法,也可以使用each()方法遍历jQuery选择器所有匹配的元素，并对每个元素执行指定的回调函数。each()方法的语法如下： each(回调函数) 通常回调函数有一个可选的整数参数表示遍历元素的索引。,【例4-3】, 北京 上海 天津 ,$(document).ready(function() $(document.body).click(function () $(“div“).each(function (i) if (this.style.color != “blue“) this.style.color = “blue“; else this.style.color
5、 = “; ); ); ); ,4.1.2 获取和设置HTML元素的内容,可以调用html()方法、text()方法和val()方法获取和设置HTML元素的内容。,1html()方法,使用html()方法获取HTML元素内容的语法如下： var htmlStr = jQuery对象.html(); 变量htmlStr就是得到的HTML元素的内容。 设置HTML元素内容的语法如下： jQuery对象.html(htmlStr); 参数htmlStr就是要设置的HTML元素的内容。,【例4-4】, $(document).ready(function() $(“button“).click(fun
6、ction() $(“p“).html(“hello jQuery!“); ); ); 请注意我的变化 请点击这里 ,2text()方法,使用text()方法获取HTML元素内容的语法如下： var htmlStr = jQuery对象.text(); 变量htmlStr就是得到的HTML元素的内容。 使用text()方法设置HTML元素内容的语法如下： jQuery对象. text(htmlStr); 参数htmlStr就是要设置的HTML元素的内容。html()方法只能用于HTML文档，不能用于XML文档；而text()方法对HTML和XML文档都有效。,可以通过下面的url访问jQuer
7、y下载页面,http:/ ()方法获取HTML元素内容的语法如下： var value = jQuery对象.val(); 变量value就是得到的HTML元素的内容。 使用val ()方法设置HTML元素内容的语法如下： jQuery对象.val(value); val ()方法还可以指定一个函数用于设置HTML元素的内容语法如下： $(selector).val(function(index,oldvalue) 参数说明如下。 $(selector)：选择器； index：可选参数。接受选择器的 index位置（当选择多个元素时有效）。 oldvalue：可选参数。接受选择器的当前 Va
8、lue 属性。,【例4-5】, $(document).ready(function() $(“button“).click(function() $(“input:text“).val(function(index,oldvalue) return oldvalue.toUpperCase(); ); ); ); Name: 转换为大写 ,4.1.3 获取和设置HTML元素的属性,使用attr()方法可以获取和设置匹配的HTML元素的指定属性，获取HTML元素属性的语法如下： Val = jQuery对象.attr(属性名); attr()方法的返回值就是HTML元素的属性值。 设置HTML
9、元素属性的语法如下： jQuery对象.attr(属性名, 属性值);,【例4-6】, $(document).ready(function() $(“#div_img“).click(function() $(“#div_img“).attr(“src“, “02.jpg“); ); ); ,【例4-7】, $(document).ready(function() $(“a“).attr(“target“, “_blank“); ); 新浪 搜狐 ,attr()方法的其他用法,4.1.4 删除HTML元素的属性,使用removeAttr()方法可以删除HTML元素的属性的语法如下： jQue
10、ry对象.removeAttr(属性名),【例4-8】, $(document).ready(function() $(“button“).click(function () $(this).next().removeAttr(“disabled“) .focus() .val(“现在可以编辑了。“); ); ); 启用 ,4.1.5 在网页中添加追加内容,1向HTML元素追加内容 2在HTML元素的前面插入内容 3在HTML元素的后面插入内容,1向HTML元素追加内容,调用append()方法可以向HTML元素追加内容，它的常用语法如下： jQuery对象.append(追加内容),【例4-
11、9】, $(document).ready(function() $(“button“).click(function () $(“p“).append(“ 你好！.“); $(“ol“).append(“新列表项“); ); ); ,接上, 追加 我想说： 列表项1 列表项2 列表项3 ,浏览【例4-9】的初始页面,单击“追加”按钮后的页面,2在HTML元素的前面插入内容,调用before()方法可以向HTML元素的前面插入内容，它的常用语法如下： jQuery对象.before(追加内容),3在HTML元素的后面插入内容,调用after()方法可以向HTML元素的后面插入内容，它的常用语法
12、如下： jQuery对象.after(追加内容),【例4-10】, $(document).ready(function() $(“#btnbefore“).click(function () $(“img“).before(“Hello！“); ); $(“#btnafter“).click(function() $(“img“).after (“Hello！“); ); ); 在前面插入内容 在后面插入内容 ,浏览【例4-10】的初始页面,在图片的前面和后面插入字符串,4.2 管理HTML元素,4.2.1 遍历HTML元素 4.2.2 检查某个元素是否包含指定元素 4.2.3 删除HTML
13、元素 4.2.4 插入HTML元素 4.2.5 复制HTML元素 4.2.6 替换HTML元素,4.2.1 遍历HTML元素,find()方法的语法如下： 结果集 = find(selector); 然后，就可以使用for语句遍历结果集中的对象了。,【例4-11】,首先定义一个小时员工信息的HTML表格employees，代码如下： ID姓名性别年龄学历 001 张三 女 29 大专 002 李四 男 30 中专 003 王五 女 25 本科 ,使用find()方法遍历表格的每一行，并将每个员工的性别（第3列）替换成相应的图片，, $(document).ready(function() va
14、r trs=$(#employees).find(tr); for(var i=0;i); else if($(td).html()=女) $(td).html(); ); ,浏览【例4-11】的结果,4.2.2 检查某个元素是否包含指定元素,调用has()方法可以检查某个元素是否包含指定的子元素，语法如下： jQuery对象. has(子元素名),【例4-12】, .full border: 1px solid red; list item 1 list item 2 list item 2-a list item 2-b list item 3 list item 4 $(li).has(
15、ul).css(border,“3px solid red“); ,浏览【例4-12】的结果,4.2.3 删除HTML元素,1使用empty()方法删除HTML元素的内容和所有子元素 empty()方法的语法如下： jQuery对象.empty(),【例4-13】, $(document).ready(function() $(“button“).click(function () $(“p“).empty(); ); ); 欢迎访问 jQuery官网 删除 ,浏览【例4-13】的结果,2使用remove()方法删除HTML元素,jQuery对象.remove(选择器) 选择器是可选参数，指定
16、删除匹配的HTML元素。如果不指定参数，则会删除jQuery对象对应的所有HTML元素。,【例4-14】, $(document).ready(function() $(“button“).click(function () $(“p“).remove(); ); ); 欢迎访问 jQuery官网 删除 ,4.2.4 插入HTML元素,1insertafter ()方法 insertafter ()方法用于在被选元素之后插入HTML标签或已有的元素，语法如下： jQuery对象.insertAfter(选择器) jQuery对象代表要插入插入元素，而选择器则指定要在其后插入插入元素的HTML元素。,【例4-15】, $(document
