Jquery学习笔记（三）

今天已经是第三天学习Jquery，前两天学了Jquery的选择器、属性和筛选，发现Jquery api（application programmings interface）里面的很多东西都很简单。当我看到Jquery的文档处理的时候，我在想我自己能不能将Jquery的很多方法，自己去用JavaScript的语句来翻译出来（也就是自己用JavaScript重新写一个Jquery的方法），比如Jquery中append这个方法（用法如$(“#div1”).append(“<div id=’test’ style=’…..’></div>”)），如果让我去写JavaScript的话，就是下面这样的代码：
    var divobj = document.createElement("div");

divobj.id = "test";

divobj.style.border = "1px solid #666";

     divobj.style.borderTopWidth = "0px";

     divobj.style.position = "absolute";

divobj.style.backgroundColor = "white";

document.getElementById("div1").appendChild(divobj);

其实写了这个例子之后，我发现所有的Jquery方法，我都可以用JavaScript的方式去重新编写一下，这样的话，我不仅在JavaScript的方法上或者在Jquery的方法上应用都会有一个进一步的提高。

     文档处理这一块的方法，普遍都比较简单易用，只要根据上面的例子就能知道这些方法是干什么用的了，再从这些方法中拿一个比较经典的例子出来，说明下在使用这些方法的时候一定要注意使用这些方法的元素是什么：

     Jquery中的remove方法：

         Html代码：<div id=”div1”></div>

         JS代码：

              $(“#div1”).hover(

function(){

     $(this).append(“<span class=’s’>删除</span>”);

},

function(){

     $(this).remove(“.s”);

}

);

         JS中的hover(over,[out])，前面一个function是当鼠标移到这个元素时处理，后面可有可无，    是鼠标移出这个元素的时候处理的。

上面的例子是当鼠标移到div1上的时候，在这个div1上添加“删除”（这个span是有一个css样式的“s”），当鼠标移出的时候是移除带class类的元素（也就是将<span>删除）。

但是上面的例子貌似不能达到这样的效果，这个是为什么呢，那么如果IE用开发人员工具或者FireFox的 FireBug去查看的时候发现$(this)指的是Div本身，而Div本身是没有带Class的（这个“s”是Div子元素<span>带的），哦，发现了问题的所在后，更改下原来[out]的代码如下：

    $(this).find(“.s”).remove()就能达到我们的效果。

        这个例子只是想说明，用这些方法的时候一定要注意到，用这些方法的元素是什么。

 

     试验完所有的文档处理(JavaScript中的DOM元素处理)之后，有点小兴奋，接着往下看了个CSS，发现CSS中的方法都比较简单，在这边就不详细的总结了。