- 浏览: 2271806 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (357)
- J2EE (49)
- JavaScript (40)
- Spring (19)
- Struts (5)
- CSS (8)
- Hibernate (16)
- Java (67)
- DWR (4)
- JSON (3)
- XFIRE (1)
- Tomcat (1)
- Ant (2)
- 设计模式 (2)
- 经典收藏 (2)
- JSP (10)
- Linux (0)
- WebLogic (11)
- myeclipse (13)
- Buffalo (4)
- 文件上传相关 (1)
- oracle (33)
- html (6)
- JSTL (3)
- SVN (2)
- GIT (1)
- 孙卫琴(Java网络编程精解) (1)
- DOM4J (2)
- Swing (1)
- AJAX (1)
- Eclipse (5)
- 日志组件 (3)
- PowerDesigner (1)
- Jquery (22)
- IT技术开发相关网址 (1)
- Nutz (1)
- 其它 (1)
- Velocity (3)
- WebService (1)
- MySql (2)
- Android (1)
- Maven (2)
- Quartz (11)
- Lucene (1)
- springsource (1)
- Junit (1)
- Activiti (0)
最新评论
-
yzlseu:
拼凑,没有营养
Activiti进阶—分配组任务 -
zhangsenhao:
非常赞!代码很清楚
SpringMVC3.0+MyIbatis3.0(分页示例) -
xiamw2000:
分页写得不对,应该是 : order by ${orderNa ...
SpringMVC3.0+MyIbatis3.0(分页示例) -
sheertewtw:
...
SpringMVC:上传与下载 -
kingtoon:
...
XSS之xssprotect
转载:jQuery对象和DOM对象【jQuery开发注意点(一)】
http://www.blogjava.net/jy00314996/archive/2009/02/17/255083.html
学习jQuery已经3天了,总结一些注意的地方供给和我一样的初学者
jQuery对象和DOM对象;这是我第一个碰到的问题。
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象;
DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法,但是不能使用jQuery里的方法。例如:document.getElementById("img").src="test.jpg";这里的document.getElementById("img")就是DOM对象;
$("#img").attr("src","test.jpg"); 和document.getElementById("img").src="test.jpg";是等价的,是正确的,但是$("#img").src="test.jpg";或者document.getElementById("img").attr("src","test.jpg"); 都是错误的。
在说一个例子:就是this,我在写jQuery的时候经常这样写:this.attr("src","test.jpg"); 可是就是出错。其实this是DOM对象,而.attr("src","test.jpg") 是jQuery方法,所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象,例如$(this).attr("src","test.jpg");
1.DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后,就可以任意使用jQuery的方法了。
2.jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
我的jQuery学习笔记
http://www.blogjava.net/jy00314996/archive/2009/02/17/255081.html
http://www.blogjava.net/jy00314996/archive/2009/02/17/255083.html
学习jQuery已经3天了,总结一些注意的地方供给和我一样的初学者
jQuery对象和DOM对象;这是我第一个碰到的问题。
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象;
DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法,但是不能使用jQuery里的方法。例如:document.getElementById("img").src="test.jpg";这里的document.getElementById("img")就是DOM对象;
$("#img").attr("src","test.jpg"); 和document.getElementById("img").src="test.jpg";是等价的,是正确的,但是$("#img").src="test.jpg";或者document.getElementById("img").attr("src","test.jpg"); 都是错误的。
在说一个例子:就是this,我在写jQuery的时候经常这样写:this.attr("src","test.jpg"); 可是就是出错。其实this是DOM对象,而.attr("src","test.jpg") 是jQuery方法,所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象,例如$(this).attr("src","test.jpg");
1.DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后,就可以任意使用jQuery的方法了。
2.jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
我的jQuery学习笔记
http://www.blogjava.net/jy00314996/archive/2009/02/17/255081.html
/****************************** * jQuery学习笔记 * @author Linvo ******************************/ $() = $(document) //实现window.onload()效果 $().ready( function(){ //需要执行的内容 } ); //获取DOM元素(返回值为jQuery对象) $(element) //相应元素名的 $(.classname) //class值匹配的 $(element.classname) //相应元素中,class值匹配的 $(#id) //id匹配的 $(element#id) //相应元素中,id匹配的 $(element1 > element2) //元素一 下 的所有元素二(只包括儿子) $(element1 element2) //元素一 中 的所有元素二(包括子孙等) $(element1 + element2) //元素一 后 的所有元素二(代码后) $(element1 ~ element2) //与元素一 并列 的所有元素二(兄弟元素二) $(#id).html("") //设置 getElementById("id").innerHTML = "" $(#id).html() //取出 getElementById("id").innerHTML //动画出现效果 $(#id).show(speed, [callback]) $(#id).slideDown(speed, [callback]) //在<p>外面包围另一个结构(html代码/元素) $("p").wrap("<div class='wrap'></div>") $("p").wrap(document.getElementById('content')) $("p").append("<b>Hello</b>"); //<p>I would like to say: <b>Hello</b></p> $("p").prepend("<b>Hello</b>"); //<p><b>Hello</b>I would like to say: </p> $("p").before("<b>Hello</b>"); //<b>Hello</b><p>I would like to say: </p> $("p").after("<b>Hello</b>"); //<p>I would like to say: </p><b>Hello</b> //【删除相应class的p元素】 //<p class="classname">AAA</p> BBB <p>CCC</p> //BBB <p>CCC</p> $("p").remove(".classname"); //获取具有某属性值的相应元素 $("input[name=qq]") //获取<input name="qq" type="text" />元素 //属性与值关系 = //等于 *= //包含该值 != //不包含该值 ^= //以该值开头 $= //以该值结尾 //为每一个匹配的元素执行该函数 $(element).each(function(){ //需要执行的内容 }) /* jQuery中用post和get方法 (ajax高层抽象方法,对ajax方法进行了封装) 【当JQ中用post方式】 PHP用$_POST接收时,只有n2 PHP用$_GET接收时,只有n1 【当JQ中用get方式】 PHP用$_GET接收,n1 n2都有 PHP用$_POST接收时,都没有 */ $.post("do.php?n1=a", {n2: "b"}, function(data){ alert("Data Loaded: " + data); } ); //DOM对象 -> jQuery对象 //$(DOM对象) var v = document.getElementById("id"); //DOM对象 v var $v = $(v); //jQuery对象 $v //jQuery对象 -> DOM对象 //jQuery对象.get(0) 或者 jQuery对象[0] var $v = $("#id"); //jQuery对象 $v var v = $v.get(0); //DOM对象 v var v = $v[0]; //DOM对象 v $(element).get(); //获取指定元素的集合 //jQuery用ajax方法(ajax低层方法) $.ajax({ type: "POST", //POST时PHP中用$_POST接收,GET反之。 url: "do.php", data: "n1="+x+"&n2="+y, success: function(data){ alert( "Data Saved: " + data ); } }); //序列表表格内容为请求字符串 //返回值:(例)name=linvo&age=22 $("form").serialize() //序列化整个表单元素内容 $("input[type=text]").serialize() //序列化指定元素内容(例) $(element).empty(); //移除指定元素下所有元素 /* CSS设置 */ $(element).addClass("classname"); //为指定元素添加css样式 $(element).removeClass("classname") //移除指定元素的css样式 $(element).toggleClass("classname") //指定元素的css样式,有则删除,无则添加 $(element).css("attname"); //获取指定元素相应属性的值(attname例:color) $(element).css("attname","value"); //设置……属性值(例:"color","#FF0000") $(element).css({ "margin-left": "10px", "background-color": "blue" }); //使用“名/值对”进行批量设置……(例子见自身) $(element1).next(element2) //与指定元素一 紧邻 的指定元素二 $(element1).parent().is(element2) //元素一的父元素在元素二的集合中吗 //模仿鼠标悬停事件 //hover(over,out) //over:在上方执行 | out:移出时执行 $(element).hover( function(){ //在上方执行 }, function(){ //移出时执行 } )
发表评论
-
jQuery图表(jqPlot,Highcharts)
2012-05-18 00:48 23511jQuery图表在http://www.oschina.net ... -
jQuery之Ztree
2011-10-19 17:14 17542参考资料 1 spring+struts2+hibernate ... -
jQuery之弹出层(用于提示)
2011-10-19 10:26 2257参考了权威指南的部分代码 实现效果:单击按钮显示层,在单击就 ... -
jQuery之get(txt,xml,json二点注意事项)
2011-10-18 14:42 5659参考资料 1 jQuery ajax - get() 方法 h ... -
jQuery之load
2011-10-17 15:33 7705参考资料 1 jQuery ajax - load() 方法 ... -
jQuery之ID选择器
2011-08-23 15:25 9856参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之effect(效果)
2011-08-23 14:59 2557参考资料 从零开始学习jQuery (7) jQuery动画- ... -
jQuery之css
2011-08-23 13:54 1579jQuery W3C文档 http://www.w3schoo ... -
jQuery之select
2011-08-22 16:39 2298话不多说,详见代码吧 网页代码 <div style ... -
jQuery之实战(checkbox,table)
2011-08-19 16:22 3772实现功能如下:参考图片 1 页面加载时效果 2 全选效果 ... -
jQuery之table(隔行变色)
2011-08-19 15:52 2740页面代码如下: <table style=&quo ... -
jQuery之checkbox(复选框)
2011-08-18 17:06 2059业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项 ... -
jQuery之radio(单选)
2011-08-18 15:41 2425页面代码如下: <inpu ... -
jQuery之get(val,text,html)
2011-08-18 14:53 5982参考资料 1 jquery中,html、val与text三者属 ... -
jQuery之ID选择器
2011-08-18 13:58 16参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之jqzoom(图片放大镜插件)
2011-08-18 11:07 19693参考资料 1 基于jQuery开发的图片放大镜插件 - 淘宝网 ... -
jQuery之DOM
2011-08-17 14:45 1439参考资料 1 跳蚤的小窝:)jQuery对象和DOM对象【jQ ... -
jQuery之入门(ready)
2011-08-17 11:46 2076参考资料 1 jquery $(document).ready ... -
jQuery与Java实现图片的剪切
2011-08-05 15:10 30411一 参考资料 1 jquery Jcrop 头像,logo截图 ... -
jQueryAPI 中文版及相关参考资料
2010-12-24 12:52 1980转载: http://www.css88.com/catego ...
相关推荐
jquery对象和dom对象.doc
主要介绍了jQuery对象和DOM对象之间相互转换的方法介绍,本文讲解了jQuery对象转成DOM对象、DOM对象转换成jQuery对象方法,需要的朋友可以参考下
关于dom和jquery对象理解
jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法;例如: $(“#img”).attr(“src”,”test.jpg”); 这里的 $(“#img”)...
NULL 博文链接:https://gaoquanyang.iteye.com/blog/1632981
jquery 基本 层级 控制器 可见性 属性 子元素 表单对象属性 dom对象 等详细的一些操作~ 详细 简单~易懂 实用!
有时尤其是在初学jQuery,无法记住jQuery的所有函数时,会有很长一段时间使用jQuery选择器配合原始的dom函数进行开发。所以两种对象的转化是很有必要的。 jQuery对象的索引保存的是dom对象,所以可以通过索引将经...
jQuery第1天:JQ基本介绍、使用步骤、jQuery对象与DOM对象(重点)、jQuery选择器、mouseover与mouseenter、index方法、区分jQuery与Javascript
1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系. DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery...
JQuery DoM和ajax 操作大全源码
在讨论之前,先约定好定义变量的风格。 如果获取的对象是jQuery对象,那么在变量前加上$,...jQuery提供了两种方法将一个jQuery对象转换成DOm对象,即[index]和get(index). 1、jQuery对象是一个数组对象,可以通过
jQuery对象和DOM对象相互转化 jQuery对象和DOM对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$(“#img”).attr(“src”...
(http://shawphy.com/jqueryapi/ 这里是最新文档,有离线版下载) 第三步,深刻了解jQuery对象和普通DOM对象的区别。互相转化见Q1 Q1,js的写法:document.getElementById(‘save’).disabled=true; 在jquery中我是...
1、jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象: 代码如下: var $cr=$(“#cr”) //jQuery对象 var cr=$cr[0] //DOM对象 2、另一种是jQuery本身提供的,通过get(index)方法...
jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别
2、jQuery对象———->DOM对象 下标选取法(原理:jQuery是DOM的数组形式):$(“h2”)[1] 使用.get(index)函数 3、字符串———–>DOM对象 写一个脚本函数 function parseDom(nodelist) { //nodelist是html文本字符串 ...
Java电商系统+Java学习资料+Java教程第23节+23-jquery对象与dom对象之间相互转化。
今天主要看看jQuery对象和dom对象的相互转换,明白了这个,以后用起jQuery会方便很多。 1、方法名冲突的解决办法 在开始使用jQuery时,我们首先应该避免jQuery与其他类库或自定义js的冲突。 先看一段最简单的代码: ...
NULL 博文链接:https://zl378837964.iteye.com/blog/2327825