이것저것

slide() slideUp(), slideDown(), slideToggle()은 반드시  태그에 width, height 속성을 주어야 한다 그렇지 않으면 toggle()와 똑같은 동작을 한다  slideUp(speed) : speed값을 지정해서 슬라이드업 효과를 줄 수 있다speed : "slow" or "fast" or milliseconds(1/1000초)slide()특징slideUp 요소 기준 왼쪽 상단으로 올라간다.* 가로 세로 길이를 주면 커튼처럼 올라간다slideDown 요소 기준 왼쪽 상단에서 내려온다.fadeIn투명해지며 나타난다fadeOut투명해지며 사라진다slideToggle slideUp / slideDown 이 번갈아 가며 움직인다* 가로 세로 길이를 주면 커튼처럼 올라간다 ..

스타일 지정 속성값 읽기 var 변수명 = $("요소").css("CSS 속성이름"); 속성값 변경 및 추가하기 $("요소").css("속성이름", "값"); $("요소").css({     "속성1이름": "값",     "속성2이름": "값",     "속성3이름": "값" });$(this).css("background-image",'none')   클래스 속성 지정  속성 지정특징.hasClasscss 클래스 적용 여부 확인.addClass클래스 추가.removeClass클래스 삭제.toggleClass적용 해제 자동 반복클래스 있음 -> 삭제클래스 없음 -> 추가 CSS 클래스의 적용 여부 알기 var 변수 = $("요소").hasClass("클래스이름"); 클래스의 적용과 해제 $("요소")...

Checkbox 전체 선택/해제  전체선택 축구 야구 농구오류 1$('#all_check').change(function(){ $('.hobby_check').attr('checked', true); }); 전체 체크는 되는데 해제가 적용이 되지 않는다. 이유 : #all_check가 false가 되어도 checked가 true이기 때문에 해결방안  all_check의 상태에 따라 변경되도록 한다.$('#all_check').change(function(){ let isChk = $(this).is(':checked') //checked가 있냐 없냐 (true, false) $('.hobby_check').attr('checked', isChk);})  all_check가 true가 되어 있으면 hobb..

attr() / prop() jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다. 이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다.  attr()  HTML에 작성된 속성값을 문자열로 받아온다즉, 속성 값을 가져온다.attr = # attr = http://www.naver.com[형식] 1. 속성값 가져오기 var 변수명 = $("요소").attr("속성이름");2. 속성값 넣기 $("요소").attr("속성이름", "값"); $("요소").attr({         "속성1이름": "값",         "속성2이름": "값",         "속성3이..

window  전체 창 크기 조절할 때 많이 사용한다.$(window)$(window).width() : 창 가로 길이 $(window).height() : 창 세로 길이  scroll  창을 스크롤 했을 때 이벤트 함수$(window).scroll(function(){ //3초가 지나면 함수 실행 setTimeout(function(){ $('#console').html('조기화 되었음') }, 3000); //3초, 단위는 1/1000}); * resize: 크기를 변경했을 때 속성  .hasAttribute(name) 속성의 존재 확인 .getAttribute(name) 속성값을 가져온다 .setAttribute(name, value) 속성값을 변경 .removeAttribute(nam..

Submit  입력상자의 데이터를 가지고 페이지를 이동폼이 여러개일 때는 forms 사용해서 구분한다.forms[2] = 3번째 form 인텍스 시작 번호는 0부터 이다. submit은 반드시 form 안에 있어야한다.form안에 form은 안된다.(이중 form이 불가능하다)         /* html*/$('form[name="form1"]').submit(function(){ if( !confirm('정말로 가입하시겠습니까?')) return false;}); HTML회원가입 아이디 성별 남자 여자 취미 축구 농구 야구 직업 ..

Event click, hover, change, focus, key event ...  click : 클릭했을 때hover : 마우스를 올렸을 때change : 값이 변했을 때 - checkbox, radio에서 주로 사용focus : 포커스 갔을 때key event : 키보드 이벤트가 발생했을 때 Hover  마우스를 올렸을 때$('#input').hover(function(){ $('#result').html('마우스 올렸을 때') }, function(){ $('#result').html('마우스 내렸을 때') });});  key키보드를 입력했을 때$('#아이디').keydown(function(){ });키보드 입력에서 손을 올렸을 때$('#아이디').keyup(function(){ }); ..

jQuery 함수 JavaScript는 브라우저마다 다른 명령어를 사용하는 경우가 있는데 jQuery는 통일된다. JavaScript 보다 많이 축약해서 사용된다.h1.innerText -> h1.text() 시작함수 body안에 onload한거랑 같은 의미이다. window.onload = function(){  } jQuery(함수이름); 객체 $ : 객체 jQuery에서 사용하는 모든 객체를 받겠다. JavaScriptvar h1 = document.getElementById('hello'); JQueryvar h1 = $('#hello');  JavaScript h1.innerHTML = 'Hello jQuery'; h1.innerText = 'Hello jQuery';   JQuery h1.ht..

문서 객체 모델 웹 문서 전체 또는 일부분이 동적으로 반응하도록 만들기 위해 각 요소들을 따로 제어할 수 있도록 하는 개념이다. JavaScript는 Prototype 기반의 객체지향언어이다. DOM 웹 문서 자체도 객체이다제어 대상을 지정하는 방법  1. 태그의 id로 제어할 특정 태그를 저정한다.document.getElementById("아이디") Element : 모든 태그의 부모즉, 모든 태그의들 중에서 아이디가 "아이디"인 것을 가져와라 2. 태그의 class로 제어할 특정 태그를 저장한다.document.getElementsByClassName("클래스") 클래스는 같은 이름의 클래스 모두를 배열로 가져온다. 3. 태그를 제어할 특정 태그를 저장한다.document.querySelector(..

JavaScript 수행 순서 a태그에서 onclick 이 있을 경우onclick를 먼저 수행하고 href로 이동하는 액션을 취한다.TEST1 onclick에서 return false가 있을 경우href로 이동하는 액션을 취하지 않게 된다.TEST2 a태그에서 onclick 이 있을 경우( href = "#" )onclick를 먼저 수행하고 href로 이동하는 액션을 취하는데href="#"로 호출 함수를 숨겨버렸기 때문에페이지가 이동하지 않게 된다.갈 곳을 잃어버린 브라우저는 페이지의 상단으로 이동해버린다.TEST1동작 시간 설정하기 setInterval(() => { }, milliseconds);  milliseconds : 1000초 1000초마다 불러오겠다. setInterval(() => { l..