DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。例如代码:
// 动态创建标签
var domDiv = document.createElment('div');
// 动态创建属性
domDiv.setAttribute('id', 'box');
// 动态设置内部html标签
domDiv.innerHTML = '<span>动态span</span>';
// 动态追加到body标签中
document.body.appendChild(domDiv);
jQuery的构造函数本身可以接收html标签的字符串来动态创建HTML标签。
语法结构: jQuery(html, [props])
参数:
html
:用于动态创建DOM元素的HTML标记字符串,注意标签尽量闭合。props
:用于附加到新创建元素上的属性、事件和方法返回值:返回新创建标签的jQuery包装对象
// 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标签
content
:类型String, Element, jQuery
,添加的子节点。fn(index,html)
:返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的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)
的使用方法一致,只不过一个是在最后追加子节点,一个是在最前面追加子节点(prev vs after)
$("<div>****</div>").appendTo('body');
prependTo(content)
方法,跟appendTo(content)
的使用方法一致,一个是追加到最后,一个是追加到最前。
// 字符串
$('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)
相反的方法,用法一致。
参数: content:插入到每个目标后的内容,类型可以:String,DOM,jQuery。
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插到A后面,而是把A插到B后面。
$("p").insertAfter("#foo");
insertBefore(content)
跟此方法相反。
把所有匹配的元素用其他元素的结构化标记包裹起来。 这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。
<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>
这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。
<!-- 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>
将所有匹配的元素用单个元素包裹起来。这于 .wrap()
是不同的,.wrap()
为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。
$("p").wrapAll("<div></div>");
// 用一个生成的div将所有段落包裹起来
$("p").wrapAll(document.createElement("div"));
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。
// 把所有段落内的每个子内容加粗
$("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>
replaceAll(selector)
,用匹配的元素替换掉所有 selector匹配到的元素。
replaceWith(content)
,用于将匹配元素替换掉的内容。可以是String\DOM\jQuery
// 替换掉所有的p,以下两种方法都可以
$("p").replaceWith("<b>Paragraph. </b>");
$("<b>Paragraph. </b>").replaceAll("p");
empty()
方法,删除匹配的元素集合中所有的子节点
$("p").empty();
remove()
方法从DOM中删除所有匹配的元素。
// 删除所有的p标签
$("p").remove();
clone([Even[,deepEven]])
方法可以对节点进行克隆。
$("b").clone().prependTo("p");
获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。没有参数,返回值是Integer类型
获取第一段落内部区域高度。
<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>
获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。没有参数,返回值是Integer类型
<!-- 获取第一段落内部区域宽度。 -->
<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>
获取第一个匹配元素外部高度(默认包括补白和边框)。 此方法对可见和隐藏元素均有效。
<!-- 获取第一段落外部高度。 -->
<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>
获取第一个匹配元素外部宽度(默认包括补白和边框)。 此方法对可见和隐藏元素均有效。
获取第一段落外部宽度。
<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>
取得匹配元素当前计算的高度值(px)。在 jQuery 1.2 以后可以用来获取 window 和 document 的高
valString 可以是: Number, Function两种类似。
//第一种:无参数描述:
// 获取第一段的高
$("p").height();
// 第二种:一个参数参数val
// 把所有段落的高设为 20:
$("p").height(20);
// 参数function(index, height)
// 以 10 像素的幅度增加 p 元素的高度
$("button").click(function(){
$("p").height(function(n,c){
return c+10;
});
});
width的用法跟height一致,不再赘述。
获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
$("div.demo").scrollTop(300);
用法通scrollTop,不再赘述。
获取匹配元素相对父元素的偏移。此方法只对可见元素有效。从边框开始计算。
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>
获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
// 获取第二段的偏移
// <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 });
预告: 下一篇:jQuery的动画系统详解。