jQuery复习—包装集

Posted 2020-07-03

jQuery包装器

Part1:jQuery包装器的用法

一、通过包装器方法选择和包装将要操作的DOM元素

    $()函数返回特殊的JavaScriopt对象（收集到了JavaScirpt元素并添加了拓展功能），它包含与选择器相匹配的DOM元素数组，这个数组中的元素是按照在文档中的顺序排列的。这个对象拥有大量有用的预定义方法，可作用于已收集的元素集合。

特点：

（1）：jQuery包装器方法，当执行完毕后（比如隐藏操作）会返回相同的一组元素，以便为另一个操作做准备。

例子：$("div.notLongForThisWorld").hide().addClass("removed");

（2）：每一个方法都作用在于最初的选择器相匹配的元素集上，所以没必要遍历元素集。jQuery已经在后台完成了这一切。

二、为全局使用函数提供命名空间

    var trimmed = $.trim(something);

三、从html标记创建DOM元素

    $("<p>HI there</p>")

四、创建在DOM就绪后执行的代码

$(document).ready(function(){

});

$(function(){

});

五、Dom对象和jQuery对象的相互转换

（1）jQuery对象是一个类类似数组的对象，可以通过[index]和get[index]得到对应的Dom对象

（2）对于一个Dom对象，只需要用$() 把Dom对象包装起来，就可以获得一个jQuery对象。

Part2:管理包装集

一、确定包装集的大小

（1）length属性

     $("ul").length

（2）size()方法

     $("ul").size();

二、从包装集中获取元素

（1）获取Dom元素

1）[index]

2）get(index) 获取包装集中的一个或全部匹配元素。如果不指定参数，则包装集中的所有元素就以javascript数组形式返回。如果提供了index参数，则会返回index所对应的元素

3）以数组的形式获取所有的元素

toArray()

（2）获取jQuery元素

1）eq(index) 获取包装集中index参数的对应元素，并返回只包含此元素的包装集

2）first() 获取包装集中的第一个元素，并返回只包含此元素的新包装集。

3）last() 获取包装集中的最后一个元素，并返回只包含此元素的新包装集。

（3）获取元素的索引 index(element);

例子：

var $li = $("li");

var n = $li.index("li#li_1");

三、分解元素包装集

（1）添加更多元素到包装集 add(expression,context)

expression: 可以是选择器、HTML片段、DOM元素或DOM元素组

例子：

1、匹配带有alt或title特性的所有<img>元素

$("img[alt],img[title]")

或：
$("img[alt]").add("img[title]");

2、对所有拥有alt特性的<img>元素应用粗边框，然后对所有拥有alt或title特性的<img>应用一定程度的透明效果。

$(‘img[alt]‘)

  .addClass(‘thickBorder‘)

  .add(‘img[title]‘)
  .addClass(‘seeThrough‘)

（2）整理包装集中的内容

1）删除与表达式相匹配的元素 not(expression)

$(‘img[title]‘).not(‘[title * = puppy]‘);

2）删除与表达式不匹配的元素 filter(expression)

$(‘img‘).filter(‘[title*=dog]‘);

（3）获取包装集的子集

1）slice(begin,end)

$(‘*‘).slice(0,4);

2）原始包装元素所有子节点上的选择器或是要测试的元素： has(test)

例子：

$(‘div‘).has(‘img[alt]‘);

（4）遍历包装集

1）map(callback)

为包装集中的每一个元素调用回调函数，并将返回值收集到jQuery对象实例中

例子：下面代码会返将页面上所有的<div>元素的id值收集到一个JavaScript数组中

var allIds = $(‘div‘).map(function(){

    return (this.id ===undefined)? null: this.id;

}).get();

2）each()  遍历匹配集里所有的元素，为每一个元素调用传入的迭代函数

$(function() {

       $([1,2,3]).each(function(){

              alert(this);   

       });

})