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树而展开的.
相关推荐
-
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封装的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多项选项卡的实现思路附样式及代码
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实现标签支持图文排列带上下箭头按钮的选项卡
带上下箭头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
-
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 操作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;
-
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自动切换/点击切换选项卡效果的小例子
复制代码 代码如下: <!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节点实用DOM操作案例
本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考. 在做一个项目时,需要dom节点移动,如以下代码: 复制代码 代码如下: <div></div> <p></p> 需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便: 复制代码 代码如下: $('div').append($('p')) 这样即可把p标签移动到div标签里,千万不要写成这样: 复制代码 代码如下: $('div').a
-
原生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
随机推荐
- ASP 处理JSON数据的实现代码
- yii框架redis结合php实现秒杀效果(实例代码)
- Python字符串逐字符或逐词反转方法
- vue父组件通过props如何向子组件传递方法详解
- vue.js实现用户评论、登录、注册、及修改信息功能
- 手把手教你清理系统垃圾文件
- canvas雪花效果核心代码分享
- javascript特效实现——当前时间和倒计时效果的简单实例
- ASP.NET中内嵌页面代码的一个问题
- 详解在Docker容器中运行Spring Boot应用
- javascript控制在光标位置插入文字适合表情的插入
- asp中cint与clng的区别分析
- SQL Server2016正式版安装配置方法图文教程
- 基于JQuery的浮动DIV显示提示信息并自动隐藏
- Flex ShareObject简单应用
- 一些优化Nginx服务器的技巧简介
- Android获取当前手机网络类型(2g、3g、4g、wifi)以及手机型号、版本号代码
- Win7下mysql5.5安装图文教程
- iOS中图片的解压缩到渲染过程详解
- 易语言画板绘制课程表方法