<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- 파일에서 읽어와서 로딩하는 방법 -->
<p style="background-color: #ff0000">여기가 p태그</p> <!-- //빨강 -->
<p style="background-color: #00ff00">여기가 p태그</p> <!-- //초록 -->
<p style="background-color: #0000ff">여기가 p태그</p> <!-- //파랑 -->
<button>클릭시에 배경색을 취득</button>
<br><br>
<div id="news">로그중...</div>
<script type="text/javascript">
$(function () {
$("#news").load("news.txt", function (txt,status) { // news.txt. 는 새로 만든 파일이고 아무말이나 쳐놨음
if(status == "success"){
//alert("로딩 성공");
//alert(status);
//alert(txt);
}else if(status == "error"){
alert("로딩 실패");
}
});
$("button").click(function () {
//id 로 하는게 제일 좋다 setter 와 getter 는
//getter
//var color = $("p").css("background-color");
//alert("color = " + color);
//setter
//$("p").css("background-color","#ffff00");
$("p").css({
"background-color":"gray",
"font-size":"200%",
"border":"solid 5px red"
}); //css 지정
});
});
</script>
<!-- 이미지 크기를 변경하는 법 -->
<div id="q1">
<img alt="" src="neture.jpg">
</div>
<script type="text/javascript">
$(function() {
$(window).resize(function() { //윈도우 창의 사이즈를 바꿀 때 발생
alert("window resize");
$("#q1 img").css({
"width" : "640",
"height" : "480"
});
});
});
</script>
<br><br>
<ul class="list" id="list">
<li>coffee</li>
<li>tea</li>
<li>milk</li>
<li>water</li>
<li>green tea</li>
</ul>
<script type="text/javascript">
$(function() {
//list 의 길이 (개수)
var len = $("ul.list").children().length; //자식 노드를 가리킴
alert("list 의 길이(개수)는 " + len + "개 입니다");
$("ul.list").children().click(function() {
var cho = $("ul.list").children().index(this);
alert("선택한 list item 은 " + cho + "입니다");
});
});
</script>
<br>
<br>
<ul class="applist">
<li>오늘의 차</li>
</ul>
<script type="text/javascript">
$(function () {
var menu = new Array("coffee" , "tea" ,"milk");
//var menu = ["coffee" , "tea" ,"milk"];
for (var i = 0; i < menu.length; i++) {
$("ul.applist").append("<li>" + menu[i] + "</li>");
}
});
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
| Jquery(정리) (0) | 2018.08.09 |
|---|---|
| Jquery(9) append,prepend,after,before,remove,empty (0) | 2018.08.08 |
| Jquery(8) attr , prop, text,val (0) | 2018.08.08 |
| Jquery(7) 값 복사하기,radio,getter,setter,keyCode (0) | 2018.08.08 |
| Jquery(6) 2차원배열, td:eq(index) ,for문 (0) | 2018.08.08 |