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

jQuery学习（六）jQuery的HTML操作

2012-08-20 15:31 387 查看

.jQuery的HTML操作

jQuery 包含很多供改变和操作 HTML 的强大函数。

6.1改变 HTML 内容

6.1.1
语法：

$(selector).html(content)

html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。

实例：

<html>

<head>

<script type="text/javascript"src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").html("替换后的内容！");

});

});

</script>

</head>

<body>

<h2>标题</h2>

<p>这里内容将被替换！</p>

<button type="button">请点击这里</button>

</body>

</html>

6.2添加 HTML 内容

6.2.1 append(content)和prepend(content)
语法：

$(selector).append(content)

append() 函数向所匹配的 HTML 元素内部追加内容。

$(selector).prepend(content)

prepend() 函数向所匹配的 HTML 元素内部预置（Prepend）内容。
实例：
<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>中南大学</b>.");
});
});
</script>
</head>

<body>
<h2>标题</h2>
<p>我的大学！</p>
<p>我的大学！</p>
<buttontype="button">点击追加内容！</button>
</body>
</html>
6.2.2 afte(content)与before(content)

$(selector).after(content)

after() 函数在所有匹配的元素之后插入 HTML 内容。

$(selector).before(content)

before() 函数在所有匹配的元素之前插入 HTML 内容。
实例：

$("p").after(" W3School.");

<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after("W3School.");
});
});
</script>
</head>
<body>
<h2>This is aheading</h2>
<p>This is aparagraph.</p>
<p>This isanother paragraph.</p>
<buttontype="button">请点击这里</button>
</body>
</html>
6.2.3 jQuery HTML 操作 - 来自本页

函数	描述
$(selector).html(content)	改变被选元素的（内部）HTML
$(selector).append(content)	向被选元素的（内部）HTML 追加内容
$(selector).prepend(content)	向被选元素的（内部）HTML “预置”（Prepend）内容
$(selector).after(content)	在被选元素之后添加 HTML
$(selector).before(content)	在被选元素之前添加 HTML

6.3 jQuery HTML操作参考手册

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。
append()	向匹配的元素内部追加内容。
appendTo()	向匹配的元素内部追加内容。
attr()	设置或返回匹配元素的属性和值。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。$(selector).detach()
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。$(content).insertAfter(selector)
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向每个匹配的元素内部前置内容。
prependTo()	向每个匹配的元素内部前置内容。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。$(selector).replaceWith(content)
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
unwrap()	移除并替换指定元素的父元素。$("p").wrap("<div></div>");
val()	设置或返回匹配元素的值。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

6.3.1常用的方法的说明
1.appendTo方法。

在每个 p 元素结尾插入内容：

$("button").click(function(){
$("<b>HelloWorld!</b>").appendTo("p");
});

定义和语法
appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
提示：append() 和appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
语法

$(content).appendTo(selector)

参数	描述
content	必需。规定要插入的内容（可包含 HTML 标签）。
selector	必需。规定把内容追加到哪个元素上。

2.attr()方法

定义和用法
attr() 方法设置或返回被选元素的属性值。
根据该方法不同的参数，其工作方式也有所差异。

.(1)返回属性的值

返回被选元素的属性值。

语法

$(selector).attr(attribute)

参数	描述
attribute	规定要获取其值的属性。

(2)设置属性的值

设置被选元素的属性和值。

语法

$(selector).attr(attribute,value)

参数	描述
attribute	规定属性的名称。
value	规定属性的值。

实例：改变文本框里面的值

<html>
<head>
<scripttype="text/javascript"src="../js/jquery-1.6.2.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
var i=0;
$("button").click(function(){
$("input").attr("value","value属性的值改变了"+i+"次");
i++;
});
});
</script>
</head>
<body>
<inputvalue="值没有被改变"id="inputText">
<buttonname="change"id="change"value="change"type="button">改变值</button>
</body>
</html>

（3）使用函数来设置属性/值

设置被选元素的属性和值。

语法

$(selector).attr(attribute,function(index,oldvalue))

参数	描述
attribute	规定属性的名称。
function(index,oldvalue)	规定返回属性值的函数。该函数可接收并使用选择器的 index 值和当前属性值。

实例：改变图像的宽度

<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width",function(n,v){
return v-10;
});
});
});
</script>
</head>
<body>
<imgsrc="/image/image.gif"width="120"height="120"/>
<br/>
<button>减少图像的宽度 10 像素</button>
</body>
</html>
(4)设置多个属性/值对
为被选元素设置一个以上的属性和值。
语法

$(selector).attr({attribute:value, attribute:value ...})

参数	描述
attribute:value	规定一个或多个属性/值对。

$("img").attr({width:"50",height:"80"});

3.Clone()创建匹配元素的结合副本

定义和用法

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

语法

$(selector).clone(includeEvents)

参数	描述
includeEvents	可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。

<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").clone());
});
});
</script>
</head>
<body>
<p>这一段即将被克隆.</p>
<button>复制每个 p 元素，然后追加到 body 元素</button>
</body>
</html>

4.text()方法

（1）返回文本的内容
当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。
语法

$(selector).text()

当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。
（2）设置文本内容

当该方法用于设置值时，它会覆盖被选元素的所有内容。

$(selector).text(content)

(3)使用函数设置文本内容。
使用函数设置所有被选元素的文本内容
语法

$(selector).text(function(index,oldcontent))

参数	描述
function(index,oldcontent)	必需。规定返回被选元素的新文本内容的函数。 · index - 可选。接受选择器的 index 位置。 · html - 可选。接受选择器的当前内容。

实例
<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").text(function(n){
return
"这个 p
元素的 index 是：" + n;
});
});
});
</script>
</head>
<body>
<p>第一个段落.</p>
<p>第二个段落.</p>
<buttonclass="btn1">改变所有 p 元素的文本内容</button>
</body>
</html>

5.toggleClass（）方法

定义和用法

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

不过，通过使用"switch" 参数，您能够规定只删除或只添加类。

语法

$(selector).toggleClass(class,switch)

参数	描述
class	必需。规定添加或移除 class 的指定元素。如需规定若干 class，请使用空格来分隔类名。
switch	可选。布尔值。规定是否添加或移除 class。

使用函数来切换

$(selector).toggleClass(function(index,class),switch)

参数	描述
function(index,class)	必需。规定返回需要添加或删除的一个或多个类名的函数。 · index - 可选。接受选择器的 index 位置。 · class - 可选。接受选择器的当前的类。
switch	可选。布尔值。规定是否添加(true)或移除(false)类。

（注：以上内容是通过http://www.w3school.com.cn学习，很多内容粘帖下来是为了方便学习）

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

标签：

相关文章推荐

新的分享

章节导航