- 基本的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(){
//添加元素
$(mydiv).append("<h1><span>HelloWorld</span></h1>");
})
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
- 执行结果
- 现在可以特别清楚的发现,在jQuery中如果要进行DOM处理操作,直接编写HTML语句即可,但是对于append()函数处理操作可以发现,他不光可以处理文本,还可以处理对象,在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(){
//创建DOM对象
var obj = $("<span>Hellowrold</span>");
//设置属性
obj.attr("class","init");
//将属性添加到指定的属性之中
$(mydiv).append(obj);
})
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
- 现在可以特别清楚的发现一点,所有的操作中都可以使用的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(){
//直接将一个函数的执行结果天津哀悼元素中
$(mydiv).append(function(){
//使用"$(this)"的形式可以将JavaScript对象转换为jQuery对象
if($(this).text()=="maoshu"){
//清空原来的内容
$(this).text("")
return "<span class='init'>HelloWorld.com</span>";
}else{
return "你好!!";
}
});
})
</script>
</head>
<body>
<div id="mydiv">maoshu</div>
</body>
</html>
此时的操作,内容可以根据JavaScript的直接处理而得到.
动态生成表格
<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 < 20; x++){
$(depttable).append("<tr><td>"+x+"</td><td>部门名称"+x+"</td><td>部门位置"+x+"</td></tr>");
}
});
</script>
</head>
<body>
<div id="mydiv">
<table border="1" id="depttable">
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
</table>
</div>
</body>
</html>
- 页面效果
- 对于表格的处理操作,在jQuery中的方便之处非常明显
实现表格行的删除操作
<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(){
//删除id为depttable的元素下的所有大于第一个tr的子元素,
$("#depttable tr:gt(0)").remove();
});
</script>
</head>
<body>
<div id="mydiv">
<table border="1" id="depttable">
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr>
<td>1</td>
<td>部门名称1</td>
<td>部门位置1</td>
</tr>
<tr>
<td>2</td>
<td>部门名称2</td>
<td>部门位置2</td>
</tr>
<tr>
<td>3</td>
<td>部门名称3</td>
<td>部门位置3</td>
</tr>
<tr>
<td>4</td>
<td>部门名称4</td>
<td>部门位置4</td>
</tr>
</table>
</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(){
//创建一个jQuery对象
var selectObj = $("<select id='city'><option value='-1'>~~~~~请选择~~~~~\></option></select>");
//追加元素
$("#mydiv").append(selectObj);
//循环添加option元素
for(var x=0; x < 10 ;x++){
selectObj.append("<option value="+x+">城市"+x+"</option>");
}
});
</script>
</head>
<body>
<!-- 下拉列表框层-->
<div id="mydiv"></div>
</body>
</html>
- 页面效果
- 只要存在有jQuery开发框架,那么发现前台代码的动态生成基本都不会成为难点