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" style="width:200px; padding:100px; border:100px solid #ccc; margin:100px;"> <strong>http://onestopweb.cn/</strong> </div> --> <div title="demo" style=" position:relative;"> <strong style="position:absolute; top:1px">http://onestopweb.cn/</strong> </div> <div title="demo"> <strong>http://onestopweb.cn/</strong> </div> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </body> </html>
style.css
.red{ color:red;}
.green{ color:green;}
.bg{ background-color:#ccc;}
.size{ font-size:20px;}
demo.js
$(function(){
//alert(typeof parseInt($('div').css('width')));
//alert(typeof $('div').width());
//alert($('div').width());
//alert($(window).width());
//alert($(document).width());
//$('div').width(500);
//$('div').width('500pt');
/*
$('div').width(function(index,width){
return width - 500 + 'px';//虽然可以不加，会智能添加，但还是建议加上单位，这样会更加清晰。
});
//alert($('div').height()); //padding,border,margin
alert($('div').width()); //200 200 200
alert($('div').innerWidth()); //400 400 400
alert($('div').outerWidth()); //400 600 600
alert($('div').outerWidth(true));//400 600 800
*/
//alert($('div').offset().top);
//alert($('strong').offset().top);
//alert($('div').position().top);
//alert($('strong').offset().top);
//alert($('strong').position().top);
alert($(window).scrollTop(300));
});
相关推荐
在本章“第05章 基础 DOM 和 CSS 操作（中）”中，我们将深入探讨Web开发中的核心概念——Document Object Model (DOM) 和 Cascading Style Sheets (CSS) 的基本操作。DOM是HTML和XML文档的编程接口，而CSS则是用于...
在本章中，我们将深入探讨基础的DOM（Document Object Model）和CSS操作，这是Web开发中的核心技能。DOM是HTML和XML文档的编程接口，它允许我们通过JavaScript或其他编程语言来动态地改变网页内容。而CSS则是样式表...
在本章中，我们将深入探讨DOM（文档对象模型）节点操作的下半部分。DOM是HTML和XML文档的编程接口，允许我们通过JavaScript等脚本语言动态地修改、添加或删除网页内容。DOM节点操作是前端开发中的核心技能，对创建...
在HTML第五章中，我们主要探讨的是在网页制作过程...综上所述，HTML第五章所涉及的工具涵盖了从编码、设计、调试到部署的整个开发流程，熟练掌握这些工具将使开发者的工作更为高效，同时也提升了网页的质量和用户体验。
本章主要探讨如何利用JavaScript动态地改变CSS样式，从而实现丰富的交互效果。 首先，我们需要理解JavaScript如何与CSS相互作用。在HTML文档中，CSS用于定义元素的外观和布局，而JavaScript则提供了操作这些样式的...
在这个部分，我们将学习更多关于DOM元素操作的方法和技巧。 首先，`getElementById()`是获取特定ID元素的常用方法。通过这个方法，我们可以直接根据元素的ID找到它，并对其进行操作，例如改变其内容、样式或属性。...
其中包括：第一章 HTML基础 第二章 HTML基础(2).ppt 第三章 CSS样式表_语法规则 第四章 CSS样式表_样式控制 第五章 CSS样式表_盒子模型.ppt 第六章 CSS样式表_页面布局 第七章 Javascript基础语法 第八章 Javascript...
在本资源中，我们主要关注的是jQuery的基础教程，特别是关于操作文档对象模型（DOM）的部分。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这个"Book05_jQuery_...
4. **第04章**：可能涉及JavaScript的基础语法，变量、数据类型、条件语句、循环等，以及DOM（文档对象模型）操作，如获取元素、修改元素内容。 5. **第05章**：可能涵盖JavaScript事件处理，如点击事件、鼠标移动...
`chapter12`、`chapter06`、`chapter08`等章节同样涵盖了其他关键主题，比如第6章可能介绍了DOM的创建和修改，第8章可能是关于DOM遍历和节点操作，第12章可能涉及了高级DOM技巧或最佳实践。 通过对这些文件的学习，...
**第五章：CSS选择器与优先级** 在这一部分，学员会深入理解CSS选择器的种类（类选择器、ID选择器、属性选择器等）和优先级规则，这对于精确控制页面样式至关重要。 **第六章：CSS3新特性** 这一章将涵盖CSS3的新...
- `chapterXX`：每个章节的代码文件夹，如`chapter03`、`chapter05`等，对应书中各章的示例代码。 - `styles`：存放CSS样式文件，用于美化示例页面。 - `images`：可能包含书中示例用到的图片资源。 通过这个...
### 掌握Ajax系列之第五部分：操纵DOM详解 #### 使用JavaScript即时更新Web页面 在“掌握Ajax”系列的第五部分中，我们深入探讨了如何使用JavaScript操纵文档对象模型（DOM），以实现实时更新Web页面，而无需进行...
JavaScript 操作 HTML DOM（文档对象模型）是网页动态交互的核心技术。...同时，随着Web技术的发展，现代框架如React、Vue等提供了更高层次的抽象，让DOM操作变得更加简洁高效，但基础知识仍然是不可或缺的。
以下是关于jQuery基础教程第5章的一些核心知识点： 1. **选择器**：jQuery的选择器基于CSS，允许开发者轻松地选取DOM中的元素。如`$("#id")`用于选取ID为"id"的元素，`$(".class")`用于选取所有class为"class"的...
JavaScript是实现网页交互性的关键，教学大纲会涵盖变量、数据类型、控制流、函数等基础语法，以及DOM操作、事件处理、Ajax异步通信等高级话题。学生将学习如何编写能够响应用户行为的脚本，创建动态效果和交互式...
4. 进阶话题：AJAX（异步JavaScript和XML）用于与服务器通信，jQuery库简化DOM操作，以及可能涉及到的框架和库如React、Vue或Angular的入门知识。 实例是学习编程的重要部分，这个教程很可能包含了大量的实例代码，...
2. 动态加载和修改CSS：通过DOM操作来改变元素的样式，实现动态效果。 3. 事件冒泡和事件捕获：理解事件处理中的两种模式。 4. 跨文档消息传递（Cross-document messaging）：在不同源的框架或窗口间通信。 5. XPath...