>웹 프론트엔드 >JS 튜토리얼 >jQuery 연구 노트 변경 jQuery object_jquery

jQuery 연구 노트 변경 jQuery object_jquery

WBOY
WBOY원래의
2016-05-16 17:49:591068검색

jQuery代码的任务就是生成jQuery对象A,操作jQuery对象A;生成jQuery对象B,操作jQuery对象B……但是若此过程中,对象A、B……之间有某种关系,那么完全没必要一个个去$(selector),这很繁琐的。因此jQuery提供了一些方法,使流程变为生成jQuery对象A,操作jQuery对象A;更改为jQuery对象B,操作jQuery对象B……

  一个jQuery对象,既要进行N次操作,又要进行M次更改。因此有必要将生成的jQuery对象存储在一个变量中,多次调用。然而,试想每进行一次操作和更改就得声明一个新变量,这也很繁琐啊。所以jQuery采取了链式操作的方法,即执行操作后返回操作对象本身,于是可以持续执行下一个操作,直到需要更改对象时方执行更改,然后返回更改后对象。这实际上就是一种函数式思维。

  举个例子,左右对比一下:

一般调用

链式调用

a=$(“div”);

a.addClass(“class”);

b=a.children(“ul”);

b.show();                         

c=a.siblings();

c.removeClass(“class”);

$(“div”).addClass(“class”)

.children(“ul”).show().end()

.siblings().removeClass(“class”);

  接下来就介绍一下更改jQuery对象的各种方法:

更改为后代元素集合

方法

描述

等价

children(selector)

在原先元素的后代元素中,选取匹配selector的元素。若不设置参数,children()等价于children(*),选取原先元素的所有子元素

$(selector1).children(selector2)≡$(selector1>selector2)

find(selector)

在原先元素的后代元素中,选取匹配selector的元素。若不设置参数,find()等价于find(“:not(*)”),不会选取原先元素的任何后代元素

$(selector1).find(selector2)≈$(selector1 selector2)。若参数使用基本过滤选择器,不是在全部后代元素中选取过滤匹配元素,而是在每一个后代元素中分别选取过滤匹配元素

contents()

选取原先元素的子元素或文本块

 

更改为祖先元素集合

方法

描述

parent(selector)

在原先元素的父元素中,选取匹配selector的元素。若不设置参数,parent()等价于parent(“*”),选取原先元素的所有父元素

parents(selector)

在原先元素的祖先元素中,选取匹配selector的元素。若不设置参数,parents()等价于parents(“*”),选取原先元素的所有祖先元素

parentsUntil(selector)

选取原先元素的祖先元素,直到遇到匹配selector的元素为止,且不包括该元素。若不设置参数,parentsUntil()等价于parents(),选取原先元素的所有祖先元素

offsetParents()

选取原先元素的最近祖先定位元素,且该元素CSS属性display不能为none。定位元素指CSS属性position

closest(selector)

在原先元素及其祖先元素中,选取匹配selector的最近元素

 

更改为兄弟元素集合

方法             

描述

等价

next(selector)

在原先元素后面的第一个兄弟元素中,选取匹配selector的元素。若不设置参数,next()等价于next(“*”),选取原先元素后面的第一个兄弟元素

$(selector1).next(selector2)≡$(selector1+selector2)

prev(selector)

在原先元素前面的第一个兄弟元素中,选取匹配selector的元素。若不设置参数,prev()等价于prev(“*”),选取原先元素前面的第一个兄弟元素

nextAll(selector)

在原先元素后面的兄弟元素中,选取匹配selector的元素。若不设置参数,nextAll()等价于nextAll(“*”),选取原先元素后面的所有兄弟元素

$(selector1).nextAll(selector2)≡$(selector1~selector2)

prevAll(selector)

在原先元素前面的兄弟元素中,选取匹配selector的元素。若不设置参数,prevAll()等价于prevAll(“*”),选取原先元素前面的所有兄弟元素

siblings(selector)

在原先元素的兄弟元素中,选取匹配selector的元素。若不设置参数,siblings()等价于siblings(“*”),选取原先元素的所有兄弟元素

nextUntil(selector)

选取原先元素后面的兄弟元素,直到遇到匹配selector的元素为止,且不包括该元素。若不设置参数,nextUntil()等价于nextAll(),选取原先元素后面的所有兄弟元素

prevUntil(selector)

选取原先元素前面的兄弟元素,直到遇到匹配selector的元素为止,且不包括该元素。若不设置参数,prevUntil()等价于prevAll(),选取原先元素前面的所有兄弟元素

 

更改为更多元素集合

方法             

描述

等价

add(selector)

在原先元素的基础上添加选取匹配selector的元素

$(selector1).add(selector2)≡$(selector1,selector2)

andSelf()

更改为后代元素、祖先元素、兄弟元素的这些操作,会在原先元素以外选取元素。可用于将原先元素和更改操作选取的元素合并在一起

이 부분 요소 모음

으로 변경되었습니다.

方法             

描述

等价

eq(index)

在原先元素中筛选索引值等于index的元素,索引值从0开始正数,也可以从-1开始倒数,但不能混用

$(selector).eq(index)≡$(selector:eq(index))

first()

在原先元素中筛选第一个元素,等同于eq(0)

$(selector).first()≡$(selector:first)

last()

在原先元素中筛选最后一个元素,等同于eq(-1)

$(selector).last()≡$(selector:last)

slice(start,[end])

在原先元素中筛选索引值从start到end-1的元素。若不传入end,则筛选索引值大于等于start的元素

filter(selector)

在原先元素中筛选匹配selector的元素

filter(fn(index))

使用函数筛选,对于索引值等于index的元素,若函数返回true,该元素包含在筛选集合中,否则排除在外

可实现$(selector:even(index))、$(selector:odd(index))、

$(selector:gt(index))、

$(selector:lt(index))等

not(selector)

在原先元素中筛选不匹配selector的元素

$(selector1).not(selector2)≡$(selector1:not(selector2))

not(fn(index))

使用函数筛选,对于索引值等于index的元素,若函数返回true,该元素排除在筛选集合外,否则包含在内

可实现$(selector:even(index))、$(selector:odd(index))、

$(selector:gt(index))、

$(selector:lt(index))等

has(selector)

在原先元素中筛选出拥有匹配selector后代元素的元素

$(selector1).has(selector2)≡$(selector1:has(selector2))

방법                                                 

설명

동등

方法             

描述

end()

使执行更改jQuery对象操作后的选取元素还原到更改之前。若希望还原多个更改操作,则多次调用,直到最后会返回空集

eq(색인) 원래 요소 중 인덱스 값이 index와 같은 요소를 선택하세요. 인덱스 값은 양수로 0부터 시작하거나, -1부터 카운트다운할 수 있지만 혼합할 수는 없습니다. $(선택기).eq(색인)지구$(선택기:eq(색인))
첫 번째() 원래 요소 중 eq(0)과 동일한 첫 번째 요소를 선택하세요 $(선택기).first()EMA$(선택기:첫 번째)
마지막() 원래 요소 중 eq(-1)과 동일한 마지막 요소를 선택하세요 $(선택기).last()EMA$(선택기:마지막)
슬라이스(시작,[끝]) 원본 요소에서 시작부터 끝-1까지의 인덱스 값을 갖는 요소를 선택합니다. end가 전달되지 않으면 index 값이 start보다 크거나 같은 요소가 필터링됩니다.
필터(선택기) 원본 요소의 선택기와 일치하는 필터 요소
필터(fn(색인)) 함수 필터링을 사용합니다. 인덱스 값이 인덱스와 동일한 요소의 경우 함수가 true를 반환하면 해당 요소는 필터링된 컬렉션에 포함되고, 그렇지 않으면 제외됩니다. $(selector:even(index)), $(selector:odd(index)), 를 실현할 수 있습니다. $(선택기:gt(색인))、 $(selector:lt(index)) 등
아님(선택기) 원본 요소의 선택기와 일치하지 않는 요소 필터링 $(선택기1).not(선택기2)지구$(선택기1:not(선택기2))
아님(fn(index)) 함수 필터링을 사용하세요. 인덱스 값이 index와 같은 요소에 대해 함수가 true를 반환하면 해당 요소는 필터링된 컬렉션에서 제외되고, 그렇지 않으면 포함됩니다. $(selector:even(index)), $(selector:odd(index)), 를 실현할 수 있습니다. $(선택기:gt(색인))、 $(selector:lt(index)) 등
있음(선택기) 원래 요소에서 선택기와 일치하는 하위 요소가 있는 요소를 필터링합니다 $(selector1).has(selector2)지구$(selector1:has(selector2))
jQuery 복원객체
방법                                                  설명
끝() jQuery 객체를 변경한 후 선택한 요소를 변경 전으로 복원합니다. 여러 변경 작업을 복원하려면 마지막에 빈 세트가 반환될 때까지 여러 번 호출하세요.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.