[Day2] jQuery 2 - 효과, 콜백함수, selector(선택자)

[Day2] jQuery 2 [11/30]

--복습--

같은 코딩

     $(document).ready(function (){
     });
  
      $(function (){
      });         
      $( jq selector).action();

[jquery 효과 ]

- 숨기기, 표기, 토글 , 슬라이드, 페이드 , 애니메이션... 등등

- hide(), show()

모든 p태그 숨기기

  <button>show</button>
  <button>toggle</button>
  
  
  <!-- p*5>lorem5 -->
  <p>1. Lorem ipsum dolor sit amet.</p>
  <p  style="display: none;">2. Sunt hic repudiandae sed reiciendis!</p>
  <p>3. Nulla ab nobis ea reprehenderit?</p>
  <p  style="display: none;">4. Deserunt nam enim ut accusamus.</p>
  <p>5. Minima sunt amet perferendis excepturi.</p>

  <script>
       $(function (){
    	   $("button").last().click(function (){
    		   // show() -> hide()
    		   // hide() -> show()
    		   // 토글 기능
    		   $("p").toggle(600);  
    	   } );
       });
  </script>
  
  
<script>
   $(function (){
	   //                 css selector  -> jquery selector  +  알파
	   //$("button:nth-of-type(1)")
	   //$("button:first-of-type")
	   //$("button:eq(0)")
	   // $("button").first().click( function (){
	   $("body").find("button").eq(0).click(  function (){
		    // alert("2")
		    // 모든 p 태그
		    // $("p").hide();
		   // $("p").hide(400);
		   $("p").hide("slow" , function (){
			      alert("숨기기 완료!!")
			});  // "fast"
	   });
   });
</script>

* 버튼 찾기 많은 방법이 있음

<a href="http://www.daum.net">daum</a>

    // 위의 daum 링크태그를 클릭할 때 
    // 그 링크 태그를 숨겨라..
    // a 링크 태그의 기본 기능이 페이지 이동.(연결)
    $("a").click( function (event){
    	// $(this).href = "#";
    	// this.href = "#";  // (고민)  href 속성 X
    	event.preventDefault();  // ( 기억 )
    	// submit
    	$(this).hide();
    });

* 링크를 안먹게하고 hide (#으로 두거나 event.preventDefault()도 가능)

+fade, fadeTo, slidedown, slideup, slidetodggle, animate(애니메이션 큐 제공),

(jquery days02 참고)

콜백함수 : 작업한 사람이 작업 완료했다는 것을 호출해서 알려지는 함수 (작업이 끝난 후 호출되는 함수)

<button>hide</button>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Quibusdam dolorem soluta accusamus sint atque explicabo 
nesciunt consequatur beatae quae fuga excepturi corrupti 
tempora commodi enim nulla deleniti magni provident? 
Vitae.</p>

  $(function (){
	  $("button").click( function (){
		  // 1. p 숨기기. (3초)
		  // 2. p 완전히 숨기진 후에 경고창 띄우기를...
		  /*
		  $("p").hide(3000);
		  alert("완전히 숨겨습니다.")
		  */
		  $("p").hide(3000, function (){
			  // 콜백함수
			  alert("완전히 숨겨습니다.")
		  });
	  });
  });

* hide(3000, 여기 오는게 콜백함수)

jquery selector

1. * 모든 요소들 ex02_02.html

2. #id

3. .class

4. .class, .class

5. element

6. :first ex02_03.html

:last

7. :even 짝수 0,2,4 ex02_04.html

:odd 홀수 1,3,5..

8. :first-child ex02_05.html

:last-child

   // 모든 p 태그  : 배경색 = 노랑
   // $("p").css("background-color", "yellow");
   
   // 첫 번째 p 태그의 배경색 = 노랑
   // jquery selectors 
   // first() : jquery method
   // last() : jquery method
   // eq(index) : jquery method
   
   // $("p").first().css("background-color", "yellow");
   $("p:first").css("background-color", "red");
   $("p:last").css("background-color", "blue");

* 함수, 태그 차이

:first-of-type

:last - of-type

    $(function (){
    	$("#btn1").click( function (){
        	// $("p").css("background-color","yellow");
        	
        	// :first   선택자 :  모든 p 태그 중에 첫 번째 p 태그...
    		$("p:first").css("background-color","red");
        });	// btn1_click
        
        $("#btn2").click( function (){ 
        	// 어떤 요소의  자식(child)요소 중에 첫 번째 자식이 p 인 선택자.
    		$("p:first-child").css("background-color","green");
        });	// btn2_click
        
        $("#btn3").click( function (){ 
        	//  어떤 요소의 처음 인  p 태그
    		$("p:first-of-type").css("background-color","blue");
        });	// btn3_click
        
    }); // ready

* first-child : 자식요소 중 첫번째가 p 면 해당

* first-of-type : 자식요소 중 처음으로 오는 p가 해당

9. :nth-child(n) ex02_06.html

:nth-last-child(n)

jquery method nth-of-type()

:nth-of-type(n)

:nth-last-of-type(n)

10. :only-child ex02_07.html

:only-of-type

11. ex02_08.html

parent > child : 직계자식만

parent child : 직계자식 + 후손

parent + child : div 다음 형제태그가 p

parent ~ child : div 뒤에 따라오는 p 태그인데 바로뒤 아니더라도 상관없음 (모든 형제태그인 p)

12.

eq(양수, 음수 index)

:eq(index) == ex02_09.html

:gt(no) >

:lt(no) <

13. :not(selector) ex02_10.html

not() jquery method

14. :header ex02_11.html

15. :animated ex02_12.html

애니메이션 진행중인 모든 요소

16. :focus ex02_13.html

:text <input type="text">

17. :has(selector) ex02_14.html

가지다.

18. :contains( text string ) ex02_14.html

포함하다.

19. :empty ex02_15.html

20. :parent 부모( 자식 )

다른 요소의 부모가 되는 모든 요소

21. :hidden ex02_16.html

:visible

22. :root

document.documentElement

루트 엘리먼트

html 요소

23. :lang( language )

lang 속성..

css selector < jquery selector

24. ex02_17.html

[attribute]

[attribute=value]

[attribute!=value]

[attribute*=value]

[attribute$=value]

[attribute^=value]

[attribute~=value]

[attribute|=value] X

25.

:disabled

:enabled

:input == <input> 모든 input 태그

:text == input[type=text]

:radio == input[type=radid]

:password == input[type=password]

:chcekbox == input[type=checkbox]

:submit == input[type=submit]

:reset == input[type=reset]

:image == input[type=image]

:file == input[type=file]

:button == input[type=button]

:checked = 체크된 input 태그

:selected <option selected=selected>

// $(selector).action()

저작자표시

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

[Day3] jQuery 3 - DOM, 요소추가, 탐색, 이벤트, wrap (0)	2022.12.05
[Day1] jQuery 1 - 개요, 클릭이벤트 등록 (0)	2022.11.30
[Day8] JS 8 - 모달, DOM, cookie (0)	2022.11.30
[Day7] JS 7 - 클로저, dragdrop, 컬렉션, BOM, 팝업창, 모달창 (0)	2022.11.29
[Day6] JS 6 - set, map, 자료형, 예외처리, this, 클래스, 모듈, 객체, 함수, 스크롤, 이벤트버블링 (0)	2022.11.25

[Day2] jQuery 2 - 효과, 콜백함수, selector(선택자)

[Day2] jQuery 2 [11/30]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day2] jQuery 2 [11/30]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바