분류 전체보기395 3월 21일 (2) JavaScript - jQurey 요소 추가, 속성값 가져오기/ 변경하기 + 메서드 체이닝(Method Chaining) 기능들이 연결된 것처럼 연속적으로 처리된다. 동일한 요소에 여러 명령을 차례로 실행할 수 있는 연결 기술 기존명령 + .새메서드() + .새메서드() + ....... $("선택자").css("color", "red").slideUp().slideDown(); 3. 형제 요소 선택 $("선택자").siblings() : 모든 동일 계층 요소 $("선택자").prev() : 선택자 이전요소(하나) 선택요소 위쪽 $("선택자").prevAll() :이전의 모든 요소 $("선택자").prevUntil("지정요소") : 선택자와 지정요소 사이의 모든 요소 (선택자와 지정요소 제외) $("선택자").next() : 선택자 요소의 다음 요소(하나) 선택요소 아래쪽 $.. 2023. 3. 21. 3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계) 어제 이어서 slidetoggle 예제 수정 부분 $("#flip2").click(function () { $("#p2").slideToggle("show", function(){ let view = $("#p2").css("display"); if(view == "none"){ $("#flip2").text("토글 - 다운"); } else { $("#flip2").text("토글 - 업"); } }); }); 기본선택자 1) 태그명 - $("div") 2) class - $(".box") 3) id - $("#d1") 선택자 전체 요소 선택자 - $("*") 현재 요소 선택자 - $(this) 속성 선택자 - $("[]") 조합 선택자 태그명과 class 혼합 - $("p.c1") 같은 형제 태그들 .. 2023. 3. 21. 3월 20일 (2) JavaScript - jQuery event, effect ready() html 요소가 모두 로드된 뒤에 처리될 수 있도록 js 코드는 ready() 함수 내에 작성한다. $(document).ready(function() { 여기에 모든 자바스크립트 코드를 작성 }); -> 단축형태 $(function(){ 여기에 모든 자바스크립트 코드를 작성 }); $(document).ready(function() { $("#btn").click(function(){ alert("버튼을 눌렀습니다."); }); }); 단축 $(function() { $("#btn").click(function(){ alert("버튼을 눌렀습니다."); }); }); 버튼 jQuery 이벤트 키워드 이벤트는 ~ 할 때, ~될 때 시점을 말한다. 1. 마우스 이벤트 click : 클릭이벤트.. 2023. 3. 20. 1049. 두 정수 입력받아 비교하기1 두 정수(a, b)를 입력받아 a가 b보다 크면 1을, a가 b보다 작거나 같으면 0을 출력하는 프로그램을 작성해보자. 참고 어떤 값을 비교하기 위해 비교/관계연산자(comparison/relational)를 사용할 수 있다. 비교/관계연산자 > 는 왼쪽의 값이 오른쪽 값 보다 큰 경우 참(true)을 나타내는 정수값 1로 계산하고, 그 외의 경우에는 거짓(false)를 나타내는 정수값 0으로 계산한다. 비교/관계연산자도 일반적인 사칙연산자처럼 주어진 두 수를 이용해 계산을 수행하고, 그 결과를 1(참), 또는 0(거짓)으로 계산해 주는 연산자이다. 비교/관계연산자는 >, =, 2023. 3. 20. 3월 20일 (1) JavaScript - 예제, jQuery p 620 light box 예제 사용자 정의 속성 : 사용자(개발자)가 어떤 목적으로 사용하기 위해 임의의 이름으로 작성한 속성. 자바스크립트, CSS에서 활용할 수 있다. 라이트박스 예제에서는 썸네일 이미지와 연결할 본 이미지의 정보를 저장하기 위해 'data-src'라는 임의의 이름으로 작성하였다. html 5에서 새로 생긴 일종의 메타 데이터 속성 data-XXX 사용자 정의 속성은 CSS 부트스트랩을 사용할 때 자바스크립크과 같이 많이 사용된다. 이벤트에서의 this 이벤트가 발생된 html 요소 . html 문서 CSS 문서 @charset "UTF-8"; .row { width: 420px; margin: 0 auto; } .row ul { list-style: none; margin: 0;.. 2023. 3. 20. 1048. 한 번에 2의 거듭제곱 배로 출력하기 정수 2개(a, b)를 입력받아 a를 2b배 곱한 값으로 출력해보자. 0 2023. 3. 19. 이전 1 ··· 40 41 42 43 44 45 46 ··· 66 다음
