jQuery学习大总结(一)jQuery对象与dom对象转换

开发 前端
这几天会将jQuery的一些使用方法总结一下,希望能对jQuery初学者起到一定的帮助作用。

这几天会将jQuery的一些使用方法总结一下,希望能对jQuery初学者起到一定的帮助作用。

今天主要看看jQuery对象和dom对象的相互转换,明白了这个,以后用起jQuery会方便很多。

1、方法名冲突的解决办法 在开始使用jQuery时,我们首先应该避免jQuery与其他类库或自定义js的冲突。 先看一段最简单的代码:

  1. jQuery(document).ready(function() { 
  2.     alert("Welcome!"); 
  3. }); 

在这里没有使用$(document)这种写法,因为很多时候我们自己定义了$(id)方法用来获得元素,并且在prototype等类库中也定义了$()方法。所以,为了避免冲突,建议大家也使用jQuery("#id")这种写法。

2、jQuery对象与dom对象的相互转换 jQuery对象转dom对象: jQuery("#id")获得的是一个jQuery对象,它和普通的dom对象是不同的,所以不能直接使用dom对象定义的方法。由于jQuery对象 本身就是一个集合,所以可以通过索引将jQuery对象转换成dom对象,如jQuery("#id")[0]就是一个dom对象。 看下边一个例子:

  1. <div id="show"> 
  2.     <span>要显示的内容1</span> 
  3.     <span>要显示的内容2</span> 
  4.     <span>要显示的内容3</span> 
  5. </div> 

要获得span中的内容,使用以下方法均正确。

  1. //jQuery方法,获得第一个span内容 
  2. jQuery("#show span").html(); 
  3. //获得第三个span内容 
  4. jQuery("#show span")[2].innerHTML; 
  5. //eq()返回jQuery对象,从eq(0)开始。获得第二个span内容 
  6. jQuery("#show span").eq(1)[0].innerHTML; 
  7. //get()直接返回dom对象,从get(0)开始。获得第三个span内容 
  8. jQuery("#show span").get(2).innerHTML; 

dom对象转jQuery对象: 使用jQuery()就可将dom对象转为jQuery对象。 如:

  1. jQuery(document.getElementById("show")).html(); 

输出结果为:

  1. 这样就实现了jQuery对象和dom对象的相互转换,比如想让焦点停留在id为focus的文本框。只需: 
  1. <div id="show"> 
  2.     <span>要显示的内容1</span> 
  3.     <span>要显示的内容2</span> 
  4.     <span>要显示的内容3</span> 
  5. </div> 

 

责任编辑:陈四芳 来源: jquery001.com
相关推荐

2010-09-01 08:57:27

jQueryDOM对象

2013-12-02 14:33:41

jQuery事件

2013-12-02 14:40:03

jQueryAjax

2013-12-02 14:22:14

jQuery选择器

2013-12-02 14:29:27

jQuery元素属性

2009-07-24 11:01:12

jQuery框架

2011-08-22 16:19:58

jQuery

2010-06-01 09:20:45

jQuery

2010-09-28 10:09:35

DOM对象模型

2010-07-06 10:07:10

jQueryJSON

2009-06-12 14:32:53

WCFJSON对象jQuery

2015-09-29 09:27:04

JavaScript对象

2009-07-20 13:27:01

UML对象关系

2011-03-11 09:20:35

jQueryjavascript

2010-09-28 10:40:32

HTML DOM

2010-09-28 13:40:52

DOM元素

2012-02-23 09:17:24

jQuery

2010-09-28 10:03:15

DOM文档对象模型

2012-04-26 08:29:22

DOM

2010-09-28 09:43:37

DOM文档对象模型
点赞
收藏

51CTO技术栈公众号