- 除了基本的DOM处理支持之外,在jQuery对于DOM的处理也有许多扩展操作
在指定的元素之前追加
<html>
<head>
<title>jquery 属性操作</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
for(var x=0;x<10;x++){
$("#dept-title").prepend("<tr><td>"+x+"</td><td>部门名称"+x+"</td><td>部门位置"+x+"</td></tr>");
}
});
</script>
</head>
<body>
<div id="tablediv">
<table id="dept-title">
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
</table>
</div>
</body>
</html>
- 此时调用了prepend()函数之后添加的元素都保存在了之前的元素之上.
在指定元素元素之后追加内容
<html>
<head>
<title>jquery 属性操作</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#info").after("<span>在元素之后</span>");
$("#info").before("<span>在元素之前</span>");
});
</script>
</head>
<body>
<div id="info" class="init">www.maoshu.com</div>
</body>
</html>
元素包裹处理
<html>
<head>
<title>jquery 属性操作</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#info").wrap("<h1></h1>");
});
</script>
</head>
<body>
<span id="info">www.maoshu.com</span>
</body>
</html>
取消元素包裹
<html>
<head>
<title>jquery 属性操作</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("span").unwrap("div");
});
</script>
</head>
<body>
<div class="init">
<span id="info">www.maoshu.com</span>
<div>
</body>
</html>
元素替换处理
<html>
<head>
<title>jquery 属性操作</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("<span>HelloWorld</span>").replaceAll($("div"));
});
</script>
</head>
<body>
<div class="init">
你好世界!我爱这个世界,这个世界可真美好,我要努力奋斗.
</div>
</body>
</html>
- 在整个的DOM处理过程之中,还有一个重要的函数,此函数的名称为each()函数.此函数的最大作用在于可以实现数据的便利处理操作.尤其是在于选择器返回一组元素的时候使用它
取得一组元素内容
<html>
<head>
<title>jquery 属性操作</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("div").each(function(){
console.log($(this).text());
});
});
</script>
</head>
<body>
<div >你好世界!</div>
<div>我爱这个世界,</div>
<div>这个世界可真美好,</div>
<div>我要努力奋斗,</div>
</body>
</html>
- 现在在回调函里面可以针对于选择器选择出来的每一个元素对象进行单独的设置.
- 在实际开发中each()函数最常用的功能就是为函数动态绑定事件
为一组函数动态绑定事件
<html>
<head>
<title>jquery 属性操作</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
for(var x=0;x<10;x++){
$("table").append("<tr><td>"+x+"</td><td><input type='button' value='执行'></td></tr>");
}
$("input[type=button]").each(function(){
$(this).bind("click",function(){alert("你好")});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>编号</td>
<td>操作</td>
</tr>
</table>
</body>
</html>
