반응형
06. jQuery 내려받기와 사용
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log("hello");
});
</script>
예제
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>07-01</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="content">
<div id="a">김수한무</div>
<div>거북이와 두루미</div>
<div class="test">삼천갑자 동방삭</div>
<div class="test main">치치카포 사리사리센타</div>
<div>
<span>워리워리 세브리깡</span>
<h1 id="a">무두셀라 구름이</h1>
</div>
<div id="b">허리케인에 담벼락</div>
<div class="test">허리케인에 담벼락</div>
<div class="main">담벼락에 서생원</div>
<div class="test">서생원에 고양이</div>
<div id="a">고양이에 바둑이</div>
<div>
<h1>바둑이는 돌돌이</h1>
</div>
</div>
</body>
</html>
chrome에서
$("#a").css("color","red") a라는 객체를 찾아서 red로 바꿔라
$("div").css("color","red") 모두 바꿔라
class는 디자인 적용할 때 쓰는것
. 이 클래스 의미
$(".test")
$("div#a").css("color" ,"blue") div에서 id가 a인것을 선택하고 싶다
$("div.header + div.content").hide() 숨겨주기 기능
p208
필터 선택자 :
$(document).ready(function() {
$("input:disabled").css("border","dash 2px gray");
$("#inquery").click(function(){
var v =$("#food option:selected").val();
if(v==""){
alert("음식을 선택하셔야 합니다.")
}else{
$("#result").val(v);
}
});
});
$("#nations>tbody>tr:nth-child(5n)").css("background-color","aqua");
5n은?? -> n을 5로 나눈 값이 0인 위치에 있는 값을 꺼내보겠다. 라는 의미(5,10,15,,,,)
3n+1? 3으로 나눈값이 1인애들
$("#keyword"). keyup (function(){
이벤트 / 이벤트 핸들러
});
반응형
'프로그래밍 언어 > jQuery' 카테고리의 다른 글
| 10. 요소 조작하기 (0) | 2019.02.14 |
|---|---|
| 08. 횡단 탐색하기 (0) | 2019.02.14 |
| 01. jQuery 시작하기 & 환경설정 (0) | 2019.02.13 |
