本文讲述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)

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

JQuery知识快览之三—JQuery对象集的更多相关文章

  1. JQuery知识快览之一—选择器

    阅读指导:本文参考最新的1.10.2版写成,针对用得比较多的1.4版,所有1.5版之后的函数都会注明哪一版新增.对于熟悉1.4版想学1.10版的请直接搜索"新增". JQuery是 ...

  2. JQuery知识快览之五—操作属性和结构

    前文提到JQuery提供了丰富的内置方法来操作对象集,本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法. prop还是attr? 从JQuery1.6版开始,新增了prop方法来获取和设 ...

  3. JQuery知识快览之四—样式

    前面我们获取了对象集,本文介绍怎么控制对象集的样式 基本概念 在一个html页面中,我们有两种方式来控制一个对象的样式,用HTML attribute控制,或者用CSS类来控制,这两种方法虽然都能控制 ...

  4. JQuery知识快览之二—事件

    事件是脚本语言的核心.本文将为大家介绍JQuery支持的一些事件和如何自定义事件 JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload三个Docum ...

  5. jQuery知识梳理20190818

    目录 jQuery知识梳理20190818 1. 时间绑定和解绑 2. 区别mouseover与mouseenter 3. 时间委托(委派/代理) 4 . 多库共存 5.window.onload与$ ...

  6. jQuery知识梳理20190817

    目录 jQuery知识梳理20190817 1. jQuery的特征 2. jQuery的两把利器 2.1 jQuery核心函数 2.2 jQuery核心对象 3. jQuery核心函数详解 4. j ...

  7. 最全的jQuery知识汇总

    本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...

  8. web前端基础知识-(五)jQuery

    通过之前的学习我们已经了解了html.css.javascript的相关知识:本次我们就共同学习进阶知识:jQuery~ 一.什么是jQuery? jQuery其实就是一个轻量级的javascript ...

  9. 【译】用jQuery 处理XML--浏览器中的XML与JavaScript

    用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...

随机推荐

  1. Java基础之集合框架——使用真的的链表LinkedList<>(TryPolyLine)

    控制台程序. public class Point { // Create a point from its coordinates public Point(double xVal, double ...

  2. C# 动态链接库的创建

    首先在C#工程下面安装第三方插件包 安装方法:Tools --> Library Package Manager --> Package Manager Console Install-P ...

  3. list和set的区别

    list和set的区别 相同点:list,set都是继承自collection接口 不同点: a.list-->元素有放入顺序,元素可重复  set-->元素无放入顺序,元素不可重复 b. ...

  4. css3颜色渐变

    从上到下的线性渐变: #grad {  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */  backgrou ...

  5. form 表单jquery验证插件使用

    第一部分:表单样式 <form action="#" method="post" id="regist">   <tabl ...

  6. Java :List

    1.List是一个接口,不能实例化,需要实例化一个ArrayList或者LinkedListList myList = new ArrayList(); 2.List中可以添加任何对象,包括自己定义的 ...

  7. [转][Automation]- C# SendKey代码表

    使用 SendKeys 将键击和组合键击发送到活动应用程序.此类无法实例化.若要发送一个键击给某个类并立即继续程序流,请使用 Send.若要等待键击启动的任何进程,请使用 SendWait. 每个键都 ...

  8. android 学习随笔七(网络:图片及文本传输及线程关系 )

    主线程.子线程.UI的关系 简单的HTTP请求 -------------------------------------------------------- public class MainAc ...

  9. android 学习随笔四(数据库存储)

    SQLite数据库(sqliteexpert工具),sqlite数据库是轻量级数据库,对数据类型要求不是很严格,在数据库中处理是按verchar类型处理,一般定义表字段时还是要求严格按照数据类型定义, ...

  10. 关于 MySQL LEFT JOIN 你可能需要了解的三点

    即使你认为自己已对 MySQL 的 LEFT JOIN 理解深刻,但我敢打赌,这篇文章肯定能让你学会点东西! ON 子句与 WHERE 子句的不同 一种更好地理解带有 WHERE ... IS NUL ...