# jQuery시작
# JQuery
제이쿼리를 사용하기 위해선.
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>가 필요하다.
# $() 는 제이쿼리 객체.
# window.onload=function(){} 과 같은건
$(document).ready(function(){}); 임.
//문서가 로드된후 실행되는곳.
# $대신에 jQuery 사용가능.
jQuery(document).ready(function(){});
# jQuery를 통해서 원하는 element를 가져오는 3가지 방법(선택자이용)
1.element의 태그명을 이용해서 호출하는 방법
2.css class속성을 이용하는 방법
3.id속성을 이용하는 방법
[ex]
<html>
<head>
<title>제목</title>
<style type="text/css">
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
alert($("#obj1").text());
alert($(".obj2").text());
alert($("span").text());
});
</script>
</head>
<body>
<div id="obj1">aaa</div>
<div class="obj2">bbb</div>
<span>ccc</span>
</body>
</html>
==============================================
# $(선택자).text() //종료태그가 있는 곳에만 사용가능..
var a=$(선택자).text(); //getter효과
$(선택자).text("1a2a3a4a"); //setter효과
[ex]
$("div")[0].text("<font color=red>bbb</font>"); //$("div")[0]은 제이쿼리 객체가 아니라서 오류.
$($("div")[0]).text("<font color=red>bbb</font>"); //이렇게 해야 함.
# $(선택자).html()
innerHTML이랑 비슷함.
HTML 소스가 적용됨.
[ex]
<html>
<head>
<title>제목</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$($("div")[0]).text("<font color=red>bbb</font>");
$($("div")[1]).html("<font color=red>bbb</font>");
alert($("#oDiv").text());
alert($("#oDiv").html());
});
</script>
</head>
<body>
<div>aaa</div>
<div>aaa</div>
<div id="oDiv"><b>ccc</b></div>
</body>
</html>
# $(선택자).css()
[ex]
<html>
<head>
<title>제목</title>
<style type="text/css">
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script>
$(document).ready(function() {
$("#b1").css("backgroundColor", "hotpink"); //(속성명,값)
$("#b1").css("color", "white"); //인자값이 2개면 셋팅의 효과
$("#b2").css({
backgroundColor : "yellow",
color : "navy",
border : "2 solid tomato"
}); //여러개 셋팅할때
$("#oDiv").text($("#b2").css("backgroundColor"));
});
</script>
</head>
<body>
<input type="button" id="b1">
<input type="button" id="b2">
<div id="oDiv"></div>
</body>
</html>
===================================================
# 자바스크립트 map형태
var a={ 키:값, 키:값, 키:값, ....};
//키는 쌍따옴표생략가능, 값은 쌍따옴표 생략하면 안됨(변수라 생각하기때문)
[ex] 다음결과가 나오도록 //here을 완성하시오.
var a={
"b":100,
"c":"d",
"e":function(){return 200;},
"f":[300,400,500]
};
document.write(//here); //100
document.write(//here); //200
document.write(//here); //300
document.write(//here); //400
document.write(//here); //500
[an]
var a={
"b":100,
"c":"d",
"e":function(){return 200;},
"f":[300,400,500]
};
document.write(a.b); // a["b"],a['b'] 가능
document.write(a.e()); //
document.write(a.f[0]); //
document.write(a.f[1]); // a["f"][1]도 가능
document.write(a.f[2]); //
=============================================
# css(properties) : 리턴형 : jQuery
$("span").css({
"color":"navy",
"backgroundColor":"gray"
}).html("asd");
[ex]div를 css로 꾸미고, 실행했을때 abc가 홍길동으로 바뀌게 하시오
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
//here
});
</script>
</head>
<body>
<div id="a">abc</div>
</body>
</html>
[an]
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("#a").css({
backgroundColor:"tomato",
color:"skyblue"
}).text("홍길동");
});
</script>
</head>
<body>
<div id="a">abc</div>
</body>
</html>
# attr
[ex]
<html>
<head>
<title>제목</title>
<style type="text/css">
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script>
$(document).ready(function() {
alert($("#b1").attr("value")); //매개변수가 하나면 얻어오는효과
$("#b2").attr("value", "ccc"); //두개이면 셋팅의 효과
});
</script>
</head>
<body>
<input type="button" id="b1" value="aaa">
<input type="button" id="b2" value="bbb">
</body>
</html>
# append
[ex]
<html>
<head>
<title>제목</title>
<style type="text/css">
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script>
$(document).ready(function() {
$("ol").append("<li>ccc</li>");
});
</script>
</head>
<body>
<ol>
<li>aaa</li>
<li>bbb</li>
</ol>
</body>
</html>
# appendTo
[ex]
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script>
$(document).ready(function() {
$("#a").appendTo($("body"));
});
</script>
</head>
<body>
<div id="a" style="background: yellow">aaa</div>
<div id="b" style="background: green">bbb</div>
</body>
</html>
#prepend() : 해당객체 앞에다가 추가.
[ex]
<html>
<head>
<title>제목</title>
<style type="text/css">
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script>
$(document).ready(function() {
$("p").prepend($("b"));
$("div").text($("p").html());
});
</script>
</head>
<body>
<p>aaa</p>
<b>bbb</b>
<hr>
<div></div>
</body>
</html>
# 이벤트
[sy]
$(document).ready(function(){
$().이벤트명();
});
[ex]버튼을 누르면 text에 홍길동이 출력되도록 here을 완성하시오.
<html>
<head>
<title>제목</title>
<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery-2.2.1.min.js">
</script>
<script>
$(document).ready(function() {
//here
});
</script>
</head>
<body>
<input type="button" value="눌러" id="b1">
<input type="text" id="t1">
</body>
</html>
[an] text() 사용 못합니다. input은 종료태그가 없기때문~
<html>
<head>
<title>제목</title>
<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery-2.2.1.min.js">
</script>
<script>
$(document).ready(function() {
$( "#b1" ).click(function() {
$("#t1").attr("value","홍길동");
});
});
</script>
</head>
<body>
<input type="button" value="눌러" id="b1">
<input type="text" id="t1">
</body>
</html>
# each() : 콜백함수
[ex] 자바스크립트코드로 짠것
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script>
$(document).ready(function() {
$("div").each(function(a, b) { //a는 인덱스 , b는 div객체의 주소값
alert(a + "," + b);
});
});
</script>
</head>
<body>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</body>
</html>
[ex] jQuery 소스로 짠것.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script>
$(document).ready(function() {
$("div").each(function(a, b) {
alert($($("div")[a]).text());
});
});
</script>
</head>
<body>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</body>
</html>
[ex-1]
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script>
$(document).ready(function() {
$("div").each(function(a, b) {
alert($(b).text());
});
});
</script>
</head>
<body>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</body>
</html>
==================================================
# checked
[ex]
$("input:checked") --> input 태그에서 체크된것 주소 가져옴.