<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
window.onload = function () { }
$(document).ready(function(){
});
jquery 에는 $(document).ready(function(){
});이 로직이 프로그램 실행되면 안의 로직을 읽는다.
</script>
<script>
window.onload = function () { }
$(document).ready(function () {
$($("input")[0]).css("backgroundColor", "red");
$("#b1").css("backgroundColor", "green");
$(".b2").css("backgroundColor", "blue");
$("h1").css("backgroundColor", "yellow");
});
</script>
<body>
<input type="button">
<input type="button" id="b1">
<input type="button" class="b2">
<h1>111</h1>
<h1>222</h1>
<h1>333</h1>
</body>
$() 안에는 선택자를 넣을 수 있다
1. 아이디
2. 클래스
3. 태그
$({
backgroundColor:"red",
border:"1px solid navy",
color:"blue"
})
처럼 array-like 처럼 사용할 수 있다
<script>
window.onload = function () { }
$(document).ready(function () {
$("h1").css({
backgroundColor: "red",
border: "1px solid navy",
color: "blue" //여러개의 값을 setting 할 수 있다
});
});
</script>
<body>
<h1>AAA</h1>
</body>
<script>
$(document).ready(function () {
$("h1").html("BBB"); //AAA대신 BBB가 적힌다
});
</script>
<body>
<h1>AAA</h1>
</body>
<script>
$(document).ready(function () {
var s = $($("h1")[1]).html();
console.log(s); //BBB만 출력됩니다~
});
</script>
<body>
<h1>AAA</h1>
<h1>BBB</h1>
<h1>CCC</h1>
</body>
$(document).ready(function () {
var s1 = $("h1").text(); //이텔릭체 없이 문자를 출력합니다, text는 테그 해석없이 문자들만 출력합니다~
console.log(s1);
var s2 = $("h1").html();//이텔릭체 적용된 문자를 출력합니다
console.log(s2);
});
</script>
<body>
<h1>AAA<i>BBB</i>CCC</h1>
var array =["red","green","blue"];
var num = 0;
$("h1").each(function(){
$(this).css("color",array[num++]);
}); //모든 테그에 적용되다,
});
</script>
<body>
<h1>AAA</h1>
<h1>BBB</h1>
<h1>CCC</h1>
</body>