jQuery对象入门级介绍(3)_H5之家 - 中国HTML5教程资源分享第一站

var s = "I have a dagger.";

console.log(s.substring(9, 15).replace("a", "i").toUpperCase());

复制代码

　　上面的代码是获取字符串s中的子字符串，再将子字符串中的字母’a'用’i'代替，替换后的结果(也就是’digger’)被转为大写，然后返回打印到控制台上。

　　当然，jQuery中到处都是方法链，在我们的例子中也能看到：

$("div").animate({height:"toggle"}).append("hi");

复制代码

　　$(“div”)将页面上所有的div元素获取到然后作为jQuery对象的一部分返回。基于jQuery对象调用animate方法，然后再在每个jQuery对象上执行append。这样的作用链可以很长很长，下面这个是典型的长jQuery方法链：

1.jpg (51.79 KB, 下载次数: 0)

下载附件

昨天 14:12 上传

　　总的来说，使用这样的长方法链会造成debug和维护代码的困难。所以尽量避免使用这样的长链，不过在压缩时它们还是常常被使用。

　　关键点

　　对象(比如对象中的方法)的方法会返回对象的引用，然后就能基于引用使用方法链，而不需要在执行多个方法的时候还要储存中间值。

　　jQuery对象

　　我们的例子里用了好几个jQuery方法：ready、click、animate和append。这些方法都是与jQuery对象结合使用的，和上文中digger对象的speak方法和myNameIs方法类似的机制，也和string对象的substr方法、replace方法和toUpperCase方法类似。

　　这些函数都是jQuery对象的方法，它们也都会返回一个jQuery对象。不过比起我们例子里的digger对象和string对象，jQuery对象相对而言要复杂许多。就像早前提过的，JS中各个概念之前的界限其实比较模糊。你可以在使用方法链的时候把它视作一个对象，但是你也可以把它当做一个数组来对待：

var mydivs = $("div");

for (var i = 0; i < mydivs.length; i++) {console.log(mydivs[i].innerHTML);}

复制代码

　　在这里例子中，$(“div”)将页面上所有的div元素都存储一个jQuery对象中，然后赋值到变量mydivs中。这个jQuery对象会被当做一个数组(其实是一个NodeList)进入迭代。每次迭代都会对DOM中选出的节点做一些操作，这些节点在迭代里也是当做对象的，所以它们也有自己的属性，比如outerHTML和innerHTML。

　　也可以先把这些节点转成jQuery对象，也就是在取得节点后将它们用$()包起来(你可以把任何代码传入$中，都能将它们转成jQuery对象)，再之后通过jQuery方法html()也可以得到相同的结果。

var mydivs = $("div");

for (var i = 0; i < mydivs.length; i++) {console.log($(mydivs[i]).html());}

复制代码

　　上面两个方法都可以将页面上的div元素中的HTML内容打印到控制台中。

　　当你在运行像$(“div”).animate(…).append(…);这样的代码的时候，动画是会发生在所有的div元素上的，然后这些div元素会被作为jQuery对象的一部分传到方法链中的下一个函数中(在大部分jQuery函数中都是这么实现的，具体请看文档)。

　　关键点

　　jQuery的$函数还有像click、animate这样会返回jQuery对象的方法，它们都是对象或者数组的一部分。类似数组的这部分会包含DOM中节点的引用。

　　总的来看

　　现在我们可以全局地来看这个例子了，$(document)返回的是页面本身的jQuery对象。将一个方法传入.ready(…)中，等到页面已经解析完了DOM也已经加载完成，ready(…)中的方法就会运行。

function(){

$("button").click(…);

}

复制代码

　　这个方法将页面中的button元素都获取到了，然后返回一个绑定了click方法的jQuery对象。click方法中还有一个匿名函数：

function(){

$("div").animate ({height:"toggle"}).append("hi");

}

复制代码

　　上述的函数获取了所有的div元素，然后返回一个jQuery对象，在这个对象上显示调用了它的animate方法。传入jQuery的animate方法中的参数是animate的一系列属性，这些属性是对象的简写形式，{height:”toggle”}这句是告诉jQuery对页面上所有的div元素的高度都使用toggle效果：一开始div的高度会变成0，接着它们的高度又会动画地变回原来的值。

　　animate方法也会返回一个jQuery对象，执行完animate方法后执行append方法：每当button被点击了，就在每个div元素中添加”hi”字符串。运行下面的HTML代码来看看我们说的效果是什么样的：

<button>Click me</button>

$(document).ready(function(){

$("button").click(function(){

$("div").animate({height:"toggle"}).append("hi");

});

</script>

复制代码

1.jpg (26.9 KB, 下载次数: 0)

下载附件