甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

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

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

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

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

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

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

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

 
 
    
  
  
    2. 
  
  
  2.     要显示的内容1
    3. 
  
  
  3.     要显示的内容2
    4. 
  
  
  4.     要显示的内容3
    5.

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

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

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

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

输出结果为：

 
 
    
  
  
  1. 这样就实现了jQuery对象和dom对象的相互转换，比如想让焦点停留在id为focus的文本框。只需：
    2. 
 
 
 
 
    
  
  
    2. 
  
  
  2.     要显示的内容1
    3. 
  
  
  3.     要显示的内容2
    4. 
  
  
  4.     要显示的内容3
    5.

文章名称：jQuery学习大总结(一)jQuery对象与dom对象转换
网站地址：http://chengdu.cdxwcx.cn/article/cdhphce.html

其他资讯