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数据填充.多选控制. ...
随机推荐
- pythonl练习笔记——threading线程中的事件Event
1 事件Event 使用方法:e = threading.Event() Event对象主要用于线程间通信,确切地说是用于主线程控制其他线程的执行. Event事件提供了三个方法:wait等待.cle ...
- JMeter学习笔记---性能分析
图像结果: 通过观察平均采样响应时长,用户可以直观地看到,随着并发压力的加大,以及性能测试时间的延长,系统性能所发生的变化.正常情况下,平均采样响应时长曲线应该是平滑的,并大致平行于图像下边界. 异常 ...
- eclipse软件与git配合使用创建git仓库
一.在eclipse上安装git,和安装其他插件一样 help->Install new software->add... 在弹出框中输入name:git,location:http:// ...
- t:formvalid中定义callback函数
如果dialog="true"的话 callback="@Override functionName" 调用的是当前页面的方法 call ...
- javascript linkedlist data structures
在使用C++的时候我们经常会使用到各种容器,这些容器其实就是一种数据结构.在java中其实也是如此.但是由于javascript只给我们提供了一种内置的数据结构数组,准备来说是对象.没有我们常见的那些 ...
- Eclipse color theme jsp javascript显示问题
Q: 在eclipse 中,设置为sublime格式时, 在编辑器中,jsp中嵌套的javascript底色非常难看. A:在如下位置进行设置,Window -> Preferences-> ...
- 【Android】17.2 Activity与Local Service的绑定
分类:C#.Android.VS2015: 创建日期:2016-03-03 一.简介 如果服务是你的应用程序所私有的,即服务(Service)与客户端(Activity)都在同一个项目中(大部分应用程 ...
- Volley 解析
Volley Request处理流程 RequestQueue类中有三个基本的队列.调用RequestQueue.add(request)增加的请求会先增加mCacheQueue(优先级堵塞队列)由C ...
- canvas.drawBitmap(bitmap, src, dst, paint)
// GameView.drawImage(canvas, mBitDestTop, miDTX, mBitQQ.getHeight(), mBitDestTop.getWidth(), mBitDe ...
- Oracle PLSQL Demo - 17.游标查询个别字段（非整表）
declare Type ref_cur_variable IS REF cursor; cur_variable ref_cur_variable; v_empno scott.emp.empno% ...