<script>
$(function(){
//1. $("#ID๋ช
") : html ํ๊ทธ์ ID๋ฅผ ์ ํํ๋ค.
var item1 = $("#txt").val();
//2. $(".ํด๋์ค๋ช
") : html ํ๊ทธ์ ํด๋์ค๋ฅผ ์ ํํ๋ค.
var item2 = $(".hide").val();
//3. ํ๊ทธ์ ์์ฑ๊ฐ์ ์๊ณ ์ถ๋ค. (GET)
var attr = $("#txt").attr("type");
//4. ํ๊ทธ์ ์์ฑ๊ฐ์ ์
ํ๊ณ ์ถ๋ค. (SET)
$("#txt").attr("type", "๊ฐ")
//5. ํน์ HTML ์์ญ์ HTML ๊ฐ์ ์๊ณ ์ถ์ ๋.
$("#div3").html();
//6. ํน์ HTML ์์ญ์ HTML ๊ฐ์ ์
ํ๊ณ ์ถ์ ๋.
$("#div3").html("<h1> Hello </h1>");
//7. HTML ์ฝ๋ ์์ฒด๋ฅผ ์๊ณ ์ถ์ ๋.
$("#div4").text();
//8. HTML ์ฝ๋ ์์ฒด๋ฅผ ํ๋ฉด ์ถ๋ ฅํ๊ณ ์ ํ ๋.
$("#div4").text("<h1> Hello </h1>");
});
</script>
ํน์ ์์น์ ํ๊ทธ๋ฅผ ์ฝ์ ํ ๋.
<script>
$(function(){
//ํน์ ์์น์ ์ฝ์
: before(), after(), perpend(), append()
var elem = '<div><h1> ์ฝ์
๋ ๋ ์ด์์ </h1></div>';
$("#layer1").after(elem);
$("#layer3").before(elem);
$("#layer2").prepend(elem);
$("#layer2").append(elem);
});
</script>
์ฌ๋ฌ๊ฐ์ง ์ข ๋ฅ์ Selector(์ ํ์)
<script>
$(function(){
/*
class : $(".xxx")
ID : $("#.xxx");
name : $("input[name=xxx]")
class : $("input[class=xxx]") tag[์์ฑํค=์์ฑ๊ฐ]
$("div:eq(0)") = $("div").eq(0)
*/
var txt1 = $(".text1").val();
var txt2 = $("input[class=text2]").val();
var txt3 = $("input[name=text1]").val();
var txt4 = $("input[name=text2]").val();
var checkedRadio = $("input[name=rdo]:checked").val();
console.log(checkedRadio);
//h2 ํด๋์ค์์ ์ฒซ๋ฒ์งธ html ํ๊ทธ๋ง ๋ฆฌํด๋จ.
console.log($(".h2class").html());
//eq(n) n๋ฒ์งธ html ํ๊ทธ ๊ฐ์ ๊ฐ์ ธ์ด.
console.log($(".h2class:eq(1)").html());
});
</script>
CSS ์ ํ์
<style>
.sample1{
color:yellow;
font-weight:bold;
}
.sample2{
color:orange;
font-weight:bold;
}
</style>
<script>
$(function(){
//css()
/*$("div:eq(0)").css("color", "red");
$("div:eq(0)").css("font-weight", "bold");
$("div:eq(1)").css("color", "blue");
$("div:eq(1)").attr("style", "color:green; font-weight:bold;");*/
//addClass() : ํด๋์ค๋ช
์ ์ง์ ๋ ์
๋ ํฐ์ ์ถ๊ฐํ๋ค.
//removeClass() : ํด๋์ค๋ช
์ ์ง์ ๋ ์
๋ ํฐ์ ์ง์ด๋ค.
//hasClass() : ํด๋์ค๋ช
์ด ์ง์ ๋ ์
๋ ํฐ๋ก๋ถํฐ ์กด์ฌํ๋์ง ์ฌ๋ถ๋ฅผ ํ๋จํ๋ค.(true/false)
$("#divid1").addClass("sample1");
$("#divid2").addClass("sample2");
$("#divid2").removeClass("sample2");
var isHas = $("#divid2").hasClass("sample2");
console.log(isHas);
if( $("#divid1").hasClass("sample1")) {
console.log("divid has sample1 : ", isHas);
$("#divid1").removeClass("sample1");
}
});
</script>
๋๊ธ