Jquery_jquery에서 일반적으로 사용되는 메서드 요약

//jQuery의 장점:

1 경량
​ ​ 2개의 강력한 선택기
​ ​ 3 DOM 작업의 탁월한 캡슐화
​ 4 안정적인 이벤트 처리 메커니즘
​ ​ 5 완벽한 아약스
​ ​ 6 최상위 변수를 오염시키지 마세요
​ ​ 7 뛰어난 브라우저 호환성
>           9 암시적 반복
10 동작이 구조적 레이어에서 분리되었습니다
11 풍부한 플러그인 지원
12 완전한 문서
13 오픈소스

629e799adbc9dadfcd341ee6c7f26ebf여기에는 코드가 허용되지 않습니다2cacc6d41bbb37262a98f745aa00fbf0

$("#foo")와 jQuery("#foo")는 동일합니다
$.ajax와 jQuery.ajax는 동일합니다. $ 기호는 jQuery의 약어입니다

// window.onload : $(function(){ })

$(function(){ })은 js의 window.onload 이벤트와 동일합니다. 페이지가 로드된 후 즉시 실행됩니다. 이것만 window.onload
와 같습니다. 하지만 window.onload는 하나만 쓸 수 있지만 $(function(){ })는 여러 개 쓸 수 있습니다
약어가 없으면 $(document)ready(function(){ })

//체인 운영 스타일:

    $(".level1>a").click(function(){
      $(this).addClass("current") //给当前元素添加"current"样式
      .next().show(); //下一个元素显示
      .parent().siblings()//父元素的同辈元素
      .children("a") //子元素<a>
      .removeClass("current")//移出"current"样式
      .next().hide();//他们的下一个元素隐藏
    return false;
    })

//jQuery 객체를 DOM 객체로 변환:

1 jQuery 객체는 배열류 객체이며, 해당 DOM 객체는 [index] 메소드를 통해 얻을 수 있습니다

var $cr = $("#cr");//jQuery 개체

          var cr = $[0] //DOM 객체

2 또 다른 메소드는 jQuery 자체에서 제공하며, get(index) 메소드를 통해 해당 DOM 객체를 얻는다

var $cr = $("#cr");//jQuery 개체

          var cr = $cr.get(0);//DOM 객체

//DOM 객체를 jQuery 객체로 변환:

DOM 객체의 경우 DOM 객체를 $()로 래핑하기만 하면 jQuery 객체를 얻을 수 있습니다.

방법은 다음과 같습니다: $(DOM 객체);

var cr = document.getElementById("cr");//DOM 객체

        var $cr = $(cr) //jQuery 객체

//충돌 해결:

1 다른 JS 라이브러리가 jQuery 라이브러리와 충돌하는 경우 언제든지 jQuery.noConflect() 함수를 호출하여 변수 $에 대한 제어를 다른 JavaScript 라이브러리로 넘길 수 있습니다.

    var $jaovo = jQuery.noConflict();
    $jaovo(function(){
      $jaovo("p").click(function(){
        alert($jaovo(this).text());
      });
    });

2 "jQuery"를 직접 사용하여 일부 jQuery 작업을 수행할 수 있습니다

    jQuery(function(){
      jQuery("p".click(function(){
        alert(jQuery(this).text());
      }));
    });

//jQuery 선택기

기본 선택기 1개
기본 선택자는 jQuery에서 가장 일반적으로 사용되는 선택자이자 가장 간단한 선택자이기도 합니다. 요소 ID, 클래스 및 태그 이름을 통해 DOM 요소를 검색합니다

.

//jQuery :

레이블 객체를 얻으세요.

//jQuery 객체 획득:

$("p");//모든 p 태그 개체 가져오기 ---- 가져온 개체는 배열입니다
$("#aa");//ID가 aa인 태그 개체 가져오기 --- 가져온 개체는 배열입니다
$(".aaa");//aaa 클래스가 포함된 태그 개체 가져오기 --- 가져온 개체는 배열입니다

//jQuery 객체와 DOM 객체 간 변환:

jQuery 메소드와 DOM 메소드는 서로 사용(호출)할 수 없지만 객체는 서로 변환할 수 있습니다
$("p");//jQuery 객체입니다
Document.documentElementsTagName("p");//DOM 객체입니다
$(document.documentElementsTagName("p"));//DOM 객체를 jQuery 객체로 변환
$("p").get(1);//DOM 객체입니다.
Get(1); 배열 p의 두 번째 숫자를 나타냅니다. (아래 첨자 1은 두 번째 숫자입니다.)
$($("p").get(1));//jQuery 객체는

으로 변환됩니다.

//DOM 객체로 변환된 jQuery 객체:

1 jQuery 객체는 배열류 객체이며, 해당 DOM 객체는 [index] 메소드를 통해 얻을 수 있습니다
        var $cr = $("#cr");//jQuery 개체
          var cr = $[0] //DOM 객체
2 또 다른 메소드는 jQuery 자체에서 제공하는데, get(index) 메소드를 통해 해당 DOM 객체를 얻는다
        var $cr = $("#cr");//jQuery 객체
          var cr = $cr.get(0);//DOM 객체

//DOM 객체를 jQuery 객체로 변환:

DOM 객체의 경우 DOM 객체를 $()로 래핑하기만 하면 jQuery 객체를 얻을 수 있습니다.
방법은 다음과 같습니다: $(DOM 객체);

var cr = document.getElementById("cr");//DOM 객체
        var $cr = $(cr) //jQuery 객체

//요소 생성:

        $("1a13e0f18c2398e8800483d008584a7e123bed06894275b65c1ab86501b08a632eb");//title=other 및 content 123 속성을 사용하여 25edfb22a4f469ecb59f1190150159c6 태그 만들기
​​​​요소 노드(레이블 이름) 속성 노드(속성 제목='xxx') 텍스트 라벨(123)

//text() 텍스트 노드:

text(): 선택한 태그의 내부 텍스트(사람의 눈에 보이는 내용)를 가져오는 함수/방법
>           var li = $("li").text();//li의 텍스트 노드에서 데이터 가져오기(즉, 123의 내용)

//attr() 속성 가져오기/속성 설정/속성 변경:

            f9c858b17a39ec55ef2776c60045f8c494b3e26ee717c64999d7867364b1b4a3;

var i = $("p").attr("title");//p 태그의 title 속성 값을 가져오는 것입니다

           $("p").attr("title"," bbb");//p 태그의 title 속성 값을 bbb로 변경

//removeAttr()는 지정된 요소의 속성 값을 삭제합니다.  

RemoveAttr(xx,xx) 속성 값 삭제

3890900377488528e14be48f68636109가장 좋아하는 과일은 무엇인가요?94b3e26ee717c64999d7867364b1b4a3
$("p").removeAttr('title',"your less favorite");//p 태그(최소 즐겨찾기)의 title 속성 값을 삭제하는 것입니다

//append()를 사용하여 요소를 추가합니다.

지정된 상위 요소에 일치하는 하위 요소를 추가합니다.

함수 체인 호출: 체인 호출을 사용할 수 있는 이유는 무엇인가요?
이전 함수가 여전히
이라는 개체를 반환하기 때문입니다. 예를 들어, a 아래의 a.append(b).append(c)는 상위 태그 객체로 b를 추가하는 함수를 호출하고 반환된 값은 여전히 ​​a의 객체이므로 함수를 호출할 수도 있습니다. c를 추가하세요

//a, b, c는 모두 라벨 객체입니다

var $li_1 = $("25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb");//요소 노드만 생성됩니다
            var $li_2 = $("25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb");
            var $parent = $("ul");

$parent.append($li_1).append($li_2);
a.append(b);//a(추가) 끝에 b를 추가합니다. a는 상위 태그이고 b는 하위 태그입니다
a.append(c);//a(append) 끝에 c를 추가합니다. a는 상위 태그이고 c는 하위 태그입니다
a.append(b).append(c);//a에 b와 c를 추가합니다. B와 c는 피어이지만 b는 c보다 높습니다(체인 호출 추가)
a.prepend(b)//a 앞에 b를 추가합니다. a는 상위 태그입니다. b는 하위 태그입니다.
a.insertAfter(b);//b(동일세대) 뒤에 a 추가

a.insertBefore(b);//b(동일 세대) 앞에 a 추가
//모바일 노드 호출
//일치하는 요소 앞에 지정된 요소를 삽입합니다(지정된 element.insertBefore("일치하는 요소"))

//appendTo()는 요소를 추가합니다:

//a는 객체이고 b는 태그 이름입니다
appendTo(): ​​​​일치하는 요소 집합에 지정된 요소를 추가합니다.

$("li").appendTo("ul");//ul에 li 태그 추가
a.appendTo("b"); //예, b는 a에 추가됩니다(a는 라벨이고 b는 라벨입니다)
지정된 요소.appendTo(일치하는 요소);

//요소 삭제(숨겨짐)remove():

a.remove();//html에서 제거(숨김)
var $li = $("ul li:eq(1)").remove();//li 요소인 아래 첨자 1이 있는 li 요소인 ul eq(1)에서 두 번째 li 태그를 제거합니다. , 아래 첨자는 0부터 시작하기 때문입니다
           $li.appendTo("ul");//ul에 방금 삭제한 요소를 다시 추가
            $("ul li").remove("li[title !=Apple]");//제목 속성이 Apple의 속성이 아닌 ul 요소에서 모든 li 요소를 삭제합니다

//removeAttr()는 지정된 요소의 속성 값을 삭제합니다.

RemoveAttr(xx,xx) 속성 값 삭제
3890900377488528e14be48f68636109가장 좋아하는 과일은 무엇인가요?94b3e26ee717c64999d7867364b1b4a3
$("p").removeAttr('title',"your less favorite");//p 태그(최소 즐겨찾기)의 title 속성 값을 삭제하는 것입니다

//비어 있음() 지우기:

         $("ul li:eq(1)").empty();//ul에서 두 번째 li 요소를 찾아 내용을 삭제합니다. (text node,

content(text node)

;)

//선택한 노드를 복사합니다. clone():

clone(true): 노드를 복사합니다. true인 경우 해당 노드에 바인딩된 이벤트 리스너도 복사됩니다. 쓰지 않으면 기본값은 false입니다.

$("li").clone()//현재 노드 복사
            $("li").clone().appendTo("ul");//li 노드를 복사하여 ul에 추가합니다(ul 내부에 추가)
$("li").clone(true).appendTo("ul");//li 노드를 복사하고, li에 바인딩된 이벤트 리스너를 복사하여 ul에 함께 추가합니다(ul 내부에 추가)

//선택한 노드 교체 replacementWith(),replaceAll():

a는 대체되는 객체입니다
          b는 교체할 전체 태그입니다.
a.replaceWith(b);//b는 a를 대체합니다(다음 b는 이전 a를 대체합니다) 후자가 이전을 대체합니다
          b.replaceAll(a);//ba 바꾸기(이전 b가 다음 a를 대체함) 앞면이 다음을 대체함

//ps가 여러 개인 경우 교체됩니다.

         $("p").replaceWith("8e99a69fbe029cd4e2b854e244eab143여자친구가 가장 좋아하지 않는 과일은???128dba7a3a77be0113eb0bea6ea0a5d0");//전체 p 태그를 < ;strong>What is your Girlfriend's로 바꿉니다. 가장 좋아하지 않는 과일???128dba7a3a77be0113eb0bea6ea0a5d0

//ps가 여러 개 있고 하나만 교체하려는 경우

          $($("p").get(1)).replaceWith("8e99a69fbe029cd4e2b854e244eab143여자친구가 가장 좋아하지 않는 과일은???128dba7a3a77be0113eb0bea6ea0a5d0");//첫 번째 2p만 교체 태그가 교체되었습니다
교체하려는 태그에 ID를 추가할 수도 있습니다. 즉, 하나만 교체됩니다.
              $("#abc").replaceWith("25edfb22a4f469ecb59f1190150159c6ID가 abcbed06894275b65c1ab86501b08a632eb인 태그를 교체했습니다.")

//replaceAll():
$("8e99a69fbe029cd4e2b854e244eab143엄마가 가장 좋아하지 않는 과일은 무엇인가요???128dba7a3a77be0113eb0bea6ea0a5d0").replaceAll("#abc");//전자는 후자를 ID #abc로 대체합니다. 해당 태그
               $("25edfb22a4f469ecb59f1190150159c6모든 p 태그를 교체했습니다bed06894275b65c1ab86501b08a632eb").replaceAll("p");//앞면은 다음을 대체합니다

//랩 Wrap() wraoAll() WrapInner() :

//랩() :

Wrap(): 일치하는 요소를 새 HTML 태그로 래핑합니다.
라벨 객체(래핑됨) b는 라벨(b 라벨로 래핑됨)
         모든 a 태그가 래핑됩니다.
            a.wrap(b);
//태그가 있으면 다음으로 묶습니다.
~ | //a 태그가 여러 개인 경우 다음으로 묶습니다.
~ | ~ | ~ | 각각 포장 분리해서 함께 담아드려요
          a.wrap("b");//a에 상위 태그를 추가하고 b로 래핑합니다
> $("p").wrap("5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6");//p 태그에 상위 태그를 추가합니다. 즉, p 태그를 5a8028ccc7a7e27417bff9f05adf5932 태그로 래핑하여 dfd342487c2df911e032498a358902ed나는 p 태그입니다94b3e26ee717c64999d7867364b1b4a372ac96585ae54b6ae11f849d2649d9e6
           /*
> & Lt; 나는 & lt;/p & gt;                                          72ac96585ae54b6ae11f849d2649d9e6
             */


//wrapAll() :

WrapAll(): 포장할 라벨이 함께 있지 않고 중간에 다른 라벨이 있어도 포장할 라벨을 함께 이동하여 함께 포장합니다.
//소포 전
>                                                 e388a4556c0f65e1904146cc1a846beeaaa94b3e26ee717c64999d7867364b1b4a3
>    ​​​​ a.wrapAll(b);//모든 패키지
>                                                                                  ~ ~                            ~                             ~                                          e388a4556c0f65e1904146cc1a846beeaaa94b3e26ee717c64999d7867364b1b4a3
이렇게 감싸면 출력 위치도 바뀌고, 효과도 바뀌어요


//wrapInner() :


WrapInner(): 일치하는 태그의 내용에 지정된 태그를 추가합니다(원래 태그에 하위 태그를 추가하고 상위 태그의 텍스트 내용을 저장하는 것과 동일)
~              a.wrapInner("b");//결과는 다음과 같습니다. 3499910bf9dac5ae3c52d5ede7383485a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed ~ ~ $("li").wrapInner("5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6");//결과는 다음과 같습니다: d5b01ed333f292e161ef5c96ce4fe97f5a8028ccc7a7e27417bff9f05adf5932Apple72ac96585ae54b6ae11f849d2649d9e683b36784037341e032372b7e4e2f2682           6ec3bfc2be99a37ee6d43b930f84f6a0

                                       5a8028ccc7a7e27417bff9f05adf5932Apple72ac96585ae54b6ae11f849d2649d9e6

> //효과 전환 토글클래스():

효과 간 전환을 의미하며 처음 전환 시에는 모든 클래스로 구성된 효과를 의미합니다. 현재 효과와 지정된 효과 사이를 앞뒤로 전환하는 것을 의미합니다
           080b747a20f9163200dd0a7d304ba388
         .high{
                    font-weight:bold;     /* 굵은 글꼴 */
색상: 빨간색; }
.또 다른{

               글꼴 스타일:기울임꼴;

              색상:파란색; } >               936509da3c9467ce7bb4556b55118ba6가장 좋아하는 과일은 무엇인가요?94b3e26ee717c64999d7867364b1b4a3
$("p").toggleClass("another ");//실제로는 클래스를 변경하는 것입니다. 이 함수가 실행되면 other와 height를 변경하는 것과 동일합니다. 다른 클래스는 빨간색 글꼴로 표시됩니다

따라서 이 함수가 실행되면 색상이 한 번 변경됩니다. 이는 단지 $("p").toggleClass(" 뒤에 있는 클래스와 p 태그입니다. another") 내부에서 원래 클래스를 전환합니다

//요소에 특정 스타일이 포함되어 있는지 확인 hasClass():


$("p").hasClass("MyClass");//p 태그에 MyClass라는 클래스 속성이 있는지 확인
​​​​ $("p").is("MyClass");//위와 동일


//html() 및 텍스트():

          71f5245b86009d6097fd3cb90713162e8e99a69fbe029cd4e2b854e244eab143가장 좋아하는 과일은 무엇인가요?128dba7a3a77be0113eb0bea6ea0a5d094b3e26ee717c64999d7867364b1b4a3
$("p").html();//두 태그(e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3) 사이의 내용은 p의 innerHTML과 동일합니다. 즉,             $("p").text();//p 태그의 텍스트 데이터(텍스트 노드)입니다. 즉, 가장 좋아하는 과일은 무엇입니까?

//포커스 가져오기 및 잃기 focus() Blur() :

focus(): 포커스 가져오기
         흐림(): 초점을 잃음
$ ("레이블 이름 (#id 이름) (. 클래스 이름)").                  $("태그 이름(#ID 이름) (.class 이름)").blur(포커스를 잃었을 때 실행해야 하는 메서드 및 명령문 function(){문 연산})

//값 가져오기/변경() value defaultValue:

                        0e1b0868c52676fe3715864cee59bf3b ​​​​​ $("input").val();//가치를 얻을 값입니다

            $("input").val("Account is ****");//값을 변경할 값입니다
결과는 다음과 같습니다. e4978516229b40994efe8890760730be

//기본값:

value의 기본값, 즉 코드 작성 시 설정되는 값과 defaultValue가 무엇인지 나타냅니다

         일반적으로 판단에 사용됩니다
If (txt_value == ""){//값이 비어 있으면 시작 기본값을 value에 할당한다는 뜻입니다
입력 상자를 설정하는데 사용됩니다. 입력 상자가 아무 것도 출력하지 않으면 기본값이 입력됩니다. (입력 상자가 포커스를 얻지 못한 경우 입력 상자에 기본값이 표시됩니다. 포커스를 받은 후 기본값이 됩니다.) 고객이 아무것도 입력하지 않으면 값이 제거되고 기본값이 다시 할당되어 고객에게 아무것도 입력되지 않았음을 상기시키는 데 사용됩니다.)
          $("input").val($("input").defaultValue)
}

//하위 요소 수 보기 children()(하위 요소만, 하위 요소의 하위 요소는 계산되지 않으며, 직접 하위 요소는 하위 요소임):

$("tag").children();

tag.children()의 jQuery 객체;

> ~ ~                                      ~ >          5db79b134e9f6b82c0b36e0489ee08ed
           $("a").children();//즉 2입니다. 왜냐하면 a의 하위 요소는 b와 d뿐이기 때문입니다

$("b").children();//b에는 하위 요소 c가 하나만 있으므로 1입니다

$("d").children();//d에는 하위 요소가 없으므로 0입니다


//형제 요소, next(), prev(), siblings():

next();//동일 세대의 다음 요소

          prev();//동일 세대의 이전 요소

siblings();//모든 형제 요소

a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a 3890900377488528e14be48f68636109가장 좋아하는 과일은 무엇인가요?94b3e26ee717c64999d7867364b1b4a3

d5b01ed333f292e161ef5c96ce4fe97f애플bed06894275b65c1ab86501b08a632eb

34b2fa70c657ff22e2f326669effaa03주황색bed06894275b65c1ab86501b08a632eb

3de5ed615f5c442f4f4a76af38cc4371파인애플bed06894275b65c1ab86501b08a632eb

5a8028ccc7a7e27417bff9f05adf593245672ac96585ae54b6ae11f849d2649d9e6

// 예: next()

var p= $("p").next();
p.html();//p 요소 피어의 다음 요소 내용(innerHTML과 동일), 결과는 다음과 같습니다.
& Lt; 제목 = '사과' & lt;/li & gt; > > 안에 p의 피어의 다음 태그는 ul입니다.ff6d136ddc5fdfeffaf53ff6ee95f185여기에 html()929d1f5ca49e04fdcb27f9465b944689
의 내용이 있습니다. -----------
// 이전()

var p = $("p").prev();
           p.html();//b 요소인 p의 Peer 요소 이전 숫자입니다. b 요소의 html()이 123이므로 123입니다

123

-------------

// 형제자매()

var p = $("p").siblings();//모든 요소는 이제 배열입니다
p.html(); //배열이기 때문에 그냥 123입니다. 출력되면 첫 번째가 출력되므로 b 태그의 내용은 123입니다. 모든 내용을 보려면 트래버스해야 합니다. 🎜> for(var i =0;p.length;i ){

Alert(p[i].innerHTML);//내용은 이게 전부인데 왜 innerHTML을 사용하나요?

//p는 jQuery 객체이므로 jQuery 객체 뒤에 첨자가 오면 DOM 객체이므로 innerHTML만 사용할 수 있습니다. 이는 jQuery 객체의 html() 메서드와 동일한 기능을 갖습니다. >                   //alert()는 일반 팝업 상자입니다.
​​​​​​ //결과는 다음과 같습니다.
123
당신이 가장 좋아하는 과일은 무엇인가요?
사과
오렌지
파인애플
              456
}


//이벤트 위임 메커니즘:

이벤트 위임 메커니즘: 요소를 찾아 해당 속성을 변경해야 하지만 이 요소를 찾을 수 있는지 알 수 없으므로 임시 변수를 사용하여 해당 요소에 이벤트를 위임한 다음 요소를 찾습니다. . 발견되면 에 사건을 전달합니다.
// $(custom Variable.target).closest("찾고 있는 요소").css("찾은 후 속성", "속성 값 변경")  

//여기서 객체를 클릭하여 검색을 시작합니다. (a를 클릭하면 먼저 a를 찾은 다음, 스팬을 찾은 다음, p를 찾은 다음, 바디를 찾습니다. 올바른 태그를 찾을 때까지 온라인 검색을 중단하세요)

                $(document).bind("click",function(e){

                   $(e.target).closest("body").css("color","red");

                 })
//$(문서).bind("클릭",function("p"){
// $ ("p").Css ("색상", "빨간색")
~ ~ //

                     //문서: 문서 전체를 나타냅니다. 문서 내 불확실한 개체를 일치시키고 싶어서 이 형식을 사용했습니다.
                       //e: 우리가 찾고 있는 특정 요소를 나타내며, 불특정 값, $(e.target)은 불특정 개체
                    // 불특정 매칭 결과, 일치하는 사람이 바로 그 사람
>                

     
>                                                           >                                               >                                                             ~ ~ ~ 안에 안에 안에                                                929d1f5ca49e04fdcb27f9465b944689
>

//객체 오프셋의 왼쪽 여백과 위쪽 여백을 가져옵니다():


사용법:
               jQuery object.offset();
               jQuery object.offset().left/top;
           var $p = $("p").offset();//배열인 p의 왼쪽 여백과 위쪽 여백을 가져옵니다
           $p.left;//얻어진 값은 왼쪽 여백
           $p.top;//구해진 값은 상단 여백

//좌표 및 표시 설정, show():

Object.css().show("느림(느림)"/"보통(보통)"/"빠름(빠름)");

​ 미리 결정된 세 가지 속도("느림", "보통", "빠름") 중 하나의 문자열 또는 애니메이션 지속 시간을 나타내는 밀리초 값(예: 1000)

          $("#id").mouseover(function(e){
//e는 네이티브 js의 event
와 동일합니다. //e(마우스 오버)에 의해 트리거되는 이벤트 객체인 div 요소를 생성합니다. 이는 트리거될 때 이벤트 소스 객체(html 태그 참조)를 나타냅니다.
            var tooltip = "c4f2e5f2cda17ebc51ceca5f4bbed902" this.title "16b28748ea4df4d9c2150843fecfba68";
                                         $("body").append(tooltip) //문서에 추가
                   $("#tooltip").css({

"top":e.pageY "px",

"왼쪽":e.pageX "px", "너비":"300px" }).show("fast"); // x 좌표와 y 좌표를 설정하고 표시합니다. 여기서 e는 이벤트 소스가 이 이벤트를 트리거할 때 이벤트와 마우스 사이의 교차점 좌표입니다. 이것을 표현합니다. 상자의 왼쪽 상단 좌표

                 })