학습한 내용
1. jQuery 함수
jQuery에서 가장 중요한 함수
JAVASCRIPT는 생성된 객체 멤버를
추가하는것이 자유롭다. 이것을 이용해 만들어진 라이브러리가 jQuery라이브러리
javaScript 에서 객체를 jQuery 함수에 매개변수로 넣어주면 객체에 jQuery에서 만든 여러 함수를 추가하여 반환
jQuery 함수는 jQurey(객체)형태로 작성하지만 JQery대신에 $(객체)로 작성할 수도 있다
javaScript와 window.onload와 흡사
Window.onload는 태그 객체가 모두 생성되면 발생되는 이벤트로 웹 화면이 처음 나타날 때 필요한 작업이 있다면 여기서 구현
javaScript와
jQuery 의 차이
> <script>
window.onload=fuction(){
var resul t= document.getElementById("result");
result.innerHTML="on load <br>";
}
</script>
2)ready함수
<script>
$<document).ready(function(){
$("#result").append("ready <br>");
});
</script>onload함수를 추가하는 형식으로 여러 개 만들었을 때,마지막 함수가
출력된다.
하지만 ready함수는 기대하는 만큼 코드를 작성하면 부루는 만큼 다 실행이 된다.
//onload
<script>
window.onload=fuction(){
var result= document.getElementById("result");
result.innerHTML +="on load 1<br>";
window.onload=fuction(){
var result= document.getElementById("result");
result.innerHTML +="on load 2<br>";
window.onload=fuction(){
var result= document.getElementById("result");
result.innerHTML +="on load 3<br>";
}
</script>
//ready
<script>
$(document).ready(function(){
$("#result").append("ready 1<br>");
});
$(document).ready(function(){
$("#result").append("ready 2<br>");
});
$(document).ready(function(){
$("#result").append("ready 3<br>");
});
</script>```
2.기본선택자 조합
2-1)선택자1,선택자2,동시에 여러 태그를 선택할 떄 사용
<script>
$(function(){
//$("div").css("background-color", "yellow");
//$("p").css("background-color","yellow");
$("div,p:).css("color","yellow");
//$("#a1").css("color","red");
//$("#a2").css("color","red");
$("#a1,#a2").css("color","red";
})
</script>
//body
<body>
<div id="a1">div 1</div>
<div>div 2</div>
<p id="a2">p 1</p>
<p>p 2</p>
<p>p 2</p>
</body>
jQuery 선택자
기본선택자
기본 선택자 조합
순서 필터 선택자
인덱스 필터 선택자
속성 선택자
상태 선택자
Form 태그 선택자
기본선택자
가장 기본이 되는 선택자, 다른 선택자는
기본 선택자를 조합하여 만듬
전체 선택자(*);HTML문서 내의 모든 태그를 선택
태그이름 선택자(태그이름) : 지정한 태그이름에 해당하는 태그 객체를 가져온다.
아이디 선택자(#아이디):ID 속성을 통해 태그 객체를 가져온다.
</script>
$(fuction(){
//전체
$("*").css("background-color","yellow");
//태그 지정자
$("p").css("background-color", "blue");
$("div").css("background-color","green");
})
</script>
</head>
<body>
<p>문자열1</p>
<p>문자열2</p>
<div>문자열3</div>
<div>문자열4</div>
</body>
<script>
$function(){
//id와 class지정자
$("#test1").css("color","blue");
$("#test2").css("color","red");
$(".test3").css("color","orange");
})
</script>
<body>
<p id="test1">문자열1</p>
<p class="test3">문자열2</p>
<div id="test2">문자열3</div>
<div class="test3">문자열4</div>
</body>
선택자1>선택자2"태그의 바로 하위의 태그들을 선택할 때 사용
선택자1 선택자2:태그 내부의 모든 태그들을 선택할 때 사용
<script>
$(function(){
//$("#a1>h1").css("background-color","yellow");
$("#a1 h1").css("background-color,"yellow");
});
</script>
</head>
<body>
<div id="a1">
<h1>자식 태그 h1</h1>
</div>
</div>
</body>
2-3)선택자1.선택자2:모든 선택자를
만족하는 태그를 선택
<script>
$(function(0{
$("div.a1").css("background-color", "yellow");
$("div.a2").css("background-color", "red");
$("p.a1").css("background-color", "purple");
$("p.a2").css("background-color", "blue");
});
</script>
</head>
<body>
<div class="a1">div a1</div>
<div class="a2">div a2</div>
<p class="a1">p a1</p>
<p class="a2">p a2</p>
</body>
2-4 선택자+선택자2: 선택자1태그바로
다음에 있는 선택자2 태그를 선택
선택자1~선택자2:선택자 1태그
다음에 있는 모든 선택자2태그를 선택
<script>
$(function(){
//선택자 a1 다음에 있는 p태그에 css적용
//$("#a1~p").css("background-color","yellow");
});
</script>
</head>
<body>
<p>p태그</p>
<p>p태그</p>
<p>p태그</p>
<p id="a1">p태그 a1</p>
<div>div 태그1</div>
<p>p태그</p>
<p>p태그</p>
<p>p태그</p>
<div>div 태그2</div>
<p>p태그</p>
<p>p태그</p>
<div>div 태그3</div>
<p>p태그</p>
<p>p태그</p>
</body>
```
학습 소감
jQuery를 사용하여 글자에 색깔과 스타일 주는게 신기하였다.
앞으로 더욱 연습하여 글자에 색깔과 스타일주는 연습을 많이해서 익숙해져야겠다. 학습한 내용중 어려웠던 점으로 태그 사용이 익숙하지 않아 어려웠다. 해결방법으로 많이 연습해야겠다.
열심히 배우자