jquery 할때 편하게 복붙용
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function()
{ });
attr() : 태그의 속성을 변경하는 메소드
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function chg()
{
document.getElementById("aa").type="password";
}
$(function()
{
// 특정 이벤트시 실행하고자 할때 >> $("요소").이벤트( 익명함수 );
$(".btn").click(function()
{
alert($("#bb").attr("type"));
// 요소의 속성변경 >> $("요소").attr("속성명","값");
$("#bb").attr("type","password");
});
});
</script>
</head>
<body>
<input type="text" id="aa"> <span onclick="chg()">@</span><p>
<input type="text" id="bb"> <span class="btn">@</span><p>
</body>css() : 스타일 속성을 바꾸는 메소드
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function chg()
{
document.getElementById("aa").style.color="red";
}
$(function()
{
$("#bb").mouseover(function()
{
alert($("#bb").css("color")); // 하나만 적으면 속성 값을 읽어오기
$("#bb").css("color","blue");
});
});
</script>
</head>
<body>
<!-- css() : 스타일 속성을 변경하는 메소드 -->
<div id="aa" onmouseover="chg()"> 오늘은 즐거운 목요일입니다.</div><hr>
<div id="bb"> 내일은 금요일이군엿 ㅎㅎ </div>
</body>src에 img 값 바꿔서 사진 바꾸기
$(function()
{
$("#aa").click(function()
{
if($("#aa").attr("src") == "jj.jpg")
$("#aa").attr("src","a3.jpg");
else
$("#aa").attr("src","jj.jpg");
});
});
</script>
</head>
<body>
<!-- attr()을 이용하여 그림을 클릭하면 그림이 바뀔수 있게 하귀귀귀귀귀 -->
<img id="aa" src="jj.jpg" width="200">
</body>removeAttr 사용해서 속성 지워버리기
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function()
{
$("#btn").click(function()
{
$("#aa").removeAttr("value");
// input 태그의 type을 지우면 type이 없어지기 때문에 자동으로 type을 text로 인식
});
});
</script>
</head>
<body>
<!-- removeAttr() : 태그의 속성을 제거해앳! -->
<input type="button" value="text의 value속성지우기" id="btn">
<hr>
<input type="text" value="안녀앙하세영" id="aa">요소에 text 사용해서 글자넣기
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function inner()
{
document.getElementById("aa").innerText="오늘은 목요일";
}
$(function()
{
$("#btn").click(function()
{
$("#bb").text("내일은 금요일");
});
});
</script>
</head>
<body>
<input type="button" value="id='aa'에게 글자넣기" onclick="inner()">
<input type="button" value="id='bb'에게 글자넣기" id="btn">
<hr>
<div id="aa"></div><hr>
<div id="bb"></div>text()만 써서 텍스트의 값 가져오기
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function inner()
{
alert(document.getElementById("aa").innerText);
}
$(function()
{
$("#btn").click(function()
{
alert($("#bb").text());
});
});
</script>
</head>
<body>
<!--
text("텍스트") : 텍스트를 요소에 넣기
text() : 요소의 텍스트를 읽어오기 >> 요소내의 태그는 안가져옴
-->
<input type="button" value="id='aa' 내용가져오기" onclick="inner()">
<input type="button" value="id='bb' 내용가져오기" id="btn">
<hr>
<div id="aa">학교종이 땡땡쓰</div><hr>
<div id="bb">어서모이자쓰</div>
</body>단순 text만 출력하고 싶을땐 text사용 태그까지 같이 가져오고 싶으면
innerHTML사용
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function inner()
{
document.getElementById("aa").innerHTML="안녕 <b>친구</b>!!";
}
$(function()
{
$("#btn").click(function()
{
$("#bb").html("손목이 <b>아프다</b>"); // 태그까지 가져오고 싶을땐 html
});
});
</script>
</head>
<body>
<input type="button" value="id='aa' 내용가져오기" onclick="inner()">
<input type="button" value="id='bb' 내용가져오기" id="btn">
<hr>
<div id="aa">학교종이 땡땡쓰</div><hr>
<div id="bb">어서모이자쓰</div>
</body>
국비 코딩