jquery框架ajax技术第三章

第三章jQuery中的DOM操作回顾选择器简介层次选择器过滤选择器表单选择器目标节点操作属性操作样式操作设置元素内容处理表单元素值创建节点在函数$()中，传入你想要生成的字符串形式的HTML代码片段，该片段可以是一个简单的节点，也可以是复杂的HTML代码片段语法：$(html)

插入节点方法说明append()向每个匹配的元素内部追加内容appendTo()将所有匹配的元素追加到指定的元素中prepend()向每个匹配的元素内部前置内容prependTo()将所有匹配的元素前置到指定的元素中after()在每个匹配的元素之后插入内容insertAfter()将所有匹配的元素插入到指定元素的后面before()在每个匹配的元素之前插入内容insertBefore()将所有匹配的元素插入到指定的元素的前面插入节点示例页面JavaScript代码片段<scripttype="text/javascript"> $(function(){ $("div").append(document.getElementById("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>

替换节点replaceWith(content)使用replaceWith()方法替换指定的元素replaceAll(selector)replaceAll()方法也用于元素的替换操作，其作用和replaceWith()相同，不同的是方法的语法风格不一样替换节点示例replaceWith()代码示例<scripttype="text/javascript"> $(function(){

$("label").replaceWith("<b>这里是B标记</b>"); });</script><label>这里是标签</label>

replaceAll()代码示例<scripttype="text/javascript"> $(function(){

$("<b>这里是B标记</b>").replaceAll("label"); });</script><label>这里是标签</label>

复制节点语法：clone() clone(true)在jQuery中分别管理DOM与事件属性，如果需要复制设定的事件，则必须在参数中指定true；另外clone方法只完成复制，插入到指定位置必须使用appendTo()或者prependTo()等方法。删除节点empty()此方法用于删除指定元素的子元素，等同于将元素标签内的所有内容清空。remove()remove()方法用于从DOM里删除包装集里所有元素。删除节点示例页面JavaScript代码片段<scripttype="text/javascript"> functiondoMove(){

$("#div1b").remove().appendTo("#div2"); }</script><divid="div1"style="width:150px;height:30px;;border:1pxsolidblack"> <b>文本内容</b></div><inputtype="button"value="move"onclick="doMove()"/><divid="div2"style="width:150px;height:30px;;border:1pxsolidblack"></div>属性操作attr(name)此方法用于获取指派到包装集里第一个元素指定属性的值。attr(name,value)此方法为包装集里所有元素的name属性设置传递进来的值。attr(attributes)此方法依然是用于属性的设定，不同的是允许一次性设置多个属性。removeAttr(name)从DOM中删除元素对应的属性。属性操作示例页面JavaScript代码片段<scripttype="text/javascript"> $(function(){

$("font").attr({size:5,face:"黑体"}); });</script><font>这里是font标签1</font><font>这里是font标签2</font><span>这里是span</span>添加和删除类名称addClass(class)此方法用于添加指定的一个或多个类名称到包装集的所有元素。removeClass(class)在class属性中删除指定的类时使用removeClass()方法。toggleClass(name)当我们想要快速简便地在元素之间切换视觉呈现时，toggleClass()方法最有用。toggleClass()示例页面JavaScript代码片段<styletype="text/css"> .show{display:none;}</style><scripttype="text/javascript"> functionshowOrHidden(){

$("div").toggleClass("show"); }</script><div>这里是div1</div><inputtype="button"value="隐藏/显示"onclick="showOrHidden()"/>

上述代码通过添加和删除类样式，能够简单实现隐藏和显示切换效果获取和设置样式css(name,value)设置指定的值到每个已匹配的元素的指定的CSS样式属性。css(properties)此方法为所有已匹配元素设置已传递对象里多个键所指定的CSS属性为相关的值。css(name)此方法用于获取包装集里第一个元素name所指定CSS属性的已计算样式值。设置样式示例一次设置一个样式属性<scripttype="text/javascript"> $(function(){ $("div").css("color","red"); });</script><div>这里是div1</div>一次设置多个样式属性$("div").css({color:"red","width":"500px"});设置元素内容html()和html(text)首先是简单的html()方法。如果不带参数进行调用，就返回元素的HTML内容；如果带着参数进行调用，就像其他jQuery函数那样，设置元素的HTML内容。text()和text(content)想要获取或设置元素的文本内容可以使用text()方法。不带参数调用text()方法,返回所有文本连接而成的字符串。处理表单元素值val()此方法不带参数，用于返回匹配集里第一个元素的value属性值。val(value)另一个我们将会执行的常见操作是设置表单元素的值。val(values)此方法导致包装集里任何复选框、单选按钮或<select>元素的选项变为已选中(checked)或者已选择(selected)状态，只要它们的值和已传递值数组的任何一个值相匹配。元素选中状态绑定关于多选下拉框的例子：<scripttype="text/javascript"> $(function(){ $("select").val(["bbb","ccc-val"]); });</script><selectsize="5"multiple="multiple"> <option>aaa</option> <option>bbb</option> <optionvalue="ccc-