'2009/08/08'에 해당되는 글 1건
- 2009/08/08 jQuery 교육
한정우.zipJQuery
# 구체화 해서 속도를 높이고 정확한 엘리먼트를 찾자.
1. DOM 구조 설명
엘레먼트 <button class="runCode">Run Code</button>
어트리뷰트 class="runCode"
벨류 Run Code
2. select (ID)
<li id="smile"><a href="#">li 2</a></li>
jQuery(function($) {
$('#smile').remove();
});
ID 는 고유한 값 : IE에서는 버그로 여러개가 동시에 select 됨
3. select (class)
$('.red').remove();
동시에 선택 가능
4. select (엘레멘트)
$('span').remove();
5. select (엘레멘트의 class)
$('span.red').remove();
6. 2개 이상
$('span, .red').remove();
$('ul#oldUl > .red').remove();
$('.red:first).remove(); // 첫번째만
$('.red:first').remove();
$('.red:last').remove();
$('ul#oldUl > li:even').remove(); // even 짝수만
$('ul#oldUl > li:odd').remove(); // odd 홀수만
$('ul#oldUl > li:eq(1)').remove(); / eq 특정 순서의 값
alert($('ul#oldUl > li:hidden').text()); // display:none type=hidden 값을 찾음
alert($(':input').text());
alert($('form :input').size());
$(':text').val('No!'); // type=text 인 필드의 값을 변경
$('input:text:first').val('No!');
alert($('input:radio:checked').val());
alert($('form select > option:selected').val()); // 셀렉트 박스의 값
alert($('select > option[selected]').val());
alert($('select > option[value=1]').text()); // 값이 1인
$('input:radio:eq(1)').attr('checked', 'checked'); // 첫번째 radio check
$('input:radio[value=A]').attr('checked', 'checked'); // value 를 찾아서 check
$('input:radio[name*=radio]').remove();
[^name=AA] 시작 값
[name$=AA] 끝나는 값
[name*=AA] 포함되는 값
$('input:radio[name*=radio][value=B]').remove(); // name 과 value 같이 사용
7. 버튼
<div>
<button class="runCode">Run Code</button>
</div>
jQuery(function($) {
$('button.runCode').click(function(){
$('.red').remove();
})
});
8. traversing (척도, 기준)
var $ul = $('#oldUl');
alert($ul.is('ul').toString()); // boolin 값을 반환 if문에 사용가능
$('#oldUl > li').not(':first').remove(); // not 은 제외하고의 의미
$('#oldUl > li').find('a').remove(); // 공백과 동일
$('form').prev().remove();
$('form').next().remove();
$('.red').parents('ul').remove();
9. attr (속성) readonly 일 경우에는 변경이 안 됨
alert($('input:radio:checked').attr('value'));
$('input:radio:checked').attr('value', 'DDD'); // 변경
alert($('input:radio:checked').attr('value'));
$('input:radio:checked').attr('value', '');
$('input:radio:checked').removeAttr('value'); // 삭제
$('input:brown.radio').addClass('yellow');
$('input:radio:brown').val('dafsdfa');
alert($('input:radio:brown').val());
$('select').val(1);
alert($('select').val());
// alert($('span:first').text());
alert($('#oldUl').text());
alert($('#oldUl').html());
$('#oldUl').html('<li>change</li>'); # html 형태로 변환
$('#oldUl').text('<li>change</li>'); # text 형태로 변환
10. 엘레먼트 자체를 제어하는 기능(DOM 의 생성 이동 복사)
$('#oldUl').append('<li>change</li>'); // 자식 하단에 추가
$('#oldUl').prepend('<li>change</li>'); // 자식 상단에 추가
$('#oldUl').after('<ul><li>change</ul></ul>'); // 본인 하단에 추가 // 기준이 oldUl 뒤에
$('#oldUl').before('<ul><li>change</ul></ul>'); // 본인 상단에 추가
$('#oldUl').wrap('<p style="background-color:red;"></p>'); // 부모 추가(감싸는 역할)
$('#oldUl').append($('#newUl')); // newUl 을 선택해서 oldUl로 이동(자식으로)
$('#oldUl').insertAfter($('#newUl')); // 기준이 newUl 뒤에
$('#oldUl').empty(); // 속성 제거
$('button').empty(); // 버튼 속성의 값을 제거
$('button').remove(); // 엘리먼트 자체를 제거
var $clone = $('#newUl').clone();
$('#oldUl').append($clone); // 한번만 복사됨(엘리먼트로 존재하기 때문에
11. CSS
$('#oldUl').css('background-color','red');
alert($('#oldUl').attr('style'));
alert($('#oldUl').css('background-color'));
alert($('#oldUl').css('display')); // 설정 안 된 값도(기본값)을 추출하지만 변경하는 것은
var _position = $('input:checkbox').offset(); // 전체의 위치에서 좌표
alert(_position.left);
alert(_position.top);
var _position = $('input:checkbox').position(); // 부모의 위치에서 좌표
alert(_position.left);
alert(_position.top);
12. Event
직접 다 넣는게 아니라 bind 개념
$('#oldUl a').bind('dblclick', function(){ // click, dblclick
alert('a');
});
$('#oldUl a').unbind('click'); // 바인드 해제
$('#oldUl a').one('click', function() { // 한번만 실행
alert('a')
return false;
});
jquery 1.3 이전에는 live 기본 사용 하는(즐겨) -> 현재는 기본 포함
13. bind, live
$('#oldUl a').bind('click', function(){ // click, dblclick // 추가된 엘리멘트에는 이벤트가 바인드 안 됨
alert('a');
});
$('button.runCode').click(function(){
$('#oldUl').prepend('<li><a href="#">A</a></li>');
})
$('#oldUl a').live('click', function(){ // click, dblclick // 추가 되는 엘리멘트에도 이벤트가 바인드 됨(바인드 보다는 많은 제한) -> 지원 안 된다면 liveQuery 플러그인 사용해야 함
alert('a');
});
click(function) // function 이 없으면 실행 -> submit(function) 도 마찬가지
14. Effect
jquery.com 확인
15. Utilities
browser, ver 확인
alert($.browser.mozilla);
alert($.browser.safari);
alert($.browser.opera);
alert($.browser.msie);
alert($.browser.version);
if($.browser.msie && $.browser.version >= 7){
alert('dd');
}
var _array = ['apple', 'pineapple', 'banana'];
$.each(_array, function(){
alert(this);
});
var _json = {'name':'ks-park'};
$.each(_json, function(key, value){
alert(key+value);
});
var _json = {'name':'ks-park'};
$.each(_json, function(key, value){
alert(this); // value 만
});
$('ul > li:last').remove(); // 전체에서 하나
$('ul').each(function(){ // 모든 ul 에서 하나씩
$(this).children('li:last').remove();
});
16. UI
17. 현업
# head 에 아래 구문으로 사용 권장 // 모든 문서(DOM)가 로딩된 후에 실행 -> body의 onload() 와 동일한 역할
$(document).ready(function()){
}
jQuery(function($) {
}
php 는 배열의 key 를 string 으로 사용하기 때문에 js 에서 배열을 그대로 쓸 수가 없음 -> JSON, XML(파싱이 필요)은 가능
php 5.0 이상 pecl 1.2 이상에서 json_encode(), json_decode() 제공
18. plugin 추천
form plugin(), metadata()
$('#oldUl a').click(function(){ // click 때 마다 별도의 href 에 해당하는 값을 가져와서 출력한다.
alert($(this).attr('href'));
return false;
});
Recent Comment