테스토리 :: 테스토리

3. jQuery (제이쿼리)

2017. 4. 18. 12:31

1. 셀렉트된 엘리먼트

<!DOCTYPE html>

<html>

<head>

div{width: 60px; height: 60px;

margin: 5px; float: left;

border: 2px white solid;

}

</style>

$(function() {

$("div").css("background","yellow")

.not(".middle")

.css("border-color","red");

});

</script>

</head>

<body>

</body>

2. 셀렉트된 엘리먼트들 중에서 원하는 범위의 엘리먼트만 반환

<!DOCTYPE html>

<html>

<head>

<title>셀렉트된 엘리먼트들 중에서 원하는 범위의 엘리먼트만 반환</title>

div{

width: 60px; height: 60px;

margin: 5px; float: left;

border: 2px blue solid;

}

</style>

$(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>

</body>

</html>

3. 해당 엘리먼트의 자식 엘리먼트 찾기

<!DOCTYPE html>

<html>

<head>

<title>해당 엘리먼트의 자식 엘리먼트 찾기</title>

span {color: blue}

</style>

$(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>

이곳은 <span> 또다른 </span> 문장 입니다.

</p>

<div>

마지막으로 <span> 이곳은 div 차일드이고 </span>

이곳은 div 입니다.

</div>

</body>

</html>

4. 해당 엘리먼트 뒤에 위치하는 형제 엘리먼트 찾기

<!DOCTYPE html>

<html>

<head>

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>

$(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>

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>

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>

$(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>

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>

</body>

</html>

6. 해당 엘리먼트 앞에 위치하는 형제 엘리먼트 찾기

<!DOCTYPE html>

<html>

<head>

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>

$(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>

</body>

</html>

7. 해당 엘리먼트 앞에 위치하는 형제 엘리먼트 모두 찾기

<!DOCTYPE html>

<html>

<head>

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>

$(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>

</body>

</html>

8. 해당 엘리먼트와 같은 노드 위치의 모든 형제 엘리먼트 찾기

<!DOCTYPE html>

<html>

<head>

<title>해당 엘리먼트와 같은 노드 위치의 모든 형제 엘리먼트 찾기</title>

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>

$(function() {

var len = $(".yellow").siblings()

.css("color","red")

.length;

$("b").text(len);

});

</script>

</head>

<body>

<ul>

<li class="yellow">Three</li>

</ul>

<ul>

<li>Seven</li>

</ul>

<ul>

<li>Eight</li>

<li>Eleven</li>

</ul>

<p>

찾은 형제 엘리먼트 갯수 : <b></b>

</p>

</body>

</html>

9. 해당 엘리먼트의 부모 엘리먼트 찾기

<!DOCTYPE html>

<html>

<head>

<title>해당 엘리먼트의 부모 엘리먼트 찾기</title>

</script>

$(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>

<title>셀렉트된 엘리먼트중 자손 엘리먼트 찾기</title>

$(function() {

$("p").find("em").css("color","red");

});

</script>

</head>

<body>

<p> 글자색을 <em> 빨강색으로 </em> 변경한다 </p>

</body>

</html>

11. 해당 엘리먼트에 자식 엘리먼트 추가

<!DOCTYPE html>

<html>

<head>

<title>해당 엘리먼트에 자식 엘리먼트 추가</title>

div {float: left; margin: 25pt}

</style>

$(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>

</div>

<div>

</div>

</body>

</html>

12. 해당 엘리먼트에 자식 엘리먼트 추가

<!DOCTYPE html>

<html>

<head>

<title>해당 엘리먼트에 자식 엘리먼트 추가</title>

span{display: block;}

</style>

$(function() {

$("span").append($('b'));

//$("p").append($('b'));

});

</script>

</head>

<body>

</body>

</html>

13. 해당 엘리먼트에 형제 엘리먼트 추가

<!DOCTYPE html>

<html>

<head>

<title>해당 엘리먼트에 형제 엘리먼트 추가</title>

$(function() {

//$('header').after($('<div> 좋아 하는 과일 : 수박 </div>'));

$('footer').before($('<div> 좋아 하는 과일 : 수박 </div>'));

//$("<div> 싫어 하는 과일 : 신포도 </div>").insertAfter($('header'));

$("<div> 싫어 하는 과일 : 신포도 </div>").insertBefore($('footer'));

});

</script>

</head>

<body>

<footer><h3><i>copyright korea@daum.net</i></h3></footer>

</body>

</html>

14. 해당 엘리먼트를 원하는 엘리먼트로 감싸기

<!DOCTYPE html>

<html>

<head>

<title>해당 엘리먼트를 원하는 엘리먼트로 감싸기</title>

.border{

border: 2px solid red;

margin: 10px;

padding: 0px 30px;

float: left;

width: 60px;

}

</style>

$(function() {

$("p").wrapAll("<div class='border'></div>");

});

</script>

</head>

<body>

<div>

</div>

</body>

</html>

15. 해당 엘리먼트 내용 비우기

<!DOCTYPE html>

<html>

<head>

$(function(){

$("button").click(function name(){

$("p").remove();

});

//.empty() : 텍스트를 포함한 하위 엘리먼트를 제거한다

</script>

</head>

<body>

<div>

시원한 화요일

</div>

</body>

</html>

16. 엘리먼트의 넓이값 변경

<!DOCTYPE html>

<html>

<head>

<title>엘리먼트의 넓이값 변경</title>

div{

width: 70px; height: 50px; float: left;

background-color: red; cursor: pointer;

margin: 5px;

}

</style>

$(function() {

// 클릭 한회 발생 처리

$("div").one("click",function(){

$(this).width(30)

.css({cursor:"auto", backgroundColor:"blue"});

// width() => 인자 없이 사용되면 가로 길이 설정

});

</script>

</head>

<body>

</body>

</html>

17. margin 을 포함한 넓이와 높이 값 알아내기

<!DOCTYPE html>

<html>

<head>

<title>margin 을 포함한 넓이와 높이 값 알아내기</title>

div {

width: 70px; height: 50px;

background-color: red; cursor: pointer;

margin: 10px;

}

span {display: block;}

</style>

$(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>

</body>

</html>

18. Dom 엘리먼트에 이벤트 적용

<!DOCTYPE html>

<html>

<head>

<title>Dom 엘리먼트에 이벤트 적용</title>

ul{float: left;margin: 30px;}

</style>

$(function() {

$("a").bind("click",function(){

$("img").attr("src",$(this).attr("href"));

return false;

});

</script>

</head>

<body>

<ul>

</ul>

<img />

</body>

</html>

19. Dom 엘리먼트 하나에 여러가지 이벤트 적용

<!DOCTYPE html>

<html>

<head>

$(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>

</body>

</html>

20. 이벤트 이미지 확대

<!DOCTYPE html>

<html>

<head>

img{width: 140px;height: 120px;}

</style>

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>

</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

PREV 1 2 3 4 5 6 ···50 NEXT

테스토리

3. jQuery (제이쿼리)

1. 셀렉트된 엘리먼트

2. 셀렉트된 엘리먼트들 중에서 원하는 범위의 엘리먼트만 반환

3. 해당 엘리먼트의 자식 엘리먼트 찾기

4. 해당 엘리먼트 뒤에 위치하는 형제 엘리먼트 찾기

5. 해당 엘리먼트 뒤에 위치하는 형제 엘리먼트 찾기

6. 해당 엘리먼트 앞에 위치하는 형제 엘리먼트 찾기

7. 해당 엘리먼트 앞에 위치하는 형제 엘리먼트 모두 찾기

8. 해당 엘리먼트와 같은 노드 위치의 모든 형제 엘리먼트 찾기

9. 해당 엘리먼트의 부모 엘리먼트 찾기

10. 셀렉트된 엘리먼트중 자손 엘리먼트 찾기

11. 해당 엘리먼트에 자식 엘리먼트 추가

12. 해당 엘리먼트에 자식 엘리먼트 추가

13. 해당 엘리먼트에 형제 엘리먼트 추가

14. 해당 엘리먼트를 원하는 엘리먼트로 감싸기

15. 해당 엘리먼트 내용 비우기

16. 엘리먼트의 넓이값 변경

17. margin 을 포함한 넓이와 높이 값 알아내기

18. Dom 엘리먼트에 이벤트 적용

19. Dom 엘리먼트 하나에 여러가지 이벤트 적용

20. 이벤트 이미지 확대

'제이쿼리(jQuery)' 카테고리의 다른 글

+ Recent posts

티스토리툴바