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을 통해서 값을 가져옴
})
결과
'Programming > JQuery' 카테고리의 다른 글
[JQuery/실습] each 메소드 (0) | 2020.10.27 |
---|---|
[JQuery/실습] 필터선택자-기호필터선택자/입력양식필터선택자 (0) | 2020.10.27 |
[JQuery/실습] 자식선택자 - JS에 CSS적용하기 (0) | 2020.10.27 |
[JQuery/실습] 회원가입 폼 - 입력 아이디 유효성 체크 (0) | 2020.10.27 |
[JQuery] 배열관리 - each() 메서드 (0) | 2020.10.26 |