您的位置：首页 > Web前端 > JQuery

系统学习 jQuery （四） DOM 操作

2017-07-17 14:46 393 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航