Programming/JQuery

[JQuery/실습] 필터선택자-기호필터선택자/입력양식필터선택자

reeme 2020. 10. 27. 22:18

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/filterselector.js"></script>
<title>필터 선택자를 알아보자</title>
</head>
<body>
<h1>필터 선택자를 알아보자</h1>

<form action="">
	<input type="text">
	<input type="password" disabled="disabled">
	<input type="radio">
	<input type="checkbox" disabled="disabled">
	<input type="image">
	<input type="file">
	<input type="submit">
	<input type="reset">
	<input type="button" value="버튼">
	<select>
	<option>지역번호</option>
	<option>052</option>
	<option>053</option>
	<option>02</option>
	<option>054</option>
	<option>055</option>
	</select>
</form>

</body>
</html>

JS

/**
 * 
 */

//기호필터 선택자
//제이쿼리의 기본문법
$(document).ready(function(){
	//속성선택자로 text입력란 선택
//	$("[type='text']").val("abcd");
	//	$("[type!='text']").val("abcd");

	//기호필터선택자
	//input type="text"인 태그 선택
	$(":text").val("abcd")
	//input type="password"인 태그 선택
	$(":password").val("abcd")
	//input type="radio"인 태그 선택
	$(":radio").val("abcd")
	//input type="checkbox"인 태그 선택
	$(":checkbox").val("abcd")
	//input type="image"인 태그 선택
	$(":image").val("abcd")
	//input type="file"인 태그 선택
	$(":file").val("abcd")
	//input type="submit"인 태그 선택
	$(":submit").val("abcd")
	//input type="reset"인 태그 선택
	$(":reset").val("abcd")
	//input type="button"인 태그 선택
	$(":button").val("abcd")
	
    //어떤게 더 좋고 나쁘고가 아닌 상황에 따라 코드수를 효율적으로 쓸 수 있는 방법을 생각해보고 쓰기
	
	//2.입력양식필터선택자
	$(":enabled").css("backgroundColor","red");
	
	$(":disabled").css("backgroundColor","yellow");
	
	setInterval(function(){
	var value=$("select > option:selected").val()
	alert(value)
	},5000)
	
	$("[type=text]:focus").css("backgroundColor","yellow")
},3000)
//커서를 블랭크안에 갖다대면 노란색으로 바뀜  3000 > 3초


})

 

결과

'Programming > JQuery' 카테고리의 다른 글

[JQuery/실습] 테이블 홀수행 , 짝수행에 배경색 넣기 / each() 배열  (0) 2020.10.27
[JQuery/실습] each 메소드  (0) 2020.10.27
[JQuery/실습] 속성 선택자 - 같은 속성선택자에 같은 CSS적용하기  (0) 2020.10.27
[JQuery/실습] 자식선택자 - JS에 CSS적용하기  (0) 2020.10.27
[JQuery/실습] 회원가입 폼 - 입력 아이디 유효성 체크  (0) 2020.10.27

'Programming/JQuery'의 다른글

  • 현재글[JQuery/실습] 필터선택자-기호필터선택자/입력양식필터선택자

관련글

티스토리툴바