jQuery学习笔记[1] jQuery中的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树而展开的.

赞 (0)

相关推荐

  • jQuery学习笔记之jQuery的DOM操作

    一.节点的操作 1.查找节点: var $var_1=$("htmltype");   //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=

  • jQuery多项选项卡的实现思路附样式及代码

    css样式: 复制代码 代码如下: @CHARSET "UTF-8"; #div{ margin-bottom:10px; position:relative; } #div1{ width:153px; padding-top:0px; padding-left:0px; position:absolute; } #div1 ul{ margin-top:0px; padding-left:0px; background-color:#ccc; list-style:none; }

  • jQuery 选择器、DOM操作、事件、动画

    Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

  • jQuery移动和复制dom节点实用DOM操作案例

    本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考. 在做一个项目时,需要dom节点移动,如以下代码: 复制代码 代码如下: <div></div> <p></p> 需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便: 复制代码 代码如下: $('div').append($('p')) 这样即可把p标签移动到div标签里,千万不要写成这样: 复制代码 代码如下: $('div').a

  • jquery.idTabs 选项卡使用示例代码

    idTabs是基于Jquery编写封装的一个插件,主要用于实现选项卡功能,它操作简单,只需到官网:http://www.sunsean.com/idTabs/下载插件JS脚本文件,并引用到网站中即可 <script src="js/jquery.idTabs.min.js" type="text/javascript"></script> 页面HTML布局及调用如下: <div id="tabsbox" class=

  • jQuery封装的tab选项卡插件分享

    在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 创建选项卡组件 使用方法: html结构 <div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="#tabs-2">tab-2</a></li> <

  • jQuery之选项卡的简单实现

    jQuery实现选项卡功能.首先将界面搭建好. 有导航头tab_menu,还有内容tab_box. 要实现的效果就是,点击后,将相应的内容显示出来,其他内容隐藏掉. 同时为了展现选中状态,为选中的项添加背景,以示区别. 这一次,我自己写了代码,先看html部分: 复制代码 代码如下: <div class="tab">    <div class="tab_menu">        <ul>            <li

  • 全面解析DOM操作和jQuery实现选项移动操作代码分享

    DOM: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>DOM选项移动操作</title> <style> select { width: px; height: px; } div { display: inline-block; width: px } </style> <

  • jQuery自动切换/点击切换选项卡效果的小例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">&

  • jquery 操作DOM案例代码分享

    jquery 操作DOM案例代码分享

    实例如下: 复制代码 代码如下: <style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left;

  • 原生js和jQuery写的网页选项卡特效对比

    总的来说思路比较简单,就是先获取节点,然后对节点进行相应的处理,下面是完整的页面代码: 原生js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>原生js tab</tit

  • jquery实现标签支持图文排列带上下箭头按钮的选项卡

    带上下箭头jquery垂直tab选项卡切换标签,技持左侧列表上下滚动,滚动到底部带信息提示. 复制代码 代码如下: <!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

随机推荐