JavaScript & CSS & HTML

[Jquery] 내가 보려고 만든 기초 핵심 내용정리

Rosie_dev 2021. 5. 16. 23:32

0. Jquery 사용하기

 

Jquery 홈페이지에서 다운받아 사용하거나, Jquery UI 에서 view source 를 클릭해서 적용할 수 있다.

(이하 Jquery 사용은 JS 와 비교해서 다른 부분을 중심으로 정리했다.)

 

 

1. function

 

JS 와 달리 Jquery 에서는 실행되는 부분을 $(function(){}) 이나 $document.ready(function(){}) 를 사용한다.

 

JS 에서 .getElementsId() 대신에 css 방식과 유사하게 $("div#id") 와 같은 방식으로 선택자를 잡을 수 있다.

선택자 지정한 것이 반영되지 않을 때는 $(document).on("event", "선택자", function(){}); 를 사용해보자.

 

 

2. Jquery 이벤트 핸들링

 

hide() 는 해당 태그를 숨기는 것, show() 는 해당 태그를 보이는 것이다.

그리고 event 를 만들기 위해서 Jquery 에서는 bind("evnet명", function(){}) 를 이용해서 나타낼 수 있다.

 

1
2
3
4
5
6
7
$("butten#press").hide();
 
$("butten#press").show();
 
$("butten#press").bind("click",function(){
    $("butten#press").hide();
});
 cs

 

for 문 대신 Jquery 를 이용한 each 문과 forEach 문이다. 각각 쓰임은 동일하나, 뒤 괄호의 순서가 다르다. each 의 경우에는 index, item, array 이고, forEach 는 item, index, array 이다. 

check 박스의 체크 여부를 알아보기 위해서는 .prop("checked") 또는 .is(":checked") 로 알 수 있다. 그 외에도 attr("속성값") 으로 표현 가능하다.

 

+ 이벤트 타겟 엘리먼트를 잡는 방법

엘리먼트 변수명은 관례상 $target 처럼 앞에 $ 을 붙여서 사용한다.

이벤트가 발생된 부분의 타겟 태그를 지정하는 방법은 $(this) 또는 $(event.target) 으로 할 수 있다. 이렇게 하면 check 된 태그의 값을 가져오거나 넣어주거나, click 한 버튼을 처리하는 핸들링이 가능해진다.

 

1
2
3
4
5
6
7
8
9
10
$("input:text[name=answer]").each(function(index,item,array){
    $(this).html("Hello, world!");
});
 
$("input:text[name=answer]").forEach(function(item,index,array){
    $(this).html("Hello, world!");
});
 
$("input:radio[name=answer]").prop("checked");
$("input:radio[name=answer]").is(":checked");
 cs
1
2
3
$("span.buttons").bind('click',function(){
    var $target = $(event.target); 
});            
 cs

 

mouse 가 해당 태그 위에 있을때 mouseover(function(){}) 을, 

반대로 mouse 가 해당 태그를 지나쳤을 때는 mouseout(function(){}) 을 적용해서 이벤트를 설정할 수 있다.

hover 를 이용하면 첫 번째 function() 은 mouseover() 와 같은 기능을, 두 번째 function() 은 mouseout() 과 같은 기능을 사용할 수 있다. css 에서도 적용하려는 태그 선택자:hover 를 사용하면 선택자에 마우스가 올라갔을 때의 css 를 별도 설정가능하다.

 

.trigger(이벤트종류); 는 문서로드시에 다른 이벤트가 연달아 발생할 수 있도록 하는 이벤트 처리방식이다.

.eq(index 번호); 는 배열 태그에서 해당 인덱스 값에 해당하는 태그요소 즉, 선택자를 지정하기 위해 사용된다.

 

1
2
3
4
5
6
$("span.buttons").mouseover(function(){});
$("span.buttons").mouseout(function(){});
$("span.buttons").hover(function(){}, function(){});
 
$("span.buttons").trigger('click');
$("span.id").eq(1).text();
 cs

 

.addClass("css명") 은 css명에 해당하는 css 를 선택자에 적용시키는 것이고, 해제는 .removeClass("css명") 를 해주면 된다.

선택자.css({}) 로 바로 적용도 가능하다.

 

1
2
3
4
5
6
7
.test{
 color: red;
}
 
$(this).addClass("test");
$(this).removeClass("test");
$(this).css({{'background-color':'blue','color':'#eee'});
 cs

 

 

3. 소스 노출 방지하기

 

1
<html  oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
 cs

 

 

4. 디버그 코드 확인하는 방법

 

alert(); 와 console.log(); 을 이용해서 오류 코드 잡기

'JavaScript & CSS & HTML' 카테고리의 다른 글

[JS] owl carousel 문제 해결하기  (0) 2021.09.29
[JS] 모달창 이슈 해결하기  (0) 2021.09.27
[Java Script] 내가 보려고 만든 기초 핵심 내용정리  (0) 2021.04.13
[HTML/CSS] 내가 보려고 만든 기초 핵심 내용정리  (0) 2021.03.30
[인강] HTML, CSS 기초  (0) 2020.12.09
댓글