html样式的使用总结，关于parent,与parents

来源：互联网发布：2016夏季联赛数据编辑：程序博客网时间：2024/05/21 20:30

一，关于Jquery中的parents的使用

<!DOCTYPE html>
<html>
<head>
<style>
b, span, p, html body {
padding: .5em;
border: 1px solid;
}
b { color:blue; }
strong { color:red; }
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<div>
<p>
<span>
<b>我的父元素是：</b>
</span>
</p>
</div>

<script>
var parentEls = $("b").parents()
.map(function () {
return this.tagName;
})
.get().join(", ");
$("b").append("<strong>" + parentEls + "</strong>");
</script>

</body>
</html>

输出结果是：我的父元素是：SPAN, P, DIV, BODY, HTML

总结：查询目标元素的所有父元素

二、parent的使用

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
<script>
$("p").parent(".selected").css("background", "yellow");
</script>
</body>
</html>

输出结果：

Hello

Hello Again

总结：parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。

三、siblings的使用

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("p").siblings(".selected").css("background", "yellow");
</script>
</body>
</html>

输出结果：

Hello

Hello Again

And Again

结论：siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。

四、nextSibling的使用

nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。

被返回的节点以 Node 对象返回。

注释：如果没有 nextSibling 节点，则返回值为 null。

五、after() 、before（）的用法

1、定义和用法

after() 方法在被选元素后插入指定的内容。

语法

$(selector).after(content)

参数描述content必需。规定要插入的内容（可包含 HTML 标签）。

2、定义和用法

before() 方法在被选元素前插入指定的内容。

语法

$(selector).before(content)

参数描述content必需。规定要插入的内容（可包含 HTML 标签）。

3、定义和用法

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器。

语法

$(selector).append(content)

参数描述content必需。规定要插入的内容（可包含 HTML 标签）。

总结：1.after()是只在被选元素的后面添加

$("button").click(function(){
$("span").after("<a href="#">ddddd</a>")

})

<span>aaaaaaaaaaaaaaa</span>
<a href="#">ddddd</a>

span标签后面多了一个a标签

2.append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

$().ready(function(){
$("button").click(function(){
$("span").append("<a href="#">ddddd</a>")

})
})

结果如下：

<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>

span标签里面多了一个a标签

3.appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

备注：before函数与after函数相反，表示是元素的前面加入指定元素

六、clone() 方法的使用

定义和用法

clone() 方法生成被选元素的副本，包含子节点、文本和属性。

语法

$(selector).clone(includeEvents)

参数描述includeEvents

可选。布尔值。规定是否复制元素的所有事件处理。

默认地，副本中不包含事件处理器。

0 0