요소의 생성 및 삽입 append사용, removeAttr 사용 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>이미지 자동 삽입</h2>
<p>클릭시 이미지 삭제됩니다.</p>
<script type="text/javascript">
$(document).ready(function() {
	for(i=1; i<=9; i++){ //.attr().attr()연달아 사용할 수 있다.
		let img = $("<img>").attr({'src': './image/photo_'+i+'.jpg',
							"class":"photo"});
	$("body").append(img);
	}
	$('.photo').click(function() {
		$(this).removeAttr("src");
	})
});
</script>
</body>
</html>

 

설명

우선 이미지명이 photo_1~9까지의 이미지가 9개가 있다고 가정한다.

연속되는 이미지 명이기 때문에 for문을 사용하여 img tag에 scr값과 class를 추가하여 body tag 밑에 생성한다.

클릭 시 removeAttr()함수를 사용하여 scr를 삭제한다.

removeAttr() : 선택된 요소의 속성을 삭제한다.

'IT > JavaScript' 카테고리의 다른 글

[jQuery] 여러가지 함수 사용 예제  (0) 2021.06.11
[jQuery] td elemant에 문자열을 치환하도록 하라./이름을 마우스 클릭하면 alert창에 이름이 출력되도록 하라  (0) 2021.06.11
[jQuery] 속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기 / 사용자 지정 태그 사용예시  (0) 2021.06.11
[jQuery] 이미지를 클릭 시 이미지 변경 예시 / hover함수 사용예시  (1) 2021.06.11
[jQuery] mouseover, mouseout, css 사용예시 / attr, addClass, removeClass사용예시  (0) 2021.06.11

mouseover, mouseout, css 사용예시

<table border="1">
<col width="50"><col width="200"><col width="150">

<tr>
	<th>번호</th><th>이름</th><th>나이</th>
</tr>
<tr class="cls">
	<th>1</th><td>홍길동</td><td>24</td>
</tr>
<tr class="cls">
	<th>2</th><td>성춘향</td><td>19</td>
</tr>
<tr class="cls">
	<th>3</th><td>일지매</td><td>35</td>
</tr>
</table>

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

<script type="text/javascript">
$(document).ready(function() {
	$("tr.cls").mouseover(function () {
		// Java Script
//		document.getElementsByClassName("cls").style.backgroundColor;
		
		$(this).css('background', '#00ff00');
	});
	$("tr.cls").mouseout(function () { 
		$(this).css('background', '#fff');
	});

	$("td").click(function() {
		let val = $(this).text();
		alert(val);
	});
});	
</script>

 

설명

위 예제는 테이블에 마우스를 가져다 놓으면 배경색이 바뀌고, 마우스를 테이블 밖으로 빼면 배경색이 원복이 된다. 클릭 시에 클릭한 부분의 데이터가 alert에 출력이 된다.

mouseover() : 마우스가 포커스 안으로 들어왔을 때 이벤트가 발생되는 함수이다.

mouseout() : 마우스가 포커스 밖으로 나갔을 때 이벤트가 발생되는 함수이다.

css() : CSS 속성 값을 가져오거나 추가한다. 

형식

setter

css(property, value)

css(property, value).css(property, value)

css({property : value, property : value})

getter

$(접근할 태그명,id명,class명 등등).css(property)

attr, addClass, removeClass사용예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.back{
	color: #ffff00;
}
</style>
</head>
<body>
<p>p tag</p>

<button type="button" id="btn">버튼</button>

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

<script type="text/javascript">

$("#btn").click(function () { 

	$('p').css('background' , '#0000ff').css('color', 'white'); 
	$('p').text('여기가 p태그');

	// getter
	let color = $('p').css('background');
	let text = $("p").text;
	alert(color);
	
	$('p').attr("id", "pid");
	let id = $('p').attr("id");
	
	$('p').attr("class", "back");
//	$('p').addClass("back"); //위와 동일

//	$('p').attr("class", ""); 
	$("p").removeClass("back"); //위와 동일

});
</script>
</body>
</html>

설명

위 예제는 버튼 클릭시 p tag의 배경색과 글자색, 문자열이 변경 그리고 id명과 class명 추가, 삭제를 담은 예시이다.

(id값을 태그명으로 추가하는건 좋은예시가 되지못한다. 중복우려..)

attr() : 속성자체를 가져오거나 추가한다.

형식

$(추가할 요소명).attr(추가할 속성,값)

$(추가할 요소명).attr(추가할 속성,값).attr(추가할 속성,값)

$(추가할 요소명).attr({추가할 속성:값, 추가할 속성:값})

addClass() : 클래스를 추가해주는 함수이다. attr로 대체 가능하다.

removeClass() : 클래스를 삭제해주는 함수이다. attr로 대체 가능하다.

'IT > JavaScript' 카테고리의 다른 글

[jQuery] 속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기 / 사용자 지정 태그 사용예시  (0) 2021.06.11
[jQuery] 이미지를 클릭 시 이미지 변경 예시 / hover함수 사용예시  (1) 2021.06.11
[jQuery] jQuery에서 요소 추가하기/append()  (0) 2021.06.11
[jQuery] button tag 접근 예시/input radio, checkbox 접근 예시  (0) 2021.06.11
[jQuery]jQuery와 JavaScript 차이점/ jQuery 형식/ jQuery 태그 접근방법/html()와 text()차이점  (0) 2021.06.10

JQuery란?

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리

Java Script를 경량화, 간략화한 것이다

 

요즘은 jQuey보다 다른걸 더 많이 사용한다.

중요한 거 1가지.. == Ajax (비동기 통신)

 

 

 

JQuery 대신 요즘 사용하는 것

react, vue : 자바스크립트로 구현해놓은 프레임워크, 엔진이다.

 

 

jquery.min.js 소스 구하기, 파일 다운로드

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

<script src="./jquery/jquery.min.js"></script>

<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>

jQuey를 사용하기 위해선 head tag 안에 위와 같은 링크가 있거나 script tag 바로 위에만 있으면 동작된다.

 

첫 번째 샘플은 w3Schools에서

w3Schools 홈페이지 :  https://www.w3schools.com/

 

사이트에 접속하여 Tutorials 클릭 → Learn jQuery 클릭

 

Try it Yourself 클릭

 

복사하여 html문서 head tag 안이나 script tag 사용 전에 넣으면 된다. (예시는 아래 작성)

두 번째 소스는 jquery.min.js 파일을 구해서 직접 적용하는 방식이다.

w3Schools에서 복사한 코드 중 링크만 인터넷 주소창에 붙여 넣기를 한다.

 

마우스 우클릭 후 다른 이름으로 저장.. 한다.

 

이클립스를 사용하여 이클립스.......... GO.....

 

이클립스 WebContent폴더 안 폴더를 생성하고 그 안에 다운로드한 파일을 넣는다.

 

스크립트 문을 작성한다.

 

형식

<script src="./폴더명/jquery.min.js"></script>

 

 

jquery.min.js 적용방법

 

예시 1 : head tag 선언방법

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

 

예시2 : script tag 위 선언방법

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
   ...
</script>   
</body>

 

 

'IT > JavaScript' 카테고리의 다른 글

[jQuery] button tag 접근 예시/input radio, checkbox 접근 예시  (0) 2021.06.11
[jQuery]jQuery와 JavaScript 차이점/ jQuery 형식/ jQuery 태그 접근방법/html()와 text()차이점  (0) 2021.06.10
[Html+JavaScript] NodeList/getElementsByTagName  (0) 2021.06.08
[Html+JavaScript] DOM/childNodes/appendChild/insertChild/insertBefore/removeChild/createElement/createTextNode  (0) 2021.06.08
[Html+JavaScript] 미술관 및 박물관 링크 이동하기  (0) 2021.06.07

+ Recent posts

티스토리툴바