반응형
문서가 로딩되면 코드 실행하기(window.onload = function() {} )
1.$(document).ready(function() { 2. // Your code here 3.});
window.onload와 달리 $(document).ready는 페이지가 완전히 로드되지 않아도 함수가 호출이 된다.
01.$(document).ready(function() { 02. // a 태그를 클릭했을 때 이벤트 03. $("a").click(function(event) { 04. alert("As you can see, the link no longer took you to jquery.com"); 05. 06. // 해당 객체의 기본적인 이벤트 발생을 막는 함수, a 태그의 경우 링크 이동 이벤트를 막는다. 07. evert.preventDefault(); 08. }); 09.});HTML 태그에 Sytle의 Class를 동적으로 추가/삭제하는 방법
01.<style type="text/css"> a.test { font-weight:bold; } </style> 02. 03.$(document).reday(function() { 04. // a 태그 클릭 이벤트 05. $("a").click(function(event) { 06. $("a").addClass("test"); // a 태그에 클래스 명 test를 추가 07. $("a").removeClass("test"); // a 태그의 클래스 명 test를 삭제 08. }); 09.});특별한 효과
1.$("a").click(function(event) { 2. event.preventDefault(); 3. 4. // a 태그 클릭시 천천히 사라지는 이벤트 5. $(this).hide("slow"); 6.});class 또는 ID를 사용해서 요소를 선택하는 방법
1.$('#myDivId'); // id로 요소 선택 2.$('.myCssClass'); // class로 요소 선택 3.var myDivElement = $('#myDivId'); // 변수에 선택한 요소 대입 4.var myValue = $('#myDivId').val(); // 변수에 선택한 폼의 값 대입 5.$('#myDivId').val("Hello world"); // 선택한 폼의 값 설정특정 class를 가진 요소를 찾는 방법
01.// div 태그들 중에 "protected" class를 가진 영역 좌우로 움직이기 02.$("div").click(function() { 03. // 선택한 div에 protected라는 클래스가 있다면 04. if ($(this).hasClass("protected")) 05. // 좌우로 에니메이션 시킨다. 06. $(this) 07. .animate({ left:-10 }) 08. .animate({ left:10 }) 09. .animate({ left:-10 }) 10. .animate({ left:10 }) 11. .animate({ left:0 }) ; 12.}); 13. 14.// is() 함수는 요소의 특정한 내용을 비교하여 참/거짓을 반환 15.// id가 myDiv인 요소의 class가 pretty인지 확인 16.if ($('#myDiv').is('.pretty')) 17. $('#myDiv').show(); 18. 19.// id가 myDiv인 요소의 속성에 hidden이 있다면 20.if ($('#myDiv').is(':hidden')) 21. // 요소를 보여준다 22. $('#mydiv').show();요소가 존재하는지 확인하는 방법
1.// 요소의 크기 체크로 존재 여부 확인 2.if ($(#'myDiv').length) 3. $('#myDiv').show(); 4. 5.// 항상 체크할 필요없이 요소가 없다는 명령이 실행되지 않는다. jQuery에서 자동으로 처리 6.$('#myDiv').show();요소의 토글 상태를 알 수 있는 방법
1.var isVisible = $('#myDiv').is(':visible'); 2.var isHidden = $('#myDiv').is(':hidden'); 3. 4.// 요소가 보이는 상태라면 오른쪽으로 200픽셀 이동 5.$('#myDiv:visible').animate({ left:'+=200px' }, 'slow');요소의 id에 특수문자가 들어간 경우 선택하는 방법
id 값을 some:id나 some.id라고 만들었을 때 선택 방법
1.$("#some\\id"); 2.$("#some\\.id");요소를 사용 가능/불가능 처리하는 방법
1.// Disable #x 2.$('#x').attr('disabled', true); 3. 4.// Enable #x 5.$('#x').attr('disabled', false);위처럼 disbled 속성값 요소인 true/false 로 제어하는 방법과 아래 처럼 disabled 속성을 제거하는 방법이 있다.
1.// Disable #x 2.$('#x').attr('disabled', 'disabled'); 3. 4.// Enable #x 5.$('#x').removeAttr('disabled');체크박스를 제어하는 방법
1.// Check #x 2.$("#x").attr('checked', true); 3.$("#x").attr('checked', 'checked'); // 다른 방법 4. 5.// Uncheck #x 6.$("#x").attr('checked', false); 7.$("#x").removeAttr('checked'); // 다른 방법셀렉트 박스에서 선택된 내용의 value 와 text 값을 가져오는 방법
1.// id가 myselect인 셀렉트 박스의 value값 2.$("#myselect").val(); 3. 4.// id가 myselect인 셀렉트 박스의 선택된 text 내용 5.$("#myselect option:selected").text();10개의 아이템으로 이루어진 리스트에서 3번째 요소의 텍스트를 가져오거나 다른 문자로 대치하는 방법
1.// :eq(), .eq() 함수를 사용해서 3번째 li a 태그를 찾는다. 2.var $thirdLink = $(this).find('li a').eq(2); 3.// replace('a', 'b') 함수를 사용해서 다른 문자로 대치 4.var linkText = $thirdLink.text().replace('foo', 'bar'); 5.// 문자열 설정 6.$thirdLink.text(linkText);작성한 코드 압축 방법
반응형