어영's

jQuery가 지원하는 CSS 셀렉터들

​

*

모든 요소와 일치

​

E1

E1(태그명)인 모든 요소와 일치

​

E1.class

E1(태그명) 요소의 클래스가 class와 동일한 요소와 일치

​

E1.#id

E1(태그명) 요소의 id 어트리뷰트 값이 id와 동일한 요소와 일치

​

E1 E2

E1 요소의 자식인 모든 E2(태그명) 요소와 일치

​

E1 > E2

E1 요소 바로 아래 자식인 E2 요소와 일치

​

E1 + E2

E1 요소의 바로 다음에 나오는 형제요소 E2와 일치

​

E1 ~ E2

E1 요소의 다음에 나오는 모든 형제 E2와 일치

​

E1[attr]

attr 어트리뷰트를 갖는 E1 요소와 일치

​

E1[attr=val]

attr 어트리뷰트의 값이 val을 갖는 E1 요소와 일치

​

E1[attr^=val]

attr 어트리뷰트의 값이 val 값으로 시작하는 E1 요소와 일치

​

E1[attr$=val]

attr 어트리뷰트의 값이 val 값으로 끝나는 E1 요소와 일치

​

E1[attr*=val]

attr 어트리뷰트의 값이 val 값을 포함하는 E1 요소와 일치

​

​

----------------------------------

​

응용 예)

​

$('#id tr:eq(3)').hide();

tr 중에서 세번째 tr 를 숨기라

​

$('#id tr:gt(0)').hide();

tr 중에서 첫번째를 제외한 나머지 tr 들을 숨기라

​

$("#GridView1 [id$='lbltest']").text('[▼ 클릭]');

GridView1 내의 lbltest 라벨을 [▼ 클릭] 로 변경하라

jquery.js 를 두번 호출하는 경우가 가끔 있음.

그럴 때는 충돌이 발생하기 때문에 아래와 같이 선언하여 두번 이상 선언된 jquery 를 각각 사용할 수 있음.

// --------------------------------------------------

// jQuery 중복 사용시 발생되는 문제 처리

// --------------------------------------------------

var jq = jQuery.noConflict();

// --------------------------------------------------

​

jq(function () {

});

​

​

-------------------------------

​

​

$ 대신 jq (또는 다른 이름)으로 사용하면 됨

​

저장 버튼(save button)을 더블클릭해서 두번 저장되는 문제가 발생할 수 있음

​

1. Image Button 인 경우 클릭과 동시에 버튼 가리기

​

<img id=”btn저장” src=”btn저장.png” onclick=”javascript:fn저장(); this.style.visibility=’hidden'; ” >

​

단, 저장이 끝나면 다시 보이게 처리해야함

​

2. input 형태의 버튼인 경우 클릭과 동시에 비활성화 처리

​

<input type=”button” onClick=”javascript:fn저장(); this.disabled=true; ”>

​

단, 저장이 끝나면 다시 활성화(disabled=false) 를 해줘야 함

​

이 외에도 클릭 시 전역변수에 값을 올려 함수 내에서 전역변수의 값이 변경되면 함수를 그냥 빠져나오게 처리할 수 있음

모달창이 띄워졌는지 여부를 알아보는 방법

​

var dialogArguments = 모달창띄우기();

​

if (dialogArguments) {

    //// to-do​

}

숫자형 변환은 기본적으로 parseInt() 를 사용하는 것이 맞지만, Internet Explorer 의 호환성 문제로

IE8 이하에서 '08' 이 1 로 변환되는 문제가 발생하는 경우가 있다.

이때는 eval() 을 사용하면 된다.

Javascript 에서 띄운 모달창은 기본적으로 크기 조절이 되지 않는다.

함수를 사용하면 언제든지 크기를 조절할 수 있다.

하지만... 모달은 이제 웹표준에서 멀어지고 있어서 안 쓰는 것이 좋다.

function WindowModalResize()

{

    window.dialogWidth = $(document).width() + 'px';

    window.dialogHeight = $(document).height() + 20 + 'px';

}

Javascript 에서 replace 를 사용하면 딱 한번만 치환이 된다.

예를들어, - 를 모두 제거하려고 아래와 같이 했다면

var temp = '1-2-3-4';

temp = temp.replace('-' , '');

이렇게 하면 temp 는 12-3-4 가 된다. 그럼 어떻게 해야하느냐...

var temp = '1-2-3-4';

temp = temp.replace(/-/g , '');

이렇게 정규식을 사용해야 temp 는 1234 가 된다.

----------------------------

.replace('-',''); //// 하나의 - 만 대체

​

​

.replace(/-/g,''); //// 모든 - 를 대체 (정규식 사용)