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数据填充.多选控制. ...
随机推荐
- 像素（px）到底是个什么单位
px,对于许多网页设计者来说,是最常用的CSS长度单位.然而,1px到底多长,恐怕没有多少人回答得上来. CSS长度本身有绝对长度和相对长度的区分. cm.pt之类的都是绝对长度,它们是物理长度——1 ...
- python学习笔记011——检查变量类型type()
>>> a = 1 >>> type(a) <class 'int'> >>> b = 1.0 >>> type(b ...
- USB的中断说明
STM32的USB模块可以产生三种中断:USB唤醒中断.USB高优先级中断和USB低优先级中断,在STM32的参考手册中没有详细说明这三种中断对应哪些事件,现说明如下: 1)USB唤醒中断:在中断向量 ...
- python 中 with 用法
前言 with 语句适用于对资源进行访问的场合,确保不管使用过程中是否发生异常都会执行必要的“清理”操作,释放资源, 比如文件使用后自动关闭/线程中锁的自动获取和释放等. 问题引出 如下代码: fil ...
- introduction to python for statistics,analysis笔记3
一.产生数组和矩阵 1.linspace(start,end,number),产生在start和end数之间number个数 >>> x = linspace(, , ) >& ...
- 使用matlab处理图像的基础知识
MATLAB基本函数一 矩阵运算 1.基本算数运算(加减乘除) + -运算要求矩阵维数相同,例m*n * /运算,例A=B*C,B矩阵是m*n矩阵,B是n*p矩阵,则A是m*p矩阵 A/B相当于A*i ...
- laravel建立一个分组控制器和分组路由
路由 Route::group(['domain' => 'laravel.8g.com','namespace' => 'Admin'],function() { Route::get( ...
- Django修改用户名密码的方法
1.python manage.py shell 2.from django.contrib.auth.models import User 3.user=User.objects.get(usern ...
- Spring 一二事（7） - annotation
之前的文章大多都是一带而过,一方面比较简单,一方面不是用的注解形式 在企业开发中,主要还是使用的注解来进行开发的 1 <!-- component:把一个类放入到spring容器中,该类就是一个 ...
- ASP.NET MVC 入门9、Action Filter 与 内置的Filter实现(介绍)
原帖地址:http://www.cnblogs.com/QLeelulu/archive/2008/10/09/1307660.html 有时候你想在调用action方法之前或者action方法之后处 ...