系统学习 jQuery （四） DOM 操作

来源：互联网发布：金坷垃淘宝编辑：程序博客网时间：2024/06/08 15:49

通过 jQuery 选择器和筛选方法得到包含特定 DOM 元素的 jQuery 对象之后，就可以通过 jQuery 对象方法来获取和修改这些 DOM 元素的属性和样式了，也可以用来插入或删除 DOM 元素。

常用的 jQuery DOM 操作方法：

attr(key, val) 获得或修改节点属性

removeAttr(key) 移除节点属性
addClass(cls) 为节点添加 class，要添加多个 class 用空格分开
removeClass(cls) 为节点移除 class，要移除多个 class 用空格分开
toggleClass(cls) 在节点上开关 class(若节点有 class 则移除，没有则添加)，多个 class 用空格分隔
html(val) 获取或修改节点内的 html 内容
text(val) 获取或修改节点的文本内容
val(val) 获取或修改节点的 value
css(key, val) 获取或设置节点的内联样式
append(html) 将一段 html 加入到节点的孩子后
appendTo(selector) 将节点添加为另一节点的孩子
insertAfter(selector) 将节点插入到另一节点之后
insertBefore(selector) 将节点插入到另一节点之前
wrap(html) 将节点用一个元素包裹起来，例如在所有 a 标签外包一层 p，$('a').wrap('<p></p>')

replaceWith(html) 将节点替换为另一段 html

更多 jQuery DOM 操作方法请查看 jQuery API http://jquery.cuishifeng.cn/attr.html

操作示例

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="../lib/jquery-1.11.2/jquery.js"></script></head><body>    <div id="p1">127</div>    <p class="c1">1234</p>    <p class="c1 c2">123</p>    <from id="form">    <p class="tt">11<input style="color: #000000" type="input" name="v1" value="v1"></p>    <p>22<input style="color: #000000" type="input" name="v2" value="v2"></p>    <p class="tt">33<input style="color: #000000" type="input" name="v3" value="v3"></p>    <p>44<input style="color: #000000" type="input" name="v4" value="v4"></p>    <p>55<input style="color: #000000" type="input" name="v5" value="v5"></p>    </from>    <script>        $('#p1').html('345');        $('p.c1.c2').hide();        $('#form [name]').each(function() {        console.log($(this).attr('name'));        console.log($(this).val());        });        $('#form').children('*:eq(3)').css('color', '#ff0000');        //$('#form').find('*:eq(3)').css('color', '#ff0000');    $('#form > *:eq(2)').nextAll().css('color', '#ff0000');        $('#form > *:eq(3)').prev(".tt").css('color', '#ff0000');    $('#form > *:eq(0)').next().css('color', '#f00');        $('#form > *:eq(0)').parent().css('border', '1px solid #f00').css('display', 'block');    </script></body></html>

阅读全文

1 0