[Day3] jQuery 3 - DOM, 요소추가, 탐색, 이벤트, wrap

[Day3] jQuery 3 [12/1] 

 

jq DOM 조작

        요소 쉽게 엑세스, 조작(생성, 수정, 삭제, 이동 등등)  - DOM 관련 메서드 

        DOM - html, xml 문서에 엑세스 하기 위한 표준 정의

        

        1) jq DOM method : 

           val()        input value     설정, 반환                             value

           text()      <시>텍스트</종>  html  X  설정, 반환            innerText

           html()     <시>텍스트</종>  html O  설정, 반환             innerHTML

           

        2) 속성 반환, 설정

            attr()

            prop()

            is()

  <input type="text" id="name" value="<b>admin</b>">
  <br>
  <button>확인</button>
  <p id="demo"></p>
  
  <hr>
  <!-- http://www.sist.co.kr -->
  <a href="#">sist</a>

<script>
  // $(document).ready(function (){});
  $(function (){
	  // $("a").href
	  // $("a").prop("href", ??)
	  
	  
	  // $("a").attr("href", "http://www.sist.co.kr");
	  
	  // href  속성 설정 + alt  속성
	  $("a").attr({
		  "href":"http://www.sist.co.kr",
		  "alt":"test",
		  "title": "쌍용교육센터"
	  });
	  
  });
</script>  
  
<script>
   // js
   /*
   document.querySelector("button").onclick = function (){
	   //document.getElementById("demo").innerText
	   document.getElementById("demo").innerHTML
	        =  document.getElementById("name").value;
   }
   */
</script>
<script>
    // jq 
    // $(selector).action();
    $("button").click( function (){
    	// $("#demo").text(  $("#name").val() );
    	// $("#demo").html(  $("#name").val() );
    	
    	$("#name").val( "xxx" );
    });
    
</script>

 

---

  [ jq 요소 추가 ]                     ex03_02.html

    append() / appendTo()    부모.append(자식) , 자식.appendTo(부모)

    prepend() / prependTo()

    before()

    after()

    

     [ jq 요소 추가 ] 

     remove()       선택한 요소를  제거

     empty()         선택한 요소의  자식 요소를 제거

    

    

    [ js 요소 추가 ]

    var p = document.createElement("p");

    appendChild( p )

    removeChild( p );

    p.remove();    

    insertBofore()

---

  [jq CSS 조작]

  1.  css()

  2. addClass()

  3. removeClass()

  4. toggleClass()

  5. hasClass()  true/fasle

---

  [jq  요소, 윈도우  크기]

  1.                              width()

  2. height()

  3.                              innerWidth()

  4. innerHeight()

  5.                               outerWidth()

  6. outerHeight()

  

    [너비(width)]

    

                                  margin  border  padding        [content]          padding      border     margin

                                    10px     2px         5px                                        5px           2px         10px

       

         jq  width()                                                |<-                        ->|    

         jq innerWidth()                        |<-                                                         ->|    

         jq outerWidth()            |<-                                                                                       ->|    

jq outerWidth(true)  |<-     

---

  jq  탐색(Traversing(횡단))

    -  증조부모

          ㄴ 조부모

                  ㄴ 부모

                        ㄴ 자식, +  자식 ... ( 형제 )

                            ㄴ 증손자 + 증손자 ..

                            

    [ 부모 탐색하는 jq 메서드 ]                         

    parent()

    parents()

    parentsUntil()     

 

jquery 탐색( 자손 )

    - children()  : 선택한 요소의 모든 직계 자식을 반환

    - find()        : 선택한 요소의      모든 하위(후손)을 반환

 

   1. 조상 탐색

       parent(), parents(), parentsUntil()

   2. 후손 탐색

       children(), find()

   3. 형제 탐색

      siblings()      

      next()  / prev()      

      nextAll(), nextUntil()

      prevAll(), prevUntil()

  4. 필터링

      first()

      last()

      not()

      eq()

      

      filter()

---

  jQuery 프레임워크  사용 + 다른 프레임워크 함께 사용.

   $ 기호                                    $ 기호                            [ 충돌 ]

   jQuery("p")

   작동 X

   

   => jquery method :   noConflict() 메서드를 사용해서 충돌 해결..

---

     // js     객체생성자 - 객체를 생성할 때 사용되는 함수   , 대문자로 함수명 시작.

     // days08 폴더  jquery-3.6.1.js       164 라인

     

     jQuery.fn = jQuery.prototype = {

 

// The current version of jQuery being used

jquery: version,

 

constructor: jQuery,

    :

}

 

// 객체 생성자로 속성, 메서드 추가

//  Person.prototype.속성명

//  Person.prototype.메서드명 = function (){}

---

    wrap()                      / unwrap()

    감싸다(포장하다)

---

    [ jq  이벤트 등록 ]

    on()            jquery Ajax ( 기억 )

    one()          이벤트 한번만 등록.

    off() 

---

        each()  검색

        1)  컬렉션 조작 :  each()

        2) 유틸리티      :  jQuery.each()