웹 기초 22강 - jQuery 메소드(속성, prop)

스타일시트(css)관련 메소드

메소드	설      명
css(name)	매치되는 첫번째 요소의 스타일의 속성을 반환한다
예) $(this).css(‘color’)
css(name, value)	매치되는 모든 요소들의 단일 스타일 속성을 설정한다
예) $(this).css(‘color’ , ‘red’)
css(propertis)	매치되는 모든 요소들의 스타일 속성에 키:값 을 
설정한다
예) $(this.).css({‘color’:’blue’, ‘font-size’:’20px’ })
메소드	설      명
addClass(class)	
매치된 요소들의 집합에 지정된 css 클래스를 추가한다
hasClass(class)	
지정된 클래스가 매치된 요소들의  집합 중  최소 한군데 이상 적용 되어 있으면 true 를 리턴 한다
removeClass(class)	
매치된 요소들의 집합에서 지정된 css클래스를 삭제한다 
toggleClass(class)	
매치된 요소들에 지정된 클래스가 적용되지 않았다면 적용하고 ,  이미 적용되어 있다면  제거한다

속성(attribute) 관련 메소드

메소드	설      명
attr(name)	매치된  첫번째 요소의 name에 지정된 속성의 값을  가져온다. (get)
지정된 속성 명이 존재하지 않는다면 undefined가 반환된다 
attr(properties)	
매치되는 모든 요소들의 속성을 키:값 의 형태로 지정한다 (set)
attr(key, value)	
매치되는 모든 요소들의 속성을 단일 값으로 지정한다 (set)
attr(key, fn) 	
매치되는 모든 요소들의 단일속성에 대한 fn에서 수행된 값을 지정한다 (set)
removeAttr(name)	
매치된요소의 속성을 제거한다

가져오기
val() => input타입의 값을 가져올 때
attr() => 속성을 가져올 때
html() => html태그 포함해서 가져올 때
text() => 텍스트만 가져올 때

속성
attr() => 실제 값을 가져옴
pror() => 상태

prop() –속성상태 설정 및 상태 얻기

element가 가지는 실제적인 상태(활성화, 체크 선택여부)등을 제어
(예: checked, selected, disabled, readonly, multiple )
가져올때 true 또는 false 를 리턴하고
설정시 true 또는 false 로 설정한다

상태 설정(set)
$(selector).prop("속성명", 값);
==> 값이 true이면 해당 속성을 설정하는 것이고
값이 false이면 해당 속성을 해제하는 것이다.

상태 얻기(get)
$(selector).prop("속성명");
==> 해당 속성이 설정되어 있으면 true,
설정되어 있지 않으면 false를 반환한다.

.attr() - element가 가지는 속성값이나 정보를 조회 (style, src)
prop() - element가 가지는 실제적인 상태(활성화, 체크 선택여부)등을 제어

이벤트관련 메소드

메소드	설      명
bind(type, data, fn, map)	매치돤 요소에 이벤트처리기를 바인딩한다
type : 이벤트종류, data: fn의 파라미터값,
Version3.0 deprecated ,Use the on() method
map: {event:function, event:function, ...}
unbind(type, fn)	매치돤 요소에 이벤트 처리기를 제거한다
Version3.0 deprecated 
Use the off() method instead
one(type, data, fn)	bind()와 같지만 이벤트를 한번만 실행하고 자동으로 이벤트를 제거한다
trigger(type)	매치된 요소에 대하여 이벤트 타입에 해당하는 이벤트 처리기를 모두 실행한다  
type에 사용자 정의 이벤트 가 올 수 있다
$("button").click(function(){
     $("p").trigger("myOwnEvent", ["Anja"]);
  });
 $("p").on("myOwnEvent", function(event, showName){
    $(this).text(showName + "! What a beautiful name!").show();
  });
메소드	설      명
delegate(selector, type, data, fn)	매치돤 요소에 이벤트처리기를 바인딩한다
동적으로 작성된 새로운 요소에서도 이벤트실행  
type : 이벤트종류, data:fn의 파라미터값,
Version3.0 deprecated 
Use the on() method instead
undegate(selector, type, data, fn)	매치돤 요소에 이벤트 처리기를 제거한다
Version3.0 deprecated 
Use the off() method instead
on(type, data, fn, map )
on(type, selector, data, fn, map )	매치돤 요소에 이벤트처리기를 바인딩한다
bind 와   delegate 방식
map: {event:function, event:function, ...}
$("p").on({
    mouseover: function(){      $("body").css("background-color", "lightgray");    },  
    mouseout: function(){      $("body").css("background-color", "lightblue");    }, 
    click: function(){      $("body").css("background-color", "yellow");    }  
  });
메소드	설      명
on(type, data, fn, map ) - map을 쓸 때는 map하나만 사용 {map : }
on(type, selector, data, fn, map )	매치돤 요소에 이벤트처리기를 바인딩한다
bind 와   delegate 방식
type 에 사용자정의 이벤트 첨부 
$("p").on("mouseover mouseout", function(){
     $(this).toggleClass("intro");
  });

$("p").on("myOwnEvent", function(event, showName){
    $(this).text(showName + "! What a beautiful name!").show();
  });
off(event, selector, fn)	매치돤 요소에 이벤트처리기를 제거한다

attr메서드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<style>
img{
	width: 150px;
	height: 150px;
		
}
</style>

<script>
$(function(){
	$('#btn1').on('click', function(){
		//$('img').attr('title','이미지');
		
		//$('#result').attr('class','aaa'); //setter
		//$('#result').attr('name', 'kkk');
		$('#result1').attr({ 'class' : 'aaa', 'name' : 'kkk'}); //setter - 여러개 동시에(properties)
		
		
		$('img').attr('title', function(){
			
		//src의 속성값을 가져온다
		vsrc = $(this).attr('src') //getter
			
		//추출을 하기 위해서 마지막 /의 위치와 마지막 .의 위치를 얻어온다.
		start = vsrc.lastIndexOf('/');
		end = vsrc.lastIndexOf('.');	
			
		//vsrc에서 문자를 추출한다	
		str = vsrc.slice(start,end);
		//각 이미지의 title로 설정한다
		return str;
		
		})
	})
		
})
</script>
</head>
<body>

<div class="box">
 
 <br>
  <button id="btn1" type="button">확인</button>
  <div id="result1">
  	<img src="../images/국화1.jpg" alt="국화1.jpg">
  	<img src="../images/국화10.jpg" alt="국화10.jpg">
  	<img src="../images/국화3.jpg" alt="국화3.jpg">
  	<img src="../images/국화4.jpg" alt="국화4.jpg">
  	<img src="../images/딸기스무디.jpg" alt="딸기스무디.jpg">
  </div>
 </div> 
</body>
</html>

prop메서드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<script>
$(function(){
	$('#btn1').on('click', function(){ 
		//각 요소의 상태값을 가져오기
		chk = $('#checkTest').prop('checked');
		sel = $('#selTest option').eq(2).prop('selected');
		read = $('#txtTest').prop('readonly');
		btn = $('#runBtn').prop('disabled');
		
		console.log(chk, sel, read, btn);
		
		$('#checkTest').prop('checked', !chk);
		$('#selTest option').eq(2).prop('selected', !sel);
		$('#txtTest').prop('readonly', !read);
		$('#runBtn').prop('disabled', !btn);
	
	})
	
	$('#all').on('change',function(){
		//전체선택의 checked 속성의 상태값을 가져온다
		allcheck = $(this).prop('checked');
		//1~5의 상태값을 변경한다.
		$('.check').prop('checked', allcheck);
		
	})
	
	
})
</script>
</head>
<body>

<div class="box">
 prop()<br>
 요소들의 상태값을 가져오거나 설정한다<br>
 checked, disabled, readonly, selected, multiple<br>
 $(this).prop('checked') - get - true/ false를 리턴한다<br>
 $(this).prop('checked', true); - set<br>
 <br>
 <br>
  <button id="btn1" type="button">확인</button>
  <div id="result1">
  	<form>
	체크박스(라디오버튼) :    
	<input type="checkbox" id="checkTest"  checked><br><br>

	리스트박스(select객체) : 
 	 <select id="selTest">
	     <option value="1">하나</option> 
	     <option value="2">둘</option>
	     <option value="3" selected >셋</option>  
	     <option value="4">넷</option>
 	 </select><br><br>

 	text객체	(readonly) : 
 	 <input type="text" value="가나다" id="txtTest"><br><br>

 	button객체(disabled) : 
     <input type="button" value="실행" id="runBtn" onclick="alert('Hello~')">
	</form>
  </div>
 </div> 
 
 <div class="box">
 <br>
 
 <br>
  <div id="result2">
 	<input type="checkbox" id="all">전체선택
	<br>
 	<input type="checkbox" class="check">1
 	<input type="checkbox" class="check">2
 	<input type="checkbox" class="check">3
 	<input type="checkbox" class="check">4
 	<input type="checkbox" class="check">5
	
	
  </div>
 </div> 
</body>
</html>
YIL - mock data를 활용하여 article component 각각에 대한 댓글 삭제 기능 구현
자바 알고리즘 공부 3일차(1)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage