第05章基础 DOM 和 CSS 操作（上）-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_17658/article/details/82636919

本文深入探讨了HTML、CSS基础操作及与jQuery的整合应用，通过实例展示了如何利用DOM和CSS实现网页元素的动态变化，并介绍了jQuery在简化JavaScript编码中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基础 DOM 和 CSS 操作</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>

<div title="demo" id="box">
	<strong>http://onestopweb.cn/</strong>
</div>
<div id="box">
	<strong>http://onestopweb.cn/</strong>
</div>
<!--

<input type="text" value="一站式共享网络" />
<input type="radio" value="男" />男
<input type="radio" value="女" />女
<input type="checkbox" value="编程" />编程

-->


</body>
</html>

dome.js

$(function(){
	//alert($('#box').html());
	//alert($('#box').text());//text 获取的是文本，有 html 会自动被清理
	//$('#box').html('<em>www.onestopweb.cn</em>');//替换HTML内容，有 HTML 会自动解析
	//$('#box').text('<em>www.onestopweb.cn</em>');//替换文本内容，有 HTML 会自动转义
	
	//alert($('input').val());
	//$('input').val('一站式建网站');
	
	//alert($('input').val());
	//$('input').val('女');
	//alert($('input').val());
	
	//$('input').val(['男','女','编程']);
	
	//alert($('#box').attr('id'));
	
	//$('div').attr('title','我是域名');
	/*
	$('div').attr({
		'title':'我是域名',
		'class':'red',//class 不建用 attr 来设置，后面有功能更强大和更丰富的方法代替
		'data':'123'
	});
	*/
	/*
	$('div').attr('title',function(){
		return '我是域名';
	});
	*/
	/*
	$('div').attr('title',function(index,value){
		return '我是'+(index+1)+'号域名';
	});
	*/
	/*
	$('div').attr('title',function(index,value){
		return '原来的ttile是：'+value+',现在的title是'+(index+1)+'号域名';
	});
	*/
	
	//$('div').html($('div').html()+'<em>www.onestopweb.cn</em>'); 追加
	/*
	$('div').html(function(index,value){
		return value+'<em>onestopweb.cn</em>';
	});
	*/
	
	//$('div').removeAttr('title');
	/*
	$('div').removeAttr(function(){//错误的,不可以传递function
		return 'title';
	});
	*/
	
});