jQuery框架和AJAX技术第三章课件.ppt

第三章jQuery中的DOM操作回顾选择器简介层次选择器过滤选择器表单选择器目标节点操作属性操作样式操作设置元素内容处理表单元素值创建节点在函数$()中,传入你想要生成的字符串形式的HTML代码片段,该片段可以是一个简单的节点,也可以是复杂的HTML代码片段语法:$(html)插入节点方法说明append()向每个匹配的元素内部追加内容appendTo()将所有匹配的元素追加到指定的元素中prepend()向每个匹配的元素内部前置内容prependTo()将所有匹配的元素前置到指定的元素中after()在每个匹配的元素之后插入内容insertAfter()将所有匹配的元素插入到指定元素的后面before()在每个匹配的元素之前插入内容insertBefore()将所有匹配的元素插入到指定的元素的前面插入节点示例页面JavaScript代码片段<scripttype="text/javascript"> $(function(){ $("div").append(("txt")); $("div").append($("input:button")); $("div").append("<b>新加的b标签</b>"); });</script><inputid="txt"/><inputtype="button"value="button1"/><inputtype="button"value="button2"/><divstyle="border:1pxsolidblack;">这里是一个div</div>包裹节点wrap(html)用指定结构的元素包含元素使用wrap()方法wrapAll(html)wrapAll()方法用指定结构的元素包含多个元素wrapInner(html)使用wrapInner()方法可以用指定的标签包含子元素wrap()方法示例页面JavaScript代码片段<scripttype="text/javascript"> $(function(){ $("label").wrap("<b></b>"); });</script><div> <label>这里是标签1</label><label>这里是标签2</label> <label>这里是标签3</label></div>运行后的HTML结构<div> <b><label>这里是标签1</label></b> <b><label>这里是标签2</label></b> <b><label>这里是标签3</label></b></div>wrapAll()方法示例页面JavaScript代码片段<scripttype="text/javascript"> $(function(){ $("label").wrapAll("<b></b>"); });</script><div> <label>这里是标签1</label><label>这里是标签2</label> <label>这里是标签3</label></div>运行后的HTML结构<div> <b> <label>这里是标签1</label><label>这里是标签2</label> <label>这里是标签3</label> </b></div>wrapInner()方法示例页面JavaScript代码片段<scripttype="text/javascript"> $(function(){ $("div").wrapInner("<b></b>"); });</script><div> <label>这里是标签1</label><label>这里是标签2</label></div>运行后的HTML结构<div> <b> <label>这里是标签1</label><label>这里是标签2</label> </b></div>