jQuery 학습 노트 jQuery 의 DOM 조작

2928 단어 jQueryDOM
노드 조작
1.찾기 노드:
var $var_1=$("htmltype");   //이 말 은 모든 html type 노드 를 가 져 오 는 것 입 니 다.
var$ul1=$("ul");
 
2.노드 생 성 및 추가:
var $var_1=$("");//이 말 은 노드 를 만 드 는 것 이다.
$("htmltype2").append($var_1) ; //이 말 은 노드 를 모든 html type 2 노드 에 삽입 하 는 것 입 니 다.
예:var$li1=$("바나나");
         $("ul").append($li_1);
 
그 중 삽입 방법 은 다음 과 같은 몇 가지 가 있다.
  • append()는 B 를 A 내부 에 추가 합 니 다(모든 A 요소,이하 유사)
  • appendTo()A 를 B 내부 에 추가
  • prepend()B 를 A 내부 내용 앞 에 추가
  • prependTo()는 A 를 B 의 내용 앞 에 추가 했다.
  • after()A 후 추가 B
  • insert After()A 앞에서 B 추가
  • before()A 앞에서 B 추가
  • insert Before()A 후 추가 B
    • 예:$("ul").append("
  • 안녕하세요
    • ");/l 내부 에 li 추가
             $("
  • 안녕하세요
    • ").appendTo("ul");/l 내부 에 li 추가
     
    3.노드 삭제
  • remove()이 요소 삭제
  • empty()노드 를 비우 고 후대 노드
    • 를 포함한다.
    예:$(l)  li:eq[1]").remove(); //얼 의 두 번 째 li 를 가 져 오고 삭제 합 니 다.
            $("ul  li").remove("li[title="파인애플");/l 에서 li 요소 속성 title="파인애플"요소 삭제
     
    4.복제 노드
  • clone();//이 노드 복사
    • 예:$(l)  li:eq[1]").clone().appenTo("ul");//얼 에 복사 및 추가,복사 만 표시 되 지 않 습 니 다
     
    5.노드 교체
  • replaceWith();//모든 A 를 B 로 바 꾸 기
  • replaceAll();//A 를 모든 B 로 교체
    • 6.패키지 노드
  • warpAll();//B 로 감 싸 기 A
  • warpInner();//B 로 A 를 감 싸 는 내용
    •  
    속성 조작
    1.속성 가 져 오기 및 설정
    var $var_1=$("p");//노드 P 가 져 오기
     var $p_1=$var_1.attr("title");//노드 P 의 title 속성 가 져 오기
    var $p_2=$var_1.attr("title","안녕하세요");//노드 P 의 title 속성 을"안녕하세요"로 설정 합 니 다.
      
    2.속성 삭제
    $("p").removeAttr("title");//노드 P 의 타이틀 속성 삭제
     
    3.스타일 조작
    1.스타일 가 져 오기 및 설정
    var $var_class=$("p").attr("class");//노드 P 의 class 속성 가 져 오기
    $("p").attr("class","class1");노드 P 의 class 속성 을 스타일 시트 클래스 class 1 로 설정 합 니 다.
     
    2.스타일 추가
  • addClass()스타일 을 A
    • 에 추가 합 니 다.
    예:$("p").addClass("another");스타일 시트 클래스 another 클래스 를 P 에 추가 하기
     
    3.스타일 삭제
  • removeClass()제거 클래스
    • 4.스타일 전환
  • toggleClass()clss 속성 클래스 를 새로운 클래스 로 전환
    • 5.어떤 스타일 이 존재 하 는 지 판단 하기
  • hasClass()
    • 내용 조작
  • html()이 방법 은 html 요소 의 내용 을 가 져 옵 니 다.예 를 들 어 var var 1=$("p").html();/P 요소 의 내용 가 져 오기
  • text()html 요소 의 내용 을 가 져 오 거나 설정 합 니 다.
  • val()요소 의 Value 값 가 져 오기
  • children()html 요소 의 모든 하위 노드 가 져 오기
  • next()  html 요 소 를 가 져 온 후 인접 한 또래 노드
  • prev()html 요소 앞 에 인접 한 또래 노드 가 져 오기
  • siblings()html 요소 전후 인접 한 또래 노드 획득
    • 5.CSS-DOM 기술
  • css("속성","값")는 요소 css 의 특정한 속성의 값 을 설정 합 니 다.예 를 들 어$("p").css("color","red");/P 의 css 속성{color:red;}
    •
    jQuery 학습 노트 의 jQuery 사건
    C 언어 는 3 개의 수 를 작은 것 에서 큰 것 으로 정렬/출력 하 는 방법 에 대한 예 시 를 실현 한다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage