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对象转换的更多相关文章

  1. javaScript操作DOM对象(看三遍,敲三遍,写三遍! 不会你找我)!!

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  2. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  3. JavaScript之DOM对象的获取

    之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...

  4. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  5. jQuery对象与JS原生dom对象之间的转换

    jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...

  6. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

  7. JavaScript的DOM对象和jQuery对象的对比

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象

    一.DOM操作分类 使用JavaScript操作DOM时通常分为三类:DOM    Core.HTMl--DOM和CSS-DOM 二.访问节点 节点属性 三.节点信息 四.操作节点的属性 语法: ge ...

  9. JS、JQuery和ExtJs动态创建DOM对象

    做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...

随机推荐

  1. JMeter学习笔记--JMeter前置处理器

    前置处理器被用来修改作用域内的采样器 HTML 链接解析器:解析从服务器得到的HTML响应,并从中提取链接和表单,使用perl型的正则表达式来寻求匹配项. HTML URL重写修饰符:使用URL重写来 ...

  2. Objective-C中的@Property具体解释

    Objective-C中的@Property具体解释 @Property (属性) class vairs 这个属性有nonatomic. strong. weak, retain. copy等等 我 ...

  3. Note for video Machine Learning and Data Mining——training vs Testing

    Here is the note for lecture five. There will be several points  1. Training and Testing  Both of th ...

  4. Vue 最传统的新增行,删除行,提交的数据整合

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. keras在win7下环境搭建

    无gpu安装过程:一.卸载之前版本.  把之前单独安装的Python等统统卸载掉.学python的时候直接安装了python2.7,先把他卸载掉,因为Anaconda里边包含了python.二.安装A ...

  6. Dom4j解析和sax解析xml

    xml基础知识 1)标签对大小写敏感,2)xml解析方式有两种dom解析和sax解析  3)常用的解析工具有dom的dom4j和sax的sax解析工具 4)文档声明中使用<?xml versio ...

  7. 不能与abstruct共同修饰方法的关键字

    一 抽象类:动态方法至少有一个是抽象方法. 其中abstruct关键字修饰的方法不能与哪些关键字共同修饰? 1private 因为private修饰的方法在子类中是隐藏的.不可见的.而abstruct ...

  8. unity, 查看内置shader源码

    1,建一个球体. 2,建一个材质,将材质拖到球体上. 3,在材质的shader下拉列表中选择想查看的内置shader,点材质栏右上设置按钮->Select Shader 进入shader面板. ...

  9. JAVA class 编译jar。 控制台使用jar

    //编译jar jar -cvf  -mgtvEncode.jar -mgtvEncode.class //使用jar java -cp mgtvEncode.jar mgtvEncode

  10. 【Android】12.1 Intent基本概念

    分类:C#.Android.VS2015: 创建日期:2016-02-23 一.简介 Intent:意图,含义就是你想利用它调用哪个组件实现相关的功能,比如调用相机组件实现拍照.调用Contact组件 ...