关于Jquery和滤镜的问题引发的...

　　

　　Jquery是个好东西。网上的赞美很多：优雅，简洁等等，介绍基本使用的也很多。

 

　　今天在做个软件项目。要美工做光标移动到菜单图片出光照效果，美工死活做不到要求。于是就试了下自己写。

就是这样的，看图.于是就想到用jquery来写。

本代码在asp.net下测试可运行

 

$("td[class='td']").mouseover(function(){
                $(this).css("backgroundPosition","0px -86px");
//                var objarr=$(this).children(0);
//                objarr[0].style.color="yellow";
                  $(this).children(0)[0].style.color="yellow";
//                $($(this).children(0)).css("color","yellow");
//                $($($(this).children(0)).get(1)).css("color","yellow");
                  $(this).attr("id","jqueryfilter");
                  $(this).css("filter","progid:DXImageTransform.Microsoft.Light()");
                  document.all.jqueryfilter.filters[0].addAmbient(255,255,255,60);
                  document.all.jqueryfilter.filters[0].addPoint (45,20,24,150,150,0,80);
            });

 

这个是全部代码。

 

分析如下：

　　　　$(this).css("backgroundPosition","0px -86px");

　　　　---修改td的背景图片位置，背景图片是png的。

　　　　下面我想修改这个td的颜色和滤镜。于是想到元素的集合childer和filters.

　　　　1、首先先找childer集合

　　　　　　$(this).children(0);就这句。

　　　　　　奇怪吧。正常写js，object.children就可以了。而且集合数组写成[0]访问。

　　　　　　jquery要写成(0)。

　　　　　　这样就访问到对象的children.下面3句是1个效果，不同写法而已。

　　　　　　  $(this).children(0)[0].style.color="yellow";
//                $($(this).children(0)).css("color","yellow");
//                $($($(this).children(0)).get(1)).css("color","yellow");

          2、下面开始滤镜

　　　　　　突然发现这个filters集合，采用上述方法，根本访问不到。郁闷啊。等有空仔细去读下jquery.js了。

　　　　　　没办法就采用下面这个方法。

　　　　　　$(this).attr("id","jqueryfilter");

　　　　　　$(this).css("filter","progid:DXImageTransform.Microsoft.Light()");
                  document.all.jqueryfilter.filters[0].addAmbient(255,255,255,60);
                  document.all.jqueryfilter.filters[0].addPoint (45,20,24,150,150,0,80);

　　　　　　

　　　　　　给个临时id属性。添加css滤镜。用js访问临时id对象的filters集合。修改光照。

　　　　　　光照：先打上一层均匀同底色的光，再加1个点光源效果。

 

　　　　3、光标移出td的jquery代码

　　　　 $("td[class='td']").mouseout(function(){
                $(this).css("backgroundPosition","0 0px");
                $(this).children(0)[0].style.color="white";
                document.all.jqueryfilter.filters[0].clear();
                $(this).css("filter","");
                $(this).removeAttr("id");
            });

 

        4、抛砖引玉，貌似jquery对js的集合对象支持有很大问题。希望大家提出不同意见.