jQuery8 [자바스크립트 기초]제이쿼리 4 폼 요소 선택하기셀렉터설명:buttonbutton 및 type 특성값이 button인 요소들을 리턴:checkboxtype 특성이 checkbox인 input 요소들을 리턴:checked체크박스 및 라디오 버튼들중 체크된 요소들 리턴:disabled비활성화된 모든 요소 리턴:enabled활성화된 모든 요소 리턴:focus현재 포커스를 가진 요소 리턴:file모든 파일 입력 요소들을 리턴한다.:image모든 이미지 요소들을 리턴한다.:input모든 button, input select textarea 요소들을 리턴한다.:password모든 비밀번호 입력 요소들을 가져온다.:radio모든 라디오 입력 요소들을 가져온다.:reset모든 리셋 버튼 요소들을 가져온다.:selected선택된 모든 요소들을 가져온다.. 2017. 3. 5. [자바스크립트 기초]제이쿼리 3 event 객체모든 이벤트 처리 함수는 event 객체를 전달받는다.이 객체는 발생한 이벤트와 관련된 메서드와 속성을 가지고 있다. 예)$(‘li’).on(‘click’,function(e){ eventType = e.type;}); 1.event 객체에 매개변수 이름을 지정한다.2.함수 내에서 event 객체를 참조하기 위해 이 이름을 사용한다.3. 익숙한 마침표 표기법을 이용하여 객체의 속성과 메서드를 사용한다. 속성설명type이벤트의 종류which불려진 버튼이나 키data이벤트가 발생했을 때 함수에 전달된 추가 정보들을 가지고 있는 객체표현식target이벤트가 발생한 dom요소pageX뷰포트의 왼쪽 모서리로부터 마우스까지의 위치pageY뷰포트의 상단으로부터 마우스까지의 위치timeStamp 메소드설.. 2017. 3. 4. [자바스크립트 기초]제이쿼리 2 요소의 콘텐츠 가져오기.html() 메서드와 .text() 메서드는 요소의 콘텐츠를 조회하는 기능과 수정하는 기능을 모두 제공한다. 이 페이지는 요소의 콘텐츠를 조회하는 방법에 초점을 맞춘다. .html()jQuery 객체집합으로부터 정보를 조회할 목적으로 이 메서드를 호출하면, 첫 번째 요소와 그 하위 노드들의 html 코드만을 얻게 된다. 예) $(‘ul’).html(); 메서드는 다음의 코드를 리턴한다. fresh figs pine nuts honey balsamic vinegar 반면, $(‘li’).html() 메서드는 다음 코드를 리턴한다.fresh이 경우 첫 번째 요소의 콘텐츠만 리턴된다.모든 요소값을 조회하려면 .each() 메서드를 사용한다. .text()jQuery 객체집합으로부터 텍스.. 2017. 3. 3. [자바스크립트 기초]제이쿼리 1 #요소의 선택jquery는 dom 쿼리 대신 간편하게 css 스타일의 셀렉터를 이용하여 요소를 선택하는 방법을 제공한다. #작업실행jqury는 dom 트리를 수정하기 위한 기능이나 요소에 애니메이션 효과를 적용하는 기능, 여러 요소에 대해 루프를 수행하는 기능 등을 모두 한줄의 코드로 작업할 수 있는 메서드를 제공한다. #이벤트 처리jquery는 구 버전의 브라우저를 특별히 고려하지 않고도 손쉽게 선택된 요소에 이벤트 리스너를 등록할 수 있는 메서드를 제공한다. jquery 란 무엇인가? jquery는 웹페이지에 포함시킬 수 있는 자바스크립트 파일이다. css 형식의 셀렉터를 이용하여 요소를 찾을 수 있으며, 그런 후에는 jqeury 메서드들을 이용하여 해당 요소에 원하는 작업을 수행할 수 있다. 1.c.. 2017. 3. 2. 제이쿼리 기초 2 append prepend after before remove empty addClass 1. 과일 목록 사과포도배 append prepend after before remove empty 2. 버튼1 버튼2 결과 표시 3. 1 두번째 div 버튼1 버튼2클래스 추가 버튼결과표시 4. 1 2 3 4 5 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812.. 2016. 12. 27. 제이쿼리 기초1 mouseover text focus css blur show hide toggle animate fadeOut slideUp 1. 클릭하면 사라집니다 2. 마우스를 여기로 움직이세요.0 3. 아이디 4. 5. 표시 숨김 toggle 애니메이션 페이드 인 페이드 아웃 slide down slide up 6. 이것은 하나의 단락입니다. 버튼1 버튼2 7. 이름 : 확인 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231.. 2016. 12. 26. JQuery hover&find&append&click&dblclick&focus 2 구조는 거의 항상 다음과 같습니다: $(document).ready(function() { $('thingToTouch').event(function() { $('thingToAffect').effect(); });}); ex) MESSAGE: Add! $(document).ready(function() { $('button').click(function() { var toAdd = $("input[name=message]").val(); $('#messages').append(""+toAdd+""); });}); ------------- document가 .ready() 되는 순간 효과가 발생하는 코드 -- html -- js $(document).ready(function(){ $('div').fad.. 2016. 12. 16. JQuery DOM&mouseenter&mouseleave&fadeTo 1 #.문서 객체 모델 (DOM) HTML 문서는 DOM(문서 객체 모델)을 통해 구성되어있습니다.바로 이 DOM이 jQuery와 상호작용하며 HTML을 수정 가능할 수 있도록 합니다. #.jQuery의 구문 function(){ jQuery magic;} $(document).ready(function() { jQuery 문장;}); ----------------- Hello world! css div { position: absolute; margin: -10px 0 0 -8px; height: 60px; width: 100%; background-color: #008800; color: #FFFFFF; font-family: Verdana, Arial, Sans-Serif; display:none;} .. 2016. 12. 15. 이전 1 다음
