본문 바로가기
javaScript/J Query & 스크립트

제이쿼리 기초 :: 노드찾기/이벤트등록/스타일설정

by mooyou 2019. 2. 16.
728x90
300x250
SMALL

노드 찾는방법

$("div")

$(".select")

$("div > p")

$("div ul li.select")


1._이벤트 등록 방법

$대상.on("이벤트 이름",이벤트리스너); 또는

$대상.단축이벤트메서드(이벤트리스너);


제이쿼리에서 제공하는 on()메서드와 단축이벤트 메서드를 이용하면 이벤트를 쉽게 등록할 수 있다.


1
2
3
4
5
6
7
8
9
10
 $(document).ready(function(){
            $("#btnCheck").on("click",function(){
                alert("환영합니다. ");
            });
            /*
            // 또는
            $("#btnCheck").click(function(){
                alert("환영합니다. ");
            });
            */

첫번째는 일반등록방법

2번째는 단축등록방법


2. 스타일 설정하는 방법

설정 내용이 하나인 경우

$대상.css("스타일이름",값);


설정내용이 여러개인 경우

$대상.css({

"스타일이름":"값"[,

"스타일이름":"값",...

]

});


1
2
3
4
5
6
7
 $(document).ready(function(){
            $("#btnCheck").on("click",function(){
                $("#panel").css("border","4px solid #f00");
            });
 
        })
 

확인버튼을 클릭하면 #panel에 선이 생기는 제이쿼리

728x90
반응형
LIST

댓글