jquery1.4教程三：新增方法教程（3）

发布于，归属于jquery教程。 前2个座位已被强势霸占！ 共有287人围观    

.last() ：选取与选择器匹配的最后一个对象

在1.4之前，只有$(“:last”)，没有last()这个方法，last()的作用很容易理解。

来看示例：http://www.36ria.com/demo/jquery1.4测试/last.html

  1. <<ul>
  2.   <li>测试1</li>
  3.   <li>测试2</li>
  4.   <li>测试3</li>
  5.   <li>测试4</li>
  6.   <li>测试5</li>
  7. </ul>
  1. $('li').last().css('background-color', 'red');
  2.     $('li').first().css('background-color', 'green');

从示例中可以看到，最后一个li的背景设置成了红色。

既然有.last()，当然也有.first()，作用相反，这里就不在演示。

jQuery.proxy() ：提取一个函数，并返回一个带有指定作用域的新函数。

这个函数有些不好理解，留意我写的demo，此函数的作用更多体现在事件监听中，改变的是this德指向。重点说明下：

jQuery.proxy( function, scope )：

  • 第一个参数，为将被改变作用域的函数
  • 第二个参数，新的作用域

jQuery.proxy( scope, name )：

  • 第一个参数：用于设置作用域的对象
  • 第二个参数：作用域将被改变的函数名

来看demo：http://www.36ria.com/demo/jquery1.4测试/proxy.html
源代码如下：

  1. <input name="t" id="t" type="button" value="不使用proxy()" />
  2. <input name="test" id="test" type="button" value="使用proxy()" />
  1. var obj = {
  2.   name: "RIA之家",
  3.   test: function() {
  4.     alert(this.name);
  5.    // $("#test").unbind("click", obj.test);
  6.   }
  7. };
  8. var obj2 = {
  9.   name: "36ria"
  10. };
  11. $("#t").click(function(){
  12.     obj.test();
  13. })
  14. $("#test").click(jQuery.proxy(obj.test, obj2) );

从示例中可以看到：

jQuery.proxy()返回的是一个函数。

jQuery.proxy(obj.test, obj2)：将原test()中的this.name的this，指向obj2。所有新的函数返回的值为obj2中的name，而不是obj的name。

.toArray() ：将juqery对象内容序列化成数组

这个方法很好理解。但有一点要说明下，返回的是DOM对象数组。

来看示例：http://www.36ria.com/demo/jquery1.4测试/toArray.html
源代码如下：

  1. <div>测试1</div>
  2. <div>测试2</div>
  3. <div>测试3</div>
  4. <h4></h4>
  5. <input name="test" id="test" type="button" value="测试" />
  1. $("#test").click(function(){
  2.     var divs = $("div").toArray();
  3.     var aHtml = [];
  4.     $.each(divs,function(){
  5.         aHtml.push($(this).html());
  6.     })
  7.     alert(aHtml);
  8.     $("h4").html(aHtml.join("|"));
  9. })

.unwrap() ： 用于删除匹配的父级元素

大家应该对wrap()这个方法非常熟悉了，1.4新加入的unwrap()作用与wrap()相反，用于删除父级元素。

来看示例：http://www.36ria.com/demo/jquery1.4测试/unwrap.html

源代码：

  1. <p>测试1</p>
  2. <p>测试2</p>
  3. <p>测试3</p>
  4.  
  5. <input name="test" id="test" type="button" value="测试" />
  1. $("#test").toggle(function(){
  2.   $("p").wrap("<div></div>");
  3. }, function(){
  4.   $("p").unwrap();
  5. });

从示例中可以看到，当第一次点击时，给p包裹一个div，再点击时使用unwrap()删除父级的div。

至此jquery1.4新增的方法，全部介绍完毕，有问题的可以给我留言，下期介绍新增事件。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

2个座位已被强势霸占！

  1. 初来

    这几篇jquery1.4新功能的介绍很及时呀，拜读学习了O(∩_∩)O
    呃。。。这个链接 http://www.36ria.cn/demo/jquery1.4%E6%B5%8B%E8%AF%95/toArray.html （404）

  2. 明河共影

    谢谢，我的失误，示例链接已经修正。

同类