系统学习 jQuery （四） DOM 操作

最新推荐文章于 2021-03-23 15:23:04 发布

Mir2

最新推荐文章于 2021-03-23 15:23:04 发布

阅读量347

点赞数 1

分类专栏： JavaScript 文章标签： jquery javascript dom

本文链接：https://blog.csdn.net/zaqwsx20/article/details/75231768

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

通过 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>

Mir2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
系统学习 jQuery （四） DOM 操作

通过 jQuery 选择器和筛选方法得到包含特定 DOM 元素的 jQuery 对象之后，就可以通过 jQuery 对象方法来获取和修改这些 DOM 元素的属性和样式了，也可以用来插入或删除 DOM 元素。常用的 jQuery DOM 操作方法：attr(key, val) 获得或修改节点属性removeAttr(key) 移除节点属性addClass(cls) 为节点添加 cla
复制链接

扫一扫