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>
分享到：
相关推荐
例如，`$(element)[0]`可以将jQuery对象转换为DOM对象，而`$(domElement)`则可以将DOM对象转换为jQuery对象。这种转换使得在jQuery和DOM之间切换变得灵活。 ### 总结 jQuery大大简化了JavaScript的许多任务，特别...
而jQuery对象则是jQuery库中用于封装DOM对象的一个特殊类型，提供了一系列便捷的方法来处理DOM操作，如选择元素、事件绑定、动画效果等。 **DOM对象** DOM对象是JavaScript与网页内容交互的基础。当你通过...
**jQuery DOM操作** jQuery库是JavaScript的一个强大工具，它极大地简化了对DOM（Document Object Model）的操作。DOM是HTML和XML文档的结构化表示，允许我们通过编程方式访问和修改页面内容。jQuery提供了丰富的...
在JavaScript的世界里，jQuery是一个非常流行的库，它极大地简化了DOM操作和事件...在实际开发中，根据需要灵活切换这两种对象类型，可以更好地利用jQuery库的强大功能，同时也能处理那些仅在DOM对象上可用的特定操作。
jQuery对象是包装了DOM对象的类数组对象，它们之间的转换虽然看似简单，但在实际操作中却非常重要。 首先，我们需要明确什么是jQuery对象和DOM对象。DOM对象是原生的JavaScript对象，例如document中的各种元素，...
JavaScript中的DOM对象和jQuery对象是两种不同的数据结构，它们在处理网页元素时有着各自的特性和优缺点。了解它们之间的联系和区别对于JavaScript开发者来说至关重要，因为这有助于选择合适的工具进行网页交互。 ...
2. **链式操作**：jQuery对象返回的是一个包含零个或多个DOM元素的集合，这个集合支持链式调用，使得多步操作可以紧凑地写在一起，如 `$("#myDiv").html("Hello").css("color", "red")`。 3. **DOM遍历**：jQuery...
2. **从DOM到jQuery**：如果有一个DOM对象，想要转换成jQuery对象以便使用jQuery提供的方法，则可以使用`$(dom)`。例如，`var $cr = $(cr);`将DOM对象`cr`转换成了jQuery对象。 #### 总结 DOM与jQuery之间的关系是...
例如，原生的`addEventListener`事件绑定通常比jQuery的`on`方法更快，因此在性能敏感的地方，可以先将jQuery对象转换为DOM对象再进行操作。 最后，jQuery还包含了强大的事件处理和动画功能。事件处理可以使用`.on...
jQuery 是一个广受欢迎的 JavaScript 库，其核心理念是简化 DOM 操作，处理事件和创建动画，同时提供了统一的 API 以实现跨浏览器兼容性。jQuery 的“write less, do more”口号反映了它通过简洁的语法实现高效的...
- **链式调用（Chaining）**：jQuery对象是可链式的，允许你在一行代码中执行多个操作，提高了代码的可读性和效率。 - **DOM操作方法（Manipulation）**：如`html()`, `append()`, `prepend()`, `remove()`等，用于...
在本文中，我们将深入探讨jQuery的DOM对象事件处理、隐藏显示功能以及如何操作对象数组。jQuery作为一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，使得Web开发更加便捷。 首先，让...
例如，当你需要操作某个特定的DOM属性，而jQuery没有提供直接的接口时，可以先将jQuery对象转换为DOM对象，然后进行操作。 总的来说，jQuery对象与DOM对象之间的转换是开发中常见的需求。掌握这种转换技巧能帮助你...
只有jQuery对象才能调用jQuery类库的各种函数，同样有些dom对象的属性和方法在jQuery上也是无法调用的，不过基本上jQuery类库提供的函数包含了所有的dom操作。有时尤其是在初学jQuery，无法记住jQuery的所有函数时，...
本篇文章将深入探讨jQuery的基础知识，包括其基本介绍、使用步骤、jQuery对象与DOM对象的区别，以及jQuery的选择器。此外，我们还将讨论`mouseover`与`mouseenter`事件的区别、`index()`方法的用法以及如何区分...
- 当需要使用jQuery提供的链式操作和便捷的DOM操作，如`append`、`remove`等时，则需将DOM对象转换为jQuery对象。 总的来说，熟练掌握jQuery对象与DOM对象之间的转换，能够使你在处理JavaScript项目时更加得心应手...
jQuery的一个独特特性是链式操作，即在同一个对象上调用多个方法。例如，`$("#element").css("color", "red").addClass("highlight")`，这行代码先选中ID为"element"的元素，再将其颜色设为红色，最后添加一个名为...
上述两种方式都可以将jQuery对象转换为DOM对象，转换后的对象是普通的DOM元素，可以使用DOM的方法进行操作。 反过来，DOM对象转换为jQuery对象则更加直接。只需要用jQuery的包装函数`$()`将DOM对象包装起来，就可以...
该函数可以接受HTML字符串作为参数，返回一个DOM对象，并将其包装为jQuery对象。 ```javascript // 创建元素节点 var $li1 = $("<li></li>"); // 创建一个li元素节点 $("ul").append($li1); // 将新创建的li元素...
《利用面向对象管理者模式思想结合jQuery操作DOM树制作的植物大战僵尸》 在JavaScript开发领域，游戏开发是一项挑战性极高的工作，它需要开发者具备深厚的编程基础、良好的逻辑思维以及对用户交互的深入理解。本...