[JAVA_Back-End]

[jQuery] 한번에 정리하기 본문

Programming/HTML+ CSS + JAVASCRIPT

[jQuery] 한번에 정리하기

너굴위 2024. 2. 18. 23:15
728x90
반응형

jQuery란?

- 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리(=자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들)

기본 Syntax

$(selector).action()

 

ex) 

$(this).hide()  - 해당 요소를 숨긴다.

$("p").hide() - p태그를 숨긴다.

$(".test").hide() - class가 test인 요소를 숨긴다.

$("#test").hide() - id가 test인 요소를 숨긴다.

jQuery 기본 작성문

문서가 완전히 로드되기 전에 어떤 jQuery 코드도 실행되지 않도록 하는 것.

= 문서가 완전히 로드되고 준비될 때까지 기다린다.

$(document).ready(function(){
	//여기에 jQuery 메서드 작성
 });
 
 
 <!-- 짧은 버전 -->
 $(function(){
 
 	//여기에 jQuery 메서드 작성
 });

 

Selector

$(document).ready(function(){
	$("button").click(function(){
    	$("p").hide();
    });
});

- button태그 요소를 클릭 시 p태그를 숨기는 것을 수행하는 함수

출처: jQuery Selectors (w3schools.com)

 

odd - 1, 3, 5 (홀수계열)

even - 2, 4, 6 (짝수 계열)

 

first: 첫번째만

first-child : 공통된 모든것의 첫번째만

js파일을 분리시키고 싶을 때

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>

- src 파일에 해당 js파일 이름과 같이 생성하고 원래 jQuery있던 내용에 script로 파일 이름을 지목한다.

 

Event

- 마우스나 키보드로 어떤 행위를 했을 때 생기는 변화에 대한 것

출처: jQuery Event Methods (w3schools.com)

 

 

mousedown()  -  마우스를 클릭했을 때 function수행

mouseup() - 마우스를 뗐을 때 function수행

 

hover()

mouseenter() + mouseleave()

$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});

 

focus()

- input이 선택되었을 때 수행

blur()

- 선택이 해제되었을 때 수행

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color", "yellow");
  });
  $("input").blur(function(){
    $(this).css("background-color", "green");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

 

on()

- 하나 또는 여러개의 이벤트 헨들러가 실행될 때 사용

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").on({
    mouseenter: function(){
      $(this).css("background-color", "lightgray");
    },  
    mouseleave: function(){
      $(this).css("background-color", "lightblue");
    }, 
    click: function(){
      $(this).css("background-color", "yellow");
    }  
  });
});
</script>
</head>
<body>

<p>Click or move the mouse pointer over this paragraph.</p>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형

'Programming > HTML+ CSS + JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] DOM (CSS)  (0) 2023.08.18
[JAVASCRIPT] 내장함수, 기능(window/DOM(HTML)/form)  (0) 2023.08.17
[JAVASCRIPT] 객체/배열 함수  (0) 2023.08.16
[JAVASCRIPT] 객체  (0) 2023.08.11
[JAVASCRIPT] 함수  (0) 2023.08.10
'Programming/HTML+ CSS + JAVASCRIPT' Related Articles more