728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220422/jquery3.html -->
<html>
<head>
<meta charset="UTF-8">
<title>jquery 선택자 사용</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> //Jquery
</script>
<script type="text/javascript">
$(function(){
$("ul").css("color","green")
$("div ul").css("color","red")
$("div > ul").css("color","blue")
})
</script>
</head>
<body>
ul태그의 글자색을 초록색으로 설정하기<br>
div 태그의 하위 ul태그의 글자색을 빨강색으로 설정하기<br>
div 태그의 자식태그인 ul태그의 글자색을 파랑색으로 설정하기<br>
<div>
<ul>
<li>사과</li>
<li>복숭아</li>
<li>감</li>
<li>참외</li>
</ul>
</div>
<div>
<span>
<ul>
<li>사과</li>
<li>복숭아</li>
<li>감</li>
<li>참외</li>
</ul>
</span>
</div>
<ul>
<li>사과</li>
<li>복숭아</li>
<li>감</li>
<li>참외</li>
</ul>
<hr>
input 태그 중 type 속성값이 text인 태그의 value 속성값에 hello jquery 값 추가하기<br>
<input type="text"><br>
<script type="text/javascript">
$("input[type=text]").val("hello jquery")
//input 태그의 value 값을 alert창으로 출력하기
alert($("input[type=text]").val())
//input태그의 type 속성의 값이 te로 시작하는 태그의 글자 색을 파랑색으로 설정
$("input[type^=te]").css("color","blue")
//input태그의 type 속성의 값이 xt로 끝나는 태그의 글자 색을 노랑색으로 설정
$("input[type$=xt]").css("color","yellow")
</script>
<hr>
input 태그 중 type속성의 값이 button 태그의 value 값을 등록으로 설정하기<br>
<input type="button" value="버튼"><br>
<script type="text/javascript">
// $("input[type=button]").val("등록")
// $("input[type^=bu]").val("등록")
// $("input[type$=on]").val("등록")
$("input:button").val("등록")
</script>
<hr>
input 태그 중 radio, checkbox 를 선택하기<br>
<input type="radio">라디오버튼<br>
<input type="checkbox">선택박스버튼<br>
<script type="text/javascript">
// 속성명 속성값
$("input:radio").attr("checked","checked")
$("input:checkbox").attr("checked","checked")
</script>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 21. Jquery each 함수(let arr=, $.each) (0) | 2022.04.22 |
|---|---|
| [Jquery] 21. Jquery 반복문 (nth-child, odd, even, $.each(), let colors = []) (0) | 2022.04.22 |
| [Jquery] 21. Jquery table 태그 다루기(nth-child, tr:first, tr:last, tr:eq) (0) | 2022.04.22 |
| [Jquery] 21. Jquery alert창 띄우기(setTimeout) (0) | 2022.04.22 |
| [Jquery] 21. Jquery (태그, 속성 글자색 변경) (0) | 2022.04.22 |