-
jquery 함수 모음 잡다구리프로그램/Jquery 2024. 1. 23. 12:08336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html [JQuery로 Ajax를 간단하게 사용하는 사이트]
http://visualjquery.com/ [JQuery 예제로 걸려있는 사이트 ]
ul의 id값 가져오기
$('ul').attr('id');
@@@@@@@@ [ addClass, removeClass, toggleClass ] @@@@@@@@@
if ($('label:has(:radio,:checkbox)').length > 0) { //해당 페이지에 라디오박스의 갯수
$('label:has(:radio,:checkbox)').addClass('hand'); //해당 라디오박스에 'hand' 클래스 추가
}
addClass(className)
- 해당 className을 가진 클래스 속성을 추가. 즉 이벤트가 발생한 노드에 선언된 클래스 스타일을 적용시킨다.
removeClass(className)
- removeClass는 addClass의 반대이다. 해당클래스 속성을 지정된 노드에서 제거해준다.
toggleClass(className)
- toggleClass는 addClass와 removeClass의 기능을 모두 포함하는 메소드이다.
toggle이란 용어의 의미대로 addClass와 removeClass 함수가 toggle 형식으로 교대로 적용된다.
즉, 스타일 클래스가 적용된 경우는 제거를, 속성이 선언되어 있지 않은 경우에는 선언해주게 된다.
#######################################################
@@@@@@@@ [ attr ] @@@@@@@@
속성의 값을 가져 온다.
$("#message").text($("input:checked").attr("name"));
실행전 HTML
<form>
<input name="fox" type="checkbox" checked="checked" />
<input name="wolf" type="text" />
</form>
<div id="message"></div>
실행후 HTML
<form>
<input name="fox" type="checkbox" checked="checked" />
<input name="wolf" type="text" />
</form>
<div id="message">fox</div>
[AddTip]
$('#target').attr("disabled", true);
<input type='text' id='target'> <== 해당값을 수정할수 없도록 한다.>
$('#target').attr("readonly", true);
<input type='text' id='target'> <== 해당값을 수정할수 없도록 한다.>
#######################################################
@@@@@@@@ [ jQuery.merge ] @@@@@@@@
두 배열을 통합하는 기능을 한다. PHP의 array_merge()와 유사하다.
var array1 = new Array("a","b","c","d");
var array2 = new Array("1","2","3","4");
var array = jQuery.merge(array1, array2);
$.each(array,function() {
$("#message > ul").append("<li>"+this+"</li>")
});
실행전 HTML
<div id="message">
<ul>
<li><strong><font color=red>jQuery.merge</font></strong></li>
</ul>
</div>
실행후 HTML
<div id="message">
<ul>
<li><strong><font color=red>jQuery.merge</font></strong></li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
#######################################################
@@@@@@@@ [ inArray ] @@@@@@@@
배열 내에 값을 검색하여 그 키를 반환하는 기능이다. PHP의 in_array()와 유사하다.
var array = new Array("a","b","c","d")
$('#message > ul').append("<li>"+jQuery.inArray("c", array).toString()+"</li>");
실행전 HTML
<div id="message">
<ul>
<li><strong><font color=red>inArray</font></strong></li>
</ul>
</div>
실행후 HTML
<div id="message">
<ul>
<li><strong><font color=red>inArray</font></strong></li>
<li>2</li>
</ul>
</div>
#######################################################
@@@@@@@@ [ Array ] @@@@@@@@
PHP의 foreach()와 유사한 기능으로 배열 또는 JSON 객체를 그 수만큼 반복하면서 호출할 수 있다.
var array = [ "one", "two", "three", "four", "five" ];
var object = { one:1, two:2, three:3, four:4, five:5 };
$.each(array, function() {
$('#message > ul').append('<li>'+this+'</li>');
});
$.each(object, function(i, value) {
$('#message > ul').append('<li>'+i+': '+value+'</li>');
});
실행전 HTML
<div id="message">
<ul>
<li><strong><font color=red>each</font></strong></li>
</ul>
</div>
실행후 HTML
<div id="message">
<ul>
<li><strong><font color="red">each</font></strong></li>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>one: 1</li>
<li>two: 2</li>
<li>three: 3</li>
<li>four: 4</li>
<li>five: 5</li>
</ul>
</div>
생성한 배열과 JSON 객체 외에도 셀렉터를 사용하여 선택한 다수의 element를 각각 호출할 때에도 사용하기 때문에 jQuery를 다루면서 가장 많이 사용하게 될 Utility이다. 호출 방법은 effect의 callback function에서와 마찬가지로 this를 이용한다.
$('div > ul > li').each(function(i) {
if(this.text() != 'this is li') {
this.text('this is li!!!');
}
});
실행전 HTML
<div>
<ul>
<li>this is li</li>
<li>this is div</li>
<li>this is li</li>
<li>this is li</li>
</ul>
</div>
실행후 HTML
<div>
<ul>
<li>this is li</li>
<li>this is li!!!</li>
<li>this is li</li>
<li>this is li</li>
</ul>
</div>
#######################################################
@@@@@@@@ [ 브라우져 정보 ] @@@@@@@@
$('div > ul').append('<li>version: '+$.browser.version+'</li>');
$('div > ul').append('<li>Safari: '+$.browser.safari+'</li>');
$('div > ul').append('<li>Opera: '+$.browser.opera+'</li>');
$('div > ul').append('<li>Internet Explorer: '+$.browser.msie+'</li>');
$('div > ul').append('<li>Mozilla: '+$.browser.mozilla+'</li>');
예)
<div><ul></ul></div>
version: 7.0
Safari: undefined
Opera: undefined
Internet Explorer: true
Mozilla: undefined
#######################################################
@@@@@@@@ [ 폼 서브밋 ] @@@@@@@@
폼 서브밋 발생 시 발생하는 submit 이벤트를 바인드 할 수 있다.
$(document).ready(function() {
$('#add').submit(function(){
var _subject = $(this).children('input[name=subject]').val();
if(!_subject) {
alert('fill subject');
return false;
}
});
});
</script>
<body>
<form id="add">
<input name="subject" type="text" />
<input type="submit" value=" save " />
</form>
#######################################################
@@@@@@@@ [ 기타함수 ] @@@@@@@@
bind(event, function)
- 바인드는 element에 이벤트를 선언하는 행위를 뜻하며 bind()는 element에 다양한 이벤트를 바인드 하는 기능을 한다. 바인드 가능한 이벤트는 다음과 같다.
blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error
자주 사용되고 중요한 이벤트는 편의를 위해 bind()를 사용하지 않고 바인드가 가능하다.
$('a').bind('click', function() {
alert('anchor');
});
$('a').bind('dblclick', function() {
alert('anchor');
});
$('a').bind('mouseenter', function() {
alert('anchor');
});
mouseup(function)
- 왼쪽 마우스 버튼을 누른 후 놓았을 때 발생하는 mouse up 이벤트를 바인드 할 수 있다
mousedown(function)
- 왼쪽 마우스 버튼을 눌렀을 때 발생하는 mouse down 이벤트를 바인드 할 수 있다
mouseleave(function)
- 마우스 커서를 선택된 element에서 벗어 나게 했을 때 발생하는 mouse leave 이벤트를 바인드 할 수 있다
mouseenter(function)
- 마우스 커서를 선택된 element 위로 올렸을 때 발생하는 mouse enter 이벤트를 바인드 할 수 있다.
keyup(function)
- 키보드를 누른 후 놓았을 때 발생하는 keyup 이벤트를 바인드 할 수 있다.
keydown(function)
- 키보드를 눌렀을 때 발생하는 keydown 이벤트를 바인드 할 수 있다.
focus(function)
- element에 커서가 주어졌을 때 발생하는 focus 이벤트를 바인드 할 수 있다.
dblclick(function)
- 왼쪽 마우스 버튼을 두 번 연속 클릭했을 때 발생하는 double click 이벤트를 바인드 할 수 있다
click(function)
- 왼쪽 마우스 버튼을 클릭했을 때 발생하는 click 이벤트를 바인드 할 수 있다
change(function)
- 입력 값이 변경되었을 때 발생하는 change 이벤트를 바인드 할 수 있다. change()는 <input> <select> 등에 사용할 수 있다.
blur(function)
- 포커스가 element에서 벗어 났을 때 발생하는 blur 이벤트를 바인드 할 수 있다
die(event)
- live()로 바인드 된 이벤트를 제거하고 추가 생성되는 element에 이벤트가 바인드 되는 live()의 역할도 제거 한다.
live(event, function)
- bind()와 마찬가지로 element에 이벤트를 바인드 하는 명령이다. bind()의 경우 bind() 명령이 내려진 시점에 존재하는 element에 대해서만 이벤트가 바인드 되나 live()는 후에 생성되는 element에 대해서도 이벤트를 바인드 한다.
one(event, function)
- bind()와 동일한 역할을 한다. bind()의 경우 한번 바인드 한 이벤트는 계속 바인드 되어 있으나 one()으로 바인드 된 이벤트는 한번 실행 후 언바인드 된다.
$('a').one('click', function() {
alert('anchor');
}
unbind(event)
- element에 바인드 된 이벤트를 제거하는 행위를 언바인드라 부르며 unbind()를 사용하여 언바인드 할 수 있다.
#######################################################
@@@@@@@@ [ Events ] @@@@@@@@
jQuery는 클릭, 더블클릭, 포커스 등 다양한 이벤트를 감지하고 그에 따른 이펙트를 줄 수 있다.
일반적인 자바스크립트는 이러한 이벤트들을 HTML 태그 내에 작성하는 방식이었으나 jQuery는 이러한 이벤트들을 별도로 작성하므로 다양한 이벤트 관리가 가능하며 HTML과 자바스크립트 코드가 분리된 개발 환경을 가질 수 있다.
이벤트를 바인드 할 때 해당 이벤트가 발생 시 실행할 코드를 함수로 지정할 수 있는데, 이 함수 내에서 선택한 element를 호출할 때에는 this 를 사용하여 호출 할 수 있다.
$('a').click(functions() {
alert('anchor');
});
실행전 HTML
<a href="#">A</a>
<a href="#">A</a>
<a href="#">A</a>
실행전 HTML & script
<a href="#" onclick="alert('anchor');">A</a>
<a href="#" onclick="alert('anchor');">A</a>
<a href="#" onclick="alert('anchor');">A</a>
#######################################################
@@@@@@@@ [ outerWidth() ] @@@@@@@@
element의 세로 길이를 구한다. padding, border 길이를 모두 포함하므로 실제 길이를 구할 수 있다.
$('.span1').text($('.span1').outerWidth());
실행전 HTML
<span class="span1" style="padding:4px;height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle"></span>
실행후 HTML
<span class="span1" style="padding:4px;height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle">50</span>
실행전
실행후
|50|
#######################################################
@@@@@@@@ [ outerHeight() ] @@@@@@@@
element의 세로 길이를 구한다. padding, border 길이를 모두 포함하므로 실제 길이를 구할 수 있다.
$('.span1').text($('.span1').outerHeight());
실행전 HTML
<span class="span1" style="padding:4px;height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle"></span>
실행후 HTML
<span class="span1" style="padding:4px;height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle">28</span>
#######################################################
@@@@@@@@ [ innerWidth() ] @@@@@@@@
element의 가로 길이를 구한다. padding을 포함한 길이를 구하나 border의 길이는 포함되지 않는다.
$('.span1').text($('.span1').innerWidth());
실행전 HTML
<span class="span1" style="padding:4px;height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle"></span>
실행후 HTML
<span class="span1" style="padding:4px;height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle">48</span>
#######################################################
@@@@@@@@ [ innerHeight() ] @@@@@@@@
element의 세로 길이를 구한다. padding을 포함한 길이를 구하나 border의 길이는 포함되지 않는다.
$('.span1').text($('.span1').innerHeight());
실행전 HTML
<span class="span1" style="padding:4px;height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle"></span>
실행후 HTML
<span class="span1" style="padding:4px;height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle">26</span>
#######################################################
@@@@@@@@ [ width() ] @@@@@@@@
element의 가로 길이를 구한다. 실제 길이가 아닌 css에서 지정한 길이를 가져 오므로 이 점에 유의해야 한다. padding, border 등으로 인해서 늘어난 길이는 고려되지 않는다.
css('width', value)를 사용하는 것과 동일하다.
$('.span1').width(100);
$('.span1').text($('.span1').width());
실행전 HTML
<span class="span1" style="height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle">50</span>
실행후 HTML
<span class="span1" style="height:20px;width:100px;border:1px solid red;text-align:center;" align="center" valign="middle">98</span>
$('.span1').text($('.span1').width());
실행전 HTML
<span class="span1" style="height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle"></span>
실행후 HTML
<span class="span1" style="height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle">48</span>
#######################################################
@@@@@@@@ [ height() ] @@@@@@@@
element의 세로 길이를 지정한다. css에서 height 값을 변경하는 것으로 padding, border 등으로 인해서 실제 길이와 차이가 있다.
css('height', value)를 사용하는 것과 동일하다.
$('.span1').height(100);
$('.span1').text($('.span1').height());
실행전 HTML
<span class="span1" style="height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle">20</span>
실행후 HTML
<span class="span1" style="height:100px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle">98</span>
$('.span1').text($('.span1').height());
실행전 HTML
<span class="span1" style="height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle"></span>
실행후 HTML
<span class="span1" style="height:20px;width:50px;border:1px solid red;text-align:center;" align="center" valign="middle">18</span>
#######################################################
@@@@@@@@ [ position() ] @@@@@@@@
선택한 element의 부모 element 내에서의 left, top 좌표 값을 구한다.
var _position = $('div > span').position();
$('#message').text('left: '+_position.left+' top: '+_position.top);
실행전 HTML
<div style="padding: 15px;">
<span>this is span</span>
</div>
<div id="message"></div>
#######################################################
@@@@@@@@ [ offset() ] @@@@@@@@
선택한 element의 전체 문서 내에서의 left, top 좌표 값을 구한다.
var _offset= $('div > span').offset();
$('#message').text('left: '+_offset.left+' top: '+_offset.top);
실행전 HTML
<div style="padding: 15px;">
<span>this is span</span>
</div>
<div id="message"></div>
#######################################################
@@@@@@@@ [ css(name, value) ] @@@@@@@@
css의 값을 수정한다.
$('#fox').css('backgorund-color', 'red');
실행전 HTML
<div id="fox" style="background-color: yellow;"></div>
실행후 HTML
<div id="fox" style="background-color: red;"></div>
#######################################################
@@@@@@@@ [ css(name) ] @@@@@@@@
css의 값을 가져 온다.
var _css = $('#fox').css('backgorund-color');
$('#message').text(_css);
실행전 HTML
<div id="fox" style="background-color: yellow;">DIV</div>
<div id="message">DIV</div>
실행후 HTML
<div id="fox" style="background-color: yellow;">DIV</div>
<div id="message">yellow</div>
#######################################################
@@@@@@@@ [ clone() ] @@@@@@@@
선택한 element를 복제한다.
clone()으로 복제할 경우 element의 DOM 요소만 복제 되는 것이 아니라 이벤트도 함께 복제 된다.
$('span').before($('div').clone());
실행전 HTML
<span>this is span</span>
<div>this is original?</div>
실행후 HTML
<div>this is original?</div>
<span>this is span</span>
<div>this is original?</div>
#######################################################
@@@@@@@@ [ remove() ] @@@@@@@@
선택한 element를 제거한다.
$('div').remove();
실행전 HTML
<div>
<span>this is span</span>
<label>this is label</label>
</div>
실행후 HTML
[없다 --;]
#######################################################
@@@@@@@@ [ empty() ] @@@@@@@@
선택한 element의 value node를 제거한다.
$('div').empty();
실행전 HTML
<div>
<span>this is span</span>
<label>this is label</label>
</div>
실행후 HTML
<div></div>
#######################################################
@@@@@@@@ [ wrap(element) ] @@@@@@@@
지정한 element를 복사하여 선택한 element를 감싸는 기능이다.
var divElement = $('div');
$('p').wrap(divElement);
실행전 HTML
<div style="background-color:red"></div>
<p>first</p>
<p>second</p>
<p>third</p>
실행후 HTML
<div style="background-color: red;"></div>
<div style="background-color: red;"><p>first</p></div>
<div style="background-color: red;"><p>second</p></div>
<div style="background-color: red;"><p>third</p></div>
#######################################################
@@@@@@@@ [ wrap(html) ] @@@@@@@@
선택한 element를 새로 생성하는 DOM으로 감싸는 기능이다.
$('p').wrap('<div style="background-color:red"></div>');
실행전 HTML
<p>first</p>
<p>second</p>
<p>third</p>
실행후 HTML
<div style="background-color: red;"></div>
<div style="background-color: red;"><p>first</p></div>
<div style="background-color: red;"><p>second</p></div>
<div style="background-color: red;"><p>third</p></div>
#######################################################
@@@@@@@@ [ insertBefore(selector) ] @@@@@@@@
element를 셀렉터로 선택한 element 내로 이동 시킬 수 있다.
$('span').insertBefore('div > label');
실행전 HTML
<span>this is span</span>
<div>
<label>this is label</label>
</div>
실행후 HTML
<div>
<span>this is span</span>
<label>this is label</label>
</div>
#######################################################
@@@@@@@@ [ before(element) ] @@@@@@@@
before()를 사용해 추가할 때에 html 대신 element를 지정하면 지정한 element를 이동시킬 수 있다.
$('div > label').before($('span'));
실행전 HTML
<span>this is span</span>
<div>
<label>this is label</label>
</div>
실행후 HTML
<div>
<span>this is span</span>
<label>this is label</label>
</div>
#######################################################
@@@@@@@@ [ before(html) ] @@@@@@@@
선택한 element 이전 위치에 html을 추가하는 기능이다.
$('div > span').before('<span>this is add span</span>');
실행전 HTML
<div>
<span>this is first span</span>
<div>
실행후 HTML
<div>
<span>this is add span</span>
<span>this is first span</span>
<div>
#######################################################
@@@@@@@@ [ insertAfter(selector) ] @@@@@@@@
element를 셀렉터로 선택한 element 다음 위치로 이동 시킬 수 있다.
$('span').insertAfter('div > label');
실행전 HTML
<span>this is span</span>
<div>
<label>this is label</label>
</div>
실행후 HTML
<div>
<label>this is label</label>
<span>this is span</span>
</div>
#######################################################
@@@@@@@@ [ after(element) ] @@@@@@@@
after()를 사용해 추가할 때에 html 대신 element를 지정하면 지정한 element를 이동시킬 수 있다.
$('div > label').after($('span'));
실행전 HTML
<span>this is span</span>
<div>
<label>this is label</label>
</div>
실행후 HTML
<div>
<label>this is label</label>
<span>this is span</span>
</div>
#######################################################
@@@@@@@@ [ after(html) ] @@@@@@@@
선택한 element의 다음 위치에 html을 추가하는 기능이다.
$('div > span').after('<span>this is second span</span>');
실행전 HTML
<div>
<span>this is first span</span>
<div>
실행후 HTML
<div>
<span>this is first span</span>
<span>this is second span</span>
<div>
#######################################################
@@@@@@@@ [ prependTo(selector) ] @@@@@@@@
element를 셀렉터로 선택한 element 내로 이동 시킬 수 있다.
$('span').prependTo('div');
실행전 HTML
<span>this is span</span>
<div>
<label>this is label</label>
</div>
실행후 HTML
<div>
<span>this is span</span>
<label>this is label</label>
</div>
#######################################################
@@@@@@@@ [ prepend(element) ] @@@@@@@@
prepend()를 사용해 추가할 때에 html 대신 element를 지정하면 지정한 element를 이동시킬 수 있다.
$('div').append($('span'));
실행전 HTML
<span>this is span</span>
<div>
<label>this is label</label>
</div>
실행후 HTML
<div>
<span>this is span</span>
<label>this is label</label>
</div>
#######################################################
@@@@@@@@ [ prepend(html) ] @@@@@@@@
element 내에 html을 추가하는 기능이다. prepend()로 추가되는 html은 제일 앞에 추가 된다.
$('div').prepend('<span>this is add span</span>');
실행전 HTML
<div>
<span>this is first span</span>
</div>
실행후 HTML
<div>
<span>this is add span</span>
<span>this is first span</span>
</div>
#######################################################
@@@@@@@@ [ appendTo(selector) ] @@@@@@@@
element를 셀렉터로 선택한 element 내로 이동 시킬 수 있다.
$('span').appendTo('div');
실행전 HTML
<span>this is span</span>
<div>
<label>this is label</label>
</div>
실행후 HTML
<div>
<label>this is label</label>
<span>this is span</span>
</div>
#######################################################
@@@@@@@@ [ append(element) ] @@@@@@@@
append()를 사용해 추가할 때에 html 대신 element를 지정하면 지정한 element를 이동시킬 수 있다.
$('div').append($('span'));
실행전 HTML
<span>this is span</span>
<div>
<label>this is label</label>
</div>
실행후 HTML
<div>
<label>this is label</label>
<span>this is span</span>
</div>
#######################################################
@@@@@@@@ [ append(html) ] @@@@@@@@
element 내에 html을 추가하는 기능이다.
append()로 추가되는 html은 제일 뒤에 추가 된다.
실행전 HTML
<div>
<span>this is first span</span>
<div>
실행전 HTML
<div>
<span>this is first span</span>
<span>this is second span</span>
<div>
#######################################################
@@@@@@@@ [ text() ] @@@@@@@@
element의 value node를 텍스트로 가져온다. html이 있다면 모두 제거 되어 텍스트만을 가져 온다.
$('input[name=fox]').val($('div.red').text())
실행전 HTML
<div class="red">
<span class="blue">this is span</span>
</div>
<input type="text" name="fox" value="" />
실행후 HTML
<div class="red">
<span class="blue">this is span</span>
</div>
<input type="text" name="fox" value="this is span" />
#######################################################
@@@@@@@@ [ html(html) ] @@@@@@@@
html을 element의 value node에 집어 넣을 수 있다.
var newHtml = '<span>new html</span>';
$('div').html(newHtml);
실행전 HTML
<div></div>
실행후 HTML
<div><span>new html</span></div>
#######################################################
@@@@@@@@ [ outerHeight() ] @@@@@@@@
선택한 element의 value node에서 html을 가져 온다. value node를 html 형태로 가져오는 것이므로 element 자체는 포함되지 않는다.
$('#message').val($('div.red').html());
실행전 HTML
<div class="red">
<span><input type="text" name="cook" /></span>
</div>
<input id="message" type="text" />
실행후 HTML
<div class="red">
<span>
<input type="text" name="cook" />
</span>
</div>
<input id="message" type="text" value="<SPAN><INPUT name=cook> </SPAN>" />
#######################################################
@@@@@@@@ [ val(value) ] @@@@@@@@
element의 ‘value’ 속성의 값을 변경한다.
$('input[name=fox]').val('wolf');
실행전 HTML
<input type="text" name="fox" value="dog" />
실행후 HTML
<input type="text" name="fox" value="wolf" />
#######################################################
@@@@@@@@ [ val() ] @@@@@@@@
element의 value 속성의 값을 가져온다.
$('#message').text($('select option:selected').val());
실행전 HTML
<select>
<option value="HEY" selected="selected">hey man</option>
<option value="FOX">mulder</option>
</select>
<div id="message"></div>
실행후 HTML
<select>
<option value="HEY" selected="selected">hey man</option>
<option value="FOX">mulder</option>
</select>
<div id="message">HEY</div>
#######################################################
@@@@@@@@ [ removeClass(class) ] @@@@@@@@
element에서 클래스를 제거한다.
$('div').removeClass('red');
실행전 HTML
<div class="red blue"></div>
<div class="red"></div>
실행후 HTML
<div class="blue"></div>
<div></div>
#######################################################
@@@@@@@@ [ hasClass(class) ] @@@@@@@@
element에 지정한 클래스가 존재하는지 판단하여 boolean으로 반환한다.
$("#message").text($("#melon").hasClass("red").toString());
실행전 HTML
<div id="melon" class="red">Red Melon</div>
<div id="message"></div>
실행후 HTML
<div id="melon" class="red">Red Melon</div>
<div id="message">true</div>
#######################################################
@@@@@@@@ [ addClass(class) ] @@@@@@@@
클래스를 element에 추가한다.
$('div').addClass('red');
실행전 HTML
<div class="blue"></div>
실행후 HTML
<div class="blue red"></div>
#######################################################
@@@@@@@@ [ removeAttr() ] @@@@@@@@
속성을 제거 한다.
$('div').removeAttr('class');
실행전 HTML
<div class="blue"></div>
실행후 HTML
<div></div>
#######################################################
@@@@@@@@ [ attr(name, value) ] @@@@@@@@
속성의 값을 변경할 수 있다.
$("span.red").attr("style", "color:red;");
실행전 HTML
<span>span</span><br>
<span class="red">span</span><br>
<span class="red">span</span><br>
<span>span</span>
실행후 HTML
<span>span</span><br>
<span style="color: red;" class="red">span</span><br>
<span style="color: red;" class="red">span</span><br>
<span>span</span>
#######################################################
@@@@@@@@ [ attr(name) ] @@@@@@@@
속성의 값을 가져 온다.
$("#message").text($("input:checked").attr("name"));
실행전 HTML
<form>
<input name="fox" type="checkbox" checked="checked" />
<input name="wolf" type="text" />
</form>
<div id="message"></div>
실행후 HTML
<form>
<input name="fox" type="checkbox" checked="checked" />
<input name="wolf" type="text" />
</form>
<div id="message">fox</div>
#######################################################
@@@@@@@@ [ parents(selector) ] @@@@@@@@
find( selector )와 반대 되는 기능을 한다. 상위 element 중에서 선택을 한다.
$('input:radio').parents('div').css('background-color','red');
실행전 HTML
<div>
<span><input type="radio" /></span>
<span>Hey</span>
</div>
<div>
<span><input type="text" /></span>
<span>Call!</span>
</div>
실행후 HTML
<div style="background-color: red;">
<span><input type="radio"></span>
<span>Hey</span>
</div>
<div>
<span><input type="text"></span>
<span>Call!</span>
</div>
#######################################################
@@@@@@@@ [ parent() ] @@@@@@@@
선택된 element의 부모 element를 찾는다. :parent 필터와 동일한 기능을 한다.
$('span.a-yellow:parent').text('변경후');
$('span.a-yellow').parent().text('변경후');
var spanElement = $('span.a-yellow');
spanElement.parent().text('변경후');
변경전 HTML
<div>
<span class="a-yellow">변경전</span><br>
<span class="a-yellow">변경전</span>
</div>
<table border=1>
<tr>
<td><span class="a-yellow">변경전</span></td>
</tr>
<tr>
<td><span class="a-yellow">변경전</span></td>
</tr>
</table>
변경후 HTML
<div>변경후</div>
<table border="1">
<tbody>
<tr>
<td>변경후</td>
</tr>
<tr>
<td>변경후</td>
</tr>
</tbody>
</table>
#######################################################
@@@@@@@@ [ children(selector) ] @@@@@@@@
선택된 element의 자식 element를 찾는다. ‘parent > children’ 셀렉터와 동일한 기능을 한다.
$('div > span.a-yellow').text('a-yellow blue');
$('div').children('span.a-yellow').text('a-yellow blue');
var divElement = $('div');
divElement.children('span.a-yellow').text('a-yellow blue');
실행전 HTML
<div>
<span class="a-yellow">a-yellow</span><br>
<span class="a-yellow">a-yellow</span>
</div>
<table border=1>
<tr>
<td><span class="a-yellow">a-yellow</span></td>
</tr>
<tr>
<td><span class="a-yellow">a-yellow</span></td>
</tr>
</table>
실행후 HTML
<div>
<span class="a-yellow">a-yellow blue</span><br>
<span class="a-yellow">a-yellow blue</span>
</div>
<table border="1">
<tbody>
<tr>
<td><span class="a-yellow">a-yellow</span></td>
</tr>
<tr>
<td><span class="a-yellow">a-yellow</span></td>
</tr>
</tbody>
</table>
#######################################################
@@@@@@@@ [ prev(selector) ] @@@@@@@@
선택된 element의 이전 element를 선택한다.
$("button[disabled]").prev().text("this button is disabled");
실행전 HTML
<div>
<span></span>
<button disabled="disabled">First</button>
<span></span>
</div>
<div>
<span></span>
<button>Second</button>
<span></span>
</div>
<div>
<span></span>
<button disabled="disabled">Third</button>
<span></span>
</div>
실행후 HTML
<div>
<span>this button is disabled</span>
<button disabled="disabled">First</button>
<span></span>
</div>
<div>
<span></span>
<button>Second</button>
<span></span>
</div>
<div>
<span>this button is disabled</span>
<button disabled="disabled">Third</button>
<span></span>
</div>
#######################################################
@@@@@@@@ [ next(selector) ] @@@@@@@@
선택된 element의 다음 element를 선택한다.
$("button[disabled]").next().text("this button is disabled");
실행전 HTML
<div>
<span></span>
<button disabled="disabled">First</button>
<span></span>
</div>
<div>
<span></span>
<button>Second</button>
<span></span>
</div>
<div>
<span></span>
<button disabled="disabled">Third</button>
<span></span>
</div>
실행후 HTML
<div>
<span></span>
<button disabled="disabled">First</button>
<span>this button is disabled</span>
</div>
<div>
<span></span>
<button>Second</button>
<span></span>
</div>
<div>
<span></span>
<button disabled="disabled">Third</button>
<span>this button is disabled</span>
</div>
#######################################################
@@@@@@@@ [ find(selector) ] @@@@@@@@
선택된 element의 하위에 존재하는 모든 element 들에 셀렉터를 사용하는 기능이다. ‘selector selector’ 셀렉터와 동일한 기능을 한다.
$('div span.a-yellow').addClass('blue');
$('div').find('span.a-yellow').addClass('blue');
var divElement = $('div');
divElement.find('span.a-yellow').addClass("blue");
실행전 HTML
<div class="a-blue">a-blue</div>
<div class="a-yellow">a-yellow</div>
<div class="a-blue">a-blue</div>
<div>
<span class="a-blue">a-blue</span>
<span class="a-yellow">a-yellow</span>
<span class="a-blue">a-blue</span>
</div>
실행후 HTML
<div class="a-blue">a-blue</div>
<div class="a-yellow">a-yellow</div>
<div class="a-blue">a-blue</div>
<div>
<span class="a-blue">a-blue</span>
<span class="a-yellow blue">a-yellow</span>
<span class="a-blue">a-blue</span>
</div>
#######################################################
@@@@@@@@ [ not(selector) ] @@@@@@@@
:not(selector) 필터와 동일한 기능을 한다.
$("div:not('.a-yellow')").addClass('blue');
$("div").not('.a-yellow').addClass('blue');
var divElement = $('div');
divElement.not('.a-yellow').addClass("blue");
실행전 HTML
<div class="a-blue">a-blue</div>
<div class="a-yellow">a-yellow</div>
<div class="a-blue">a-blue</div>
실행후 HTML
<div class="a-blue blue">a-blue</div>
<div class="a-yellow">a-yellow</div>
<div class="a-blue blue">a-blue</div>
#######################################################
@@@@@@@@ [ is(selector) ] @@@@@@@@
선택한 element에 selector 조건과 일치하는 element가 존재하는 지 확인한다. boolean형으로 반환.
if($('div').is(':hidden')) {
$('div').hide();
}
실행전 HTML
<div>this is Division</div>
실행후 HTML
<div style='display: none;'>this is Division</div>
#######################################################
@@@@@@@@ [ eq(index) ] @@@@@@@@
:eq(index) 필터와 동일한 기능을 한다.
$('div:eq(2)').addClass('blue');
$('div').eq(2).addClass('blue');
var subject = $('div.subject');
subject.eq(2).addClass('blue');
실행전 HTML
<div>No1</div>
<div>No2</div>
<div>No3</div>
실행후 HTML
<div>No1</div>
<div>No2</div>
<div class="blue">No3</div>
#######################################################
@@@@@@@@ [ [attributeFilter1][attributeFilter2]... ] @@@@@@@@
여러 개의 속성 필터를 함께 사용하여 모든 필터에 일치하는 element를 찾는다.
$('span[id][name=man]').css('background-color', 'yellow');
실행전 HTML
<span id="manNews" >id="manNews"</span><br>
<span id="manNews" name="man" >id="manNews" name="man"</span><br>
<span id="letterman" name="new-letterman" >id="letterman" name="new-letterman"</span><br>
<span name="newmilk" >name="newmilk"</span><br>
실행후 HTML
<span id="manNews" >id="manNews"</span><br>
<span id="manNews" name="man" style="background-color: yellow;" >id="manNews" name="man"</span><br>
<span id="letterman" name="new-letterman" >id="letterman" name="new-letterman"</span><br>
<span name="newmilk" >name="newmilk"</span><br>
#######################################################
@@@@@@@@ [ [attribute=value] ] @@@@@@@@
일치하는 속성의 값을 찾아 element를 선택하는 필터이다.
[attribute!=value]
[attribute=value]와 정반대의 역할을 한다. 일치하지 않는 값을 가진 속성의 element를 찾는다. :not([attribute=value]) 와 동일한 역할을 하는 필터이다.
$('input[name=newsletter]').css('background', 'yellow');
실행전 HTML
<input type="radio" name="newsletter" value="Hot Fuzz" />
<span>Hot Fuzz</span>
<input type="radio" name="newsletters" value="Cold Fusion" />
<span>Cold Fusion</span>
<input type="radio" name="accept" value="Evil Plans" />
<span>Evil Plans</span>
실행후 HTML
<input type="radio" name="newsletter" value="A" style="background: yellow;" />
<span>Hot Fuzz</span>
<input type="radio" name="newsletters" value="B" />
<span>Cold Fusion</span>
<input type="radio" name="accept" value="C" />
<span>Evil Plans</span>
#######################################################
@@@@@@@@ [ attribute() ] @@@@@@@@
속성을 이용하여 element를 찾는 필터이다.
속성 이름을 이용하여 해당 속성을 가진 element를 찾을 수 있다.
$('div[id]').css('color', 'red');
실행전 HTML
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
실행후 HTML
<div>no id</div>
<div id="hey" style="color: red;">with id</div>
<div id="there" style="color: red;">has an id</div>
<div>nope</div>
#######################################################
@@@@@@@@ [ :selected ] @@@@@@@@
selected 속성을 가진 element를 찾는다.
셀렉트 박스에서 선택 되어 있는 <option> element를 찾는 것이다.
$('#message').text($('select > option:selected').text());
실행전 HTML
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option>Trees</option>
<option selected="selected">Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div id="message"></div>
실행후 HTML
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option>Trees</option>
<option selected="selected">Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div id="message">Bushes</div>
#######################################################
@@@@@@@@ [ :checked ] @@@@@@@@
checked 속성을 가진 element를 찾는다.
라디오, 체크박스 중 체크 되어 있는 element를 찾는 것이다.
$('#message').text('Found '+$('form > input:checked').length);
실행전 HTML
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
<input type="checkbox" name="newsletter" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<input type="checkbox" name="newsletter" value="Yearly" />
</form>
<div id="message"></div>
실행후 HTML
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
<input type="checkbox" name="newsletter" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<input type="checkbox" name="newsletter" value="Yearly" />
</form>
<div id="message">Found 2</div>
#######################################################
@@@@@@@@ [ :text ] @@@@@@@@
text 속성을 가진 element를 찾는다. text 속성을 가질 수 있는 element는 <INPUT> 뿐이므로 :text를 사용할때에는 input:text 로 사용하여 불필요한 속도 낭비를 없애자.
:text 뿐 아니라 <input> element에 사용할 수 있는 속성들은 모두 필터로 제공되어 있으므로 :text와 마찬가지 형식으로 사용할 수 있다.
:password :radio :checkbox :submit :image :reset :button :file :hidden
참고로 브라우저 별로 차이는 있으나 <input> element의 속성이 password일 경우 보안 목적으로 인해 다른 속성으로 변경할 수 없다.
$("form input:text").css('background', 'yellow');
실행전 HTML
<form>
<input type="button" value="Input Button"/>
<input type="hidden" />
<input type="password" />
<input type="text" />
<input type="submit" />
</form>
실행후 HTML
<form>
<input type="button" value="Input Button"/>
<input type="hidden" />
<input type="password" />
<input type="text" style="background: yellow;" />
<input type="submit" />
</form>
#######################################################
@@@@@@@@ [ :input ] @@@@@@@@
<form>에 속하는, 입력 기능을 가진 element를 찾는다.
<input> <textarea> <select> <button> 등이다.
$('#message').text('Found '+$('form :input').length);
실행전 HTML
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
<div id="messages"></div>
실행후 HTML
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
<div id="message">Found 13</div>
#######################################################
@@@@@@@@ [ :visible ] @@@@@@@@
찾은 element 중 보이는 element만을 찾는다.
CSS의 display: none;으로 보이지 않게 지정되지 않은 element를 찾는다.
$('div:visible').hide();
실행전 HTML
<div>This is visible.</div>
<div style="display: none;">This is invisible.</div>
<div>This is visible.</div>
실행후 HTML
<div style="display: none;">This is visible.</div>
<div style="display: none;">This is invisible.</div>
<div style="display: none;">This is visible.</div>
#######################################################
@@@@@@@@ [ :hidden ] @@@@@@@@
찾은 element 중 보이지 않는 element만을 찾는다.
CSS의 display: none;으로 보이지 않게 지정된 element를 찾는다.
$('div:hidden').show();
실행전 HTML
<div>This is visible.</div>
<div style="display: none;">This is invisible.</div>
<div>This is visible.</div>
실행후 HTML
<div>This is visible.</div>
<div style="display: block;">This is invisible.</div>
<div>This is visible.</div>
#######################################################
@@@@@@@@ [ :parent ] @@@@@@@@
찾은 element의 부모 element를 선택한다.
실행전 HTML
<table border="1">
<tr>
<td>Value 1</td>
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
<td>Value 2</td>
</tr>
</table>
실행후 HTML
<table border="1">
<tr style="background-color: #bbbbff;">
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr style="background-color: #bbbbff;">
<td>Value 2</td>
<td>Value 2</td>
</tr>
</table>
#######################################################
@@@@@@@@ [ :eq(index) ] @@@@@@@@
:eq()는 :first :last :even :odd 와 마찬가지로 순서와 관련된 필터이다. 그러나 eq()는 순서를 직접 지정이 가능하므로 :first :last :even :odd 들로 선택할 수 없는 element를 선택해야 할 때 유용하다.
순서는 0부터 시작하므로 이를 고려해서 몇 번째 element를 선택할지 숫자로 :eq()에 지정하면 된다.
$("td:eq(2)").css("color", "red");
실행전 HTML
<table border="1">
<tr>
<td>TD #0</td>
<td>TD #1</td>
<td>TD #2</td>
</tr>
<tr>
<td>TD #3</td>
<td>TD #4</td>
<td>TD #5</td>
</tr>
</table>
실행후 HTML
<table border="1">
<tr>
<td>TD #0</td>
<td>TD #1</td>
<td style="color: red;">TD #2</td>
</tr>
<tr>
<td>TD #3</td>
<td>TD #4</td>
<td>TD #5</td>
</tr>
</table>
#######################################################
@@@@@@@@ [ :odd ] @@@@@@@@
셀렉터로 찾은 element 중 홀수 순서의 element들만 선택한다.
순서는 0부터 시작하므로 두 번째 element를 포함하여 하나씩 건너 뛴 element들만 선택된다.
$("tr:odd").css("background-color", "#bbbbff");
실행전 HTML
<table border="1">
<tr>
<td>Row with Index #0</td>
</tr>
<tr>
<td>Row with Index #1</td>
</tr>
<tr>
<td>Row with Index #2</td>
</tr>
<tr>
<td>Row with Index #3</td>
</tr>
</table>
실행후 HTML
<table border="1">
<tr>
<td>Row with Index #0</td>
</tr>
<tr style="background-color: #bbbbff;">
<td>Row with Index #1</td>
</tr>
<tr>
<td>Row with Index #2</td>
</tr>
<tr style="background-color: #bbbbff;">
<td>Row with Index #3</td>
</tr>
</table>
#######################################################
@@@@@@@@ [ :even ] @@@@@@@@
셀렉터로 찾은 element 중 짝수 순서의 element들만 선택한다.
순서는 0부터 시작하므로 첫번째 element를 포함하여 하나씩 건너 뛴 element들만 선택된다.
$("tr:even").css("background-color", "#bbbbff");
실행전 HTML
<table border="1">
<tr><td>Row with Index #0</td></tr>
<tr><td>Row with Index #1</td></tr>
<tr><td>Row with Index #2</td></tr>
<tr><td>Row with Index #3</td></tr>
</table>
실행후 HTML
<table border="1">
<tr style="background-color: #bbbbff;"><td>Row with Index #0</td></tr>
<tr><td>Row with Index #1</td></tr>
<tr style="background-color: #bbbbff;"><td>Row with Index #2</td></tr>
<tr><td>Row with Index #3</td></tr>
</table>
#######################################################
@@@@@@@@ [ :not(selector) ] @@@@@@@@
셀렉터로 찾은 element 중에서 제외될 element들을 찾을 수 있다.
:not() 필터로 찾은 element들은 제외되고 나머지 element들만 선택된다.
$('input:not(:checked)').css('background-color', 'yellow');
실행전 HTML
<form>
<input type="checkbox" name="member" value="Mary" />
<span>Mary</span>
<input type="checkbox" name="member" value="Peter" />
<span>Peter</span>
<input type="checkbox" name="member" value="Tom" checked="checked" />
<span>Tom</span>
</form>
실행후 HTML
<form>
<input type="checkbox" name="member" value="Mary" style="background-color: yellow;" />
<span>Mary</span>
<input type="checkbox" name="member" value="Peter" style="background-color: yellow;" />
<span>Peter</span>
<input type="checkbox" name="member" value="Tom" checked="checked" />
<span>Tom</span>
</form>
#######################################################
@@@@@@@@ [ :last ] @@@@@@@@
셀렉터로 찾은 element 중에서 마지막 element만을 선택한다.
$("td:last").css("font-style", "italic");
실행전 HTML
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
실행후 HTML
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td style="font-style:italic">Row 3</td></tr>
</table>
#######################################################
@@@@@@@@ [ :first ] @@@@@@@@
셀렉터로 찾은 element 중에서 첫 번째 element만을 선택한다.
$("tr:first").css("color", "red");
실행전 HTML
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
실행후 HTML
<table>
<tr style="color:red"><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
#######################################################
@@@@@@@@ [ parent > child ] @@@@@@@@
자식 element를 찾을 때 사용한다. element의 바로 아래 element를 자식 element라 부르며 바로 위 element는 부모 element가 된다.
‘selector selector’는 셀렉터로 찾은 모든 element 중에서 찾지만 ‘parent > child’는 셀렉터로 찾은 element에서 바로 하위에 있는 자식 element 중에서만 찾는다.
실행전 HTML
<span id="main">
<div></div>
<button>Child</button>
<div class="mini"></div>
<div>
<div class="mini"></div>
<div class="mini"></div>
</div>
<div><button>Grand</button></div>
<div>
<span>A Span <em>in</em> child</span>
</div>
<span>A Span in main</span>
</span>
실행후 HTML
<span id="main">
<div style="border: 3px double red"></div>
<button>Child</button>
<div class="mini" style="3px double red"></div>
<div style="border: 3px double red">
<div class="mini"></div>
<div class="mini"></div>
</div>
<div style="border: 3px double red"><button>Grand</button></div>
<div style="border: 3px double red">
<span>A Span <em>in</em> child</span>
</div>
<span>A Span in main</span>
</span>
#######################################################
@@@@@@@@ [ selector selector ] @@@@@@@@
셀렉터로 찾은 element 내에서 다시 셀렉터를 사용할 수 있다.
$("form input").css("border", "2px dotted blue");
실행전 HTML
<form>
<div>Form is surrounded by the green outline</div>
<label>Child:</label>
<input name="name" />
<fieldset>
<label>Grandchild:</label>
<input name="newsletter" />
</fieldset>
</form>
실행후 HTML
<form>
<div>Form is surrounded by the green outline</div>
<label>Child:</label>
<input name="name" style="border: 2px dotted blue;" />
<fieldset>
<label>Grandchild:</label>
<input name="newsletter" style="border: 2px dotted blue;" />
</fieldset>
</form>
#######################################################
@@@@@@@@ [ selector1, selector2, selector.. ] @@@@@@@@
다수의 셀렉터에 한번에 명령을 실행한다.
하나식 셀렉터 하는 형식
$('div').css('border','3px solid red');
$('span').css('border','3px solid red');
$('p.myClass').css('border','3px solid red');
한번에 셀렉터 하는 형식
$('div, span, p.myClass').css('border','3px solid red');
실행전 HTML
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
실행후 HTML
<div style="border: 3px solid red;">div</div>
<p class="myClass" style="border: 3px solid red;">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span style="border: 3px solid red;">span</span>
#######################################################
@@@@@@@@ [ element.class ] @@@@@@@@
여러가지 셀렉터를 조합하여 원하는 element만을 찾아 낼 수 있다.
$('span.myClass').css('border','3px solid red');
실행전 HTML
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span class="myClass">span class=”myClass”</span
<span>span</span>
실행후 HTML
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span class="myClass" style=”border: 3px solid red;”>span class=”myClass”</span>
<span>span</span>
#######################################################
@@@@@@@@ [ .class ] @@@@@@@@
element에 부여된 class를 이용하여 찾는다.
$('.myClass').css('border','3px solid red');
실행전 HTML
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
실행후 HTML
<div class="notMe">div class="notMe"</div>
<div class="myClass" style="border: 3px solid red;">div class="myClass"</div>
<span class="myClass" style="border: 3px solid red;">span class="myClass"</span>
#######################################################
@@@@@@@@ [ element ] @@@@@@@@
HTML 태그를 이용하여 찾는다.
$('div').css('border','3px solid red');
실행전 HTML
<div>DIV1</div>
<span>SPAN</span>
<div>DIV2</div>
실행후 HTML
<div style="border: 3px solid red;">DIV1</div>
<span>SPAN</span>
<div style="border: 3px solid red;">DIV2</div>
#######################################################
@@@@@@@@ [ #id ] @@@@@@@@
element(HTML 태그)의 id 속성(attribute)을 이용하여 찾는다. id는 고유하기 때문에 #id 를 이용하여 찾는 것이 가장 간단한 방법이나 id 남발의 문제, 다중 선택이 되지 않는 문제가 있다.
$('#myDiv').css('border', '3px solid red');
실행전 HTML
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
실행후 HTML
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv" style="border: 3px solid red;">id="myDiv"</div>
#######################################################
@@@@@@@@ [ TD 클릭하면 숨기기 ] @@@@@@@@
$("td").click(function(){
$(this).hide();
})
<table border="1">
<tr>
<td>클릭하면 사라짐</td>
</tr>
<tr>
<td>클릭하면 사라짐</td>
</tr>
<tr>
<td>클릭하면 사라짐</td>
</tr>
<tr>
<td>클릭하면 사라짐</td>
</tr>
</table>
위에서 셀렉트를 할 공간은 $("") 이곳인데
td 가 아닌 css에서 쓰이는 #id 나 .class 명을 적어도 똑같이 적용이 된다.
여기서 말하는 this는 클릭한 것에대한 값이 되며
jQuery 내 존재하는 hide() 펑션에 의해 숨겨지게 된다.
#######################################################
@@@@@@@@ [ appendTo, append 유의점 ] @@@@@@@@
p태그 내의 html 들을 result 안에 넣어서 alert 시킨것임
주의)var로 생성된 것의 경우 appendTo 가 먹지않음. append 로 할것
var result="";
$("p").each(function(){
result+=$(this).html();
alert(result);
})
$(result).appendTo("#result"); //1
$("#result").append(result); //2
<p>제품1 </p>
<p>제품2 </p>
<div id="result"></div>
적용해보면 1번의경우 내용이 먹질않는다..
아무래도 var로 생성한것은 적용이 되지않는것으로 보임.
append 는 appendTo 와 반대로
값을 넣어줄 공간을 지정 후 내용을 입력하면 들어가게 된다.
each는 위와같은 형태로 사용해야 하며 result+=$(this).html(); 이 부분은
맨위에 설정된 p 태그를 this로 html() 을 내용으로 보면됨.
#######################################################
@@@@@@@@ [ 몇번째 배열인지 확인하는법 ] @@@@@@@@
each 를 이용한 셀렉트 한것 중 몇번째 배열인지 확인하는법
var result="";
var i=0;
$("p").each(function(i,find){
result+=$(find).html()+": "+(i+1)+"번째 element\n";
});
alert(result);
<p>제품1 </p>
<p>제품2 </p>
위에서 i는 자동증가하는 숫자값이 되며
find는 this 개념으로 생각..
result 에서 실제 뿌려질때에는
제품1: 1번째 element\n
제품2: 2번째 element\n
이런 형태로 출력되게 된다.
#######################################################
@@@@@@@@ [ 현재페이지에 해당 element가 몇개 있는지 확인할때 ] @@@@@@@@
alert("div내에 있는 input 태그의 갯수는 "+$("div input").size()+"개 입니다.");
<div id="list_box">
<span>제품리스트</span>
<p>제품1 </p>
<p>제품2 </p>
</div>
<div id="button_box">
<input type="button" id="up_click_button" value="올리기">
<input type="button" id="down_click_button" value="내리기">
</div>
$("div input") 은 div 내의 input 으로 생각을 하면 된다.
그 후의 .size() 를 통하여 총 몇개의 배열을 받았는지 뿌려주게 되며
결과값은
div내에 있는 input 태그의 갯수는 2개 입니다.
와 같이 뿌려지게 된다.
#######################################################
@@@@@@@@ [ animate ] @@@@@@@@
꼭 찾아보심이
#######################################################
@@@@@@@@ [ ] @@@@@@@@
.pagediv {text-align:center;padding:15px} /** 페이징 DIV **/
.indiv {margin:0px 18px 0px 17px;} /** 본문 컨텐츠 DIV **/
* html .indiv {width:100%;} /** 본문 컨텐츠 DIV (IE 전용) **/
* html .hundred {width:100%;} /** 넓이 100% css (IE 전용) **/
#######################################################
@@@@@@@@ [ jQuery 맵/컬렉션 형태의 문자열 배열을 쿼리스트링으로 변경 ] @@@@@@@@
<head>
<title>문자열 매개변수를 쿼리스트링으로 변경</title>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript "></script>
<script type="text/javascript ">
jQuery(document).ready(function () {
var params = { dataType: "json", url: "a.aspx" };
var str = $.param(params); //맵/컬렉션 형태의 문자열 배열을 쿼리스트링으로 변경
jQuery('#my').append(str); //dataType=json&url=a.aspx
});
</script>
</head>
<body>
<div id="my"></div>
</body>
</html>
#######################################################
@@@@@@@@ [ check, radio ] @@@@@@@@
<script>
check
>> $("input[name=cUse]")[0].checked
>> $("input[name=cUse]").attr("checked", (chk== '1' ? 'checked' : ''));
>> radio 선택된 값 가져오기
$("input[name=rList][checked]").val()
>> radio의 value값으로 선택하기
$("input[name=rList]").filter('input[value='+sValue+']').attr("checked", "checked");
>> select box 선택된 값 가져오기
$("#ddl > option:selected").val();
>> select box의 value값으로 선택하기
$("#ddl > option[@value="+sValue+"]").attr("selected", "true");
<script>$("select[name=lang_code]").val("<?=$tLangCode?>");</script> 이렇게 하던가.. 또는
$("select[name=language] option[value=2]").attr("selected",true);
이렇게 선택해야 됩니다.
환경에 따라 두가지를 병행해 보세요.
이 포스트 작성시 jquery 1.2.6을 사용하였으나 현재는 1.3.2를 사용하고 있습니다.
radio button list 사용시 문제가 조금 있어서 현재는 약간의 변경이 있었습니다.
$("input[name=rList]").filter(function() {if (this.checked) return this;}).val()
$("#"+arrT[i].split("=")[0]).attr('type')
case "hidden" :
case "text" :
$('input[name=\'' + name + '\']').val(value);
$("input[name=" + name +"]").attr("value", value);
case "checkbox" :
case "radio" :
$("input[name=" + name + "]").filter('input[value=' + value + ']').attr("checked", true);
case "select-one" :
$("select[name=" + name +"] option[value=" + value + "]").attr("selected", true);
</script>
#######################################################
@@@@@@@@ [ 이벤트 정리 추가] @@@@@@@@
이벤트
e.preventDefault() - 대상을 클릭했을때 발생하는 이벤트를 방지(링크 이동 등등 막기)
.ready(fn); - 페이지 로딩시 fn 실행
.click(fn); - 클릭시 fn 실행
.dblclick(fn) - 더블클릭시 fn실행
.blur(fn) - 포커스를 잃었을때 fn실행
.focus(fn) - 포커스를 얻었을때 fn실행
.toggle(fn1,fn2); - 클릭시 fn1 과 fn2을 번갈아 실행
.scroll(fn) - window 창에서 scroll 이벤트가 발생할때마다 콜백함수 fn 을 실행
.change(fn) - 대상이 바뀌는 지 감지하여 fn을 실행
.keyUp(fn) - 키를 땔때 fn 실행
.keydown(fn) - 키를 누를때fn실행
.keypress(fn) - 연속으로 빨리 keydown이 일어날때 fn실행
.bind({click:fn(){}, mouseover:fn(){}, mouseout:fn(){}}); - 대상에 동적으로 이벤트 바인딩, 이벤트 핸들러 다중 바인딩 가능
.focusin(fn); - 포커스가 들어왓을때 fn 실행
.focusout(fn); - 포커스가 나갓을때 fn 실행
.select(fn) - 텍스트 필드에서 텍스트를 선택했을때 fn실행
.submit(fn) - 폼제출시 fn실행
.mousedown(fn) - 마우스 버튼를 누를때
.mouseup(fn) - 마우는 버튼을 눌렀다가 땔때
.hover(fn1,fn2) - 마우스오버시 fn1,마우스아웃시 fn2 실행
메소드
.show(시간);
.hide(시간);
.slideUp(시간); - 보이기
.slideDown(시간); - 숨기기
.scrollTop(); - 현재 스크롤바의 위치값
.next(); 다음대상
.prev(); 전 대상
.stop(); - 보통 animate정지에 쓰임
.animate(매개변수,진행시간); - ({"속성":"값"} ,1000) 1초동안 매개변수를 실행
매개변수 - width,height,opacity,fontsize
.attr(속성); - 속성의 값 가져오기
.attr({속성:값, 속성:값}); - 대상의 속성을 값으로 설정
.fadeOut(시간);
.fadeIn(시간);
.fadeTo(시간,투명도); - 대상을 시간동안 투명도를 적용 투명도1~100
.appendTo("대상"); - $("<div><p>Hello,World!</p></div>").appendTo("body");
.append(변수); - $("#result").append(result);
.each(fn) - 대상 수 많큼 반복하여 fn 실행
.size(); - 대상의 개수 알아오기
.html("<input ~>"); - 대상에 html추가
.text("아야어여"); - 대상에 text 추가
.end() - 실행취소함수 바로 전단계의 객체로 돌아감.
.data("link", "messages.jsp"); - 사용법 $(".tab").click(function(){
window.parent.frames['content'].location = $(this).data("link");
});
.eq(위치); - 대상의 위치번째 요소 셀렉트
.css("background-color","#000000"); - 대상에 스타일을 줌
.removeAttr(속성) - 대상의 속성을 제거
.delay(시간) - 시간만큼 지연
.has(엘레멘트); - 엘레멘트를 가지고 있는 대상만 반환
.contains(엘레멘트1,엘레멘트2) - 엘레멘트1이 엘레멘트2를 포함하고있는지를 boolean 형식으로 반환
.wrap();
.unwrap(); - 대상을 감싸고있는 부모 엘레멘트를 제거
.addClass(); - 스타일을 추가
.removeClass(); - 스타일을 제거
.val() - input 의 value값을 가져온다
.addClass("a") - 대상에 a클래스를 추가한다.
.removeClass("a") - 대상에 a클래스를 제거한다.
.get(0).tagName - 대상의 첫번째 요소의 태그이름을 가져옴
.bind(event,fn) - 이벤트 동적 바인딩
[기본셀렉터]
* : 모든 엘리먼트와 일치
E : 태그명이 E인 모든 엘리먼트와 일치
E F : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E>F : E의 바로 아래 자식이면서 태그명이 F인 모든 엘러먼트와 일치
E+F : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
E~F : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F) : 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치
E.C : 클래스명 C를 가지는 모든 엘리먼트 E와 일치, E의 생각은 *.C와 동일함
E#I : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함
E[A] : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A=V] : 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V] : 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V] : 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V] : 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
[위치기반 셀렉터]
:first : 페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫번째 링크를 반환함
:last : 페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환함
:first-child : 첫번째 자식 엘리먼트. li:first-child는 각 리스트의 첫번째 아이템을 반환한다.
:last-child : 마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환한다.
:only-child : 형제가 없는 모든 엘리먼트 반환
:nth-child(n) : n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두번째 리스트 아이템을 반환함
:nth-child(event|odd) : 짝수 또는 홀수 자식 엘리먼트. li:nth-child(event)은 각 목록의 짝수 번째 자식 엘리먼트 반환
:nth-child(Xn + Y) : 전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인경우 생략가능하다. li:nth-child(3n)은 3의 배수번째 아이템을 반환, li:nth-child(5n+1) 은 5의 배수 +1번째 아이템을 반환
:event / :odd : 페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수번째 아이템을 반환한다. $(obj).parent().filter(':odd').hide();
:eq(n) : n번째로 일치하는 엘리먼트
:gt(n) : n번째 엘리먼트(포함안됨) 이후의 엘리먼트와 일치
:lt(n) : n번째 엘리먼트(포함안됨) 이전의 엘리먼트와 일치
$(".cmafac dl").children("dt:not(:first-child)").remove();
children 는 클래스도 찾을수 있다.
$("#ID_FAQLIST tbody").children("tr:not(:odd))").children('.faq_list_block').removeClass('faq_list_block').addClass('faq_list_none');
[필터 셀렉터]
:animated : 현재 애니메이션이 적용되고 있는 엘리먼트를 선택
:button : 모든 버튼을 선택함(input[type=submit], input[type=reset], input[type=button], button)
:checkbox : 체크박스 엘리먼트만 선택(input[type=checkbox])
:checked : 선택된 체크박스나 라디오 버튼만을 선택
:contains(foo) : 텍스트 foo를 포함하고 있는 엘리먼트만 선택
:disabled : 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.
:enabled : 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.
:file : 모든 파일 엘리먼트를 선택함(input[type=file])
:header : 헤더 엘리먼트만 선택한다. 예를 들어 <h1>부터 <h6>엘리먼트만 선택한다.
:hidden : 감춰진 엘리먼트만 선택한다.
:image : 폼 이미지를 선택한다.(input[type=image])
:input : 폼 엘리먼트만 선택한다.(input, select, textarea, button)
:not(filter) : 필터의 값을 반대로 변경한다.
:parent : 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
:password : 패스워드 엘리먼트만 선택한다. (input[type=password])
:radio : 라디오 버튼 엘리먼트만 선택한다.(input[type=radio])
:reset : 리셋 버튼을 선택(input[type=reset], button[type=reset])
:selected : 선택된 엘리먼트만 선택한다.
:submit : 전송 버튼을 선택한다.(button[type=submit], input[type=button])
:text : 텍스트 엘리먼트만 선택(input[type=text])
:visible : 보이는 (visible)엘리먼트만 선택한다.
:empty : 자식 또는 내부 텍스트를 가지지않는 요소들만 선택
:has(selector) : 지정된 셀렉터에 해당하는 요소를 갖는 모든 요소만 선택
:focus : 현재 포커스가 위치한 요소를 반환합니다. (1.6 이상에서 지원)
$(“td:eq(0)”)
td 요소중에 첫번째 항목만을 선택합니다. (eq의 index는 0부터 시작입니다.)
eq의 index는 0부터 시작을 하며 0 이면 요소중 첫번째, 1이면 두번째 요소가 됩니다.
$(“td:even”)
$(“td:odd”)
td 요소중에 짝/홀수번째 요소를 선택합니다. 짝/홀수의 구분은 eq의 index와 동일하게 구분이 됩니다.
$(“td:first”)
$("td:last")
td 요소중에 첫번째 요소, 마지막 요소를 선택합니다.
$(“td:gt(2)”)
$(“td:lt(2)”)
td 요소중에 2번째 요소 이후의 모든 요소를 선택하거나 2번째 요소 이전의 모든 요소를 선택합니다
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
$("*") / version added : 1.0
- document 내에서 모든 요소들을 가져온다.
$("element") / version added : 1.0
- document 내에서 element 요소들을 가져온다.
예)
$("div").css("border", "2px solid red");
- 모든 div 태그의 border 값을 2px solid red로 지정한다.
$('#id') / version added : 1.0
- test_id라는 id를 가지는 요소들을 가져온다.
예)
$("#test_id").hide();
- test_id라는 id를 가진 요소를 숨긴다.
$('.class') / version added : 1.0
- test_class라는 class를 가지는 요소들을 가져온다.
예)
$(".test_class").css("width", "100px");
- test_class라는 class를 가진 요소들의 넓이를 100px로 지정한다.
$("selector1", "selector2", "selectorN") / version added : 1.0
- 2개이상의 파라미터 값을 전달하여 여러 요소들을 가져 올 수 있다.
예)
$("div", "span").css("height", "50px");
- 모든 div 및 span 태그의 높이 값을 50px로 지정한다.
태그 이름, id, class로 선택한 요소들을 좀더 다양하게 사용할 수도 있다.
사용하는 예
$('#test_id > li')
- test_id라는 id를 가지고 있는 요소의 자식(> 1단계 하위) 중 li 요소들을 가져온다.
$('.test_class li:not(.test2_class)')
- test_class라는 class를 가지고 있는 요소들의 자식(모든 하위자식)에서 li요소들 중 test2_class 클래스를 가지고 있지 않은 요소들만 가져온다.
$('div.test_class:eq(1))
- div 요소들 중 test_class 클래스를 가지고 있는 요소에서 2번째 항목을 가져온다.
$('td:odd')
- td 요소들 중 홀수번째 항목들만 가져온다.
$('td:even')
- td 요소들 중 짝수번째 항목들만 가져온다.
$(obj).parent().filter(':odd').hide();
$('td:contains("HI")')
- td 요소들 중 HI를 포함하고 있는 항목들만 가져온다.
########################################
$('div[id*=\''+thisId+'_\']').attr('class','display_none');
function OnTEST(obj)
{
$("#ID_MsgTableCheck tr:odd").css("display", "none"); //홀수 tr은 모두 숨기기 와우
$(obj).next().show(); //tr에 걸었을때
$(obj).parent().next().show(); //td에 걸었을때
if($(obj).parent().next().css("display") == "none")
{
$(obj).parent().next().show();
}else{
$(obj).parent().next().hide();
}
}
<table class='list_form' id="ID_MsgTableCheck">
<tr OnTEST(this)>
<td OnTEST(this)>
parent.$('input[name="' + $("#PXKEY").val() + '[]"]:eq(0)').val(codeArr[0]);
parent.$('input[name="' + $("#PXKEY").val() + '[]"]:eq(1)').val(codeArr[1]);
parent.$('#' + $('#PYKEY').val()).val($(this).parents('tr td:eq(3)').text());
parent.$('#' + $('#PZKEY').val()).focus();
var codeArr = $(this).parents('tr td').next().text().split('-');
parent.$('input[name="' + $("#PXKEY").val() + '[]"]:eq(0)').val(codeArr[0]);
parent.$('input[name="' + $("#PXKEY").val() + '[]"]:eq(1)').val(codeArr[1]);
parent.$('#' + $('#PYKEY').val()).val($(this).parents('tr td').next().next().text());
$(this).parents('tr td:eq(3)').text() //IE만됨. 사파리 확인 필요(어떨땐 되는것 같기도 하고 --;)
$(this).parents('tr td').next().next().text() //IE , SAFARI
######################################## TIP 모음 ...........................
체크가 되어있는 수량을 가져옴
$('form > input:checked').length
alert($("input[name=MsgListCheckChk[]]:checked").length) ==>IE에서 잘되나 사파리에서 안됨 XXXX
alert($("input[name=\'MsgListCheckChk[]\']:checked").length) ==>사파리랑 IE에서 다 잘뵘 OOOO
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);
}
18. 숫자인지 체크 (-/+ 부호까지 체크)
function is_number(v) {
var reg = /^[-+]?\d+$/;
return reg.test(v);
}
############################################
설명
매치되는 확장집합의 각각의 엘리먼트의 내부를 HTML 태그로 감싼다.
.wrapInner()
적용 전 :
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').wrapInner('<div class="new" />');
적용 후 :
<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
############################################
$(window).unbind("resize");
$('div.blockMsg #spanLayerPopupClose').unbind("click");
$('#objPopupLayerBg').unbind("keydown");
############################################
$('select[name=\'FnOrReturnTag\']').val() ==> 셀렉트에 값이 있는지 확인할때
################## draggable() $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
<script src="../../js/ui/jquery.ui.all.js" type="text/javascript"></script> 필요함.
이미지 = element
$("img").draggable() ==> 해당 이미지를 아무곳에나 드래그 할수 있다.
$("img").draggable({helper:"clone"}); ==> 해당 드래그를 놓았을 경우 없어지고 원래 위치의 것은 계속 잇음
$("img").draggable({axis:"x"}); ==> 해당 이미지는 X좌표로만 이동 ( Y를 넣으면 만이동)
$("img").draggable({containment:"#aaa"}); ==> 해당 영역을 벚어나지 못함.
$("img").draggable({cursor:"move"}); ==> 해당 이미지를 드래그 할경우 마우스커서표시
$("img").draggable({cursorAt:{top:10,left:10}}); ==> 드래그시 마우스의 포인터를 고정으로 이미지 위치의 10, 10 으로 잡아준다.
$("img").draggable({delay:1000}); ==> 드래그 후 1초가 지나면 이미지가 쫓아온다.
$("img").draggable({distance:100}); ==> 이미지를 클릭한 지점부터 커서가 이동한 지점까지의 거리가 distance로 지정된 값보다 크면 이미지가 움직인다.
$("img").draggable({grid:[30,30]}); ==> 이미지가 움직일때 x,y의 좌표를 기준으로 격자형태로 이동함.
$("#outter").draggable({handle:"#inner"}); ==> #inner를 선택후 드래그 해야 #outter영역이 움직인다. (제목과 내용이 있는 경우 제목을 드래그 하면 제목내용 전체가 이동되는 것)
$("img").draggable({opacity:"0.5"}); ==> 이미지 드래그 0.5의 투명효과를 준다.
$("img").draggable({revert:true}); ==> 이미지 드래그 후 놓았을 경우 자신의 자리로 스르륵 이동한다. (False:는 이동된 자리에 가만히 있는다.)
$$$$$$$$$ 버전차이 확인 해봐야할듯 ########### document 문서 전체의 크기만큼 이동은 가능하나 div의 크기인 150,150을 넘어가지 않음.
$("img").draggable({containment: 'document',scroll:true}); ==> 이미지를 이동하면 자동으로 스크롤이 생김 (버전차이있는듯함.)
<div style="width:150;height:150;border:1px solid gray;position: absolute;overflow: auto">
<img src="../../img/jQuery.jpg" alt="Hello, jQuery!">
</div>
$("img").draggable({containment:'document',scroll:true,scrollSensitivity:100});
$("img").draggable({start: function(e,ui){alert("drag started!");}}); ==> 드래그를 시작한 시점에 함수 발생
$("img").draggable({drag: function(e,ui){ ==> 드래그 하는 동안 발생????
$("p").empty();
$("p").append($("img").css());
}});
$("img").draggable({stop: function(e,ui){alert("drag stopped!");}}); ==> 드래그 한 후에 마우스를 놓았을때 함수발생.
################## droppable() $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$(document).ready(function() { ==> 이미지를 이동시 복제된 이미지 생성하고 놓았을경우 없어지며, 투명도 0.3으로 출력
$("img").draggable({helper:"clone",
drag:function(e, ui) {
ui.helper.animate({opacity:"0.3"});
}});
$("div").droppable({ ==> div 에 이미지가 드랍된경우 자신의 영역에 Dropped 추가.
accept:"img", ==> 클래스 가능함.
drop:function(e, ui) {
$(this).append("Dropped!");
}});
});
-==> accept 대상이 여러개 인경우는 "a, b, c ... "형식으로 작성
<img style="position:absolute;top:10px" src="../../img/jQuery.jpg"
alt="Hello, jQuery!">
<div style="position:absolute;top:10px;left:150;
border:1px solid gray;width:120;text-align:center;height:30"></div>
@@@ 이미지가 해당 영역으로 들어가게 되면 자신의 이미지를 그 영역 안에 넣는다. 넣은 이미지는 한번 깜빡 번쩍임.
$(document).ready(function() {
$("img").draggable({helper:"clone",
drag:function(e, ui) {
ui.helper.animate({opacity:"0.3"});
}});
$("div").droppable({
accept:"img",
activeClass:"droppable-active",
drop:function(e, ui) {
ui.draggable.clone().removeAttr("style").
animate({opacity:"0.7"}).fadeOut("fast",
function() {
$(this).fadeIn("fast")
}).appendTo($(this).empty());
}});
});
<img style="position:absolute;top:10px" src="../../img/jQuery.jpg"
alt="Hello, jQuery!">
<div style="position:absolute;top:10;left:150;
border:1px solid gray;width:120;text-align:center;height:30"></div>
@@@ 엘리멘트를 이동 후 해당 영역에 드랍하면 자신을 복제한다.
$("span").draggable({helper:"clone"});
$("div").droppable({
accept:"span",
greedy:true, ==>> ??
drop:function(e, ui) {
ui.draggable.clone().css({"marginTop":0,"marginLeft":0}).animate({opacity:"0.3"},
function() {
$(this).fadeIn("fast")
}).appendTo($(this).empty());
}});
});
</script>
</head>
<body>
<div style="margin-top:0;margin-left:0;border:1px solid gray;width:120;
height:30;position:absolute"></div>
<span style="margin-top:200;margin-left:100;position:absolute;background-color:red">Hello, jQuery!
<p style="background-color:yellow">It's so good!</p>
</span>
@@@ 이미지를 드래그 하여 영역위로 올라가면 클래스로 지정된 색상을 가져온다. 해당 부분에 클래스를 추가할수 있다.
<style>
.droppable-active {
background-color: #cccccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("img").draggable({helper:"clone",
drag:function(e, ui) {
ui.helper.animate({opacity:"0.3"});
}});
$("div").droppable({
accept:"img",
hoverClass:"droppable-active", ==>클래스 추가가능
drop:function(e, ui) {
ui.draggable.clone().removeAttr("style").animate({opacity:"0.3"},
function() {
$(this).fadeIn("fast")
}).appendTo($(this).empty());
}});
});
</script>
</head>
<body>
<img style="position:absolute;top:10px" src="../../img/jQuery.jpg"
alt="Hello, jQuery!">
<div style="position:absolute;top:10;left:150;
border:1px solid gray;width:120;text-align:center;height:30"></div>
</body>
@@@ 이미지 드롭시 영역에 포함시키는 기준
tolerance:"intersect" ==> 가로/세로 50%이상포함.
tolerance:"fit" ==> 해당 영역 안에 포함될경우
tolerance:"touch" ==> 맞닿는 순간부터
<style>
.droppable-active {
background-color: #cccccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("img").draggable({helper:"clone",
drag:function(e, ui) {
ui.helper.animate({opacity:"0.3"});
}});
$("div").droppable({
accept:"img",
hoverClass:"droppable-active",
tolerance:"intersect",
drop:function(e, ui) {
ui.draggable.clone().removeAttr("style").
animate({opacity:"0.3"},
function() {
$(this).fadeIn("fast")
}).appendTo($(this).empty());
}});
});
</script>
</head>
<body>
<img style="position:absolute;top:10px" src="../../img/jQuery.jpg"
alt="Hello, jQuery!">
<div style="position:absolute;top:10;left:150;
border:1px solid gray;width:130;text-align:center;height:40"></div>
</body>
@@@ 드랍시킬 이미지를 마우스로 이동되는 순간 실행된다.
activate
<script>
$(document).ready(function() {
$("img").draggable({helper:"clone",
drag:function(e, ui) {
ui.helper.animate({opacity:"0.3"});
}});
$("div").droppable({
accept:"img",
activate:function(e, ui) {$(this).text("Activated!");}}); //이미지가 이동되는 순간 드랍위치 영역에 글자 추가
});
</script>
</head>
<body>
<img style="position:absolute;top:10px" src="../../img/jQuery.jpg"
alt="Hello, jQuery!">
<div style="position:absolute;top:10;left:150;
border:1px solid gray;width:120;text-align:center;height:30"></div>
@@@ 드래 후에 해당 이미지를 놓았을 경우 드랍영역에 글자를 입력
deactivate
<style>
.droppable-active {
background-color: #cccccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("img").draggable({helper:"clone",
drag:function(e, ui) {
ui.helper.animate({opacity:"0.3"});
}});
$("div").droppable({
accept:"img",
deactivate:function(e, ui) {
$(this).text("Deactivated!");
}});
});
</script>
</head>
<body>
<img style="position:absolute;top:10px" src="../../img/jQuery.jpg"
alt="Hello, jQuery!">
<div style="position:absolute;top:10;left:150;
border:1px solid gray;width:120;text-align:center;height:30"></div>
</body>
@@@ 드래그 후 드랍 영역에 over했을 경우와 다시 out 했을 경우
<script type="text/javascript">
$(document).ready(function() {
$("img").draggable({helper:"clone",
drag:function(e, ui) {
ui.helper.animate({opacity:"0.3"});
}});
$("div").droppable({
accept:"img",
over:function(e, ui) {
$(this).text("over!");
$(this).css("backgroundColor","#cccccc");
},
out:function(e, ui) {
$(this).text("outer!");
$(this).css("backgroundColor","#ffffff");
}});
});
</script>
</head>
<body>
<img style="position:absolute;top:10px"
src="../../img/jQuery.jpg"
alt="Hello, jQuery!">
<div style="position:absolute;top:10;left:150;
border:1px solid gray;width:120;text-align:center;height:30"></div>
</body>
@@@ 드래그 후 드랍 영역에 drop 한 경우(해당영역에 놓았을 경우)
<style>
.droppable-active {
background-color: #cccccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("img").draggable({helper:"clone",
drag:function(e, ui) {
ui.helper.animate({opacity:"0.5"});
}});
$("div").droppable({
accept:"img",
hoverClass:"droppable-active",
drop:function(e, ui) {
$(this).text("drop!");
}});
});
</script>
</head>
<body>
<img style="position:absolute;top:10px"
src="../../img/jQuery.jpg"
alt="Hello, jQuery!">
<div style="position:absolute;top:10;left:150;
border:1px solid gray;width:120;text-align:center;height:30"></div>
</body>
################## sortable #####################
@@@ 3줄 영역에서 Y로만 이동 가능하며 영역밖으로도 나갈수 있고, 이동시 투명효과 줌.
x, y 가능함.
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
axis:"y",
opacity:0.5});
});
</script>
<style>
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
</style>
</head>
<body>
<dl style="border:1px solid gray;width:130">
<dt>Hello, jQuery 1</dt>
<dt>Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
</body>
@@@@ 이동시 2번째는 이동을 못시킴
cancel:"#prevent",
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
cancel:"#prevent",
opacity:0.5
});
});
</script>
<style>
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
</style>
</head>
<body>
<dl style="border:1px solid gray;width:130">
<dt>Hello, jQuery 1</dt>
<dt id="prevent">Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
비슷한것
items: ((GetCookie('CooMemLevel') >= 500) ? ":not(dt:first)" : ":not(dt)"), //관리자는 (첫번째 DT는 제외, 모두 출력) / 그외 는 구경만하세용
@@@ 각기 다른 두개의 영역에서 움직임.
$("#left").sortable({
connectWith:["#right"], ==#right와 영역의 이동을 가능토록한다.
<script type="text/javascript">
$(document).ready(function() {
$("#left dt").css("backgroundColor", "#727EA3");
$("#right dt").css("backgroundColor", "#ff3366");
$("#left").sortable({
connectWith:["#right"],
opacity:0.5
});
$("#right").sortable({
connectWith:["#left"],
opacity:0.5
});
});
</script>
<style>
dl {
float:left;
}
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
</style>
</head>
<body>
<dl id="left" style="border:1px solid gray;margin-top:0;width:130">
<dt>Hello, jQuery 1</dt>
<dt>Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
<dl id="right" style="border:1px solid gray;margin-top:0;margin-left:10;width:130">
<dt>Hello, jQuery 1</dt>
<dt>Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
</body>
@@@ 해당 영역 안에서만 드래그가 가능함.
containment:"div",
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
containment:"div",
opacity:0.5
});
});
</script>
<style>
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
</style>
</head>
<body>
<div style="border:1px solid gray;width:200;height:150;">
<dl>
<dt>Hello, jQuery 1</dt>
<dt>Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
</div>
</body>
@@@ 이동시 마우스 커서 변경
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
cursor:"move",
opacity:0.5
});
});
</script>
@@@ 드래그 시 1초후 이동
delay:1000,
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
delay:1000,
opacity:0.5
});
});
</script>
@@@ 드래그 시 50px의 범위가 벚어나는 경우 움직임.
distance:50,
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
distance:50,
opacity:0.5
});
});
</script>
@@@ dropOnEmpty:true, ???
@@@ span 영역을 클릭해서 움직일수 잇다.
handle:"span",
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
handle:"span",
opacity:0.5
});
});
</script>
<style>
span{
border:1px solid red;
width:10px;
height:3px;
background-color:red;
}
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
</style>
</head>
<body>
<dl style="border:1px solid gray;width:130">
<dt><span></span> Hello, jQuery 1</dt>
<dt><span></span> Hello, jQuery 2</dt>
<dt><span></span> Hello, jQuery 3</dt>
</dl>
</body>
@@@ 드래그를 한 경우 특정 레이어에 해당 글자를 넣어보기
helper:function(e, elem) {
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
helper:function(e, elem) {
$("div#check").text($(elem).text());//elem : jQuery<Element>
return elem.clone();
}
});
});
</script>
<style>
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
</style>
</head>
<body>
<div id="check" style="border:1px solid gray;width:130;
text-align:center;height:20;font-size:13"></div>
<dl style="border:1px solid gray;width:130">
<dt>Hello, jQuery 1</dt>
<dt>Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
</body>
@@@ 첫번째 dt는 움직일수 없음.
items:":not(dt:first)",
<script type="text/javascript">
$(document).ready(function() {
$("dt:first").css("backgroundColor","#ff3366");
$("dl").sortable({
items:":not(dt:first)",
opacity:0.5
});
});
</script>
<style>
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
</style>
</head>
<body>
<dl style="border:1px solid gray;width:130">
<dt>Hello, jQuery 1</dt>
<dt>Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
</body>
@@@ 드래그시 투명도 설정
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
"opacity":0.5
});
});
</script>
@@@ 드래그 시 드랍할 공간에 영역을 표시 (클래스정의)
placeholder:"place_holder",
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
placeholder:"place_holder",
opacity:0.5,
change:function(e, ui) {
ui.placeholder.css({
"width":ui.element.width()-6
});
}});
});
</script>
<style>
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
.place_holder {
border:2px dashed #AAA;
border-color:#ff3366
}
</style>
</head>
<body>
<dl style="border:1px solid gray;width:130">
<dt>Hello, jQuery 1</dt>
<dt>Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
</body>
@@@ 드래그 후 놓았을 경우 자신의 위치(현재 드롭가능위치)를 천천히 찾아감
revert:true,
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
revert:true,
placeholder:"place_holder",
opacity:0.5,
change:function(e, ui) {
ui.placeholder.css({
"width":ui.element.width()-6
});
}
});
});
</script>
<style>
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
.place_holder {
border:2px dashed #AAA;
border-color:#ff3366
}
</style>
</head>
<body>
<dl style="border:1px solid gray;width:130;height:120">
<dt>Hello, jQuery 1</dt>
<dt>Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
</body>
@@@ 보여지는 순서를 높게
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
zindex:2,
opacity:0.5
});
});
</script>
@@@ 드래그시 자신의 색상을 변경함.
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
start:function(e, ui) {
//ui.helper--> cloned item;
ui.helper.css("backgroundColor", "#ff3366");
},
opacity:0.5
});
});
</script>
<style>
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
</style>
</head>
<body>
<dl style="border:1px solid gray;width:130">
<dt>Hello, jQuery 1</dt>
<dt>Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
</body>
@@@ 드래그 후 드랍시 드랍의 값을 특정영역에 찍어줌
stop
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
stop:function(e, ui) {
$("div#check").empty();
$("div#check").append($(e.target).text()+" stop!");
},
opacity:0.5
});
});
</script>
<style>
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
</style>
</head>
<body>
<div id="check" style="border:1px solid gray;width:130;
text-align:center;height:20;margin-bottom:10;font-size:13"></div>
<dl style="border:1px solid gray;width:130">
<dt>Hello, jQuery 1</dt>
<dt>Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
</body>
위의 stop와 비슷해 보이는 데 모르겟음
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
sort:function(e, ui) {
$("div#check").empty();
$("div#check").append(ui.helper.text()+" sort!");
},
opacity:0.5
});
});
</script>
@@@ 드래그 시 값이 변경되는 시점에 호출한다.
change:function(e, ui) { == 드래그 시점 변경
update:function(e, ui) { == 드래그후 마우스를 놓는 시점 발생
<script type="text/javascript">
$(document).ready(function() {
$("dl").sortable({
change:function(e, ui) {
ui.helper.css("backgroundColor", "#ff3366");
$("div#check").empty();
$("div#check").append(ui.helper.text()+" change!");
},
opacity:0.5
});
});
</script>
<style>
dt {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 10px;
font-family: Arial;
padding: 3px;
}
</style>
</head>
<body>
<div id="check" style="border:1px solid gray;width:130;
text-align:center;height:20;margin-bottom:10;font-size:13"></div>
<dl style="border:1px solid gray;width:130">
<dt>Hello, jQuery 1</dt>
<dt>Hello, jQuery 2</dt>
<dt>Hello, jQuery 3</dt>
</dl>
</body>
@@@ 특정부분을 선택하여 늘릴수 있다
<script type="text/javascript">
$(document).ready(function() {
$("dl").resizable({
resize:function(e,ui){
$(this).css("border","2px dashed gray");
},
start:function(e,ui){
$("div#check").text("start!");
},
stop:function(e,ui){
$("div#check").text("stop!");
$(this).css("border","1px solid gray");
}
});
});
</script>
<style>
dl {
background: #727EA3;
color: #FFF;
width: 124px;
margin: 2px;
font-size: 15px;
font-family: Arial;
padding: 3px;
}
</style>
</head>
<body>
<div id="check" style="border:1px solid gray;width:160;
text-align:center;height:20;margin-bottom:5;font-size:13"></div>
<dl style="border:1px solid gray;width:130;height:40;text-align:center;">
Hello, jQuery!
</dl>
</body>
</html>
ui.helper - the current helper element (most often a clone of the item)
ui.position - current position of the helper
ui.offset - current absolute position of the helper
ui.item - the current dragged element
ui.placeholder - the placeholder (if you defined one)
ui.sender - the sortable where the item comes from (only exists if you move from one connected list to another)
############################ selecttable @@@@@@@@@@@@@@@@@@@@@@
$('[id*=\'recom_detail_view\']').attr('class','display_none'); ==> id값이 recom_detail_view 을 포함
$('div[id*=\'recom_detail_view\']').attr('class','display_none'); ==> div의 id값이 recom_detail_view 을 포함
############################ click 행위 실행 @@@@@@@@@@@@@@@@@@@@@@
//[4] bind메서드
$('#btn').bind("click", function(){ alert('버튼 클릭됨'); });
//[!] 페이지 로드시 사용자의 반응이 아닌 코드에 의해서 click 이벤트를 실행
$('#btn').trigger("click"); //실행하자마자 click 이벤트를 트리거함....
############################ 특정 option 선택 @@@@@@@@@@@@@@@@@@@@@@
$("#BKEY option:eq(1)").attr("selected",true);
onChangStation($("#BKEY option:eq(1)")); //onchange로 값을 보낼때는 객체화를 시켜서 보낸다.....
############################ 알라 @@@@@@@@@@@@@@@@@@@@@@
if ($('label:has(:radio,:checkbox)').length > 0) {$('label:has(:radio,:checkbox)').addClass('hand');}
############################ select option @@@@@@@@@@@@@@@@@@@@@@
선택된 값 (value)
$("#select option:selected").val();
선택된 내용 (label)
$("#select option:selected").text();
option 항목 추가
$("#select").append("<option value=""></option>");
option 항목 맨 처음에 추가
$("#select").prepend("<option value=""></option>");
option 전체 변경
$("#select").html("<option value=""></option>");
index로 select
$("#select option:eq(1)").attr("selected","selected");
text로 select
$("#select option").text("aaa").attr("selected","selected");
value로 select
$("#select").val("ab");
지정된 인덱스 값의 item 삭제
$("#select option:eq(1)").remove();
선택된 옵션의 text
$("#select option:selected").text();
선택된 옵션의 index
$("#select option").index($("#select option:selected"));
selectbox 아이템 갯수
$("#select option").size();
지정된 index 위치 바로 다음에 option 추가
$("#select option:eq(0)").after("<option value=""></option>");
[출처] [JQuery] select option|작성자 심해펭귄'프로그램 > Jquery' 카테고리의 다른 글
월 선택 달력 (0) 2016.09.11 스와이프(swipe) 기능 (0) 2016.09.10 스크린 사이즈 확인 사이트 (0) 2016.09.09