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="color:#c00; width:600px;"> <strong>http://onestopweb.cn/</strong> </div> <div title="demo" class="green"> <strong>http://onestopweb.cn/</strong> </div> </body> </html>
style.css
.red{ color:red;}
.green{ color:green;}
.bg{ background-color:#ccc;}
.size{ font-size:20px;}
demo.js
$(function(){
//alert($('div').css('color'));
//$('div').css('color','red');
var box = $('div').css(['color','width','height']);
/*
for(var i in box){
alert(i+':'+box[i]);
}
$.each(box,function(attr,value){
alert(attr+':'+value);
});
//alert($('div')[0]);
$('div').each(function(index,element){
alert(index+':'+element);
});
//$('div').css('color','red').css('background-color','#ccc');
$('div').css({
'color':'red',
'background-color':'#ddd',
'width':'200px',
'height':'30px'
});
$('div').css('width',function(index,value){
//局部操作，很舒服
return parseInt(value)-500+'px';
});
//$('div').addClass('red');
//$('div').addClass('bg');
//$('div').addClass('red bg size');
//$('div').removeClass('bg');
//$('div').removeClass('red size');
$('div').click(function(){
$(this).toggleClass('red size');//两个样式之间的切换，默认样式和指定样式的切换
});
var count =0;
$('div').click(function(){
$(this).toggleClass('red size',count++%2==0);//频率的问题
});
$('div').click(function(){
//这里只是 click 的局部，而又是 toggle 的全局
$(this).toggleClass('red');
if($(this).hasClass('red')){
$(this).removeClass('green')
}else{
//$(this).toggleClass('green');
$(this).addClass('green');
}
});
$('div').click(function(){
$(this).toggleClass(function(){
return $(this).hasClass('red')?'green':'red';
});
});
$('div').click(function(){
$(this).toggleClass(function(){
//局部
if($(this).hasClass('red')){
$(this).removeClass('red');
return 'green';
}else{
$(this).removeClass('green');
return 'red';
}
});
});
*/
var count = 0;
$(document).click(function(){
$('div').toggleClass(function(index,className,switchBool){
alert(index+':'+className+':'+switchBool);
//局部
if($(this).hasClass('red')){
$(this).removeClass('red');
return 'green';
}else{
$(this).removeClass('green');
return 'red';
}
},count++%2==0);
});
});
相关推荐
在本节中，我们将深入探讨基础DOM（Document Object Model）和CSS操作的下部分内容。DOM是Web开发中的一个核心概念，它将HTML或XML文档结构化为一个可编程的节点树，允许我们通过JavaScript或其他脚本语言动态地访问...
在本章中，我们将深入探讨基础的DOM（Document Object Model）和CSS操作，这是Web开发中的核心技能。DOM是HTML和XML文档的编程接口，它允许我们通过JavaScript或其他编程语言来动态地改变网页内容。而CSS则是样式表...
本章主要探讨如何利用JavaScript动态地改变CSS样式，从而实现丰富的交互效果。 首先，我们需要理解JavaScript如何与CSS相互作用。在HTML文档中，CSS用于定义元素的外观和布局，而JavaScript则提供了操作这些样式的...
在HTML第五章中，我们主要探讨的是在网页制作过程中使用的各种工具和技术，这些工具极大地简化了网页设计和开发的过程，让工作变得更加高效和便捷。 一、文本编辑器 在HTML开发中，选择一个好的文本编辑器至关重要...
总结，DOM节点操作是Web开发中不可或缺的一部分，熟练掌握这些方法和概念将使你能够有效地操控页面元素，实现丰富的交互效果。无论是添加、删除还是修改元素，或者处理事件，都需要对DOM有深入的理解。通过不断地...
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
在本资源中，我们主要关注的是jQuery的基础教程，特别是关于操作文档对象模型（DOM）的部分。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这个"Book05_jQuery_...
其中包括：第一章 HTML基础 第二章 HTML基础(2).ppt 第三章 CSS样式表_语法规则 第四章 CSS样式表_样式控制 第五章 CSS样式表_盒子模型.ppt 第六章 CSS样式表_页面布局 第七章 Javascript基础语法 第八章 Javascript...
`chapter12`、`chapter06`、`chapter08`等章节同样涵盖了其他关键主题，比如第6章可能介绍了DOM的创建和修改，第8章可能是关于DOM遍历和节点操作，第12章可能涉及了高级DOM技巧或最佳实践。 通过对这些文件的学习，...
4. **第04章**：可能涉及JavaScript的基础语法，变量、数据类型、条件语句、循环等，以及DOM（文档对象模型）操作，如获取元素、修改元素内容。 5. **第05章**：可能涵盖JavaScript事件处理，如点击事件、鼠标移动...
- `chapterXX`：每个章节的代码文件夹，如`chapter03`、`chapter05`等，对应书中各章的示例代码。 - `styles`：存放CSS样式文件，用于美化示例页面。 - `images`：可能包含书中示例用到的图片资源。 通过这个...
**第五章：CSS选择器与优先级** 在这一部分，学员会深入理解CSS选择器的种类（类选择器、ID选择器、属性选择器等）和优先级规则，这对于精确控制页面样式至关重要。 **第六章：CSS3新特性** 这一章将涵盖CSS3的新...
在“掌握Ajax”系列的第五部分中，我们深入探讨了如何使用JavaScript操纵文档对象模型（DOM），以实现实时更新Web页面，而无需进行完整的页面重载。这一技术的核心在于理解和操作DOM树，即浏览器解析HTML和CSS后构建...
5. `document.write()`：第五个例子使用`document.write()`向HTML输出流中写入文本。这个方法在文档加载时直接写入内容，如果在文档加载完成后调用，会清空整个页面内容并替换为新的文本。 6. 其他DOM操作：...
在IT领域，jQuery是一个广泛使用的JavaScript库，...总之，jQuery基础教程第5章会涵盖这些核心概念，并通过实例演示如何在实践中运用它们。通过深入学习和实践，你可以掌握这个强大的库，从而提高Web开发的效率和质量。
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
2. 动态加载和修改CSS：通过DOM操作来改变元素的样式，实现动态效果。 3. 事件冒泡和事件捕获：理解事件处理中的两种模式。 4. 跨文档消息传递（Cross-document messaging）：在不同源的框架或窗口间通信。 5. XPath...
JavaScript是实现网页交互性的关键，教学大纲会涵盖变量、数据类型、控制流、函数等基础语法，以及DOM操作、事件处理、Ajax异步通信等高级话题。学生将学习如何编写能够响应用户行为的脚本，创建动态效果和交互式...