1. this의 용법
- 여러개의 요소를 의미하는 CSS셀렉터를 사용하여 이벤트 정의한 경우,
대상 요소들은 모두 동일한 이벤트 발생시킬 수 있다. - $(this)는 현재 이벤트가 발생한 단 하나의 요소를 가리킨다.
2. this를 부정하는 not(this)
-
$(요소)객체의 not(this)함수는 여러 HTML요소들 중 이벤트가 발생한
자신을 제외한 나머지 객체들을 가리킨다.<ul> <li></li> <li></li> <li></li> </ul> $("ul > li").이벤트(function(){ $(this).html("안녕"); // 내가 클릭한 요소에 적용 $("ul > li").not(this).html("Hello"); // 나머지 두개는 // Hello 라고 적용 }); ------------------ <button class="btn">버튼1</button> <button class="btn" id="mybtn">버튼2</button> <button class="btn">버튼3</button> - id가 mybtn인 버튼 태그에 미적용 $(".btn").not($("#mybtn")).css(....); - <button>태그 중에서 세 번째 요소만 제외 $(".btn").not(".btn:eq(2)").css(...);
3. 애니메이션 처리
- show(), hide(), toggle()
- fadeIn() : 점점 나타나기, fadeOut() : 점점 사라지기, fadeToggel()
- slideDown() : 아래로 펼침, slideUp() : 위로 접힘, sildeToggle()
4. modal
-
부모창 위에 열려 있는 팝업창이, 자신이 닫히기 전에는 부모창에 접근하지 못하게 하는 형태의 윈도우
-
window.open() 처리로는 modal 윈도우를 구현할 수 없기 때문에,
HTML 페이지 안에 빈 div를 숨겨놓고, 이벤트가 발생했을때 팝업처럼 사용한다.<style type="text/css"> /** 공통 속성 설정 */ * { padding: 0; margin: 0; } ul { list-style: none; } .pull-left { float: left; } .clearfix:after { content: ''; display: block; clear: both; float: none; } /** 목록 박스의 넓이 지정 및 중앙 배치 */ .gallery { width: 700px; margin: auto; border: 5px solid #d5d5d5; } /** 각 항목에 대한 가로 배열 */ .gallery .item { width: 25%; } /** 각 항목 링크에 대한 크기 지정 */ .gallery .item .modal { display: block; margin: 10px; width: auto; } /** 이미지에 대한 테두리 제거 및 여백 지정 */ .gallery .item .modal img { width: 100%; height: 100%; } /** 화면 전체를 덮는 배경 레이어의 위치, 크기, 투명도 지정 > 기본적으로 표시되지 않도록 설정 */ .gray_layer { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background: black; opacity: 0.60; display: none; } /** 이미지가 표현될 레이어를 화면 중앙에 배치 > 기본적으로 표시되지 않도록 설정 */ .over_layer { /* 요소의 좌측상단 꼭지점이 화면 중앙에 위치하게 된다. */ position: fixed; top: 50%; left: 50%; /* 요소의 크기/2 만큼 왼쪽,상단 방향으로 이동시켜 가운데 배치한다 */ margin-top: -244px; margin-left: -325px; display: none; } </style> </head> <body> <!-- 화면에 표시될 원본 보기 영역 - 기본적으로 숨겨진 상태이다. --> <div class='gray_layer' id='background'></div> <div class='over_layer' id='front'></div> <script type="text/javascript"> $(".modal").click(function(e){ e.preventDefault(); $("#background").fadeIn(200); // 배경 레이어 $("#front").fadeIn(200); // 이미지 레이어 let src = $(this).attr('href'); // 클릭한 링크의 href 속성값 = 이미지경로 let img = "<img src='" + src + "' />"; // 이미지 태그 구성 $("#front").html(img); }); // 화면에 표시된 배경 레이어를 클릭한 경우 $("#background").click(function(){ $(this).fadeOut(300); // 배경 레이어 숨김 $("#front").fadeOut(300); // 이미지 레이어 숨길 }); </script> </body>
5. 특정 요소를 기준으로하여 주변 탐색하기
-
하나의 요소를 기준으로 하여 이전, 다음, 상위, 하위, 하위 n번째 요소를
리턴하는 함수들을 통해 HTML 구조를 탐색할 수 있다.메서드 이름 설명 next() 현재 요소를 기준으로 다음 요소를 리턴 prev() 현재 요소를 기준으로 이전 요소를 리턴 parent() 현재 요소의 상위 요소를 리턴 children() 현재 요소의 하위 요소를 배열로 리턴 eq(n) 현재 요소의 하위 요소중에서 n번째 요소를 선택 n의 값은 0부터 시작5번 : $("td:eq(4)"); or $("td").eq(4);
4번 : $("td:eq(4)").prev();
6번 : $("td").eq(4).next();
1,2,3을 감싸는 : $("td").eq(4).parent().prev();
4,5,6을 감싸는 : $("td:eq(4)").parent();
7,8,9을 감싸는 : $("td:eq(4)").parent().next();
8번 : $("td:eq(4)").parent().next().children().eq(1);
6. input 요소의 입력값 검사
6-1. val() 함수의 사용
-
입력값 설정하기
-> 파라미터를 통해 입력값을 설정한다.$(셀렉터).val("내용");
-
입력값 조회하기
-> 파라미터 없이 함수를 호출하면 현재 설정되어 있는 입력값을
리턴받는다.let value = $("셀렉터").val();
-
조회한 입력값의 존재 여부를 if문으로 검사하면 입력여부를 알 수 있다.
if(!value){...}
-
focus() 함수의 사용
-> focus()함수는 입력 요소에 포커스를 강제로 설정한다.$(셀렉터).focus();
-
입력값 검사 패턴
let id = $(셀렉터).val(); if( !id ){ alert("아이디를 입력해주세요"); $(셀렉터).focus(); return false; // 처리 중단 }<body> <form id="myform"> <div> <label for='username'>사용자이름</label> <input type='text' name='username' id='username' /> </div> <div> <label for='userpass'>비밀번호</label> <input type='password' name='userpass' id='userpass' /> </div> <button type="submit">입력값 확인</button> <hr /> <!-- 선택결과를 표시할 div --> <div id="result"></div> </form> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script> // 폼에서의 데이터 전송 이벤트 $("#myform").submit(function(e){ // 데이터 전송 강제 중단 e.preventDefault(); let username = $("#username").val(); // 입력값 가져오기 if(!username){ // 입력값이 없다면? alert("이름을 입력하세요"); // 메시지 표시 $("#username").focus(); // 포커스 강제 지정 return false; // 함수 처리 중단 } let userpass = $("#userpass").val(); if(!userpass){ alert("비밀번호를 입력하세요!"); $("#userpass").focus(); return false; } // 입력값을 화면에 표시하기 $("#result").append("<div>이름 : " + username + "</div>"); $("#result").append("<div>비밀번호 : " + userpass + "</div>"); // 백엔드 페이지에게 데이터를 전송해야 할 경우 사용 //$(this).submit(); }); </script> </body>
개발자로 진로 변경을 위해 준비하고 있습니다