jQuery에서 탐색하는 방법은 무엇입니까? 여러 순회 방법에 대한 간략한 분석

青灯夜游
풀어 주다: 2022-02-24 10:51:39
앞으로
5705명이 탐색했습니다.

jQuery에서 어떻게 탐색하나요? 다음 글에서는 객체를 탐색하는 몇 가지 jQuery 방법을 공유하겠습니다. 도움이 되기를 바랍니다.

jQuery에서 탐색하는 방법은 무엇입니까? 여러 순회 방법에 대한 간략한 분석

jQuery 탐색의 여러 가지 방법

우리 모두는 js 탐색 방법이 다음과 같다는 것을 알고 있습니다. for(초기화 값, 루프 종료 조건, 단계 크기) 예:

 for (var i = 0; i < 3; i++) {//循环体}
로그인 후 복사

jQuery 탐색의 용도는 다음과 같습니다.

1.jq object.each(콜백) 또는 selector.each(콜백)[추천 학습: jQuery 동영상 튜토리얼]

콜백의 반환 값은 마지막에 설명됩니다

1.1. 콜백 함수는 매개 변수를 사용하지 않습니다. (*참고: 매개 변수가 없는 이러한 종류의 콜백은 컬렉션의 각 요소 개체만 가져올 수 있지만 해당 인덱스 값은 가져올 수 없으며 이를 통해서만 개체를 ​​가져올 수 있습니다.)

- > 구문: jquery object.each(function(){});

//html
<ul id="course">
    <li>js</li>
    <li>java</li>
    <li>C++</li>
    <li>jq</li>
</ul>
로그인 후 복사
//实例
$("button").click(function(){
  $("#course li").each(function(){
    alert($(this).html());//jq获取方式
    alert(this.innerHTML);//js获取方式
  });
});
로그인 후 복사

1.2. 매개변수가 있는 콜백 함수(*인덱스 인덱스를 얻을 수 있으며, 요소 객체를 얻는 방법은 다음과 같이 두 가지가 있습니다)

->구문: jquery object.each(function(index,element){});

  • index: 컬렉션에 있는 요소의 인덱스입니다
  • element: 컬렉션에 있는 각 요소 개체입니다
  • this : 컬렉션 내
//实例
  $("#course li").each(function (index, item) {
			//3.1 获取 li对象 第一种方式 this
            //alert(this.innerHTML);//js获取
            //alert($(this).html());//jq获取
            /*3.2 获取 li对象 第二种方式
             在回调函数中定义参数 index(索引)item(元素对象)*/
           // alert(index+":"+item.innerHTML);
            alert(index+":"+$(item).html());
}
로그인 후 복사

2.jQuery.each(object, [callback])

콜백의 반환 값은 마지막에 설명하겠습니다

2.1. 함수는 매개변수를 취하지 않습니다(* 및 1.1 효과는 유사하며 이를 통해서만 객체를 얻을 수 있습니다)

-> 구문: $.each(object, function(){});

$.each($("#course li"),function () {
              //alert($(this).html());//jq获取方式
   			  alert(this.innerHTML);//js获取方式
         });
로그인 후 복사

2.2. 매개변수가 있는 콜백 함수(*1.2와 유사하지만 다음과 같이 다르게 작성된 인덱스 index 를 얻을 수 있습니다)

->

index: 컬렉션에 있는 요소의 인덱스입니다.
  • item: 컬렉션에 있는 모든 요소 개체입니다.
  • this: 컬렉션에 있는 모든 요소 개체입니다.
  • $.each($("#course li"),function (index,item) {
                 //3.1 获取 li对象 第一种方式 this
               // alert(this.innerHTML);//js获取
               // alert($(this).html());//jq获取
                /*3.2 获取 li对象 第二种方式
                 在回调函数中定义参数 index(索引)item(元素对象)*/
                //alert(index+":"+item.innerHTML);
                alert(index+":"+$(item).html());
             });
    로그인 후 복사

3: 제공되는 메서드입니다. jquery 3.0 버전 이후(*이해)​​ - > 구문: for (컨테이너 객체의 요소 객체)

   for (li of $("#course li")) {
            alert($(li).html());
        }
로그인 후 복사

4 콜백 함수 반환 값 문제(첫 번째 및 두 번째 관련): (*보충)

true: 현재 함수가 false를 반환하면 루프가 종료됩니다(중단).
  • false: 현재 함수가 true를 반환하면 이 루프를 종료하고 다음 루프를 계속합니다(계속)
  • 예:
  $.each($("#course li"), function (index, item) {
            //判断如果是java,则结束循环
            if ("java" == $(item).html()) {
                //如果当前function返回为false,则结束循环(break)。
                //如果返回为true,则结束本次循环,继续下次循环(continue)
                return false;	
            }
            alert($(this).html());//此时前端页面只会弹出第一个值js
        });
        
  $.each($("#course li"), function (index, item) {
            //判断如果是java,则结束循环
            if ("java" == $(item).html()) {
                //如果当前function返回为false,则结束循环(break)。
                //如果返回为true,则结束本次循环,继续下次循环(continue)
                return true;	
            }
            alert($(this).html());//此时前端页面会依次弹出js,C++jq,不会弹出java
        });
로그인 후 복사

(동영상 공유 학습:

웹 프론트엔드

)

위 내용은 jQuery에서 탐색하는 방법은 무엇입니까? 여러 순회 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!