DOM document object model
文档对象模型
1、 知识点：访问、创建、插入、复制、替换、遍历、删除元素；
2、说明：DOM对象为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容 和展现形式，实际开发中DOM对象就像桥梁，通过它可以实现跨平台、跨语言的标砖访问。
3、访问元素：
3.1:访问元素主要包括对元素的属性、内容、值、css的操作。jQuery中可以通过对元素的 属性执行获得、设置、删除的操作、通过attr();方法来操作，而removeAttr();方法则可以删除指定的属性；
案例如下：
class="java"> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="js/css.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.8.3.js">
</script>
<script type="text/javascript">
//入口
$(document).ready(function() {
each();
});
//替换元素的属性
function update() {
$("#xx").click(function() {
var t1 = $("#img").attr("src"); //获取对应属性的值
if (t1 == "img/a.jpg") {
$("#img").attr("src", "img/b.jpg"); //替换id=img元素的src属性值为：img/b.jpg
} else {
$("#img").attr("src", "img/a.jpg");
}
});
}
//删除元素属性
function del() {
$("#xx1").click(function() {
$("#img").removeAttr("src"); //删除id=img 元素的src属性
});
}
//查询元素的值
function findvalue() {
//var t1 = $("#find").html(); //获取当前元素下的所有信息，得到html
//var t2 = $("#find").text(); //获取id=find 元素下的文本值，只获取文本
//alert(t2);
//$("#x").text("插入文本测试"); //向id=x 的元素中插入文本值
$("#x").html("<table><tr><td>妈的个八字</td><tr></table"); //插入html
}
//获取文本框的值，能输入的
function textValue() {
$("#xx2").click(function() {
var text = $("#username").val(); //问去文本框的值
$("#x").text(text);
$("#username").val(""); //设置文本框的值,能输入的
});
}
//下拉框和单选按钮，查询元素值
function selecOrRadio() {
if ($("#sex").is(":checked")) { //判断当前是否选中
alert("男");
} else {
alert("女");
}
//下拉框改变事件
$("#love").change(function() {
$(this).val(); //获取当前下拉框选定的值
});
}
//样式的添加
function css() {
$("#xx").css("background-color", "red"); //添加样式，参数：属性名称，属性值
$("#xx1").addClass("y"); //.y{} 直接添加样式
}
//追加元素
function append() {
//追加元素
$("#x")
.append(
"<table id=add><tr><td>aa</td><td>aa</td><td>aa</td></tr><tr><td>aa</td><td>aa</td><td>aa</td></tr></table>");
//为元素添加事件
$("#x").live("click", function() {
$("#add").hide("slow");
});
}
//替换元素
function replace() {
$("#x").replaceWith("<p id=y>好久偶来</p>"); //用()里面的内容替代id=x的内容
$("#y").wrap("<b></b>"); //为元素的值 添加效果，为id=y的元素的值加粗
$("#x").replaceAll("#find"); //用id=x 对象去替换id=find的对象
}
//遍历元素
function each() {
//当获取到了元素集合时可以遍历每一个元素，使用each(function(){})方法；
$(":input").each(function(index) {
var t = $(this).attr("type");
alert(index); //记录元素的下标
$(this).val(x); //使用函数的返回值为当前元素设置文本值为对应值
function x() {
return "后劲的"
}
});
}
</script>
</head>
<body>
<div id="x">
</div>
<p id="find">
<span>查询元素值的测试数据</span>
</p>
<input type="text" id="username" name="username">
<img alt="" src="img/a.jpg" width="150px" height="180px" id="img">
<br />
<input type="button" id="xx" value="替换元素属性测试">
<br />
<input type="button" id="xx1" value="删除元素属性测试">
<br />
<input type="button" id="xx2" value="点击获取文本框的值，并清空">
</body>
</html>
相关文章
