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 相关文章推荐
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
详解Node全局变量global模块
Sep 28 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
详解React路由传参方法汇总记录
Nov 29 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中实现记住密码自动登录的代码
2011/03/02 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
PHP 实现链式操作
2021/03/09 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
Python中isnumeric()方法的使用简介
2015/05/19 Python
使用python实现链表操作
2018/01/26 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
利用python求积分的实例
2019/07/03 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
python怎么对数字进行过滤
2020/07/05 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
时尚圣经:The Fashion Bible
2019/03/03 全球购物
珍珠奶茶店创业计划书
2014/01/11 职场文书
50岁生日感言
2014/01/23 职场文书
演讲比赛策划方案
2014/06/11 职场文书
挂职学习心得体会
2014/09/09 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
关于Python使用turtle库画任意图的问题
2022/04/01 Python
Python自动化实战之接口请求的实现
2022/05/30 Python