jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 姚敦红 杨凌 张志美 李晓黎 等编著 第4章 新.pptVIP

【例4-10】 !DOCTYPE html html head script src=jquery.js/script script $(document).ready(function(){ $(#btnbefore).click(function () { $(img).before(bHello！/b); }); $(#btnafter).click(function() { $(img).after (bHello！/b); }); }); /script /head body img src=01.jpgbr button id=btnbefore在前面插入内容/button button id=btnafter在后面插入内容/button /body /html 浏览【例4-10】的初始页面 在图片的前面和后面插入字符串 4.2 管理HTML元素 4.2.1 遍历HTML元素 4.2.2 检查某个元素是否包含指定元素 4.2.3 删除HTML元素 4.2.4 插入HTML元素 4.2.5 复制HTML元素 4.2.6 替换HTML元素 4.2.1 遍历HTML元素 find()方法的语法如下： 结果集 = find(selector); 然后，就可以使用for语句遍历结果集中的对象了。 【例4-11】 首先定义一个小时员工信息的HTML表格employees，代码如下： table id=employees width=200 border=1 trthID/thth姓名/thth性别/thth年龄/thth学历/th/tr tr td001/td td张三/td td女/td td29/td td大专/td /tr tr td002/td td李四/td td男/td td30/td td中专/td /tr tr td003/td td王五/td td女/td td25/td td本科/td /tr /table 使用find()方法遍历表格的每一行，并将每个员工的性别（第3列）替换成相应的图片， script src=jquery.js/script script $(document).ready(function(){ var trs=$(#employees).find(tr); for(var i=0;itrs.length;i++){ var td=$(trs[i]).find(td:nth-child(3)); if(td.html()==男) { td.html(img src=male.png width=20 height=20/); } else if($(td).html()==女) { $(td).html(img src=female.png width=20 height=20/); } } }); /script 浏览【例4-11】的结果 4.2.2 检查某个元素是否包含指定元素 调用has()方法可以检查某个元素是否包含指定的子元素，语法如下： jQuery对象. has(子元素名) 【例4-12】 !DOCTYPE html html head style .full { border: 1px solid red; } /style script src=jquery.js/script /head body ul lilist item 1/li lilist item 2 ul lilist item 2-a/li lilist item 2-b/li /ul /li lilist item 3/li lilist item 4/li /ul script $(li).has(ul).css(border,3px solid red); /script /body /html 浏览【例4-12】的结果 4.2.3 删除HTML元素 1．使用empty()方法删除HTML元素的内容和所有子元素 empty()方法的语法如下： jQuery对象.empty() 【例4-13】 !DOCTYPE html html head