웹 & 프레임워크

jquery 몇번째놈 선택하는 예제

늘근이 2014. 5. 14. 10:42

<script type="text/javascript">

 

             function first(){

                           //첫번째놈 선택해서 클래스 추가하기.

                           //스타일정해놓고 클래스만 추가하면 스타일 적용하기 쉬울것

                           //결과는 모두 같다

                           $("li:eq(0)").addClass("highlight");

                           $("li").first().addClass("highlight");

                           $("li:first").addClass("highlight");

             }

             function last(){

                           $("li").last().addClass("highlight");

             }           

             //순서가 인덱스임!

             function odd(){

                           $("li:odd").addClass("highlight");

             }                        

             function even(){

                           $("li:even").addClass("highlight");

             }                        

            

             //less than

             function index(){

                           $("li:lt(2)").addClass("highlight");

             }           

            

             //h1 이나 h2같은 헤더만 찾기

             function header(){

                           $(":header").addClass("highlight");

                          

                           //이벤트를 붙이자!

                           $(":header:last").click(function() {

                                        alert("Hello");

                           });

                          

                           //기존에 스크립트에 썼던 addlistener 비슷한놈임.

                           //자바스크립트처럼 try catch 필요없다. 알아서 해준다

                           //bind 커스터마이즈드된 이벤트를 쓸수있다.

                           //"click"안에 들어가는게 커스터마이징해도된다는거

                           //많이는 쓰지 않는다고 

                           $(":header:last").bind("click" , function() {

                                        alert("Hello");

                           });

                          

                           //on 뭘까.. bind 이벤트핸들러가 bind호출시점애들한테

                           //붙는다. on 미래에 오는 놈들까지 고려해서

                           //올때마다 달라붙어줌.

                           $(":header:last").on("click" , function() {

                                        alert("Hello");

                           });

                          

                          

                          

             }

             //input type 대한 것도 찾아낼수 있다 ::radio ::checkbox등으로

             //필터만 조합하면 활용성이 무궁무진할것이다.    

            

 

</script>