메뉴 건너뛰기

2021.03.26 14:11

자주쓰는 것들

조회 수 203 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

jquery의 장점이라면, 일단 소스 길이가 짧아지고, ajax같은것도 쉽게 쓸수 있고, 기존에 javascript로 짜놓은 구문은 어떤 브라우저에선 되고, 어떤 브라우저에선 안되고 하지만, jquery로 짜놓은건 어느곳에서나 다 된다는 점.. 정도라고 생각하면 될 것이다.

하지만, 이 jquery 라는게.. jquery 만의 문법을 따로 가지고 있기 때문에, 쓰다보면 은근히.. 까먹는 경우가 많아서, 필자가 자주 쓰게 되는 간단한 부분들만 이곳에 포스팅 해놓을 생각이다. (물론 그전에 해놓았던 jquery 들은 제외하고 말이다.)
 

$(document).ready( function(){ } );
$().ready( function(){ } );
$( function(){ } );
$(window).load( function(){ } );

1,2,3줄은 같은 표현으로 onload와 비슷하다고 생각하면 된다. 그리고 4번째는 onload와 완전히 같은 뜻이다. ready와 onload가 다른점은 ready는 이미지가 로드 되기 전에 실행되고, onload는 해당페이지의 모든 항목이 불러와져야 실행 된다는 점이다.
 

$.ajax({
         type: "POST",
         url: "http://url.php",
         timeout: 30000, //밀리초(1/1000초)
         data: "data1="+data1 + "&data2=" + data2,
         beforeSend: function() { }, //통신 시작전에 실행되는 구문
         success: function(msg){ }, //통신 성공시 처리되는 부분
         error: function(xhr, status, error){ }, //통신 에러시에 발생되는 부분
         complete: function(){ } //통신 완료후 처리되는 부분
      });

ajax에 쓰이는 항목들이다. 참고로 위 통신시간도중 로딩바 같은것을 처리하려면 beforeSend에 로딩바처리를 집어넣은후에 complete가 실행되면서 해당 로딩바를 끝내주도록 해주면 되겠다.
그리고 sucess에 있는 msg값은 통신후에 넘어온 값이다.
 

var this_id = $('#id').attr( 'id' ); //해당속성의 값을 가지고 온다.
$('#id').attr('src', '/img/img.gif'); //해당속성의 값을 바꿔준다.
$('#id').attr({
src : "img/test.gif",
alt :"test"
}); //해당 여러속성을 바꿔준다.
$('#id').removeAttr('checked') //해당속성을 제거한다.

attr관련 사용법이다. 파라미터를 어떤식으로 집어넣느냐에 따라서 사용법이 조금씩 달라진다.
 

$('#id').val(); //해당 id의 값
$('.class #id:checked').val() //해당 클래스의 해당 id의 check된 값.
//class1의 id1과 class2의 id2를 클릭했을때 함수를 실행.
$('.class1 #id1, .class2 #id2').click( function(){} );  

jquery에서 참조되는 방식이다. 어떤 태그 안에 또다른 태그가 있을경우 띄워쓰기( )로 계층 순서대로 써주면서 참조를 할수 있고, 여러가지를 동시에 참조할때는 쉼표(,)로 구분해주면 된다.

//---2012.09.11--추가---
위 에서 2번째줄에 :checked를 쓸때, $('.class #id :checked').val() 이런식으로 해당 아이디에서 반드시 한칸 띄운뒤에 쓰지 않으면 제대로 작동을 안하는 경우가 있다. 반대로 위처럼 붙여서 써야지만 제대로 작동하는 경우도 있다.
아마 버전에 따라서 다른거 같은데, 사용시에 주의 하기 바란다.


  1. 비동기 작업의 원리 (JavaScript 엔진, Web API, Task Queue, Event Loop)

    Date2023.01.20 Views138
    Read More
  2. Node.js와 npm(+ npx)의 개념

    Date2023.01.20 Views134
    Read More
  3. 바닐라 JS, ECMAScript 개념

    Date2023.01.20 Views109
    Read More
  4. 마우스 오른쪽버튼 , 드래그 선택 차단

    Date2023.01.12 Views118
    Read More
  5. 개발자도구 F12키 막기

    Date2023.01.12 Views167
    Read More
  6. 패스워드, 확인패스워드가 맞는지 체크

    Date2023.01.12 Views129
    Read More
  7. 문자열 안에 쌍따옴표, 홑따옴표 표시하는 3가지 방법

    Date2021.08.20 Views1768
    Read More
  8. 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로)

    Date2021.08.20 Views259
    Read More
  9. 시간 계산하기 (시/분/초/ 더하기, 빼기)

    Date2021.08.20 Views1699
    Read More
  10. 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기

    Date2021.08.20 Views1518
    Read More
  11. 월의 마지막 날짜 계산하기

    Date2021.08.20 Views242
    Read More
  12. Date 객체로 원하는 날짜, 시간 표현하기

    Date2021.08.20 Views221
    Read More
  13. 날짜 계산하기 (년/월/일 더하기, 빼기)

    Date2021.08.20 Views2351
    Read More
  14. 3자리 마다 쉼표만 찍어주는 number_format 함수

    Date2021.03.26 Views224
    Read More
  15. 팝업창 맨위로 올라오게 하기

    Date2021.03.26 Views848
    Read More
  16. 폼안에 태그명, 함수명 같을때 오류

    Date2021.03.26 Views214
    Read More
  17. ajax 사용시 Internal Sever Error 뜨는 경우

    Date2021.03.26 Views953
    Read More
  18. 자주쓰는 것들

    Date2021.03.26 Views203
    Read More
  19. utf-8일때 alert 한글 깨짐 해결

    Date2021.03.26 Views3527
    Read More
  20. split, join, replace, replace_all

    Date2021.03.26 Views204
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved