jQuery를 처음부터 배우기 (3) jQuery 패키징 관리 set

1. 요약
jQuery 선택자를 사용하여 jQuery 래퍼 세트를 얻은 후 이를 작동해야 합니다. 이 장에서는 먼저 요소를 동적으로 생성하는 방법을 설명한 다음 jQuery 래퍼 세트를 관리하는 방법을 알아봅니다. 추가, 삭제, 슬라이스 등

2. 소개
이 시리즈의 2, 3번째 기사에 나열된 API가 너무 많습니다. 어지러울 수도 있겠지만, 기초가 탄탄해야 한다는 점도 빼놓을 수 없습니다. 사실 이 목록은 건너뛰고 나중에 사용할 때 공식 API 지침을 확인해 보세요.
이 장에서는 요소의 동적 생성과 jQuery 패키징 세트의 다양한 기능을 주로 설명합니다.

3. 요소를 동적으로 생성합니다. 잘못된 프로그래밍 방법 우리는 요소를 동적으로 생성하기 위해 자바스크립트를 사용하는 경우가 많으며, 컨테이너의 HTML 콘텐츠를 직접 변경하는 경우가 많습니다. 예:

code 코드는 다음과 같습니다.

< ;html xmlns="http://www.w3.org/1999/xhtml">

< ;head>
객체의 동적 생성<br> <br>

테스트 레이어

위의 예에서는 div 요소를 동적으로 추가했습니다. testDiv의 내용을 수정하여 페이지에 추가합니다. 하지만 이는 잘못된 접근 방식이라는 점을 명심하세요. 오류 원인:

(1) 페이지가 로드되면 페이지가 변경됩니다. IE6에서는 네트워크 속도가 느려지거나 페이지 내용이 너무 크면 나타나는 "작업 종료" 오류입니다. 즉, "페이지가 로드되는 동안 페이지의 DOM 모델을 변경하지 마십시오."

(2) HTML 콘텐츠를 수정하여 요소를 추가하는 것은 DOM 표준을 준수하지 않습니다. 실제 작업에서도 발생합니다. 이 방법으로 콘텐츠를 수정한 후에는 추가된 요소가 표시되지 않습니다. 다른 브라우저의 디스플레이 엔진이 다르기 때문에 일부 브라우저에서는 즉시 사용할 수 있습니다. 그러나 Dom의 CreateElement를 사용하여 객체를 생성하면 모든 브라우저에서 거의 모든 것이 정상입니다. 그러나 jQuery에서는 완전한 HTML 문자열이 전달되면 innerHTML도 내부적으로 사용됩니다. .그래서 innerHTML 함수의 사용이 완전히 부정되는 것은 아닙니다.
그러므로 지금부터 사용하지 마세요. 아래에 소개된 올바른 프로그래밍 방법을 사용하세요. 새로운 요소
다음은 요소를 생성하는 두 가지 올바른 방법을 소개합니다.

(1) HTML DOM을 사용하여 요소를 생성합니다

DOM이란?
JavaScript를 사용하면 전체 HTML 문서를 재구성할 수 있습니다. 페이지의 항목을 추가, 제거, 변경 또는 재정렬할 수 있습니다.
페이지의 내용을 변경하려면 JavaScript가 HTML 문서의 모든 요소에 액세스해야 합니다. HTML 요소를 추가, 이동, 변경 또는 제거하기 위한 메서드 및 속성과 함께 이 항목은 DOM(문서 개체 모델)을 통해 가져옵니다.

1998년 W3C는 첫 번째 레벨 DOM 사양을 출시했습니다. 이 사양을 사용하면 HTML 페이지의 모든 개별 요소에 액세스하고 조작할 수 있습니다.
모든 브라우저가 이 표준을 구현했기 때문에 DOM 호환성 문제는 찾아보기가 거의 불가능합니다.
JavaScript에서 DOM을 사용하여 HTML, XHTML 및 XML 문서를 읽고 변경할 수 있습니다.

DOM은 다양한 부분(Core, XML 및 HTML)과 레벨(DOM 레벨 1/2/3)로 나뉩니다.
Core DOM
은 모든 구조화된 문서 객체에 대한 표준 세트를 정의합니다. 🎜>
XML DOM

은 XML 문서에 대한 표준 개체 집합을 정의합니다.
HTML DOM
은 HTML 문서에 대한 표준 개체 집합을 정의합니다.
이 기사에서는 HTML DOM을 사용하여 요소를 만드는 방법에 대해 자세히 설명하지 않습니다. 다음은 간단한 예입니다.

코드 복사

코드는 다음과 같습니다.

//Dom 표준을 사용하여 요소 생성

var select = document.createElement("select") select.options[0] = new Option ("추가 기능 1" , "value1"); select.options[1] = new Option("add-in2", "value2") select.size = "2"; >var 객체 = testDiv.appendChild(선택)
document.createElement 메소드를 사용하여 Dom 요소를 생성한 다음,appendChild 메소드를 통해 지정된 객체에 추가할 수 있습니다.
(2) jQuery 함수를 사용하여 요소를 생성합니다
jQuery에서 생성됨 객체는 Div 요소 생성과 같이 더 간단합니다.
$("

dynamically create div

")
우리는 주로 jQuery 핵심 클래스를 사용하십시오. 라이브러리의 메소드:

jQuery( html, ownerDocument )
반환: jQuery

HTML 원본 문자열을 기반으로 Dom 요소를 동적으로 생성합니다.

html 매개변수는 HTML 문자열입니다. 이 기능은 jQuery 1.3.2에서 개선되었습니다.

HTML 문자열이 속성이 없는 요소인 경우 document.createElement가 내부적으로 요소를 생성하는 데 사용됩니다. 예:

코드 복사 코드는 다음과 같습니다.

//jQuery는 내부적으로 document.createElement를 사용하여 요소를 생성합니다.
$("

").css("border" ,"solid 1px #FF0000" ).html("Dynamicly Created div").appendTo(testDiv)

그렇지 않으면 innerHTML 메서드를 사용하여 요소를 만듭니다.

코드 복사 코드는 다음과 같습니다.

 
//jQuery는 내부적으로 innerHTML을 사용하여 요소를 생성합니다. 
$("< ;div style="border:solid 1px #FF0000"> ;동적으로 생성된 div

").appendTo(testDiv);

3. 개체에 요소 추가
위의 두 가지 방법으로 요소를 생성할 수 있지만 위에서 언급한 것처럼 페이지가 로드될 때 요소를 추가하는 등 페이지의 DOM 구조를 변경해서는 안 됩니다. 올바른 접근 방식은 요소를 추가하거나 삭제하는 것입니다.
일반적으로 window .onload를 사용하면 위의 목적을 달성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//DOM이 로드된 후 요소 추가 
//기존 방법
window.onload = function() { testDiv.innerHTML = "동적으로 생성된 div
"; } 

DOM이 완전히 로드된 후에도 새 요소를 추가할 수 있지만 안타깝게도 브라우저에서 창이 실행됩니다. onload 기능은 DOM 트리가 구축된 이후뿐만 아니라 모든 이미지 및 기타 외부 리소스가 완전히 로드되어 브라우저 창에 표시된 후에도 수행됩니다. 따라서 특정 이미지나 기타 리소스를 로드하는 데 시간이 오래 걸리면 방문자에게 표시됩니다. 불완전한 페이지 또는 이미지가 로드되기 전에 필요한 종속성을 실행하는 경우에도 동적으로 추가된 요소에 대한 스크립트로 인해 스크립트 오류가 발생할 수 있습니다.

해결책은 DOM이 구문 분석될 때까지 기다렸다가 이미지와 함수를 실행하는 것입니다. 외부 리소스가 jQuery에서 로드됩니다.

코드 복사 코드는 다음과 같습니다.

//jQuery는 동적으로 생성된 $(document).ready(함수) 메서드를 사용합니다. 
$(document).ready( 
function() { testDiv.innerHTML = "동적으로 생성된 $(document).ready(function) 메소드
" } 
) 

또는 간단한 구문 사용:

코드 복사 코드는 다음과 같습니다.

//jQuery에서는 $(function) 메서드를 사용합니다.
$(
function() { testDiv.innerHTML = "

$(function) 메소드 사용

" }

使用$()将我们的函数包装起来即可. 而且可以在一个页面绑定多个函数, 如果使用传统的window.onload则只能调用一个函数.

所以请大家将修改DOM的函数使用此方法调用. 另外还要注意document.createElement和innerHTML的区别. 如果可以请尽量使用document.createElement和$("

")的形式创建对象.
四.管理jQuery包装集元素
既然学会了动态创建元素, 接下来就会想要把这些元素放入我们的jQuery包装集中.

我们可以在jQuery包装集上调用下面这些函数, 用来改变我们的原始jQuery包装集, 并且大部分返回的都是过滤后的jQuery包装集.

jQuery提供了一系列的函数用来管理包装集:

1.过滤 Filtering

名称	说明	举例
eq( index )	获取第N个元素	获取匹配的第二个元素: $("p").eq(1)
filter( expr )	筛选出与指定表达式匹配的元素集合。	保留带有select类的元素: $("p").filter(".selected")
filter( fn )	筛选出与指定函数返回值匹配的元素集合这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。	保留子元素中不含有ol的元素: $("div").filter(function(index) { return $("ol", this).size() == 0; });
is( expr ) 注意: 这个函数返回的不是jQuery包装集而是Boolean值	用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'. 'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。	由于input元素的父元素是一个表单元素，所以返回true: $("input[type='checkbox']").parent().is("form")
map( callback )	将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立	把form中的每个input元素的值建立一个列表: $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") );
not( expr )	删除与指定表达式匹配的元素	从p元素中删除带有 select 的ID的元素: $("p").not( $("#selected")[0] )
slice( start, end )	选取一个匹配的子集	选择第一个p元素: $("p").slice(0, 1);

2.查找 Finding

名称	说明	举例
add( expr )	把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。	动态生成一个元素并添加至匹配的元素中: $("p").add("Again")
children( [expr] )	取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。	查找DIV中的每个子元素: $("div").children()
closest( [expr] )	取得与表达式匹配的最新的父元素	为事件源最近的父类li对象更换样式: $(document).bind("click", function (e) { $(e.target).closest("li").toggleClass("hilight"); });
contents( )	查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容	查找所有文本节点并加粗: $("p").contents().not("[nodeType=1]").wrap("");
find( expr )	搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。	从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同: $("p").find("span")
next( [expr] )	取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。	找到每个段落的后面紧邻的同辈元素: $("p").next()
nextAll( [expr] )	查找当前元素之后所有的同辈元素。可以用表达式过滤	给第一个div之后的所有元素加个类: $("div:first").nextAll().addClass("after");
offsetParent( )	返回第一个有定位的父类(比如(relative或absolute)).
parent( [expr] )	取得一个包含着所有匹配元素的唯一父元素的元素集合。你可以使用可选的表达式来筛选。	查找每个段落的父元素: $("p").parent()
parents( [expr] )	取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。	找到每个span元素的所有祖先元素: $("span").parents()
prev( [expr] )	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。	각 단락의 바로 앞에 있는 형제 요소 찾기: $("p").prev()
prevAll( [expr] )	현재 요소 이전의 모든 형제 요소 찾기 표현식을 사용하여 필터링할 수 있습니다.	마지막 div 이전의 모든 div에 클래스 추가: $("div:last").prevAll().addClass("before");
남매( [expr] )	일치하는 요소 세트에 있는 각 요소의 모든 고유 형제를 포함하는 요소 세트를 가져옵니다. 선택적 표현식으로 필터링할 수 있습니다.	각 div의 모든 형제 찾기: $("div").siblings()

3. 체인 연결

名称

说明

举例

andSelf( )

加入先前所选的加入当前元素中

对于筛选或查找后的元素，要加入先前所选元素时将会很有用。

选取所有div以及内部的p，并加上border类:
$("div").find("p").andSelf().addClass("border");

end( )

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素:

$("p").find("span").end()

이름

설명
예

andSelf( ) 이전에 선택한 요소를 현재 요소에 추가 필터링되거나 검색된 요소에 이전에 선택한 요소를 추가하고 싶을 때 유용합니다. 모든 div와 내부 p를 선택하고 테두리 클래스를 추가합니다: $("div").find("p").andSelf().addClass("border") ; 끝( ) 마지막 "파괴적인" 작업으로 돌아갑니다. 즉, 일치하는 요소 목록을 이전 상태로 변경합니다. 이전에 파괴적인 작업이 없었다면 빈 세트가 반환됩니다. 소위 "파괴적"은 일치하는 jQuery 요소를 변경하는 모든 작업을 의미합니다. 여기에는 jQuery 객체('add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent)를 반환하는 Traversing의 모든 함수가 포함됩니다. ', 'parents', 'prev', 'prevAll', 'siblings' 및 'slice' - 조작의 'clone' 추가. 모든 p 요소를 선택하고, 범위 하위 요소를 찾아 선택한 다음, 돌아가서 p 요소를 선택합니다. $("p").find("span" ).end()5. 자주 사용하는 함수 예시[계속] 6. 이 기사의 내용은 상대적으로 적고, 주로 요소를 동적으로 생성하고 jQuery 패키징 세트를 관리하는 방법을 설명합니다. 인터페이스 문서에는 예제가 너무 많아서 아직 예제를 작성할 시간이 없었습니다. 내일 출근하세요. 양해 부탁드리며 나중에 시간이 나면 보충하겠습니다. 저자: Zhang Ziqiu출처: http://www.cnblogs.com/zhangziqiu/