jQuery之文档操作
内部插入
外部插入
删除
复制
替换
append(content)
将指定的内容追加至指定的元素中的最后
appendTo(content)
将匹配的元素插入指定元素之间的后面
prepend(content)
将指定的内容追加至指定的元素的最前面
prependTo(content)
after(content)
将指定的内容插入到匹配元素的后面
before(content)
将指定的内容插入到匹配的元素的前面
insertAfter(content)
将指定元素插入到匹配的元素后面
insertBefore(content)
将指定元素插入到匹配的元素的前面
3、删除
empty();
清空
<div>XXXX</div>
<div></div>
Remove();
什么都没有了
4、复制
clone()
表示复制这个节点本身，但不包括事件
clone(true)
表示复制这个节点以及它的所有属性，包括事件
5.替换
replace(content)
将匹配的元素替换成指定的内容
6.包裹
<b><div>数据</div></b>
Wrap()
将匹配的内容进行包裹
wrapAll
将所有匹配的内容一次性包裹
wrapInner
将匹配元素的内容进行包裹
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<title>默认行为</title>
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<style>
div{
width:400px;
height:400px;
border:1px solid red;
}
</style>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$('#btn1').bind('click',function(){
//$('div').wrap('<strong></strong>');
//将<strong></strong>包裹在<div></div>外
//alert($('body').html());
//$('div').wrapAll('<strong></strong>');
//将所有div用一对strong标签包裹
//alert($('body').html());
$('div').wrapInner('<strong></strong>');
//div中的内容进行包裹，而不包裹匹配的元素本身。
});
});
</SCRIPT>
<style>
</style>
</head>
<body>
<div>手机</div>
<div>电脑</div>
<div>相机</div>
<input type='button' id='btn1' value='确定'>
</body>
</html>
7、查找
eq:
$("p").eq(1);
filter:(用选择器查找元素)
$("p").filter('.class');
not:排除指定的对象
$("p").not($('#select')[0]);
next:匹配下一个元素
$("p").next()
<div id='div1'></div>
<div></div>//匹配的是这个元素
parent():匹配父级元素
Children();匹配所有的子集元素
8.习题(现场录入)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<title>默认行为</title>
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<style>
</style>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$('#btnok').bind('click',function(){
var name=$('#name').val();
var age=$('#age').val();
var email=$('#email').val();
var $data = $('tr:first').clone();
$('table').append($data);
$('tr:last td:eq(0)').html(name);//最后一行的一个Td
$('tr:last td:eq(1)').html(age);
$('tr:last td:eq(2)').html(email);
});
});
</SCRIPT>
<style>
</style>
</head>
<body>
<table width=700 border=10>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>邮箱</td>
</tr>
</table>
<br>
</body>
姓名:<input type='text' id='name'><br>
年龄:<input type='text' id='age'><br>
邮箱:<input type='text' id='email'><br>
<input type='button' id='btnok' value='录入'>
</html>