DOM document object model
文档对象模型
1、 知识点：访问、创建、插入、复制、替换、遍历、删除元素；
2、说明：DOM对象为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容 和展现形式，实际开发中DOM对象就像桥梁，通过它可以实现跨平台、跨语言的标砖访问。
3、访问元素：
3.1:访问元素主要包括对元素的属性、内容、值、css的操作。jQuery中可以通过对元素的 属性执行获得、设置、删除的操作、通过attr();方法来操作，而removeAttr();方法则可以删除指定的属性；
案例如下：
<%@ 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>
分享到：
相关推荐
jquery 基本 层级 控制器 可见性 属性 子元素 表单对象属性 dom对象 等详细的一些操作~ 详细 简单~易懂 实用！
DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法。例如：document.getElementById(“img”).src = “test.jpg”；这里的document.getElemen
只有jQuery对象才能调用jQuery类库的各种函数，同样有些dom对象的属性和方法在jQuery上也是无法调用的，不过基本上jQuery类库提供的函数包含了所有的dom操作。有时尤其是在初学jQuery，无法记住jQuery的所有函数时，...
只有jQuery对象才能调用jQuery类库的各种函数，同样有些dom对象的属性和方法在jQuery上也是无法调用的，不过基本上jQuery类库提供的函数包含了所有的dom操作。这就需要我们知道如何将jQuery对象和DOM的相互转换的...
jQuery 一个非常流行的操作Dom的 JavaScript 库
利用面向对象 管理者模式思想 结合jquery 操作DOM树制作的植物大战僵尸
jQuery对象和DOM对象相互转化 jQuery对象和DOM对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$(“#img”).attr(“src”...
本文实例讲述了jQuery中DOM常见操作。分享给大家供大家参考，具体如下： DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性。 removeAttr() 1.0 移除文档节点的属性。 prop() 1.6 ...
DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法，但是不能使用jQuery里的方法。例如：document.getElementById(“img”).src=”test.jpg”;这里的document.getElementById(“img”)...
jQuery中的DOM操作（1） jQuery获得元素 jQuery设置元素 jQuery复制元素 1、jQuery获得元素 jQuery 中非常重要的部分，就是操作 DOM 的能力。 jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很...
Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 ...
注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementById("msg"))则为jquery对象，可以使用...
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名...注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。
最新！最有用！最牛B！ 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、...注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可..........
DOM操作的分类：DOM CORE（核心）、HTML-DOM和CSS-DOM 1. DOM Core DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。 它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言...
DOM对象和jQuery对象的操作时很重要的，是jquery与页面元素互动的基础。
关于jQuery的DOM操作面试问题其实有很多，下面这篇文章主要给大家介绍了jQuery常见面试题之DOM操作的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
本文实例分析了jQuery遍历DOM节点操作之filter()方法。分享给大家供大家参考，具体如下： .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选。 记住：使用此方法必须得传入选择器表达式参数，不然...
这里主要设计的dom操作包括：dom对象的创建(JS方式和jquery方式)、属性的修改、样式的修改、动态绑定事件 代码如下： 复制代码 代码如下:<html xmlns=”http://www.w3.org/1999/xhtml”> <head> ...