JQuery_필터, 속성 요소 변경하기

KH/JDBC

JQuery_필터, 속성 요소 변경하기

오늘의 진 2022. 10. 21. 14:40

toggleClass

[문법]
1. 클래스 여부를 확인하는 경우
"선택자".toggleClass("클래스이름")
(예) - $("div").toggleClass("className");

2.함수를 사용하는 경우
"선택자".toggleClass(함수 )
(예)- $("div").toggleClass(function(){ });
//클래스를 추가한후 실행되는 함수를 설정한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트 어트리뷰트 값을 가져오고, 설정하기</title>
<style type="text/css">
img {
	padding: 20px;
}

div {
	color: blue;
	font-size: 30px;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				$("img").attr("src", "../images/im0.jpg")
				.attr("title","똘또리군~~").attr("alt", "진 picture")
						
				//img의 속성들에서 src, title, alt에 값을 줌 		
				$("div").text($("img").attr("alt"))
				//div의 텍스트를 img의 속성 alt로 바꾸어라 
				//만약 이 줄이 없다면 div 내부에 작성한 글이 나온다. 

			});
</script>
</head>
<body>
	<img />
	<img />
	<div> <b>어트리뷰트 테스트 ^^^</b> </div>



</body>
</html>

맵방식으로 작성하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트 집합들을 한번에 처리하기</title>
<style type="text/css">
img {
	padding: 20px;
}

div {
	color: blue;
	font-size: 30px;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("img").attr({
			src : "../images/cat.png",
			title : "울이양 ~~~",
			alt : "Cat picture",
			width : "130px",
			height : "130px"

		});
		$("div#kbs").text($("img").attr("alt"));
		$("div.mbc").text($("img").attr("title"));
	})
</script>

</head>
<body>

	<img />
	<img />
	<img />
	<div id="kbs">
		<b>어트리뷰트가 나옴</b>
	</div>

	<div class="mbc">
		<b>어트리뷰트가 나옴</b>
	</div>

</body>
</html>

id나 class를 부여하여서 원하는 div를 설정 가능

사진의 인덱스 번호

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트의 속성 값을 콜백함수에서 얻어와서 설정</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("img").attr({
			width : "100px",
			height : "100px"
		});
		$("img").attr("src", function() {
			return "../images/" + this.title;
			//this는 현재 이 이미지 객체 img를 말한다. 
			//즉 주소는 ../imgaes/flower_1.jpg 이런 형태가 된다. 
		});
		
		//여기서 index는 img에 부여되는 인덱스 번호이다. 
		//순서대로 0번 부터 시작하고 img.attr를 줄때마다 하나하나 이 함수가 실행됨
		// 인덱스 번호는 배열처럼 자동으로 부여된다. 
		$("img").attr("title", function(index) {
			return index + "번 엘리먼트 타이들은 " + this.title + " 이다"
		});
	});
</script>

</head>
<body>

	<img title="flower_1.jpg"/>
	<img title="flower_2.jpg"/>
	<img title="flower_3.jpg"/>


</body>
</html>

버튼을 이용하여 removeAttr 하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트의 속성값 제거</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	//$(document).ready()
	$(function() {
		$("button").click(function() {
			$(this).prev().removeAttr("src"); // 버튼의 바로 앞에 있는 것의 src
			$(this).prev().prev().removeAttr("src");//버튼의 앞 앞에 있는 것의 src
			$(this).next().removeAttr("src"); //버튼의 바로 뒤에 있는 것의 src
			//여기서 this는 버튼을 의미 
			
			
		});
	});
	/* next() : 엘리먼트의 형제 엘리먼트 가운데 바로 다음 엘리먼트를 반환
	remove() : 대상이 되는 모든 엘리먼트를 제거  */
</script>
</head>
<body>


	<img alt="puppy11 picture" src="../images/im0.jpg" title="똘이군 ~~">
	<img alt="puppy22 picture22" src="../images/im1.jpg" title="똘이양 ~~">
	<button>속성값 제거</button>
	<div>한 글</div>
	<img alt="puppy22 picture22" src="../images/im1.jpg" title="똘이양 ~~">


</body>
</html>

속성추가와 속성 삭제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트로부터 클래스 제거하기</title>
<style type="text/css">
p{margin: 4px; font-size: 20px; font-weight: bolder;}
.red{color: red;}
.under{text-decoration: underline;}
.highlight{background-color: yellow;}
</style>

<script type="text/javascript" src="../js/jquery.js" ></script>
<script type="text/javascript">
$(function() {
	$("p").addClass("red under");
	$("#removeClass").click(function() {
		$("p:even").removeClass("red under"); // 짝수번 
	});
	$("#changeClass").click(function() {
		$("p:odd").removeClass("red under").addClass("highlight");// 홀수번 
	});
});
</script>
</head>
<body>
<button id="removeClass">removeClass ~~~</button>
<button id="changeClass">changeClass ^^^</button>
<!-- p태그는 0번 인덱스부터 시작 -->
<p>엘리먼트로 부터</p>
<p>클래스를</p>
<p>추가하고</p>
<p>제거하는 연습</p>


</body>
</html>

다른 클래스로 기존의 모든 클래스를 대체하려면 .attr('class', 'newClass') 과 같이 사용하면 됩니다.

처음모습	removeClass	changeClass

toggleClass() : 해당클래스가 이미 적용되어 있으면 제거하고 없으면 추가한다.
$("p").toggleClass( "className");
p요소에 "className" 클래스가 없으면 추가하고 있으면 제거한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트에 해당 클래스가 있으면 제고하고, 없으면 추가하기</title>
<style type="text/css">
p {
	margin: 4px;
	font-size: 16pt;
	font-weight: bolder;
	cursor: pointer;
}

.blue {
	color: blue;
	border: 3px dotted red;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$("p").click(function() {
			$(this).toggleClass("blue");
		});
	});

	/* toggleClass() : 해당 클래스가 이미 적용되어 있으면 제거하고 없으면 추가한다. */
</script>
</head>
<body>
	<p class="blue">엘리먼트에 적용된 클레스</p>
	<p>추가하고 제거하기를 반복하기</p>

</body>
</html>

엘리먼트에 해당 클래스가 있으면 제거하고, 없으면 추가하기

엘리먼트에 적용된 클레스

추가하고 제거하기를 반복하기

div 1

div 2

hasClass()

: 엘리먼트 집합에서 매개변수로 지정된 CSS 해당 클래스가 존재하는지 알려준다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hasClass Test</title>
<style type="text/css">
p, div, button {
	margin: 8px;
	font-size: 20px;
}

.red {
	color: red;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$("button").click(function() {
			$("div#result1").append($("p:first").hasClass("red").toString());
			
			//div#result1에다가 붙일 내용 : 첫번째 p태그가 red클래스를 가지고 있는지 여부를 string형으로 변경해서 append한다
			//hasClass는 true/ false를 반환한다. 
			
			$("div#result2").append($("p:last").hasClass("red").toString());
			//div#result2에다가 마지막 p태그가 red클래스를 가지고 있는지 여부를 toString으로 변경하여 append한다
			
			$("div#result3").append($("p").hasClass("red").toString());
		});
	});

	/* hasClass() : 엘리먼트 집합에 매개변수로 지정된 CSS 해당 클래스가 존재하는지 알려준다 */
</script>
</head>
<body>

	<p>찻고자 하는 색상을 빨간색으로 변경하는 클래스가 없는 문장</p>
	<p class="red">찾고자 하는 색상을 빨간색으로 변경하는 클래스가 있는 문장</p>
	<button>hasClass</button>

	<div id="result1">첫 문장은 빨간색으로 변경하는 클래스가 있는가? :</div>
	<div id="result2">마지막 문장은 빨간색으로 변경하는 클래스가 있는가? :</div>
	<div id="result3">빨간색으로 변경하는 클래스가 있는 문장이 하나라도 있는가? :</div>

</body>
</html>

(예) 함수로 toggle 구현하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트에 클래스 존재 여부 확인하기</title>
<style type="text/css">
div {
	width: 100px;
	height: 100px;
	border: 1px solid #000000;
	cursor: pointer;
	margin: 4px;
	float: left;
}

.toggleStyle {
	background-color: #44dd5599;
	color: white;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$("div").click(function() {
			
			//this.hasClass 는 가지고 있으면 true, 없으면 false를 반환
			if ($(this).hasClass("toggleStyle")) {
				$(this).removeClass("toggleStyle");
			} else {
				$(this).addClass("toggleStyle");
			}
		});
	});
</script>

</head>
<body>
	<div class="toggleStyle">hasClass()는 선택된 엘리먼트에 해당 클래스가</div>
	<div>적용되어 있지 않으면 true를 리턴하고</div>
	<div>아직 적용되어 있지않으면 flase를 리턴한다.</div>

</body>
</html>

(예)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트의 태그 내부의 HTML 콘텐츠 얻어오기</title>
<style type="text/css">
p {
	margin: 14px;
	cursor: pointer;
}

b {
	text-decoration: underline;
}

button {
	cursor: pointer;
}

#console {
	font-size: 20px;
	color: blue;
	font-weight: bold;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		var htmlStr;
		$("p").click(function() { // p태그를 클릭했을때 
			htmlStr = $(this).text(); // 클릭한 p태그 내부의 text들을 htmlStr에 담아서
			report(htmlStr); // report(htmlStr); 을 실행한다.
			//$('#colsole').text(htmlStr); 과 동일한 역할을 한다. 확장성을 고려하여 따로 함수화 해줌 
		});
	});
	function report(msg) {
		$('#console').text(msg); // 전달받은 text를 #console이라는 아이디를 가진곳에 뿌린다. 

	}
</script>
</head>
<body>

	<p>
		<b>html()은</b> 엘리먼트의 <span id="tag">내용을</span>
	</p>
	<p>
		HTML 형식의 <span id="text">문자열로</span>리턴한다.
	</p>

	<p>
		버튼을 포함한
		<button name="okbtn">button</button>
		문장이다.
	</p>

	<div id="console"></div>


</body>
</html>

예 _ 변경하기 / 되돌리기 코드 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트 태그 내부의 HTML 콘텐츠 변경하기</title>
<style type="text/css">
.red {
	color: red;
}
.green{
background-color: lightgreen;
color: blue;
}
#div1{ background-color: pink; width: 50px; height: 30px; visibility: hidden; border: 5px solid;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$("button#1").click(
				function() {
					$("div").html(
							"<span class='red'> 엘리먼트 태그 내부의"
									+ "<b>HTML 콘탠츠 변경하기</b></span>");
					$("p").html(
					"<span class='green'> p태그 내부입니다.</span>"		
					);
					
					$("div#div1").css("visibility","visible");
					
				});
		
		$("button#2").click(function() {
			$("div").text("");
			$("div").removeAttr("style");
			
			$("p").text("").removeAttr("style");
			
		})
		
	
		
		
		
	
	});
</script>
</head>
<body>

	<button id="1">클릭</button> &nbsp; <button id="2"> reset </button>
	<div></div>
	<div></div>
	<div></div>
	<p></p>
	<p></p>
	<p></p>
	<div id="div1">ddd</div>
</body>
</html>

엘리먼트 태그 내부의 HTML 콘텐츠 변경하기

ddd

keyup()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 엘리먼트에서 value 어트리뷰트 값 가져오고 설정하기 - val()</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		/* 이벤트 핸들러 안쪽의 동작 함수는 언제 호출 
		사용자가 이벤트를 일으켰을때  */

		$('input').keyup(function() {
			var value = $(this).val();
			report(value);
		}).keyup();
		/* 문서가 로드되어 준비상태가 되면 
		개발자가 keyup이벤트를 발생시켜서 핸들러 안쪽으 됭작 함수가 한번 실행되도록 한다. 
		keyup 이벤트는 키를 눌렀다 땔때 이벤트를 발생시킨다. 
		이 이벤트는 포커스를 가질수 있는 요소에만 발생시킬 수 있다. 
		 */

		$('button').click(function() {
			$('input').val("val 메소드 연습중 ");
			//개발자가 keyup 이벤트를 발생시켜서 
			$('input').keyup();
		});
		function report(msg) {
			$('#console').text(msg);
		}

	});
</script>
</head>
<body>
	<button>reset</button>
	<input type="text" value="val 메소드 연습중 " size="80">
	<div id="console"></div>
</body>
</html>

폼 엘리먼트에서 value 어트리뷰트 값 가져오고 설정하기 - val()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>탐색한 엘리먼트들에 기준이 되었던 엘리먼트들 추가하기</title>

<style type="text/css">
div {
	width: 60px;
	height: 60px;
	margin: 10px;
	float: left
}

p {
	clear: both;
}

.redBorder {
	border: 2px solid red;
}

.yellow {
	background: rgb(255, 255, 0)
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$("button").click(function() {
			$("div").addClass('redBorder').add('p#kbs').addClass('yellow')
			//redBorder을 먼저 적용하고 그다음에 p태그를 add 하였음으로 p 태그는 redBorder의 적용을 받지 않는다. 

			/* 	$("div").addClass("yellow").add("p#kbs").addClass("redBorder")
				반대로 위와 같이 적용해주면 div는 두가지 모두 적용받고 p#kbs는 yellow클래스는 적용받지 못하고 redBorder만 적용받는다. */

		});
	});
</script>


</head>
<body>

	<div></div>
	<div></div>
	<div></div>


	<p id="kbs">redBorder 클래스의 적용은 받지 못하고 yellow 클래스의 적용 받음</p>
	<p>redBorder 클래스의 적용은 받지 못하고 yellow 클래스의 적용 받음</p>
	<button>클릭</button>

</body>
</html>

필터기능

not(" className or ID")

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉트된 엘리먼트들 중에서 조건에 맞는 엘리먼트 얻기</title>
<style type="text/css">
div {
	width: 60px;
	height: 60px;
	margin: 5px;
	float: left;
	border: 2px white solid;
}
</style>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$("div").css("background", "yellow").not(".middle").css("border-color",
				"red");
	
	//not(".middle") : class="middle"인 것들을 제외하고 (not middle인것들만/ middle가 아닌것들에만 뒤에것들 적용 )
	});
	/* 
	 fliter() : 매개변수에 전달된 셀렉터 표현식 혹은 함수에 만족하는 엘리멘트를 필터링 한다.
	 not(".middle") : div 엘리멘트에 background => yellow적용한후 
	 클래스명이 .middle인것만 골라내 제거한후 border-color=red적용 

	 */
</script>
</head>
<body>

	<div id="first"></div>
	<div id="second" class="middle"></div>
	<div id="third" class="middle"></div>
	<div id="fourth" class="middle"></div>
	<div id="fifth" class="middle"></div>
	<div id="sixth"></div>

</body>
</html>

작성해준 순서대로 적용된다.

div에 백그라운드 속성을 적용해주고

그다음 not요소들을 제외한 것들에게 border-color을 적용

filter

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉트된 엘리먼트들 중에서 조건에 맞는 엘리먼트 얻기</title>
<style type="text/css">
div {
	width: 60px;
	height: 60px;
	margin: 5px;
	float: left;
	border: 2px white solid;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$("div").css("background", "yellow") // 백그라운드를 모두 yellow로 변경하고 
		.filter(function(index) { // 필터링을 하여 return 되는 것에 (filter는 객체를 조건을 만족하느느 div객체를 리턴한다)
			return index == 1 || $(this).attr("id") == "fourth";
		}).css("border-color", "red"); // 다음의 css를 적용한다. 
	});
</script>
</head>
<body>

	<div id="first"></div>
	<div id="second" class="middle"></div>
	<div id="third" class="middle"></div>
	<div id="fourth" class="middle"></div>
	<div id="fifth" class="middle"></div>
	<div id="sixth"></div>



</body>
</html>

마찬가지로 코드를 순서대로 적용된다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉트된 엘리먼트들 중 원하는 범위의 엘리먼트만 반환하기</title>
<style type="text/css">
div {
	width: 60px;
	height: 60px; margin : 5px;
	float: left;
	border: 2px blue solid;
	margin: 5px;
}
</style>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$('button').click(function() {
			//셀렉터로 얻어낸 확장 집합 객체가 여러번 사용될 경우에는 변수에 저장해 둔다.
			var $div = $('div');
			//변수니까 이름은 꼭 $div가 아니여도 상관 없다. div를 여러번 사용할꺼니까 변수에 담아둠 

			/* 	div엘리먼트 중에서 2이상 3미만
				인덱스가 0부터 시작하기에 3번째 엘리먼트만 반환 */
			$div.slice(2, 3).css('background', 'yellow');

			//end가 생략된 상태애서 begin만 기술하면 begin부터 끝까지 
			$div.slice(4).css('background', 'pink');

		});
	});
</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>

	<button>노란색 입히기</button>


</body>
</html>

전
후

예

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트의 자식 엘리먼트 찾기</title>
<style type="text/css">
span {
	color: blue;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$('button').click(function() {
			$('div').children().css("border-bottom", "3px double green");
			$('div').children(".selected").css("color", "red");

		});

	});

	// childern() :  특정 엘리먼트의 자식 엘리먼트를 반환한다.
</script>

</head>
<body>

	<button>엘리먼트에 스타일 입히기</button>
	<p>이곳은 문장입니다.</p>
	<div>
		<span class="selected">이곳은 div의 차일드 span이다.</span>
	</div>

	<p>
		그리고 <span>여기는 또다른</span>문장입니다.
	</p>

	<div>
		그리고 마지막으로 <span>이곳은 div의 차일드 span이고</span> 이곳은 div이다.
	</div>


</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트 뒤에 위치하는 형제 엘리먼트 찾기</title>
<style type="text/css">
div, span {
	width: 60px;
	height: 60px;
	margin: 5px;
	float: left;
	border: 2px red solid;
	background: white;
}

.after {
	background: pink
}

.selected {
	border: 5px blue solid;
}
</style>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$('button').click(function() {
			$("div").next().addClass("after");
			$("div").next("#fourth").addClass("selected");
			// next가 fourth 인 곳에다가 (id가 fourth이고 div 뒤에 있는 곳)
            //div 요소 뒤에있는데 id가 fourth인 것에다가 addClass해라 
		});
	});

	// next() : 형제 엘리먼트 가운데 바로 다음 엘리먼트 반환
</script>
</head>
<body>

	<p>
		<button>형제 엘리먼트에 스타일 입히기</button>
	</p>

	<div id="first">first</div>
	<span id="second" class="middle">sibling
		<div id="child">child</div>
		

	</span>
	<div id="third" class="middle">sibling</div>
	<span id="fourth" class="middle">sibling</span>
	<span id="fifth" class="middle">sibling</span>

	<div id="sixth">last</div>


</body>
</html>

전
후