JQuery Object vs. DOM element
JQuery Object 和 DOM的区别
HTML DOM 定义了访问和操作HTML文档的标准方法。其中 document 是DOM 树的根对象 ,在浏览器宿主环境中,可以通过JS操作HTML DOM,例如:
document.getElementById("intro").innerHTML;
如果将DOM element alert 出来,其显示为 [object HTMLFormElement]
参考:http://www.w3school.com.cn/htmldom/index.asp
JQuery Object 包含了一个DOM element 的数组, 例如 $('form') 表示当前页面中所有form元素的JQuery object数组。
如果将JQuery Object alert 出来,其显示为 [object Object]
参考:http://api.jquery.com/Types/#jQuery
JQuery Object, DOM 互转
JQuery Object 转 DOM
如果确定该JQuery Object 只包含一个DOM对象,可以直接获取,例如
var domEle = $('#uniqueId').get(0);
如果是一组DOM对象,可以用each迭代,例如,打印所有checkbox的value代码。
$(':checkbox').each(function(){
console.log("DOM way: "+this.value);
console.log("JQuery way: "+$(this).val());
});
关于console.log(), 我也是今天才知道,在Chrome中,可以用Ctrl+Shift+I 打开调试Javascript 的console, 不仅可以打印log,还可以设置断点debug。 比alert 好用多了,看来还是要多看资料啊。
DOM 转 JQuery Object 就 更简单了, 用$( ) 包住 DOM Object 就可以了, 例如, $(document.getElementById("uniqueId"))
实战
页面上有多个form表单,要求在每个表单里的checkbox按照数据库中已有信息,进行预先勾选。
<html>
<head>
<title> Checkbox demo</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form").each(function(){
console.log("DOM Object" + this);
console.log("JQuery Object" + $(this));
var existingOpts = $(this).find('.existingOpts').val();
console.log("Checked options: "+ existingOpts );
$(this).find(':checkbox').each(function(){
if (existingOpts.indexOf($(this).val()) != -1)
{
$(this).attr('checked','checked');
}
});
});
});
</script> <body>
<form id='1'>
<input type="hidden" name="existingOpts" class='existingOpts' value="apple;orange;"/>
<input type="checkbox" id="mycheckbox" name="test.checkbox" value="apple"> Apple
<input type='checkbox' name='test.checkbox' value='orange'> Orange
</form>
<form id='2'>
<input type="hidden" name="existingOpts" class='existingOpts' value="apple;"/>
<input type='checkbox' name='test.checkbox' value='apple'>Apple
<input type='checkbox' name='test.checkbox' value='orange'>Orange
</form>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。
JQuery Object vs. DOM element的更多相关文章
- jQuery object and DOM Element
They're both objects but DOMElements are special objects. jQuery just wraps DOMElements in a Javascr ...
- How do I pull a native DOM element from a jQuery object? | jQuery Learning Center
How do I pull a native DOM element from a jQuery object? | jQuery Learning Center How do I pull a na ...
- jQuery核心之jQuery Object及其相关的常用方法
1.jQuery Object 和 原生的DOM对象之间有许多方法是不一样的,用jQuery的方法大部分情况下返回的是jQuery Object,但是jQuery也提供了一些方法可以很轻松的获取原生的 ...
- 惊叹jQuery(解决jQuery对象到DOM的转换)
jQuery是一个javascript框架,但绝对不是通常意义上的一些包装,个人感觉是一个改变js控制方式的框架.我们可以像美工通过写css分离页面代码一样,通过jQuery来分离页面与效果..下面转 ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery基础教程-第8章-002Adding jQuery object methods
一.Object method context 1.We have seen that adding global functions requires extending the jQuery ob ...
- jQuery对象与dom对象的转换
一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...
- Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
- jQuery对象和DOM对象的相关知识
所谓的DOM就是Document Object Model(文档对象模型)的缩写,或许是我水平低的缘故,感觉就是HTML的标记元素嘛,所以作者画了下面的图: 像这样的元素,就是所谓的DOM对象,获取值 ...
随机推荐
- Bank,我只是来完成作业的
写这个Bank我需要有:开户,取款,存款,转账,查询余额,退出功能. 这样我需要有两个类:Bank,User.一个Main入口. 先看这个User,他定义了各个需要的属性(字段)和字段的属性(虽然在这 ...
- GDB中文手册
用GDB调试程序GDB概述 2使用GDB 5GDB中运行UNIX的shell程序 8在GDB中运行程序 8调试已运行的程序 两种方法: 9暂停 / 恢复程序运行 9一.设置断点(BreakPoint) ...
- ios获取CELLID,LAC等信息方法
搞了一个来月的这个东西了,还是没有完全解决问题,下面方法可以获取简单的Cell信息,方法一://CoreTelephony.h//主要就这两个结构体,其他需要的话,自己添加struct CTServe ...
- 基于web的IM软件通信原理分析
关于IM(InstantMessaging)即时通信类软件(如微信,QQ),大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM或桌面IM软件类的通信原理介绍也较多,此处不再赘述.而 ...
- Android stuido viewpagerindicator的使用
Top Level Build.gradle buildscript { repositories { maven { url "http://dl.bintray.com/populov/ ...
- VS Copy Files after build
<Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" /> <ItemGroup> ...
- nokogiri如何使用
直接来个简单的代码实例就明白啦! require 'nokogiri' xml_data=<<XML <library> <NAME><![CDATA[Fav ...
- 黄聪:详解 ManualResetEvent(转)
原文:http://www.cnblogs.com/li-peng/p/3291306.html 今天详细说一下ManualResetEvent 它可以通知一个或多个正在等待的线程已发生事件,允许线程 ...
- Yii里表单的操作方法(展示渲染待续......)
<?php$form=\yii\widgets\ActiveForm::begin(['action'=>\yii\helpers\Url::to('name/create')]);ech ...
- 文件_ _android从资源文件中读取文件流并显示的方法
======== 1 android从资源文件中读取文件流并显示的方法. 在android中,假如有的文本文件,比如TXT放在raw下,要直接读取出来,放到屏幕中显示,可以这样: private ...