본문 바로가기

Language/JavaScript6

jQuery 정리 | css 스타일, 이벤트, 애니메이션 스타일 설정 css 스타일 설정 $("p").css("fontSize", "25px");. $("p").css({ fontSize: "25px", // 모든 요소의 글씨 크기를 25px로 설정함. backgroundColor: "yellow" // 모든 요소의 배경색을 노란색으로 설정함. }); ex) $(function(){ $("button").on("click",function(){ $("p").css("fontSize", "25px"); $("#text").html($("p").css("fontSize")); }); }); 속성과 프로퍼티 설정 속성은 HTML 문서에 존재하고 값이 변하지 않으며, 프로퍼티는 HTML DOM 트리에 존재하고 그 값이 변할 수 있습니다. --> 체크박스가 체크되면 노.. 2022. 10. 6.
자바스크립트 null, undefined, '', 0 체크 null,undefined,'',0 은 모두 false 이다 !! obj === 0 bad if ( array.length === 0 ) better if ( !array.length ) array.length === 0 bad if ( array.length > 0 ) ... better if ( array.length ) ... undefined,null,공백문자 bad obj === undefined obj === null obj === "" obj === 0 better !obj 문자열이 비어있지 않다는 것을 판별 bad if ( string !== "" ) better if ( string ) 참고 사이트 : https://negabaro.github.io/archive/js-isEmpty 2022. 9. 12.
jQuery를 이용하여 객체 제어, 선택, 요소 추가, 대체, 삭제 목차 기본문법 선택자 선택한 요소 필터링 input 요소 선택 map 사용 getter, setter 요소추가 요소복사 요소대체 요소삭제 요소탐색 요소크기 요소위치 제이쿼리 (jQuery) 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. jQuery 를 이용하면 DOM를 사용하는 것 보다 훨씬 효율적으로 필요한 객체 조회할 수 있습니다. 객체를 조회할 때 CSS 선택자를 이용합니다. 참고 사이트 jquery CDN을 통해 사용 기본 문법 Document 객체의 ready() 메소드 자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 합니다. - 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우 오류 - 로드되지.. 2022. 4. 10.
JavaScript - 웹 브라우저 window DOM BOM 자바스크립트 웹 브라우저 구성요소들은 하나하나 객체화 되어있다. js 위치 헤더 위치 할경우 : onload = funcion() {} 외부파일 자바스크립트 코드를 .js 파일 안에 넣기 head 안에 src 지정 window 객체 (전역) -ECMAscript : 스크립트 표준 -DOM(Document Object Model) : html, xml, 구조화된 문서 접근 프로그래밍 -BOM : 브라우저 창에 접근하고 조작할 수 있게 하는 인터페이스 객체 : JS에서는 거의 모든 것이 객체 객체의 내용은 Property or 멤버라고 부름 / 키와 값으로 구성 Object 객체 최상위 객체 창 제어 window.open 메소드 window.open('demo2.html') 새 창이 만들어 진다. windo.. 2020. 7. 8.
자바스크립트 참고 라이브러리 / 외부파일 / CSS 디자인 참고 추가 / 반응형 만들기(제플린) 요소값 더하기 input.value = +input.value + 1; 버튼 아이디 알기 javascript — JavaScript - 클릭 된 버튼의 ID를 가져 오는 onClick 일반적으로 코드와 마크 업을 분리하면 정리가 더 쉬워집니다. 모든 요소를 ​​정의한 다음 JavaScript 섹션에서 해당 요소에 대해 수행해야하는 다양한 조치를 정의하십시오. 이벤트 처리기가 호출되면 클릭 한 요소의 컨텍스트 내에서 호출됩니다. 따라서 식별자 this 는 클릭 한 DOM 요소를 나타냅니다. 그런 다음 해당 식별자를 통해 요소의 특성에 액세스 할 수 있습니다. 예 : Button 1 Button 2 Button 3 var reply_cli www.it-swarm.dev 요소의 자식 갯수 알기 var ul =.. 2020. 5. 12.
자주 쓰이는 자바스크립트 js 출력 document.write("자바스크립트 안녕하세요 "); document.write("반갑습니다. "); num1 = 100; num2 = 5; r1 = num1 m){ document.write("크다.") }else{ document.write("작다.") } 스위치 jumsu = prompt("점수 입력") switch(parseInt(jumsu/10)) { case 9: alert("A"); break; case 8: alert("B"); break; case 7: alert("C"); break; default: alert("F"); break; } parseInt(jumsu/10) 정수로 변환하는 함수를 통해 해결 반복문 // 반복문 for(i=1; i max){ min = temp m.. 2020. 4. 28.