04-老马jQuery教程-DOM节点操作及位置和大小

1. jQuery创建DOM标签

1.1 DOM动态创建标签的方法

// 动态创建标签
var domDiv = document.createElment('div');
// 动态创建属性
domDiv.setAttribute('id', 'box');
// 动态设置内部html标签
domDiv.innerHTML = '<span>动态span</span>';
// 动态追加到body标签中
document.body.appendChild(domDiv);

1.2 jQuery动态创建标签的方式

jQuery(html, [props])

html

props

// jq的 appendTo，类似DOM的appendTo方法
$("<div><p>Hello</p></div>").appendTo("body");

// 两次参数的情况
$("<div></div>", {
"class": "test", // 设置样式类
text: "Click me!",  // 设置内容
click: function(){  // 设置点击事件处理程序
$(this).toggleClass("test");
}
}).appendTo("body"); // 追加到body标签

2. DOM节点操作

2.1 添加子节点append(content|fn)方法

content

String, Element, jQuery

fn(index,html)

<div id="msg">hi</div>
<script>
$(function(){
// 添加字符串
$("#msg").append('<span>你好</span>');
// 添加dom对象
var domDiv = document.createElement('div');
domDiv.innerHTML = "hi laoma q:515154084";
$("#msg").append(domDiv);
// 添加jQuery对象
var $span = $('<span>我是 jQuery对象</span>');
$("#msg").append($span);

$("#msg").append(function(index, oldHtml) {
return "<span>==" + index + "==</span>";
});
});
</script>

prepend(content|fn)

append(content|fn)

2.2 追加到appendTo(content)方法

$("<div>****</div>").appendTo('body');

prependTo(content)

appendTo(content)

2.3 元素之后插入节点after(content|fn)方法

// 字符串
$('div').after('<p>1234</p>');
// jQuery对象
$("p").after($("#msg"));
// dom对象
$("p").after($("#msg")[0]);

// 传入回调函数
$("div").after(function(index, html) {
return '<p>' + index  + '</p>'
})

before(content|fn)

after(content|fn)

2.4 插入某个元素之后insertAfter(content)方法

$("p").insertAfter("#foo");

insertBefore(content)

2.5 包裹节点wrap(html|element|fn)方法

<script>
// 把所有的段落用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");
// 用ID是"content"的div将每一个段落包裹起来
$("p").wrap(document.getElementById('content'));
// 用原先div的内容作为新div的class，并将每一个元素包裹起来
</script>

<!-- HTML 代码: -->
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<script>
// jQuery 代码:
$('.inner').wrap(function() {
return '<div class=" + $(this).text() + " />';
});
</script>

<!-- // 结果: -->
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>

2.6 去掉父节点包裹unwrap()方法

<!-- HTML 代码: -->
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
<script>
// jQuery 代码:
$("p").unwrap()
</script>
<!-- 结果: -->
<p>Hello</p>
<p>cruel</p>
<p>World</p>

2.7 集合包装wrapAll(html|ele)方法

.wrap()

.wrap()

$("p").wrapAll("<div></div>");
// 用一个生成的div将所有段落包裹起来
$("p").wrapAll(document.createElement("div"));

2.8 包裹内部子元素wrapInner(htm|element|fnl)方法

// 把所有段落内的每个子内容加粗
$("p").wrapInner("<b></b>");
// 把所有段落内的每个子内容加粗
$("p").wrapInner(document.createElement("b"));

<!-- 用原先div的内容作为新div的class，并将每一个元素包裹起来 -->
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<script>
$('.inner').wrapInner(function() {
return '<div class=" + $(this).text() + " />';
});
</script>

<!-- 结果: -->
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>

2.9 替换阶段

replaceAll(selector)

replaceWith(content)

// 替换掉所有的p,以下两种方法都可以
$("p").replaceWith("<b>Paragraph. </b>");
$("<b>Paragraph. </b>").replaceAll("p");

2.10 清空子元素

empty()

$("p").empty();

2.11 删除节点

remove()

// 删除所有的p标签
$("p").remove();

2.12 复制节点

clone([Even[,deepEven]])

$("b").clone().prependTo("p");

3. DOM的CSS属性读写

3.1 简单获取元素的内部宽高（不包括边框和外边距）

获取第一段落内部区域高度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
</script>
<!-- 结果: -->
<p>Hello</p><p>innerHeight: 16</p>

<!-- 获取第一段落内部区域宽度。 -->
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );
</script>
<!-- 结果: -->
<p>Hello</p><p>innerWidth: 40</p>

3.2 获取元素的外部宽高（包括边框或外边距）

3.2.1 outerHeight([options])

<!-- 获取第一段落外部高度。 -->
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
</script>
<!-- 结果: -->
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

3.2.2 outerWidth([options])

获取第一段落外部宽度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
</script>
<!-- 结果: -->
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>

3.3 jQuery获取元素内容区域的宽高

3.3.1 height([val|fn])

//第一种：无参数描述:
// 获取第一段的高
$("p").height();
// 第二种：一个参数参数val
// 把所有段落的高设为 20:
$("p").height(20);

// 参数function(index, height)
// 以 10 像素的幅度增加 p 元素的高度
$("button").click(function(){
$("p").height(function(n,c){
return c+10;
});
});

3.3.2 width([val|fn])

3.4 获取和设置滚动条的宽高

3.4.1 scrollTop([val])

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
$("div.demo").scrollTop(300);

3.4.2 scrollLeft([val])

3.5 获取位置和偏移量

3.5.1 position()

var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
// 结果：<p>Hello</p><p>left: 15, top: 15</p>

3.5.2 offset([coordinates])

// 获取第二段的偏移
// <p>Hello</p><p>2nd Paragraph</p>
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
// 结果:
// <p>Hello</p><p>left: 0, top: 35</p>

// 设置最后一个段落的top和left值
$("p:last").offset({ top: 10, left: 30 });