position() 返回值:Object{top,left}
概述
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
示例
描述:
获取第一段的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
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>
...
offset() 返回值:Object{top,left}
概述
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
示例
描述:
获取第二段的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
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>
...
css(name, value) 返回值:jQuery
概述
在所有匹配的元素中,设置一个样式属性的值。
数字将自动转化为像素值
参数
namevalue
属性名
valueString, Number
属性值
示例
描述:
将所有段落字体设为红色
jQuery 代码:
$("p").css("color","red");
css(properties) 返回值:jQuery
概述
把一个“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
参数
propertiesMap
要设置为样式属性的名/值对
示例
描述:
将所有段落的字体颜色设为红色并且背景为蓝色。
jQuery 代码:
$("p").css({ color: "#ff0011", background: "blue" });
描述:
如果属性名包含 "-"的话,必须使用引号:
jQuery 代码:
$("p").css({ "margin-left": "10px", "background-color": "blue" });
...
css(name) 返回值:String
概述
访问第一个匹配元素的样式属性。
参数
nameString
要访问的属性名称
示例
描述:
取得第一个段落的color样式属性的值。
jQuery 代码:
$("p").css("color");
clone(true) 返回值:jQuery
概述
元素以及其所有的事件处理并且选中这些克隆的副本
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
参数
trueBoolean
设置为true以便复制元素的所有事件处理
示例
描述:
创建一个按钮,他可以复制自己,并且他的副本也有同样功能。
HTML 代码:
<button>Clone Me!</button>
jQuery 代码:
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
...
clone() 返回值:jQuery
概述
克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
示例
描述:
克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。
HTML 代码:
<b>Hello</b><p>, how are you?</p>
jQuery 代码:
$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>
...
remove([expr]) 返回值:jQuery
概述
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。
参数
expr (可选)String
用于筛选元素的jQuery表达式
示例
描述:
从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
结果:
how are
描述:
从DOM中把带有hello类的段落删除
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").re...
empty() 返回值:jQuery
概述
删除匹配的元素集合中所有的子节点。
示例
描述:
把所有段落的子元素(包括文本节点)删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
...
replaceAll(selector) 返回值:jQuery
概述
用匹配的元素替换掉所有 selector匹配到的元素。
在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,需要使用end()方法,参见 appendTo 方法的例二。
参数
selector选择器
用于查找所要被替换的元素
示例
描述:
把所有的段落标记替换成加粗标记
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("<b>Paragraph. </b>").replaceAll("p");
结...
replaceWith(content) 返回值:jQuery
概述
将所有匹配的元素替换成指定的HTML或DOM元素。
参数
contentString, Element, jQuery
用于将匹配元素替换掉的内容
示例
描述:
把所有的段落标记替换成加粗的标记。
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").replaceWith("<b>Paragraph. </b>");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
...
wrapInner(elem) 返回值:jQuery
概述
将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来
参数
elemElement
用于包装目标元素的DOM元素
示例
描述:
把所有段落内的每个子内容加粗
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapInner(document.createElement("b"));
结果:
<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
...
wrapInner(html) 返回值:jQuery
概述
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。
参数
htmlString
HTML标记代码字符串,用于动态生成元素并包装目标元素
示例
描述:
把所有段落内的每个子内容加粗
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapInner("<b></b>");
结果:
&...
wrapAll(html) 返回值:jQuery
概述
将所有匹配的元素用单个元素包裹起来
这于 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。
参数
htmlString
TML标记代码字符串,用于动态生成元素并包装目标元素
示例
描述:
用一个生成的div将所有段落包裹起来
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$(...
insertBefore(content) 返回值:jQuery
概述
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。
在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,需要使用end()方法,参见 appendTo 方法的例二。
参数
contentString
用于匹配元素的jQuery表达式
示例
描述:
把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。
HTML 代码...
wrap(elem) 返回值:jQuery
概述
把所有匹配的元素用其他元素的结构化标记包装起来。
参数
elemElement
用于包装目标元素的DOM元素
示例
描述:
用ID是"content"的div将每一个段落包裹起来
HTML 代码:
<p>Test Paragraph.</p><div id="content"></div>
jQuery 代码:
$("p").wrap(document.getElementById('content'));
结果:
<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>
...