jQuery 之DOM对象操作

最新推荐文章于 2024-07-14 22:26:46 发布

rjbusiness

最新推荐文章于 2024-07-14 22:26:46 发布

阅读量83

点赞数

分类专栏： jQuery 文章标签： jquery java html DOM 对象 ViewUI

本文链接：https://blog.csdn.net/zhang583740618/article/details/88341019

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[color=red][size=medium][b][align=center]DOM document object model
文档对象模型[/align][/b][/size][/color]
[size=small][color=olive][b]
1、知识点：访问、创建、插入、复制、替换、遍历、删除元素；
2、说明：DOM对象为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容和展现形式，实际开发中DOM对象就像桥梁，通过它可以实现跨平台、跨语言的标砖访问。

3、访问元素：
3.1:访问元素主要包括对元素的属性、内容、值、css的操作。jQuery中可以通过对元素的属性执行获得、设置、删除的操作、通过attr();方法来操作，而removeAttr();方法则可以删除指定的属性；

案例如下：[/b][/color][/size]

 	<%@ 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>