jquery对象和javascript的dom对象转换
Jquery框架为jquery对象定义了独立使用的方法和属性，它无法直接调用dom对象的方法，dom对象也无法直接调用jquery对象的方法和属性。
Jquery对象和dom对象是可以相互转换的，因为他们所操作的对象都是dom元素，只不过jquery对象包含了多个dom元素，而dom对象本身就是一个dom元素，简单地说，jquery对象是dom元素的数组，称为类数组，而dom对象就是单个的dom元素。
1.把jquery对象转换成dom对象
（1）借助数组下标来读取jquery对象集合中的某个dom元素对象。
Var $li = $(‘li’);//jquery对象
Var li = $li[0];//dom对象
（2）借助jquery对象的get()方法
Var $li = $(‘li’);//jquery对象
Var li = $li.get(0);//dom对象
2.dom对象转换为jquery对象
Var li = document.getElementsByTagName(‘div’);
Var $li = $(li[o]);//把第一个div元素封装为jquery对象
Var li = document.getElementsByTagName(‘div’);
Var $li = $(li);//把所以的div元素封装为jquery对象
Load事件必须等到网页中所以内容全部加载完毕后才执行。
当网页中内容很多时，load事件就会延迟
Jquery的ready事件是在dom结构绘制完毕后就执行，也就是说它在外部文件加载之前就执行了，ready事件先于load事件。
Load事件只能被编写一次，但是ready事件可以在同一个文档中多次定义。
<html>
<head>
</head>
<body>
<div class="panel"/>wlecome</div>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('<input type="button" value="click me" /><input type="button" value="triggle click me" /><input type="button" value="detach handler" /><input type="button" value="show/hide text" />').appendTo($('body'));
$('input[type="button"]')
.eq(0).click(function(){
$(this).val("红色").addClass('red'); }).end().eq(1).click(function(){
alert(1);
}).end().eq(2).click(function(){
alert(2);
}).end().eq(3).toggle(function(){
$('.panel').hide('slow');
},function(){
$('.panel').show('slow');
}
);
});
</script>
</body>
<html/>
jquery对象和javascript的dom对象转换的更多相关文章
- javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- JavaScript之DOM对象的获取
之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...
- JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
- jQuery对象与JS原生dom对象之间的转换
jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...
- JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
- JavaScript的DOM对象和jQuery对象的对比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象
一.DOM操作分类 使用JavaScript操作DOM时通常分为三类:DOM Core.HTMl--DOM和CSS-DOM 二.访问节点 节点属性 三.节点信息 四.操作节点的属性 语法: ge ...
- JS、JQuery和ExtJs动态创建DOM对象
做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...
随机推荐
- python学习笔记013——包package
1 包(模块包)package 1.1 包的定义 包是将模块以文件夹的组织形式进行分组管理的方法 1.2 作用 分类管理,有利于防止命名冲突 可以在需要时加载一个或部分模块,而不是全部模块 mypac ...
- FA_固定资产六大业务增加、修改、报废、在建、折旧、盘点概述（概念）
2014-06-04 Created By BaoXinjian
- 推荐系统学习07-Waffles
介绍 Waffles 英文原意是蜂蜜甜饼,在这里却指代一个很强大的机器学习的开源工具包. Waffles里包括的算法特别多.涉及机器学习的方方面面,推荐系统位于当中的Waffles_recommend ...
- 机器学习(5): K-means 算法
3. K-means 算法: 3.1 Clustering 中的经典算法,数据挖掘十大经典算法之一 3.2 算法接受参数 k :然后将事先输入的n个数据对象划分为 k个聚类以便 ...
- jenkins 执行远程linux命令
在Jenkins中进行构建时,可能需要首先SSH登录到一个远程服务器以执行必要的脚本,然后再执行构建.这时,需要安装SSH Plugin,并进行如下配置.1.在Jenkins界面,系统管理->管 ...
- textureCache中的等价路径问题
自己的引擎里做了个简单的TextueCache,每次新创建一个纹理,先到TextureCache里查找有没有路径相同的,如果有就直接返回纹理,如果没有加载图片创建纹理并将图片路径缓存起来.另外为了标准 ...
- Redis(二):Redis的九大应用场景
毫无疑问,Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数据结构和数据操作,为不同的大象 ...
- Jenkins 使用学习笔记
3.1 Jenkins安装 2 3.1.1 Jenkins下载 2 3.1.2 Jenkins 安装 2 3.1.3 Jenkins 目录结构 3 3. ...
- 如何设置Docker容器中Java应用的内存限制
如果使用官方的Java镜像,或者基于Java镜像构建的Docker镜像,都可以通过传递 JAVA_OPTS 环境变量来轻松地设置JVM的内存参数.比如,对于官方Tomcat 镜像,我们可以执行下面命令 ...
- News summary on C# and .NET
(keep updating...) Roslyn http://blogs.msdn.com/b/ericlippert/archive/2012/06/05/announcing-microsof ...