jQuery Object and Dom

项目碰到一个问题，问题大概是这样的：

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr class="line1" filetype="a"> 
      <td></td> 
    </tr> 
     <tr class="line2" filetype="b"> 
      <td></td> 
    </tr> 
  </table>

需要对上面table的每个tr（N行）绑定事件，对filetype="a"和filetype="b"的绑定不同的的右键菜单。右键菜单是通过jQuery插件contextmenu实现的。

想绑定事件，自己只能想到2种方案：

第一：使用jquery的选择符分别筛选出filetype为a和b的。
第二：使用普通的dom对象，通过getAttribute实现。

第一种方法尝试了，发现jQuery不支持自定义选择符，也就是类似 $("input[name='newsletter']")的标签。可能也有，但是由于项目紧没有去尝试。

第二中方法，使用普通的DOM对象来获取不同的filetype，然后给tr做绑定，但是问题来了，jQuery的插件只支持jQuery对象。上网搜索了下发现原来DOM对象转换成jQuery对象非常简单，只要在DOM对象外面加入符号"$"就可以了。比如

//普通的DOM对象 
var otrs = document.getElementById("filelist").getElementsByTagName("tr"); 
 
//jQuery对象 
jotrs = $(otrs);

经常会碰到jQuery与原生的JS混写的时候，也不知道这样的效率如何，转换成jQuery对象的时候，会带来多大的性能损耗。

另外jQuery对象转换成DOM对象稍微要复杂一点，由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]

这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：

$("#msg").html(); 
$("#msg")[0].innerHTML; 
$("#msg").eq(0)[0].innerHTML; 
$("#msg").get(0).innerHTML;

Lin Says:
2009-11-30, 2:45 PM

可以先取出所有的Tr...再判断filetype呢..

Kevin Says:
2009-11-30, 2:48 PM

if($("idoftable tr").attr("filetype")=="a") {//a事件}
if($("idoftable tr").attr("filetype")=="b") {//b事件}
这样应该可以，没有尝试，但是估计效率会低些...个人感觉哈，还是习惯混写，主要是知道了DOM TO jQuery

Lin Says:
2009-11-30, 3:30 PM

$("idoftable tr").attr("filetype")永远是第一个tr的filetype属性
e.g.
$('tr').each(function(){
    var filetype = $(this).attr('filetype');
    if(filetype){
        switch(filetype){
            //to do
        }
    }
});

Kevin Says:
2009-11-30, 3:32 PM

哈哈，忘记循环了...恩，老乡写的不错。看来我还停留在for(;;;)阶段... - -!

James Says:
2009-12-01, 10:19 PM

不用循环绑定，可以这样写(只在firefox下测试过，不知到ie可否)
$(\"tr[filetype][filetype != \'a\']\").click(function(){
//如果filetype 为b
});

$(\"tr[filetype][filetype != \'b\']\").click(function(){
//如果filetype 为a
});