jQuery
자바스크립트 라이브러리 (Js lib) - 함수로 작성 (여러줄 작성해야 하는 것을 함수를 호출해서 사용)
jQuery() 함수 위주의 코딩 = $()를 써서 호출하여 사용한다.
lib는 코딩을 파일로 저장해 놓은 것
: 1. 다운로드해서 사용하거나 2. web lib를 그대로 사용 할 수 있다.
위치 : jquery[.min][.version].js - min : 코드를 최소화 시킨 것.
JS에서 객체 선택하기 -> jQuery로 표현하기
ex) id 선택 : document.getElementId("id") -> $("#id")
tag 선택 : document.getElementsTagName("tag") -> $("tag")
class 선택 : document.getElementsClassName("class") -> $(".class")
-> CSS 선택의 규칙을 많이 따르고 있다.
selector
$(this) mouseover
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 선택자</title>
<!-- jQuery lib 등록 : CDN(Content Delivery Network) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
// document가 로딩 된 상태에서 실행이 되어지는 함수 호출.
// button 태그는 밑에 있으므로 ready를 안해주면 찾지 못해서 ready를 꼭 해줘야 한다.
// document.ready()를 사용한 것과 동일하다.
$(function(){
// 버튼 3개를 선택한다. 앞에 .이나 #이 안붙었으므로 tag라는 뜻.
// 태그 사이에 글자를 가져오는 선택자.text()를 사용해서 어떤 버튼이 눌려졌는지 경고창으로 띄운다.
$("button").click(function(){
// jQuery는 객체가 배열이면 for문을 실행하는 프로그램이 되어져있기 때문에
// 버튼1, 버튼2, 버튼3을 눌러도 전부 반응을 한다.
// JS에서는 for문을 돌려야 한다.
// 3개의 버튼 중에서 클릭한 버튼을 선택 : this
alert($(this).text()+"클릭"); // text() - getter의 의미, text(글자) - setter의 의미
});
// div 안보이게 하기
$("#showDiv").hide();
// 버튼1에 마우스 올리고 내렸을때 나오는 이벤트
$("#firstBtn").mouseover(function() {
// $("#showDiv").show();
$("#showDiv").slideDown();
}).mouseout(function(){
// $("#showDiv").hide();
$("#showDiv").slideUp();
});
// showDiv2는 안보이게 --> css에서 display 속성을 none으로 하는게 좋다.
// 이유는 시스템이 느려지면 보이고 안보여지는 과정이 보여지기 때문이다.
$("#showDiv2").hide();
$("#secondBtn").click(function(){
// $("#showDiv2").toggle();
$("#showDiv2").slideToggle();
});
});
</script>
</head>
<body>
<div>
<button id="firstBtn">버튼1</button>
<div id="showDiv">보여지기도 하고 안보여지기도 하고</div><br/>
</div>
<div>
<button id="secondBtn">버튼2</button>
<div id="showDiv2">2 보여지기도 하고 안보여지기도 하고</div><br/>
</div>
<button class="bg_orange">버튼3</button>
<button>버튼4</button>
<button class="bg_orange">버튼5</button>
</body>
</html>css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery를 이용한 CSS 변경</title>
<!-- 인터넷이 있어야 동작을 한다. 인터넷이 없어도 동작을 하게 하려면 다운로드 받아야 한다. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style type="text/css">
div {
border: 1px solid #ccc;
text-align: center;
};
</style>
<script type="text/javascript">
$(function(){
$("#leftBtn").click(function(){
// div 안에 있는 글자 정렬을 왼쪽 정렬
$("div").css("text-align","left")
});
$("#centerBtn").click(function(){
// div 안에 있는 글자 정렬을 가운데 정렬
$("div").css("text-align","center")
});
$("#rightBtn").click(function(){
// div 안에 있는 글자 정렬을 오른쪽 정렬
$("div").css("text-align","right")
});
// 글자 색상 바꾸는 이벤트
$("#redText").click(function(){
// span 태그 안의 글자를 빨강으로 변경
$(".textColor").css("color","red");
});
$("#orangeText").click(function(){
// span 태그 안의 글자를 주황으로 변경
$(".textColor").css("color","orange");
});
$("#greenText").click(function(){
// span 태그 안의 글자를 녹색으로 변경
$(".textColor").css("color","green");
});
});
</script>
</head>
<body>
<button id="leftBtn">왼쪽 정렬</button>
<button id="centerBtn">가운데 정렬</button>
<button id="rightBtn">오른쪽 정렬</button>
<div>
글자입니다.
</div>
<button id="redText">빨강</button>
<button id="orangeText">주황</button>
<button id="greenText">초록</button>
<div>
글자입니다.
<span class="textColor"> jQuery</span>는 js 라이브러리 입니다.
<span class="textColor"> jQuery</span>는 js 함수 입니다.
<span class="textColor"> jQuery</span>는 라이브러리 입니다.
</div>
</body>
</html>이벤트처리
선택자.이벤트(function(){~~~});
form 태그에서 데이터를 넘기지 않고 무시시킨다. : submit()을 만나면 무시시킨다.
-> form태그선택.submit(function(){ return false; });
