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

WBOY
풀어 주다: 2016-05-16 15:41:25
원래의
1441명이 탐색했습니다.

//jQuery의 장점:

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


$("#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 객체

//요소 생성:

        $("

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

    //text() 텍스트 노드:

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

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

               

    ;

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

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

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

    RemoveAttr(xx,xx) 속성 값 삭제

    가장 좋아하는 과일은 무엇인가요?


    $("p").removeAttr('title',"your less favorite");//p 태그(최소 즐겨찾기)의 title 속성 값을 삭제하는 것입니다

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

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

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

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

    var $li_1 = $("

  • ");//요소 노드만 생성됩니다
                var $li_2 = $("
  • ");
                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) 속성 값 삭제

    가장 좋아하는 과일은 무엇인가요?


    $("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("여자친구가 가장 좋아하지 않는 과일은???");//전체 p 태그를 < ;strong>What is your Girlfriend's로 바꿉니다. 가장 좋아하지 않는 과일???

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

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

  • ID가 abc
  • 인 태그를 교체했습니다.")

    //replaceAll():
    $("엄마가 가장 좋아하지 않는 과일은 무엇인가요???").replaceAll("#abc");//전자는 후자를 ID #abc로 대체합니다. 해당 태그
                   $("

  • 모든 p 태그를 교체했습니다
  • ").replaceAll("p");//앞면은 다음을 대체합니다

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

    //랩() :

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

    나는 p 태그입니다


               /*
    > & Lt; 나는 & lt;/p & gt;                                         
                 */


    //wrapAll() :

    WrapAll(): 포장할 라벨이 함께 있지 않고 중간에 다른 라벨이 있어도 포장할 라벨을 함께 이동하여 함께 포장합니다.
    //소포 전
    >                                                

    aaa


    >    ​​​​ a.wrapAll(b);//모든 패키지
    >                                                                                  ~ ~                            ~                             ~                                         

    aaa


    이렇게 감싸면 출력 위치도 바뀌고, 효과도 바뀌어요


    //wrapInner() :


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

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



    효과 간 전환을 의미하며 처음 전환 시에는 모든 클래스로 구성된 효과를 의미합니다. 현재 효과와 지정된 효과 사이를 앞뒤로 전환하는 것을 의미합니다