메뉴 건너뛰기

2021.03.26 14:11

자주쓰는 것들

조회 수 72 추천 수 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() 이런식으로 해당 아이디에서 반드시 한칸 띄운뒤에 쓰지 않으면 제대로 작동을 안하는 경우가 있다. 반대로 위처럼 붙여서 써야지만 제대로 작동하는 경우도 있다.
아마 버전에 따라서 다른거 같은데, 사용시에 주의 하기 바란다.


List of Articles
번호 제목 날짜 조회 수
241 문자열 안에 쌍따옴표, 홑따옴표 표시하는 3가지 방법 file 2021.08.20 390
240 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로) 2021.08.20 101
239 시간 계산하기 (시/분/초/ 더하기, 빼기) 2021.08.20 853
238 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기 2021.08.20 713
237 월의 마지막 날짜 계산하기 2021.08.20 62
236 Date 객체로 원하는 날짜, 시간 표현하기 2021.08.20 63
235 날짜 계산하기 (년/월/일 더하기, 빼기) 2021.08.20 1100
234 3자리 마다 쉼표만 찍어주는 number_format 함수 2021.03.26 79
233 팝업창 맨위로 올라오게 하기 2021.03.26 325
232 폼안에 태그명, 함수명 같을때 오류 2021.03.26 89
231 ajax 사용시 Internal Sever Error 뜨는 경우 2021.03.26 235
» 자주쓰는 것들 2021.03.26 72
229 utf-8일때 alert 한글 깨짐 해결 2021.03.26 1703
228 split, join, replace, replace_all 2021.03.26 71
227 opener 값전달, 함수실행.(자식창에서 부모창으로 값전달, 함수실행) 2021.03.26 838
226 getYear(); 크롬, 파이어폭스 에서 제대로 작동 안하는 문제 2021.03.26 51
225 DTREE 트리구조 만들기 file 2021.03.26 414
224 페이지 이동 2021.03.26 57
223 default 매개변수(매개변수 기본값) 2021.03.26 55
222 자바스크립트에서 이벤트 중단 하는 방법 2021.03.25 78
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved