jQuery 반복--find & each &children

자세히 보기
Jquery는 개발자의 필수 과정입니다. 프로그램을 하는 사람입니다. Js를 누르지 못하면 길이 울퉁불퉁하고 걸음걸이가 어려워집니다.
다음은 Jquery의 반복에 대한 체계적인 분석입니다.

    jQuery 、
  • Hello,my name is Tom!
  • This is my friend Jack,I'll introduce to you!
    • He likes balls.
    • He likes music. jQuery 、
    • jQuery 、
    • He is a lazzy boy ....
  • Now,for me, I like music too.
  • I don't like eat too much!!
  • 깜짝 놀랐어요...

이것은 다음 예에서 줄곧 사용될 코드다.
1.find() 방법
find는 Jquery의 사용이 매우 빈번합니다. 모든 것을 제가 제일 먼저 없애겠습니다.
find (): 현재 원소 집합의 모든 원소의 후손을 가져옵니다
구문:.find(selector)   
select: 현재 요소 집합에 일치하는 선택기 표현식을 포함하는 문자열 값입니다.
find는 단독으로 사용하지 않습니다. 앞에 DOM 요소가 집합된 Jquery 대상이 있어야 합니다.find () 방법은 DOM 수에서 이 원소의 후손을 검색하고 일치하는 원소로 새로운 Jquery 대상을 구성할 수 있도록 합니다.find() 및.children () 방법은 유사하지만, 다른 것은 후자가 DOM 트리를 따라 한 층만 아래로 옮겨다니는 것이다.
eg:
$(".surprice").click(function(){
    $("ul").parent().find("li").css('color','red');
});
//   ul   li             ,  li       

 2.each () 방법
모든 일치하는 요소를 상하문으로 삼아 함수를 실행합니다.
전달된 함수를 실행할 때마다 함수 중의this 키워드는 서로 다른 DOM 요소를 가리킨다는 뜻이다.그리고 함수를 실행할 때마다 함수에 실행 환경인 요소가 일치하는 요소 집합에 있는 위치를 나타내는 숫자 값을 매개 변수로 전달한다(0에서 시작하는 정수).'false' 를 되돌리면 순환을 멈출 것입니다. (일반적인 순환에서'break '를 사용하는 것과 같습니다.)'true'로 돌아가서 다음 순환으로 넘어갑니다. (일반적인 순환에서'continue'를 사용하는 것과 같습니다.)
구문:
$(selector).each(funciton(index,element));
function(index, element): 필요합니다.일치하는 요소마다 실행되는 함수
index: 선택기의 index 위치
요소: 현재 요소("this"선택기도 사용 가능)
eg:
$(".surprice").click(function(){
	$("ul li").each(function(i,item){
		var class_name = $(item).attr("class");
		if(class_name == "error"){
			$(this).css('color','red');		
                        //     $(item).css('color','red');
		}
	});
});
//  class  "error"         

 3.children () 방법
일치하는 원소 집합에 있는 모든 원소를 포함하는 모든 하위 원소의 원소 집합을 가져옵니다. 선택할 수 있는 표현식으로 일치하는 하위 원소를 필터합니다. 주의:children () 은 하위 원소만 고려하고 모든 하위 원소는 고려하지 않습니다.
구문:
 .children(selector);
selector: 일치하는 요소를 포함하는 선택기 표현식 문자열 값입니다.
DOM 요소 컬렉션을 나타내는 Jquery 객체가 지정된 경우children () 은 DOM 트리에서 이 요소들을 검색하고 일치하는 요소로 새로운 Jquery 대상을 구성할 수 있도록 합니다. 
eg:
$(".surprice").click(function(){
	$("ul").children("span").css("color",'red');
});
//      ,      ul  span     ,    ul  li  span      ,          span     。

좋은 웹페이지 즐겨찾기