1. 셀렉트된 엘리먼트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉트된 엘리먼트</title>
<style type="text/css">
div{width: 60px; height: 60px;
margin: 5px; float: left;
border: 2px white solid;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("div").css("background","yellow")
.not(".middle")
.css("border-color","red");
});
</script>
</head>
<body>
<div id="first"></div>
<div id="second" class="middle"></div>
<div id="third" class="middle"></div>
<div id="fourth" class="middle"></div>
<div id="five" class="middle"></div>
<div id="sixth" ></div>
</body>
2. 셀렉트된 엘리먼트들 중에서 원하는 범위의 엘리먼트만 반환
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉트된 엘리먼트들 중에서 원하는 범위의 엘리먼트만 반환</title>
<style type="text/css">
div{
width: 60px; height: 60px;
margin: 5px; float: left;
border: 2px blue solid;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
// 셀렉터로 얻어낸 확장 집합 객체가 여러번 사용될 경우
// 변수로 저장해 둔다.
var $div = $('div');
// div 엘리먼트 중에 2 이상 3 미만
$div.slice(1,2).css("background",'#cecece');
$div.slice(2,3).css("background",'yellow');
// end 가 생략된 상태에서 begin 만 기술하면 begin 부터 끝까지
$div.slice(4).css("background",'pink');
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<button>노란색 입히기</button>
</body>
</html>
3. 해당 엘리먼트의 자식 엘리먼트 찾기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트의 자식 엘리먼트 찾기</title>
<style type="text/css">
span {color: blue}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("div").children().css("border-bottom","3px double green");
$("div").children(".selected").css("color","red");
$('div').contents().remove("span");
});
});
//children : 특정 엘리먼트의 자식 엘리먼트를 찾는다
// 텍스트 노드는 포함하지 않는다
//contents : 텍스트 노드를 포함한 특정 엘리먼트의 자식 엘리먼트를
// 반환한다
</script>
</head>
<body>
<button>엘리먼트에 스타일 입히기</button>
<p>아름다운 우리나라 라일락 향기</p>
<div><span class="selected">이곳은 div 차일드 span 입니다.</span></div>
<p>
이곳은 <span> 또다른 </span> 문장 입니다.
</p>
<div>
마지막으로 <span> 이곳은 div 차일드이고 </span>
이곳은 div 입니다.
</div>
</body>
</html>
4. 해당 엘리먼트 뒤에 위치하는 형제 엘리먼트 찾기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트 뒤에 위치하는 형제 엘리먼트 찾기</title>
<style type="text/css">
div, span{
width: 60px; height: 60px;
margin: 5px; float: left;
border: 2px red solid;
background: white;
}
.after {background: pink;}
.selected{border: 5px blue solid;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("div").next().addClass("after");
$("div").next("#fourth").addClass("selected");
});
});
//.next : 엘리먼트의 형제 엘리먼트 가운데 바로 다음 엘리먼트를 반환
</script>
</head>
<body>
<p>
<button>형제 엘리먼트에 스타일 입히기</button>
</p>
<div id="first">first</div>
<span id="second" class="middle">
sibling
<div id="child">child</div>
</span>
<div id="third" class="middle">slbling</div>
<span id="fourth" class="middle">slbling</span>
<span id="fifth" class="middle">slbling</span>
<div id="six">slbling</div>
</body>
</html>
5. 해당 엘리먼트 뒤에 위치하는 형제 엘리먼트 찾기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트 뒤에 위치하는 형제 엘리먼트 찾기</title>
<style type="text/css">
div, span {
width: 60px; height: 60px;
margin: 5px; float: left;
border: 2px red solid;
background: white;
}
.after {background: pink;}
.selected {border: 5px blue solid;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("div").nextAll().addClass("after");
$("div").nextAll("span").addClass("selected");
});
});
// .nextAll : 특정 엘리먼트의 형제 엘리먼트 가운데
// 이후 엘리먼트 반환
</script>
</head>
<body>
<p><button>형제 엘리먼트에 스타일 입히기</button></p>
<div id="first">first</div>
<span id="second" class="middle">
sibling
<div id="child">child</div>
</span>
<div id="third" class="middle">sibling</div>
<span id="fourth" class="middle">sibling</span>
<span id="fifth" class="middle">sibling</span>
<div id="sixth">last</div>
</body>
</html>
6. 해당 엘리먼트 앞에 위치하는 형제 엘리먼트 찾기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트 앞에 위치하는 형제 엘리먼트 찾기</title>
<style type="text/css">
div, span {
width: 60px; height: 60px;
margin: 5px; float: left;
border: 2px red solid;
background: white;
}
.before {background: yellow;}
.selected {border: 5px blue solid;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("span").prev().addClass("before");
$("span").prev("#fourth").addClass("selected");
});
});
// .prev : 엘리먼트의 형제 엘리먼트 가운데 바로 이전 엘리먼트 반환
</script>
</head>
<body>
<p><button>형제 엘리먼트에 스타일 입히기</button></p>
<div id="first">first</div>
<span id="second">sibling
<div id="child">child</div>
</span>
<div id="third" class="middle">sibling</div>
<span id="fourth" class="middle">sibling</span>
<span id="fifth" class="middle">sibling</span>
<div id="sixth">last</div>
</body>
</html>
7. 해당 엘리먼트 앞에 위치하는 형제 엘리먼트 모두 찾기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트 앞에 위치하는 형제 엘리먼트 모두 찾기</title>
<style type="text/css">
div, span {
width: 60px; height: 60px;
margin: 5px; float: left;
border: 2px red solid;
background: white;
}
.before {background: yellow;}
.selected {border: 5px blue solid;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("span").prevAll("span, div").addClass("before");
});
});
</script>
</head>
<body>
<p><button>형제 엘리먼트에 스타일 입히기</button></p>
<div id="first">first</div>
<span id="second">sibling
<div id="child">child</div>
</span>
<div id="third" class="middle">sibling</div>
<span id="fourth" class="middle">sibling</span>
<span id="fifth" class="middle">sibling</span>
<div id="sixth">last</div>
</body>
</html>
8. 해당 엘리먼트와 같은 노드 위치의 모든 형제 엘리먼트 찾기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트와 같은 노드 위치의 모든 형제 엘리먼트 찾기</title>
<style type="text/css">
ul{float: left;margin: 5px;font-size: 16px;font-weight: bold;}
p{color: blue;margin: 10px 20px;
font-size: 16px;padding: 5px; font-weight: bolder;}
.yellow{background: yellow;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
var len = $(".yellow").siblings()
.css("color","red")
.length;
$("b").text(len);
});
</script>
</head>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li class="yellow">Three</li>
<li>Four</li>
</ul>
<ul>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
</ul>
<ul>
<li>Eight</li>
<li class="yellow">Nine</li>
<li>Ten</li>
<li>Eleven</li>
</ul>
<p>
찾은 형제 엘리먼트 갯수 : <b></b>
</p>
</body>
</html>
9. 해당 엘리먼트의 부모 엘리먼트 찾기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트의 부모 엘리먼트 찾기</title>
<script type="text/javascript" src="../js/jquery.js">
</script>
<script type="text/javascript">
$(function() {
var result = new Array();
$("b").parents()
.each(function(i) {
result[i] = this.tagName;
});
$("b").append(result.reverse().join(", "));
});
</script>
</head>
<body>
<div>
<p>
<span>
<b> 나의 부모 엘리먼트를 검색 </b>
</span>
</p>
</div>
</body>
</html>
10. 셀렉트된 엘리먼트중 자손 엘리먼트 찾기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉트된 엘리먼트중 자손 엘리먼트 찾기</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("p").find("em").css("color","red");
});
</script>
</head>
<body>
<div> P 엘리먼트 중에서 <em> 이텔릭 단어의 </em></div>
<p> 글자색을 <em> 빨강색으로 </em> 변경한다 </p>
</body>
</html>
11. 해당 엘리먼트에 자식 엘리먼트 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트에 자식 엘리먼트 추가</title>
<style type="text/css">
div {float: left; margin: 25pt}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
var fruits = ["apple","banana","orange","melon"];
var cars = ["sonata","grandure","genesis"];
$.each(fruits, function(index,value) {
//$("#fruit_list").append($("<li>" + value + "</li>"));
$("#fruit_list").prepend($("<li>" + value + "</li>"));
});
$.each(cars,function(index,value){
//$("<li>" + value + "</li>").appendTo("#car_list");
$("<li>" + value + "</li>").prependTo("#car_list");
});
});
</script>
</head>
<body>
<div>
<b>내가 좋아 하는 과일</b>
<ul id="fruit_list"></ul>
</div>
<div>
<b>갖고 싶은 차</b>
<ul id="car_list"></ul>
</div>
</body>
</html>
12. 해당 엘리먼트에 자식 엘리먼트 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트에 자식 엘리먼트 추가</title>
<style type="text/css">
span{display: block;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("span").append($('b'));
//$("p").append($('b'));
});
</script>
</head>
<body>
<b> 수박 </b>
<p>비오는 화요일</p>
<span>먹고 싶은 과일 </span>
<span>갖고 싶은 과일 </span>
</body>
</html>
13. 해당 엘리먼트에 형제 엘리먼트 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트에 형제 엘리먼트 추가</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
//$('header').after($('<div> 좋아 하는 과일 : 수박 </div>'));
$('footer').before($('<div> 좋아 하는 과일 : 수박 </div>'));
//$("<div> 싫어 하는 과일 : 신포도 </div>").insertAfter($('header'));
$("<div> 싫어 하는 과일 : 신포도 </div>").insertBefore($('footer'));
});
</script>
</head>
<body>
<header><h1>과일~~~~</h1></header>
<footer><h3><i>copyright korea@daum.net</i></h3></footer>
</body>
</html>
14. 해당 엘리먼트를 원하는 엘리먼트로 감싸기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트를 원하는 엘리먼트로 감싸기</title>
<style type="text/css">
.border{
border: 2px solid red;
margin: 10px;
padding: 0px 30px;
float: left;
width: 60px;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("p").wrapAll("<div class='border'></div>");
});
</script>
</head>
<body>
<p>비오는 화요일</p>
<div>
<p>시원한 화요일</p>
</div>
<p>야구를 할수 있으려나~~~</p>
<p>야구가 없으면 볼게 없네</p>
</body>
</html>
15. 해당 엘리먼트 내용 비우기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>해당 엘리먼트 내용 비우기</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function name(){
$("p").remove();
});
});
//.empty() : 텍스트를 포함한 하위 엘리먼트를 제거한다
</script>
</head>
<body>
<button> 엘리먼트 삭제 </button>
<div>
<p> 비오는 화요일 </p>
시원한 화요일
</div>
<p> <span> 청계천 잉어 </span> </p>
<p> 먹고 싶다.~~~~ </p>
</body>
</html>
16. 엘리먼트의 넓이값 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트의 넓이값 변경</title>
<style type="text/css">
div{
width: 70px; height: 50px; float: left;
background-color: red; cursor: pointer;
margin: 5px;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
// 클릭 한회 발생 처리
$("div").one("click",function(){
$(this).width(30)
.css({cursor:"auto", backgroundColor:"blue"});
// width() => 인자 없이 사용되면 가로 길이 설정
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
17. margin 을 포함한 넓이와 높이 값 알아내기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin 을 포함한 넓이와 높이 값 알아내기</title>
<style type="text/css">
div {
width: 70px; height: 50px;
background-color: red; cursor: pointer;
margin: 10px;
}
span {display: block;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
var div = $("div:first"); // 여러번 사용되는 경우
// 확장 집합 객체를 변수에 저장한다
$('#result1').text("outerWidth : " + div.outerWidth() +
" outerWidth(true) : " + div.outerWidth(true));
// margin 을 포함한 넓이
$('#result2').text("outerHeight : " + div.outerHeight() +
" outerHeight(true) : " + div.outerHeight(true));
// margin 을 포함한 넓이
});
</script>
</head>
<body>
<div></div>
<span id ="result1"></span>
<span id ="result2"></span>
</body>
</html>
18. Dom 엘리먼트에 이벤트 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dom 엘리먼트에 이벤트 적용</title>
<style type="text/css">
ul{float: left;margin: 30px;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("a").bind("click",function(){
$("img").attr("src",$(this).attr("href"));
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="../images/image3.jpg">똘이 모습</a></li>
<li><a href="../images/image4.jpg">을 모습</a></li>
<li><a href="../images/a1.jpg">안철수 모습</a></li>
</ul>
<img />
</body>
</html>
19. Dom 엘리먼트 하나에 여러가지 이벤트 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dom 엘리먼트 하나에 여러가지 이벤트 적용</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#button2").bind({
mouseout : function() {
$("img#button2")
.attr("src","../images/but1.gif");
},
mouseover :function(){
$("img#button2")
.attr("src","../images/but2.gif");
},
click : function() {
alert("click \n 하하하하하");
}
});
$("#button1").bind({
mouseout : function() {
$("img#button1").attr("src","../images/a2.png");
},
mouseover :function(){
$("img#button1").attr("src","../images/a1.png");
},
click : function() {
alert("2번째 버튼 \n 하하하하하");
}
});
});
</script>
</head>
<body>
<img alt="hi~~~" src="../images/but1.gif" id= "button2">
<img alt="hi~~~" src="../images/a2.png" id="button1">
</body>
</html>
20. 이벤트 이미지 확대
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 이미지 확대</title>
<style type="text/css">
img{width: 140px;height: 120px;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var abc = 0;
$(function() {
$("img").bind("click",function(){
var $target = $(this); // $(event.target);
$target.width($target.width()*2);
$target.height($target.height()*2);
abc ++;
if(abc > 2){
$target.unbind();
}
});
});
</script>
</head>
<body>
<img src="../images/im18.jpg"/>
</body>
</html>
'제이쿼리(jQuery)' 카테고리의 다른 글
5. jQuery (제이쿼리) 마지막 (0) | 2017.04.20 |
---|---|
4. jQuery (제이쿼리) (0) | 2017.04.19 |
2. jQuery (제이쿼리) (0) | 2017.04.17 |
1. jQuery (제이쿼리) (0) | 2017.04.13 |