This is your Park !!

1. 특정 체크박스 체크 확인

$('#mod_gb2').click(function() {

var ischecked = $('#mod_gb2').attr('checked');

if(ischecked)

{

alert("2번이 체크되었습니다.");

}

else

{

alert("2번이 체크되지 않았습니다.");

}

});

</script>

2. 체크 박스 전체

// name이 mod_gb인 체크박스 그룹의 아무 박스를 선택하면

$('input[name=mod_gb]:checkbox').click(function() {

var gb1 = $('#mod_gb1').attr('checked');

var gb2 = $('#mod_gb2').attr('checked');

var gb3 = $('#mod_gb3').attr('checked');

if(gb3 && (gb1 || gb2)){

alert("ID 해지는 다른 항목과 중복 선택하실 수 없습니다.");

$('#mod_gb3').attr('checked', false);

}

});

3. 체크박스 선택 유무 확인

$('#btn').click(function(){

var cnt = $("input[name=mod_gb]:checkbox:checked").length;

if(cnt < 1){

alert('한 개 이상을 선택하셔야 합니다');

}else{

alert(cnt+'개가 선택되었습니다');

}

});

[출처] [jQuery] jQuery Checkbox 기능정리|작성자 주한길

'jQuery' 카테고리의 다른 글

[jQuery] jQuery 2.0 정식 릴리즈 (0)	2015.07.09
[jQuery] jQuery Checkbox 선택 (0)	2015.07.09
[jQuery] jQuery Checkbox 와 Div 사용하기 (0)	2015.07.09
[jQuery] jQuery 시작하기 - Aptana 편집기 (0)	2015.07.09
[jQuery] jQuery 유용한 Tip (0)	2015.07.09

[jQuery] jQuery Checkbox 와 Div 사용하기

2015. 7. 9. 17:19

체크박스가 많이 나오는 UI 화면을 만들어야 하는데 JQuery를 이용해보았다.

하면서 막힌것이 두개가 있었는데 하나가 checkbox이고 또 다른 하나가 style바꾸는것이었다.

첫째 특정 div내의 checkbox만 구하기!

내가 만들 구조는 이렇게 되어있다.

.. checkbox 수두룩~

</div>

.. checkbox 수두룩~

</div>

자 그럼 km안에 있는 checkbox만 어떻게 선택할 수 있을까?

$("input:checked") 이렇게 체크박스된것을 가져올수도 있지만..

문제는 그럼 bbs안에 녀석도 선택이 되는데?

이럴땐 해당 id 이름으로 찾은후 checkbox를 찾는거다

$("#km input:checked") 이렇게 하면 km안의 div 있는 checkbox만 가져올 수 있다.

문제는 동적으로 divid가 가져올 수 있으니.. 실제는 이렇게 처리하였다.

function allCheckboxCheck(id, divid) {

var word;

if ($(id).is(':checked')) {

$(divid + " input:checkbox").attr("checked", "checked");

word = "해제";

} else {

$(divid + " input:checkbox").attr("checked", "");

word = "선택";

}

$("#result").text(word);

}

위에서 attr은 attribute를 뜻하고 checked속성을 checked하거나 아님 없애주는 역할을 한다.

그리고 if ( $( id ).is(':checked')) 말은 말 그대로 checkbox가 checked이냐라는 것을 묻고 있다.

웹을 검색하다 보면 아래와 같은 표를 볼수 있는데 이게 핵심되겠다!!

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 요소와 일치

즉 div 밑에 다른 요소를 체크하는 것이니 E1 E2를 쓰면 되는것~

둘째 style 바꾸기

div를 한번에 다보여주는 것이 아니라 km 보여줄때에는 bbs는 안보여야하고

반대로 bbs가 보여줄때는 km이 안보여줘야 한다고 하면 어떻게 하면 될까?

이때 중요한것이 어떻게 css를 먹이느냐 인데 css 속성을 이용하면된다.

$('#km').css('display','none');

$('#km').css( {display:none, 키:밸류로 중복해서 주루루루~});

실제로는 아래처럼 이용하였다. 참고로 이미지인 img 태그의 경로를 바꾸기 위해선 attribute인 str을 다른녀석으로 바꿔주면 된다

function showDiv( target)

{

if ( target == "km")

{

$('#km').css('display','block');

$('#bbs').css('display','none');

$("#Image1").attr('src','/kms/images/cyberdigm/custom/lgoil/subscribe/Tab_on_01.jpg');

$("#Image2").attr('src','/kms/images/cyberdigm/custom/lgoil/subscribe/Tab_off_02.jpg');

}

else if ( target == "bbs")

{

$('#km').css('display','none');

$('#bbs').css('display','block');

... 중략..

음 끝으로 태요의 사이트에서 나온 예제를 좀 변경한 것을로 올려본다.

예나 지금이나 태요은 설명을 참 잘하셔.. ㅎㅎ

혹시 JQuery를 써보실려면 태요 사이트 가셔서 JQuery강좌 한번 보고 하는게 좋겠다

JQuery 재미있던데.. 요녀석 공부 좀 더해봐야겠다.

첨부한 예제 화면.

[출처] [jQuery] jQuery Checkbox 와 Div 사용하기|작성자 주한길

'jQuery' 카테고리의 다른 글

[jQuery] jQuery Checkbox 선택 (0)	2015.07.09
[jQuery] jQuery Checkbox 기능정리 (0)	2015.07.09
[jQuery] jQuery 시작하기 - Aptana 편집기 (0)	2015.07.09
[jQuery] jQuery 유용한 Tip (0)	2015.07.09
[jQuery] jQuery 바로 사용해보자. (0)	2015.07.09

[jQuery] jQuery 시작하기 - Aptana 편집기

2015. 7. 9. 17:16

jQuery는 2006년 초에 John Resig가 개발한 자바스크립트 라이브러리이다.

전체 라이브러리가 55kb밖에는 안되는 초 경량이면서도 누구나 쉽게 브라우져 기반의 자바스크립트 프로그래밍을 쉽게 할 수 있을 뿐더러, Ajax또한 쉽게 구현 할 수 가 있다. 또한 플러그인 방식의 확장을 지원하여, 현재 많은 수의 플러그인을 확보하고 있다.

나온지는 얼마 안되었지만 수백여개의 사이트가 사용할 만큼 안정적이며, 유명한 라이브러리이다.

구지 비교하자면 prototype이라는 기존 유명 라이브러리와 비교가 가능하겠지만, 더욱 간단하며, 쉽다는것을 장점으로 꼽고 있다.

(사실 본인은 prototype을 잘 모른다. 따라서 기존 개발자들의 의견을 빌린것이다. 어느것이 더 좋다는 표현이 아님을 알아달라)

무엇이 짧은 시간안에 jQuery를 유명하게 하였을까? 이런 호기심을 가지고 깊이 살펴본 결과 그 이유를 알 수 있었다.

작고, 쉽고, 그러나 강력하다는 것이 그 이유이다. 따라서 이런 본인의 경험을 공유하고자 이글을 올린다.

이 글은 jQuery의 튜토리얼문서를 기반으로하여 작성 되었다. 따라서 예제의 상당 부분은 동일하다,

단, 직접 프로그래밍을 통해 소스를 돌려보고 그 경험을 글로 올리는것이니 만큼 그냥 번역 보다는 더 나을 것으로 판단 한다.

참고로 이글에서 Ajax는 비동기 통신의 경우에만 국한 하겠다. 그 이유는 jQuery에서 Ajax라는 별도 네임스페이스로 라이브러리를 지원하기 때문이다.

자바스크립트 전용 IDE 소개 - Aptana

프로그래머들 중에는 IDE를 싫어하는 사람도 있다. 그러나 나는 없는것보다는 있는것이 더 낳다고 생각한다. 특히 한 언어를 위한 전용 환경을 지원할 경우는 더욱 그러하다. 브라우져 기반의 자바스크립트 프로그래밍을 하다보면 가장 어려운 점이 디버깅이다. printf디버거도 어려울 경우가 많다.(printf디버거는 디버깅을 위해 필요한 값을 출력하여 확인 하는 방법을 말한다.-본인이 만들어낸 용어이다.) 특히 브라우져의 경우는 로컬파일을 사용할 수 없어 화면을 이용한 값의 출력에 의존하여야 함으로 루프값을 출력할 경우는 거의 죽음이고, HTML태그를 생성하여 이곳에 이벤트를 결합하고, 코딩하는것을 반복하는 동적 HTML프로그래밍은 더욱 디버깅이 어렵다. 따라서 브라우져의 플러그인과 결합된 디버거를 사용하는것이 매우 도움이 된다.

Firefox용 Firebug가 대표적인 것인데, 가장 많이 사용하는 디버거 이기도 하다. 그러나 편집기와 독립된 형태로 사용해야 함으로 수정 작업 시 불편함이 따른다. 이러한 점을 개선하려면 역시 디버거와 편집기를 포함하는 전용 IDE가 필요하다.

한가지더 이야기 하면, 기존 Eclipse와 같은 IDE에서 지원하는 Code Inspector기능의 필요를 들 수 있다. 사실 한 언어에 익숙한 사람이면 이 기능이 불편 하다. 매번 객체명뒤 점을 찍어 객체의 맴버를 보는 것은 그것을 아는 사람에게는 편집속도만 떨어뜨릴 뿐이다. 그러나 언어에 익숙치 않다거나, 남이 제공한 라이브러리를 사용할 경우는 이기능이 매우 유용하다. 특히 해당 맴버의 간단한 도움말까지 표시되면 API문서를 일일이 그때마다 검색하지 않아도 되어서 편리하다.

기존 자바 스크립트 편집기는 사실 이러한 기능이 부족한것이 사실 이었다. 그러나 지금 소개할 Aptana는 자바스크립트 전용 IDE를 표방한 몇 안되는 IDE중 하나이다. 이클립스 기반에 프러그인으로 개발되고 배포는 리치클라이언트와 플러그인 방식 모두를 지원한다. 따라서 기존 설치된 이클립스에서도 사용할 수 있고, 별도 설치를 통해 독립적인 IDE로 사용 할수도 있다. 다음은 Aptana의 실행 화면이다.

특히 Code Inspector가 매력 적이다. 노란 색으로 나오는 도움말도 매우 유용하다.

Apatana의 설치는 쉽다. 또한 무료로 사용 할 수 가 있다. (http://www.aptana.org/)

사용법은 기존 Eclipse와 동일하다. 단 디버거를 사용하려면 Firefox가 설치 되어 있어야 한다.

또한 기존 Ajax라이브러리들도 지원하는데, jQuery도 지원한다.

위 화면에서 객체의 도움말이 나올 수 있는것은 이 때문이다.

프로젝트 생성 시 jQuery프로젝트를 선택하여 생성 하면 된다.

jQuery 사용

위에서 소개한 Aptana를 설치 하였다면, 별도 jQuery설치는 필요 없다. 하지만 설치가 어려운것은 아니다.

jQuery라이브러리는 55kb짜리 파일 하나로 되어 있다. 이를 HTML에 사용 선언을 하여 주면 된다.

<html>
<head>
<script type="text/javascript" src="path/jquery.js"></script>
<script type="text/javascript">
// Your code goes here
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

기존 자바 스크립트 라이브러리 사용과 차이가 없다. 단, 압축버젼과 그렇지 않은 버젼 두개의 파일을 제공하는데, 프로그래밍을 할 때는 디버깅을 위해 압축하지 않은 버젼의 파일을 사용하고, 배포할 경우 압축된 버젼을 사용하는 것이 좋다.

jQuery 의 시작 이벤트

보통의 자바스크립트 프로그래머들은 브라우져의 document가 모두 다운로드 되어진 상태에서 코드를 시작하기위해 다음과 같은 이벤트에 스크립트 코드를 넣는다.

window.onload = function(){ ... }

그러나 이 경우 이미지 까지 다운로드가 모두 완료 된 후 이벤트가 호출되기 때문에, 큰이미지의 경우 실행속도가 늦은 것처럼 사용자에게 보일 수 있다. 따라서 jQuery는 이러한 문제를 해결하기위해 다음과 같은 이벤트를 제공한다.

$(document).ready(function(){
// 이곳에 코드를 넣으면 된다.
});

이 이벤트는 브라우져의 document(DOM)객체가 준비가 되면 호출이 된다. 따라서 이미지 다운로드에 의한 지연이 없다.

위 코드는 다음과 같이 생략하여 사용 가능하다.

$(function() { // run this when the HTML is done downloading });

사용자 이벤트 처리 - 클릭이벤트의 예

특정 태그를 클릭 했을경우 이벤트의 처리를 jQuery에서 어떻게 처리 하는지를 살펴 보자. 다음은 위 HTML예제의 앵커(a)태그 클릭 시 이벤트를 처리하는 코드 이다.

$("a").click(function(){
alert("Thanks for visiting!");
});

jQuery에서 이벤트 처리는 콜백함수를 통해 수행된다. 이코드는 HTML에 있는 모든 앵커 태그의 클릭 시 팦업창을 통해 메시지를 출력해 준다.

코드를 보면 $()로된 문법을 볼 수 있을 것이다. 이것은 jQuery의 셀렉터 이다. $("a")가 의미하는 것은 HTML(브라우져의 DOM)에서 앵커태그 모두를 의미한다. 이후 .click()메소드는 이벤트 메소드로서 이곳에 콜백함수를 파라메타로 넣어 이벤트 처리를 수행 하는것이다. 함수는 위에서 처럼 익명(function(){...})이나 선언된 함수 모두를 사용할 수 있다.

jQuery의 셀렉터

$()로 시작하는 셀렉터를 좀더 살펴보자. jQuery는 HTML, DOM객체등을 CSS나 XPATH의 쿼리방법과 동일한 방법으로 선택 한다. 앞선 예처럼 문자열로 특정 태그를 선택하는 것은 CSS를 작성해 본 프로그래머라면 익숙할 것이다. 이와 같은 방법 외에도 다음과 같이 태그의 id를 통해 선택 할 수 있다.

$(document).ready(function() {
$("#orderedlist").addClass("red");
});

위 코드는 id가 orderedlist인 태그에 red라는 CSS 클래스를 할당하는 코드 이다. 만약 이태그가 하위 태그를 가지고 있다면 다음과 같이 선택 할 수 있다.

$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});

이코드는 id가 orderedlist인 태그의 하위 태그 중 <li> 태그 모두에 blue라는 CSS 클래스를 할당하는 코드 이다. 이코드는 jQuery메소드를 이용 다음과 같이 바꾸어 사용 할 수도 있다.

$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).addClass("blue");
});
});

한가지 다른 점은 모든 태그에 동일하게 CSS 클래스를 적용하는 방식이 아닌 개별 태그를 선택하여 적용할 수 있다는 것이다.

XPath를 사용하는 예를 다음과 같은 것을 들 수 있다

// 절대 경로를 사용하는 경우

$("/html/body//p")
$("/*/body//p")
$("//p/../div")

// 상대경로를 사용하는 경우

$("a",this)
$("p/a",this)

다음과 같이 두 방식을 혼용하여 사용 할 수도 있다.

// HTML내 모든 <p>태그중 클래스속성이 foo인 것 중 내부에 <a> 태그를 가지고 있는것

$("p.foo[a]");

// 모든 <li>태그 중 Register라는 택스트가 들어있는 <a> 태그

$("li[a:contains('Register')]");

// 모든 <input>태그 중 name속성이 bar인 것의 값

$("input[@name=bar]").val();

이외에도 jQuery는 CSS 3.0 표준을 따르고 있어 기존 보다 더많은 쿼리 방법을 지원하고 있다.

자세한것은 jQuery의 API 설명을 참고 하라(http://docs.jquery.com/Selectors)

Chainability

jQuery는 코드의 양을 줄이기 위해 특별한 기능을 제공한다. 다음 코드를 보자

$("a").addClass("test").show().html("foo");

<a>태그에 test라는 CSS 클래스를 할당한다. 그후 태그를 보이면서 그안에 foo라는 텍스트를 넣는다. 이런 문법이 가능한 이유는 $(), addClass(), show()함수 모두가 <a>태그에 해당하는 객체를 결과로 리턴해주면 된다. 이를 Chainability라 한다.

좀더 복잡한 경우를 보자

$("a")
.filter(".clickme")
.click(function(){
alert("You are now leaving the site.");
})
.end()
.filter(".hideme")
.click(function(){
$(this).hide();
return false;
})
.end();

// 대상 HTML이다

<a href="http://google.com/" class="clickme">I give a message when you leave</a>
<a href="http://yahoo.com/" class="hideme">Click me to hide!</a>
<a href="http://microsoft.com/">I'm a normal link</a>

중간에 end()함수는 filter()함수로 선택된 객체를 체인에서 끝는 역할을 한다.

위에서는 clickme클래스의 <a>태그 객체를 끊고 hideme를 선택하는 예이다. 또한 this는 선택된 태그 객체를 말한다.

이런 Chainability를 지원 하는 jQuery메소드들에는 다음과 같은 것들이 있다.

add()
children()
eq()
filter()
gt()
lt()
next()
not()
parent()
parents()
sibling()

Callbacks

위에서 click()이벤트를 콜백함수를 통해처리하는 코드를 살펴 보았다.

콜백함수는 기존 자바나 .NET의 그것과 같다.

다음 코드를 보자

$.get('myhtmlpage.html', myCallBack);

먼저 $.get()은 서버로 부터 HTML(또는 HTML 조각)을 가져오는 함수 이다. 여기서 myCallBack함수는 전송이 완료 되면 호출되는 콜백 함수 이다. 물론 앞선 예의 click()이벤트 콜백처럼 익명함수 function(){}을 사용 해도 된다. 그러나 이와 같이 미리 선언된 함수를 콜백으로 사용할 경우 파라메타의 전달 방법은 좀 다르다. 흔히 다음과 같이 하면 될것이라 생각할 것이다.

$.get('myhtmlpage.html', myCallBack(param1, param2));

그러나 위와 같은것은 자바스크립트의 클로져(closure)사용에 위배가 된다. 클로져는 변수화 될수 있는 코드 블록을 이야기한다. 즉 스트링변수와 같이 파라메타로 전달될 수 있지만, 실행가능한 함수 인 것이다. 일반적으로 함수를 ()제외하고 이름만을 사용하면 클로져가 된다. 위의경우 $get()함수의 파라메타로 전달된 myCallBack함수는 클로져로 전달된것이 아닌 myCallBack()를 실행한 결과 값이 전달 된다. 따라서 다음과 같이 코드를 작성하여야 한다.

$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});

만약 선언된 함수가 아닌 익명함수를 콜백으로 사용할경우는 다음과 같이 하면 된다.

$.get('myhtmlpage.html', function(param1, param2){
//이곳에 코드를 넣는다.
});

jQuery 의 애니메이션

HTML의 태그를 사라지고 나타내게 하거나, 늘리고 줄이고, 이동시키는 애니매이션 동작은 많이 사용하는 기는 중 하나이다. jQuery는 다양안 애니메이션 기능을 메소드를 통해 제공한다. 다음 코드를 보자

$(document).ready(function(){
$("a").toggle(function(){
$(".stuff").hide('slow');
},function(){
$(".stuff").show('fast');
});
});

이코드는 <a>태그중 stuff클래스가 할당된것을 토글로 느리게 감추고, 빨리 보이게 하는 함수 이다.

다음은 animate()메소드를 이용하여 여러 애니메이션을 합쳐 실행하는 예이다.

$(document).ready(function(){
$("a").toggle(function(){
$(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
},function(){
$(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
});
});

위 코드는 높이와 투명도를 동시에 천천히 사라지고, 나타나게 하는 코드 이다.

jQuery에서의 Ajax

Ajax는 서버와의 비동기 통신을 말한다. 일반적으로 Ajax하면 요즘은 자바스크립트를 이용한 브라우져의 동적 DOM의 처리, 즉 DHTML, CSS등을 포함하지만, jQuery에서는 Ajax라는 네임스페이스를 통해 비동기 서버 통신을 하는것을 말한다.먼저 다음 예를 보자

$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
})

이 예는 GET방식으로 서버에서 자바스크립트를 로딩하고 실행하는 코드 이다.

다음 예를 보자

$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

이는 서버로 부터 POST방식으로 파라메터를 주어 데이터를 가져온 후 이를 success콜백을 이용해 처리하는 코드이다. 아마 Ajax에서 가장 많이 사용하는 코드일 것이다. success말고도 $.ajax()함수는 다양한 옵션을 제공한다. 자세한 내용은 API설명을 참조하라 (http://docs.jquery.com/Ajax)

다음 예는 이 옵션 중 async(비동기)방식을 사용할지 아닐지를 사용한 코드이다.

var html = $.ajax({
url: "some.php",
async: false
}).responseText;

맺으며...

지금까지 jQuery에 대해 간단히 살펴 보았다. 혹자는 Dojo나 Extjs와 같이 버튼, 그리드등의 위젯이 지원되지 않는다고 실망할 것이다.그러나 jQuery는 Plugin을 지원한다. 이중 Interface와 같은 플러그인은 그 완성도가 매우 높다. 이것 말고도 수백개의 플러그인들이 홈페이지를 통해 공개 되어 있다.(http://docs.jquery.com/Plugins)

하지만 내 경험상으로 그리드와 같은 복잡한 위젯이 아니더라도 자바스크립크를 이용한 동적인 홈페이지와 Ajax를 통한 비통기 통신만으로도 대부분의 고객 요구와 문제를 해결 할 수 있다. 실제로 jQuery는 MSNBC와 같은 유명한 많은 사이트에서 사용되고 있다.(http://docs.jquery.com/Sites_Using_jQuery)

따라서 어떤 서비스를 제공하느냐에 따라 필요한 위젯을 플러그인을 사용하거나 직접 개발하여 사용하는것이 더 나은 전략이라 생각한다. 사실 미리 만들어진 위젯도 나에게 맞추어 사용하기 위해서는 그래픽, CSS등 많은 부분을 손 대야 한다. 차라리 기본 원리를 알고 이를 확장하는 것이 좀더 전문적이고 어려운 문제를 해결 할 수 있는 길이라 생각 한다.

[출처] http://blog.naver.com/kissin/70018447897

[출처] [jQuery] jQuery 시작하기 - 가볍고 쉬운 Ajax|작성자 주한길

'jQuery' 카테고리의 다른 글

[jQuery] jQuery Checkbox 기능정리 (0)	2015.07.09
[jQuery] jQuery Checkbox 와 Div 사용하기 (0)	2015.07.09
[jQuery] jQuery 유용한 Tip (0)	2015.07.09
[jQuery] jQuery 바로 사용해보자. (0)	2015.07.09
[jQuery] jQuery 1.4 버전에 추가된 기능 15개 (0)	2015.07.09

[jQuery] jQuery 유용한 Tip

2015. 7. 9. 15:01

jQuery 유용한 Tip

1. 커서 변경

$('body').css('cursor', 'default');

$('body').css('cursor', 'wait');

2. Select Box에서 선택된 Value 찾기

$('#search_sale_pernr_s option:selected').val();

3. Table의 타이틀 Row를 제외한 모든 Row 삭제하기

$("#data_list_table > tbody").children("tr:not(:first)").remove();

4. Table의 마지막 Row 다음에 Row 추가하기

$("#data_list_table > tbody:last").append("<tr><td>값1</td></tr>");

5. innerHTML값 Setting하기

$("#id_total_price").html("<strong>값</strong>");

6. 해당 ID로 지정된 HTML 보이기/숨기기

$("#placeholder").show();

$("#placeholder").hide();

7. ID로 지정된 Form Submit 하기

$("#csf_tab_menu_form").attr("target", "_top");

$("#csf_tab_menu_form").attr("action", "/sabisung/list.jsp");

$("#csf_tab_menu_form").submit();

8. Select Box의 Option 값 확인

$("#search_sale_unit").find("option").each(function() {

alert(this.value);

});

9. Select Box의 특정 값을 가지는 Option 삭제하기

$("#csf_menu_no").find("option").each(function() {

if(this.value == "4") {

//alert(this.selected);

$(this).remove();

}

});

10. Select Box의 특정 값 이후/이전에 Option 추가하기

$("#csf_menu_no").find("option").each(function() {

if(this.value == "3") {

$(this).after("<option value=\"4\">텍스트</option>");

//$(this).before("<option value=\"4\">텍스트</option>");

return false;

}

});

11. each Loop에서의 break/continue 방법

$("#csf_menu_no").find("option").each(function() {

if(this.value == "3") {

return false; //break 의미

return true; //continue 의미

}

});

12. Select Box의 모든 Option 삭제 후 Default Option 추가하기

$("#search_sale_pernr_s").find("option").remove().end().append("<option value=\"\">::사원 선택::</option>");

13. checkbox의 전체 갯수와 선택된 갯수 구하기

- 전체 갯수 : $("input:checkbox[name=is_check]").length

- 선택된 갯수 : $("input:checkbox[name=is_check]:checked").length

- 전체 checkbox 순회하기

$("input:checkbox[name=is_check]").each(function() {

this.checked = true;

});

14. checkbox의 체크 여부 확인

if($("input:checkbox[name=complete_yn]").is(":checked")) == true) {

; //작업

}

15. Table의 특정(ID를 가지는) TR 다음에 TR Row를 추가하기

$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).after("<tr><td>사비성</td></tr>");
return false;
}
});

16. Table의 특정(ID를 가지는) TR Row를 삭제하기

$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).remove();

return false;
}
});

17. 숫자인지 체크

function is_number(v) {
var reg = /^(\s|\d)+$/;
return reg.test(v);
}

[출처] [jQuery] jQuery 유용한 Tip|작성자 주한길

'jQuery' 카테고리의 다른 글

[jQuery] jQuery Checkbox 와 Div 사용하기 (0)	2015.07.09
[jQuery] jQuery 시작하기 - Aptana 편집기 (0)	2015.07.09
[jQuery] jQuery 바로 사용해보자. (0)	2015.07.09
[jQuery] jQuery 1.4 버전에 추가된 기능 15개 (0)	2015.07.09
[jQuery] jQuery Core에 대해 알아보자 (0)	2015.07.09

[jQuery] jQuery 바로 사용해보자.

2015. 7. 9. 15:00

자바스크립트 프레임워크 제이쿼리를 아주 간단하게 소개할께요

자바스크립트 프레임워크가 뭐야?

기본적으로 우리가 자주 사용하는 자바스립트를 보다 편리하게 사용할수 있는 일종의 라이브러리가 보면 됩니다~
지금 버젼이 1.2.6 버젼까지 나와있지만 오픈 소스이기 때문에 자신의 입맛에 따라 직접 코드를 수정할수도 있어요
하지만 소스를 열어보는순간 얼.음. 이 되고 말테니 자신이 없다면 그냥 있는것을 사용하길 권장 ^^;;

그럼 왜 제이쿼리를 사용해야 하는지 간단하게 설명을 하고 넘어가 봅시다~!

제이쿼리 장점

1. 가볍고 편리하다.

제이쿼리는 약 100kb 정도의 파일로 이루워져 있으며 우리가 웹환경에서 개발시

미친듯이 for 문을 쓰고 if문을 쓰고 난리를 치던것을 초간단하게 몇줄로 해결할수 있다.

2. 불필요한 소스를 줄일수 있다.

고로 깔끔한 UI가 재탄생한다.

UI 개발자들도 적극 제이쿼리를 적용해서 만든다면 좀더 간결하고 멋진 소스들이 나올것으로 기대한다.

3. FF나 IE에서 제대로 동작.

웹표준과 타브라우저 효환성 용의 제이쿼리를 쓰면 왠만한건 FF나 IE에서 제대로 동작한다.

4. 아주 편리한 ajax호출.

ajax를 사용하려면 document.getElementById 에서 시작부터 브라우저별 XMLHTTP 까지 소스가 엄청 길어지는 것을 볼수 있는데

get방식, post방식 아주 간단하게 사용할수있다.

한달간 사용하면서 내가 느낀 제이쿼리의 장점은 위와 같다고 보면 될것 같다.
아직 많은것을 아는것은 아니지만 제이쿼리는 정말 매력적이며 웹과 때놓으라면 때놓을수 없는 사이인것 같아 완전 사랑한다~ ㅋㅋㅋ

나의 귀차니즘을 해결할수 있으니깐~ ㅋ

현재의 웹페이지는 자바스크립트가 없으면 아무것도 구동할수 없을만큼 비중이 커져만 가면서 한 웹페이지에 자바스크립트가 많게는 한페이지가 넘도록 줄줄이 쓰곤 한다. 그렇다면 맨날 쓰는 자바스크립트를 좀더 편하게 쓸수 있고 좀더 타이핑을 줄일수만 있다면 얼마나 좋을까?? (난 정말 타이핑을 치는게 싫다. 안그래도 노가다인데 정말 피토한다. ㅠ 그래서 최대한 타이핑수를 줄이고 개발하는게 좋다.)

자 그러면~~!!
고민하지말고 제이쿼리를 <head> 태그안에 추가하자~! 그러면 이러한 고민은 없어질테니깐~~

제이쿼리 설치 방법

http://docs.jquery.com/Release:jQuery_1.2.6

jQuery 1.2.6 Released | Official jQuery Blog

docs.jquery.com
본문으로 이동

위에 사이트에 가서 해당 파일을 받으면 된다.

다운 받은 파일은 <head></head> 태그안에 <script src="./jquery.js"></script> 이런식으로 넣어주면 이제 모든 준비가 끝났다.

그럼 간단하게 제이쿼리에 맛만 보고 글을 마치겠습니다.

자바스크립트에서 해당 ID를 찾을 쓰는 구문을 제이쿼리로 한다면
document.getElementById("test")

-> $("#test")

자바스크립트로 스타일을 변경하고 싶을때
document.getElementById("test").style.display = 'none'

-> $("#test").css("display","none")

자바스크립트로 select box 안에 선택된 값을 찾을때
document.getElementById("test").options[document.getElementById("test").selectedIndex].value
-> $("#test option:selected").val()

자바스크립트로 checkbox 중 선택된거 알아올때
var ck = document.getElementByName("test");
var str = "";
for(var i = 0;i<ck.length;i++){
if(ck[i].chekced)
str += ck[i].value + "|";
}
->
var str = "";
$("#test:checked").each(
str += $(this).val() + "|";
);

대충 봐도 소스가 간결한걸 느낄수 있겠죠?

현업에서 일해본사람이라도 더 많이 공감할것이라 믿고 글을 끝내도록 할께요 -0-;;

언넝 하던일을 마무리하고 퇴근해야 하니깐;;;;

다음 포스팅은 제이쿼리의 위력(?)에 대해서 하나 하나씩 알아보도록 합시다. -ㅁ-;

[출처] http://hanjiq.egloos.com/2108204

[출처] [jQuery] jQuery 바로 사용해보자.|작성자 주한길