jQuery之DOM对象和jQuery对象的转换与区别分析


Posted in Javascript onJanuary 08, 2015

本文实例分析了DOM对象和jQuery对象的转换与区别。分享给大家供大家参考。具体分析如下:

jQuery Hello World程序:

<script type="text/javascript" src="xxx//jquery-x.y.z.js">
引入jQuery.存在两个版本,jquery-x.y.z.min.js是精简压缩版,不带min的是开发版,代码中的注释和缩进等都被保留了.

注意路径中的"/"需要转义,即用"//".

$()符号将DOM对象转化为jQuery对象.
Hello World程序如下:

<html>

<head>

    <title>Hello jQuery</title>

    <script type="text/javascript" src="libs//jquery-1.11.2.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            alert("Hello World");

        });

    </script>

</head>

<body>
</body>

</html>

$(document).ready和window.onload的比较

首先看window.onload:

window.onload = sayHello;

window.onload = sayWorld;

 

function sayHello() {

    alert("Hello");

}

function sayWorld() {

    alert("World");

}

后面的方法会覆盖掉前面的方法,也即弹泡最后只显示一个,即World的那个.

如果采用$(document).ready,则方法会串联起来,即先显示Hello的alert,再显示World的.

$(document).ready(sayHello);

$(document).ready(sayWorld);

 

function sayHello() {

    alert("Hello");

}

function sayWorld() {

    alert("World");

}

这样就可以关联多个方法.
另一个很小的差别,就是ready方法的执行会稍微靠前一点.widow.onload会等待DOM准备好,并且所有绑定结束,而ready只能DOM准备好,其他工作可能还没有做好.

实例:给每一个超链接对象附加onclick事件

首先,body中添加多个超链接对象:

<body>

    <a href="#">test1</a><br>

    <a href="#">test2</a><br>

    <a href="#">test3</a><br>

    <a href="#">test4</a>

</body>

要给每个对象添加onclick事件,可以有多种方法:
首先,可以在每个a标签里面写onclick属性;
其次,可以利用window.onload添加一个方法,获取所有的标签,统一添加事件,如下:

window.onload = function () {

    var myLinks = document.getElementsByTagName("a");

    for(var i = 0; i < myLinks.length; ++i){

        myLinks[i].onclick = function(){

            alert("Hello link: " + i);

        }

    }

}

注意,这里我犯了一个错误,我本来以为alert的数目会递增,结果实际运行的结果是每一个alert都是4.
这是因为js没有块级作用域,变量i引用的是for里的那个,循环后变成了4.也即,onclick事件发生的时候才去取i的值,当然都是4了.
 
下面用jQuery实现这一功能:

$(document).ready(function () {

    $("a").click(function () {

        alert("Hello link from jQuery!");

    });

});

jQuery中的$()符号会获得页面当中的所有合适的元素.
所以上面的代码隐含了遍历的过程,给每一个元素都加上了事件处理函数.
click方法是jQuery对象提供的方法.
onclick是DOM对象的属性.
DOM里面的很多属性到jQuery里面就变成了方法.

DOM对象和jQuery对象之间的相互转换与区别

看一个例子,首先加一个p标签:

<p id="clickMe">Click Me!</p>

先获得一个DOM对象,然后将其转换为一个jQuery对象:

//Part 1: DOM --> jQuery

//DOM object:

var pElement = document.getElementsByTagName("p")[0];

alert("DOM pElement: " + pElement.innerHTML);

//Convert DOM object to jQuery object:

var pElementjQuery = $(pElement);

alert("jQuery pElementjQuery: " + pElementjQuery.html());

也可以先获得一个jQuery对象,再将其转换为DOM对象:

//Part 2: jQuery --> DOM

//jQuery object array:

var clickMejQuery = $("#clickMe");

//Convert jQuery object to DOM object (2 ways):

//way 1:

var domClickMe1 = clickMejQuery[0];

alert("dom1: " + domClickMe1.innerHTML);
//way 2:

var domClickMe2 = clickMejQuery.get(0);

alert("dom2: " + domClickMe2.innerHTML);

再次注意:jQuery中$()获取的是一个满足条件的所有元素的数组.

小总结:

$("字符串")会返回满足条件的所有元素的一个数组,其中:
字符串以#开头,表示id;
字符串以.开头,表示CSS的class名;
若非以上两种情况,则改字符串表示标签名.

$(DOM对象)可以得到一个jQuery对象.

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 #Javascript
jQuery中siblings()方法用法实例
Jan 08 #Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 #Javascript
jQuery中prevUntil()方法用法实例
Jan 08 #Javascript
jQuery中prevAll()方法用法实例
Jan 08 #Javascript
jQuery中prev()方法用法实例
Jan 08 #Javascript
深入探密Javascript数组方法
Jan 08 #Javascript
You might like
php下使用以下代码连接并测试
2008/04/09 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
快速入门Vue
2016/12/19 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
jQuery设计思想
2017/03/07 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
浅谈Python 的枚举 Enum
2017/06/12 Python
python3爬虫之设计签名小程序
2018/06/19 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python爬虫超时的处理的实例
2018/12/19 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
python为什么要安装到c盘
2020/07/20 Python
2014年综治宣传月活动总结
2014/04/28 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
电力安全学习心得体会
2016/01/18 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS