'jQuery'에 해당되는 글 3건

  1. 2010.01.12 Best jQuery plugins - September 2009
  2. 2009.08.07 jQuery로 checkbox 제어(1) (1)
  3. 2009.08.06 jQuery Selector 를 이해해 보자.
2010.01.12 08:41

Best jQuery plugins - September 2009

http://www.ajaxline.com/jquery-plugins-september-2009
신고
Trackback 0 Comment 0
2009.08.07 16:38

jQuery로 checkbox 제어(1)

일단 Body에 제어할  checkbox를 놓아두자.
<body>
    <form id="form1" runat="server">
    <br />
    <input type="checkbox" id="check1" value="1" />1&nbsp;   
    <input type="checkbox" id="check2" value="2" />2&nbsp;
    <input type="checkbox" id="check3" value="3" />3&nbsp;
    <input type="checkbox" id="check4" value="4" />4&nbsp;
    <br />
    <input type="button" id="btnCheck" value="_submit" />&nbsp;
    <input type="button" id="btnAllCheck" value="all check" />&nbsp;
    <input type="button" id="btnUnCheck" value="all uncheck" />
    </div>
    </form>
</body>

스크립트 제어부분
<script type="text/javascript" src="Js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
        $(function() {
            // ---------- 01 -------------       
            $("#btnCheck").click(function() {
                alert($("input:checkbox:checked").length);
            });
            //----------- 02 -------------
            $("#btnAllCheck").click(function() {
                $("input:checkbox:not(checked)").attr("checked", "checked");
            });
            //------------ 03 ------------
            $("#btnUnCheck").click(function() {
                $("input:check:checked").attr("checked", "");
            });
        })
    </script>

Body안에는 제어할 체크박스를 위치하고
각각의 기능을 할 버튼을 세게 배치 하였다.

첫번째 버튼은 현재 체크되어 있는 체크박스의 수를 센다.
01번 위치의 스크립트를 보면
#btnCheck ID를 가진 버튼의 Click Event가 발생하면 실행되는 부분이다.
$("input:checkbox:checked").length 는 현재 웹페이지의 checkbox의 check 된 element의 수를 센다.

02번
#("input:checkbox:not(checked).attr("checked","checked") 는 현재 웹페이지에서 체크되지 않은 
[ not(checked) ] checkbox에 checked 어트리뷰트를 추가 [ .attr("checked", "checked) ]한다.

반대로 03번은 checked 어트리뷰트에 checked 속성에 공백을 넣어서 checked 속성을 없애버렸다.

jQuery 의 셀렉터에 대해서는 아래를 참조하자
http://docs.jquery.com/Selectors

좋은 하루 되시길...

출처 : http://xwing.tistory.com/entry/jQuery%EB%A1%9C-checkbox-%EC%A0%9C%EC%96%B4
신고
Trackback 1 Comment 1
  1. BlogIcon 머째이와니 2012.02.13 19:29 신고 address edit & del reply

    좋은 포스팅 잘보고 갑니다~^^
    하나 사족을 달자면 $(“:checkbox:not(:checked)”).length -> 이렇게 쓰이네요. ':'이 빠져서 코멘트 남겨요~ 즐거운 하루 되세요!^^

2009.08.06 08:59

jQuery Selector 를 이해해 보자.

강력한 jQuery Selector.
javascript 의 원래 문법에 비해 너무도 강력한 css style 의 selecting 을 지원한다.
하지만 css 엔진을 이용하는 것이 아니고,
원래의 javascript 접근방식으로 재해석하여 동작하는 것이므로,
jQuery 가 어떻게 selecting 해 올지 예상하는것이 필요하다.
그렇지 않으면 모든 dom 객체를 수십번 훑는 막장 코드가 나올지도 모른다.

일단 js 에서 dom 객체를 선택하는 방법을 생각해 보자.

document.name
getElementById()
getElementsByName()
getElementsByTagName()
getElementsByClassName()

getElementsByClassName() 의 경우 최신의 몇몇 브라우저에서만 지원된다.

때문에, $('.class') 로 selecting 한다면
대부분의 브라우저에서는 getElementsByTagName('*') 을 실행하고야 말 것이다.

getElementsByTagName() 의 경우 document 만이 아니고,
모든 dom 객체에 정의되어 있다는 점도 중요하다.

또 중요한 것은 getElementsByAttribute() 라는 것은 없다는 것이다.


/* hasClass() 는 className 이 맞는지 검사하는 임의의 함수라 생각하자.
== 로는 안되므로 조금 복잡한 비교가 필요하다. */

1) 목표물이 모여있다면, 상위 block 에 id 를 주고 $('#yourblock .class') 로 접근한다.
예상) var yourblock = document.getElementById('yourblock');
var tags = yourblock.getElementsByTagName('*');
var classes = [];
for(i = 0; i < tags.length; i ++) {
if(hasClass(tags.className, 'class')) classes.push(tags[i]);
}
- 아직 많이 복잡해 보인다.

2) 한 종류의 태그라면 태그명을 표기해 주는것이 좋다. $('#yourblock a.class')
예상) var yourblock = document.getElementById('yourblock');
var tags = yourblock.getElementsByTagName('A');
var classes = [];
for(i = 0; i < tags.length; i ++) {
if(hasClass(tags[i].className, 'class')) classes.push(tags[i]);
}
- 별 차이가 없지만 * 이 A 가 되어 많이 줄어들었다.

3) 여기저기 흩어져 있다면, 차라리 name 을 줄 수 있는 a 태그 같은것을 이용한다.
getElementsByName() 은 모든 브라우저에 있고,
href 속성을 주지 않으면 a 로써의 특징적인 link 로써의 기능이 활성되지 않으므로 쓸만하다.
$('a[name=class]')
예상) var names = document.getElementsByName('class');
var aclass = [];
for(i = 0; i < names.length; i ++) {
if(names[i].tagName == 'A') aclass.push(names[i]);
}

4) 찾고자 하는것이 하나이면 더 이상 찾지 않도록 수량을 지정해 준다.
$('#id div.block:first a:first')
$('#id ul.block > li') #ul li ul li 같은 다중 ul li 처럼 깊은곳의 li 를 제외하기 위해 .class 를 주는 것 보다는 > 지시자로 깊이를 확정해 버리는 것이 좋다.
/* MySQL 도 unique 한 자료를 select 할 때에 limit 1 을 주면 더 빠르다. */

5) 굳이 jQuery 가 필요하지 않은 경우를 구분한다.
form id="frm" onsubmit="return ajaXing(this);"
function ajaXing(frm) {
이라면,
frm.name.value 로 접근이 되므로, 굳이 jQuery 로 다시 selecting 할 필요가 없다.
$() 에는 select query 만이 아니고, dom 객체도 직접 넣을 수 있으므로,
$(frm.name) 으로 이용할 수도 있다.



-- 상위의 this 접근
$('#id').each(function() {
$('input[name="chk[]"]).each(function() {

#id 가 form 이라면 여기서 그냥 this.form 으로 접근하면 될 것이다.
하지만 form 이 아니라면 상위의 this 로 접근하기가 곤란하다.

$('#id').each(function() {
var $$ = this;
$('input[name="chk[]"]).each(function() {

이제 상위의 this 는 $$ 로 접근할 수 있게 되었다.



-- var obj = $('#id');
jQuery 객체를 변수에 담아두면,
selecting 을 다시 하지 않으므로 재사용시 속도에 이득이 있다.
하지만, dom 객체를 감싸버렸기 때문에 원래 객체로의 접근성이 떨어지게 된다.
var obj = document.getElementById('test');
obj.testArr = document.getElementsByName('test');
라고 할 때
$(obj) 에서 testArr 를 직접 접근할 방법이 없다.
$(obj).each(function() {
this.testArr
이렇게 해야 한다.
때문에, 상황에 따라 적절한 선택이 필요하다.



출처 : http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=69008&page=1
신고
Trackback 0 Comment 0


티스토리 툴바