JQuery知识快览之三—JQuery对象集

时间：2021-11-17 18:07:39

本文讲述JQuery对象集的各相关知识

获取JQuery对象集

JQuery对象，和DOM对象是两个不同的东西，JQuery对象可以是DOM对象的封装，但是JQuery对象不只是DOM对象的封装，它还可以代表其自定义的对象。为什么要获取JQuery对象而不直接使用DOM对象呢？因为JQuery对象对DOM对象的操作进行了很好的封装，你可以方便的用JQuery对象的方法来操作内部封装的DOM对象，而不用操心浏览器兼容性的问题。

JQuery函数，简写为$可以有多种不同的用法

1.$(DOM element)

将一个DOM element封装成JQuery对象，前面讲到的$(this)就是这种用法。

2.$(DOM element array)

3.$(JQuery object)

对原有JQuery对象的克隆

4.$(object)

var foo = { foo: "bar", hello: "world" };

var $foo = $( foo );

5.$()

建一个空JQuery对象集

6.$(selector[,context])

selector就是前文提过的选择器，我们可以将这个选择器用在已有的DOM对象，Document或者一个JQuery对象集上。像$(selector,context)这样使用，效果等同于$(context).find(selector)

7.jQuery( html [, ownerDocument ] )

解析html，并将之加入ownerDocument中，需要注意的是，当html里面包含多个节点时，将会为了能将之加入ownerDocument做一定的处理。比如用<div>先包装一下，去掉直接的文本，去掉<html>,<head>标签等等。

8.jQuery( html, attributes )

为一个简单的元素提供属性。

$("<a></a>",{

  "href":"baidu.com",

  text:"append",

  on:{

    click:function(){

      alert("clicked");

    }

  }

}).appendTo("li");

管理对象集元素

我们构造了一个初始的对象集后还可以对对象集做各种的管理，如合并对象集，过滤对象集等。

1.合并对象集

add(selector|elements|html|JQuery object)

add(selector, context)

做两个对象集的和，结果对象集的顺序按照其在DOM中的顺序。

addback()

1.8版新增，替代andSelf功能。

将这一次对象集中的对象和上一次对象集中的对象合并在一起。

2.获取子对象集

first()

获取对象集中第一个元素

last()

获取对象集中最后一个元素

eq(index)

获取对象集中给定位置的元素，从0开始计数，若为负，则从后数起。

slice(start [,end])

获取对象集中给定范围内的元素，从0开始计数，若为负，则从后数起。

3.过滤对象集

filter(selector|element|function(index)|JQuery object)

从对象集中留下满足某条件的节点

not(selector|elements|function(index)|JQuery object)

从对象集里将满足某条件的节点去掉。

4.得到对象集的子元素或子孙元素

contents()

获取对象集中对象的所有文本和节点子元素。

children([selector])

获取对象集中对象的所有节点子元素。如果有选择器则子元素需要满足选择器的条件，否则不被获取

find(selector|element|JQuery object)

查找对象集的子孙节点中所有满足条件的元素。后面2种参数形式是1.6版新增的。

has(selector|contained element)

获取对象集中所有拥有满足某条件的子孙节点的对象

5.得到对象集的父元素或祖先元素

parent([selector])

获取对象集中对象的所有节点的父元素，如果有选择器则父元素需要满足选择器的条件，否则不被获取

parents([selector])

获取对象集中对象的所有节点的祖先元素，如果有选择器则祖先元素需要满足选择器的条件，否则不被获取

parentsUntil[selector [,filter]|element [,filter]]

对对象集中的每个对象，依次获取其祖先元素，直到有个祖先元素满足选择器的条件。

offsetParent()

对对象集中的每个对象，依次获取其祖先元素，直到有个祖先元素具有relative,absolute或fixed位置。

closest(selector [,context]|element|JQuery object)

对对象集中的所有对象从该对象开始依次向其父节点查找满足条件的元素，直到找到一个或者查找到根节点。后面2种参数形式是1.6版新增的。

6.得到对象集的邻居

prev[selector]

获取对象集中每个对象的前面一个元素，如果带选择器的话，则在前面一个元素符合条件时获取，否则不获取。

next[selector]

获取对象集中每个对象的后面一个元素，如果带选择器的话，则在前面一个元素符合条件时获取，否则不获取。

prevAll[selector]

获取对象集中每个对象的前面所有满足选择器条件的元素。

nextAll[selector]

获取对象集中每个对象的后面所有满足选择器条件的元素。

prevUntil[selector [,filter]|element [,filter]]

依次获取对象集中每个对象前面的元素，直到有个元素满足选择器的条件。

nextUntil[selector [,filter]|element [,filter]]

依次获取对象集中每个对象后面的元素，直到有个元素满足选择器的条件。

siblings([selector])

获取对象集中每个对象的所有满足选择器条件的邻居元素。

7.其他

end()

返回到上一次操作后的结果对象集。

操作对象集

获取了对象集后我们可以对对象集进行各种的操作，比如$( "li" ).css( "background-color", "red" );设置$("li")对象集中所有对象的背景颜色。JQuery提供了大量内置的方法可用于对象集，另外，我们也可以通过下面的函数定制对对象集的操作：

is(selector|element|function(index)|JQuery object)

测试对象集中是否有满足某条件的元素，后面3种参数形式是1.6版新增的。

map(callback(index,  element))

对对象集中的所有对象执行给定的操作返回一个结果。这个函数通常和get()一起使用来获取一个进行给定操作后的结果集。

each(function(index,  element)

对对象集中的所有对象执行给定的操作.

相关文章