jQuery学习笔记[1] jQuery中的DOM操作
更新时间：2010年12月03日 19:09:58 作者：
jQuery中的DOM操作实现说明，学习DOM操作的朋友可以参考下。
DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM.
1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它.
JavaScript中的getElementById(),getElementsByTagName()...等方法.
例如:使用DOM Core来获取表单对象的方法:
document.getElementsByTagName("form");
2,HTML-DOM.
在使用JavaScript和DOM为HTML文件编写脚本的时候.有许多专属于HTML-DOM的属性.HTML-DOM的出现甚至比DOM Core还要早,它提供了一些更简明的记号来描述各种HTML元素的属性.
例如:使用HTML-DOM来获取表单对象的方法:
document.forms //HTML-DOM提供了一个forms对象.
3,CSS-DOM
CSS-DOM是针对CSS的操作.在JavaScript中CSS-DOM技术的主要作用是获取和设置style对象的各种属性.
例如:设置某元素style对象字体颜色的方法:element.style.color="red";
下面学习的是:jQuery中的DOM操作:
先构建出一棵DOM树:
<!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=gb2312" />
<title>jQuery中的DOM操作</title>
</head>
<body>
<p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
</html>
接下来的操作都是围绕这个DOM树而展开的.
1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它.
JavaScript中的getElementById(),getElementsByTagName()...等方法.
例如:使用DOM Core来获取表单对象的方法:
document.getElementsByTagName("form");
2,HTML-DOM.
在使用JavaScript和DOM为HTML文件编写脚本的时候.有许多专属于HTML-DOM的属性.HTML-DOM的出现甚至比DOM Core还要早,它提供了一些更简明的记号来描述各种HTML元素的属性.
例如:使用HTML-DOM来获取表单对象的方法:
document.forms //HTML-DOM提供了一个forms对象.
3,CSS-DOM
CSS-DOM是针对CSS的操作.在JavaScript中CSS-DOM技术的主要作用是获取和设置style对象的各种属性.
例如:设置某元素style对象字体颜色的方法:element.style.color="red";
下面学习的是:jQuery中的DOM操作:
先构建出一棵DOM树:
复制代码 代码如下:
<!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=gb2312" />
<title>jQuery中的DOM操作</title>
</head>
<body>
<p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
</html>
接下来的操作都是围绕这个DOM树而展开的.
相关文章
本文主要分享了jquery实现百叶窗效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
基于jquery的仿twitter的文本字数限制带提示效果插件，这里提示比较好，不是简单的限制，给用户更好的体验。2010-04-04
这篇文章主要介绍了jQuery控制Div拖拽效果完整实例,对jQuery控制拖拽效果的方法以注释形式给予了较为详细的介绍,便于读者理解代码含义,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码,涉及jquery鼠标事件及页面样式的动态切换效果实现技巧,非常简单实用,需要的朋友可以参考下2015-08-08
$.ajax()跟($.post(),$.get())最主要的差别就是 成功回调后,执行success. . $.post(),$.get()就只能简单的做下传递 ,返回. .后续工作没法继续.所以看情况调用2012-09-09
这篇文章主要介绍了jQuery实现的上传图片本地预览效果,结合实例形式分析了jQuery上传图片本地预览所涉及的相关页面元素属性动态操作实现技巧,需要的朋友可以参考下2018-03-03
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
今天分享一个新闻行情的jQUery插件，可以帮助大家使用比较小的页面区域来展示最新最重要的信息。2011-11-11![jQuery中[attribute=value]选择器用法实例](//img.jbzj.com/images/xgimg/bcimg7.png)
jQuery中[attribute=value]选择器用法实例
这篇文章主要介绍了jQuery中[attribute=value]选择器用法,实例分析了[attribute=value]选择器的功能、定义及给定属性及属性值元素的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
今天小编就为大家分享一篇关于AJAX在JQuery中的应用详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
鼠标经过table变色的效果，想必大家都有遇到过吧，其实实现并不难，在本文为大家详细介绍下jquery是如何实现的，感兴趣的朋友可以参看下2013-09-09
![jQuery中[attribute=value]选择器用法实例](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论