Programming/JQuery

[JQuery/실습] 속성 선택자 - 같은 속성선택자에 같은 CSS적용하기

reeme 2020. 10. 27. 22:12

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="js/attributeselector.js"></script>
<title>Insert title here</title>
</head>
<body>
	<input type="text" value="id 입력">
	<input type="password" value="비밀번호" >
	<input type="radio" >
	<input type="checkbox">
	<input type="file" >

</body>
</html>

JS

/**
 * 
 */

$(document).ready(function(){
	
	//input태그의 type속성의 값이 text와 같은걸 선택해서 배경색을 빨간색
	$("[type='text']").css("backgroundColor","red")
    
	//input태그의 type속성의 값이 text와 같지 않은걸 선택해서 배경색을 빨간색으로 만들어라
		$("[type!='text']").css("backgroundColor","red")
        
	//input태그의 type 속성의 값이 word로 끝나는 모든 태그를 선택해서 배경색을 빨간색으로 만들어라
		$("[type$='word']").css("backgroundColor","red")
		$("[type|='pass']").css("backgroundColor","red")
        
	//input태그의 value속성의 값이 id이거나 id로 시작하는 모든 태그를 선택해 빨간색으로 하라
		$("[value|='id']").css("backgroundColor","red")
        
	//input태그의 value속성의 값이 id로 시작하는 모든 태그를 배경색을 빨간색
		$("[value^='id']").css("backgroundColor","red")
        
	//input태그의 value속성의 값이 특정단어인 입력을 포함하는 모든 태그를 선택해서 배경색을빨간색
		$("[value~='입력']").css("backgroundColor","red")
        
	//input태그의 value속성의 값이 입력을 포함하는 모든 태그를 선ㅌ개해서 배경색을 빨간색으로 	
		$("[value*='입력']").css("backgroundColor","red")

	//input태그의 type속성의 값이 text인 것을 선택하여 배경색을 빨간색으로 적용하는 css를 적용하고, 
	//text입력란에 value속성에 abcd라는 값을 적용하여 기본값을 셋팅 (setter)
		$("[type='text]").css("backgroundColor","red").val("abcd")
	//그럼 text에 value(abcd)값이 들어가게됨 보이지는 않지만 setter역할을함
	 

	//input 태그의 type속성의 값이 password인것을 선택하고 password입력란에 적용되어있는 
	//value값을 가져와라(getter)
		var value=$("[type='password']").val(); 
		//alert(value);
	//괄호안이 비어져있으면 getter역할을함 html에서 value를 가지고옴
	//javascript통해서 서버통신이 되어야하는데 그때 이 val을 통해서 값을 가져옴

})

결과