테스토리 :: 테스토리

4. jQuery (제이쿼리)

2017. 4. 19. 13:00

1. 더블 클릭 이벤트

<!DOCTYPE html>

<html>

<head>

img{width: 40px; height: 30px;}

</style>

$(function() {

$("img").dblclick(function() {

var $target = $(event.target);

$target.width($target.width() +20);

$target.height($target.height() +20);

});

</script>

</head>

<body>

</body>

</html>

2. 마우스를 누르면 파란색, 놓으면 빨강색 배경

<!DOCTYPE html>

<html>

<head>

div{

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

background-color: red; cursor: pointer;

margin: 5px;

}

</style>

$(function() {

/*$("div").mousedown(function(event) {

$(event.target).css("backgroundColor","blue");

});

$("div").mouseup(function(event) {

$(event.target).css("backgroundColor","red");

}); */

$("div").bind({

mousedown : function(event) {

$(event.target).css("backgroundColor","blue");

mouseup : function(event) {

$(event.target).css("backgroundColor","red");

}

});

</script>

</head>

<body>

</body>

</html>

3. 마우스가 움직인곳의 위치 알아내기

<!DOCTYPE html>

<html>

<head>

<title>마우스가 움직인곳의 위치 알아내기</title>

div{width: 200px; height: 150px;

background-color: red; cursor: pointer;

margin: 30px;

}

</style>

$(function() {

$("div").mousemove(function(event){

$("p:first").html('웹 브라우져를 기준으로 한 X 좌표 : ' + event.clientX +

'<br/> 웹 브라우져를 기준으로 한 Y 자표 : ' + event.clientY + "<br/>");

$("p:last").html('화면을 기준으로 한 X 좌표 : ' + event.screenX +

'<br/> 화면을 기준으로 한 Y 자표 : ' + event.screenY + "<br/>");

});

</script>

</head>

<body>

</body>

</html>

4. 포커스를 받으면 글씨를 지우고 포커스를 잃으면 글씨 나타내기

<!DOCTYPE html>

<html>

<head>

$(function() {

$("input").val("아이디를 입력해주세요").css("color","#f00");

$("input").bind("focus",function(event){

$(event.target).val("").css("color","#000");

});

$("input").blur(function(event){

if($(event.target).val() == ""){

$(event.target).val("아이디를 입력 하세요").css("color","#0f0");

}

});

</script>

</head>

<body>

</body>

</html>

5. 선택한 그림이 나오게 하기 = 콤보박스 사용

<!DOCTYPE html>

<html>

<head>

img{

width: 80px; height: 80px;

margin-left: 50px;

}

</style>

$(function() {

$("#sel").change(function(event) {

var imgSrc = $(event.target).val();

$("#img").attr("src",imgSrc);

}).change();

});

</script>

</head>

<body>

<table>

<tr>

<td>

<option value="../images/da.jpg">두리안

<option value="../images/strawberry.gif">딸기

<option value="../images/banana.gif">바나나

<option value="../images/apple.gif" selected="selected">사과

</select>

</td>

<td>

</td>

</tr>

</table>

</form>

</body>

</html>

6. 해당 엘리먼트를 보이게 하기

<!DOCTYPE html>

<html>

<head>

<title>해당 엘리먼트를 보이게 하기</title>

span {display: none;}

</style>

$(function() {

$("#bt1").click(function() {

$("span:first").show();

});

$("#bt2").click(function() {

$("#sp1").show("slow",function(){

$(this).css("background","cyan");

});

$("#bt3").click(function() {

$("span:last").show("slow",function(){

$(this).css("background","yellow");

});

</script>

</head>

<body>

</body>

</html>

7. 해당 엘리먼트 사라지게 하기

<!DOCTYPE html>

<html>

<head>

span {display: none;}

</style>

$(function() {

$("#bt1").click(function() {

$("span:first").show();

});

$("#bt3").click(function() {

$("#sp1").show("slow",function(){

$(this).css("background","orange");

});

$("#bt5").click(function() {

$("span:last").show("slow",function(){

$(this).css("background","orange");

});

$("#bt2").click(function() {

$("span:first").hide();

});

$("#bt4").click(function() {

$("#sp1").hide("slow",function(){

$(this).css("background","");

});

$("#bt6").click(function() {

$("span:last").hide("slow",function(){

$(this).css("background","");

});

</script>

</head>

<body>

</body>

</html>

8. 해당 엘리먼트 사라지게 하기

<!DOCTYPE html>

<html>

<head>

span{display: none;}

</style>

$(function() {

$("#bt1").click(function() {

$("span:first").toggle();

});

$("#bt2").click(function(){

$("#sp1").toggle("slow",function(){

$(this).css("background","cyan");

});

$("#bt3").click(function(){

$("span:last").toggle("slow",function(){

$(this).css("background","cyan");

});

</script>

</head>

<body>

<span>ldm만세~~~</span>

</body>

</html>

9. Sliding 효과

<!DOCTYPE html>

<html>

<head>

<title>Sliding 효과</title>

div{

background: #bbbb77; margin: 5px;

width: 80px; height: 120px;

float: left;

}

</style>

$(function() {

$("#slideUp").click(function() {

$("div").slideUp();

});

$("#slideDown").click(function() {

$("div").slideDown("slow");

});

$("#slideToggle").click(function() {

$("div").slideToggle("slow");

});

</script>

</head>

<body>

<button id="slideUp">slideUp</button>

<button id="slideDown">slideDown</button>

<button id="slideToggle">slideToggle</button>

<p>

</body>

</html>

10. 해당 엘리먼트를 서서히 보이게 하기

<!DOCTYPE html>

<html>

<head>

<title>해당 엘리먼트를 서서히 보이게 하기</title>

span{color: red; cursor: pointer;}

div{

margin: 3px; width: 80px;

display: none; height: 80px;

float: left;

}

div#red{background: #f00;}

div#green{background: #0f0;}

div#blue{background: #00f;}

div#ldm{background: #000;}

</style>

$(function() {

$(document.body).click(function() {

$("div:hidden:first").fadeIn("slow");

});

</script>

</head>

<body>

</body>

</html>

11. 페이딩 효과

<!DOCTYPE html>

<html>

<head>

p{position: relative; width: 400px; height: 90px;}

div{

position: absolute; width: 400px; height: 65px;

font-size: 36px; text-align: center;

color: cyan; background: red;

padding-top: 25px;

top: 0; left: 0; display: none;

}

span {display: none;}

</style>

$(function() {

$("#fadeIn").click(function() {

$("div").fadeIn(3000,function(){

$("span").fadeIn(100);

});

return false;

});

$("#fadeOut").click(function() {

$("div").fadeOut(3000,function(){

$("span").fadeIn(100);

});

return false;

});

$("#fadeToggle").click(function() {

$("div").fadeToggle(3000,function(){

$("span").fadeIn(100);

});

return false;

});

</script>

</head>

<body>

<p>

불투명도를 점점 높여서 보이도록 한다.

speed 를 fast, normal, slow 또는 0 이상의 숫자

밀리세컨드 단위를 준다.

애니메이션이 끝난 후에 실행할 함수를 지정한다.

</p>

<div><span>KOREA !!!</span></div>

<button id="fadeIn">fadeIn</button>

<button id="fadeOut">fadeOut</button>

<button id="fadeToggle">fadeToggle</button>

</body>

</html>

12. 엘리먼트에 투명도 값 변경

<!DOCTYPE html>

<html>

<head>

<title>엘리먼트에 투명도 값 변경</title>

div{

width: 90px; height: 90px;

margin: 5px; float: left;

}

div#red{background: #f00;}

div#green{background: #0f0;}

div#blue{background: #00f;}

div#ldm{background: #cecece;}

</style>

$(function() {

$("div#red").click(function() {

$(this).fadeTo("slow",1);

});

$("div#green").click(function() {

$(this).fadeTo("slow",0.5);

});

$("div#blue").click(function() {

$(this).fadeTo("slow",0);

});

$("div#ldm").click(function() {

$(this).fadeTo("slow",0.3);

});

</script>

</head>

<body>

</body>

</html>

13. animation 효과

<!DOCTYPE html>

<html>

<head>

<title>animation 효과</title>

#region{

position: relative; width: 200px; height: 200px;

overflow: hidden; margin: auto;

}

#images{

width: 400px; height: 200px;

}

#images a img{width: 200px; height: 200px;

border: 0; position: relative;}

#direction

{

width: 360px; margin: auto;

}

.leftbtn{margin-top: 10px;}

.rightbtn{margin-left: 290px; margin-top: 10px;}

</style>

$(function() {

$(".leftbtn").click(function() {

$("#leftimage").animate({marginLeft: -210},2000);

});

$(".rightbtn").click(function() {

$("#leftimage").animate({marginLeft: 0},2000);

});

</script>

</head>

<body>

</div>

</div>

</body>

</html>

14. jquery Array Test

<!DOCTYPE html>

<html>

<head>

<title>jquery Array Test</title>

$(function() {

var list1=["수선화","라일락","해바라기","들국화","장미"];

$("#log1").text(list1.join(", "));

var list2=["수선화1","라일락2","해바라기3","들국화4"];

$("#log2").text(list2.join(", "));

console.log(list1);

console.log(list2);

});

</script>

</head>

<body>

<h2>korea !!!!</h2>

</body>

</html>

15. jquery object test

<!DOCTYPE html>

<html>

<head>

<title>jquery object test</title>

$(function() {

// 객체 생성

var car = new Object();

// 객체를 구성하는 요소

car.make="자동차";

car.model="k7";

car.year=2017;

//Date 타입 인스턴스를 하나의 프로퍼팅에 저장

car.buydate = new Date(2017,4,19);

var owner = new Object();

owner.name = "해바라기";

owner.age = 35;

car.owner = owner;

console.log(car.make);

console.log(car.model);

console.log(car.year);

// 중첩된 프로퍼티에 접근

console.log(car.owner.name);

console.log(car.owner.age);

});

</script>

</head>

<body>

</body>

</html>

16. 객체 리터럴로 객체 생성

<!DOCTYPE html>

<html>

<head>

$(function() {

// 객체 리터럴로 객체 생성

var car = {

make : "kia",

model : "k7",

year : 2017,

buydate : new Date(2017,4,19),

owner : {

name:"해바라기",

age:35

}

};

console.log(car.make);

console.log(car.model);

console.log(car.owner.name);

});

</script>

</head>

<body>

</body>

</html>

17. Array 배열 반복 처리

<!DOCTYPE html>

<html>

<head>

<title>Array 배열 반복 처리</title>

$(function() {

var list = ["수선화","백합","장미","들국화","튤립"];

$.each(list,function(index,value){

$("ol").append("<li>" + value + "</li>");

});

</script>

</head>

<body>

</ol>

</body>

</html>

18. 배열에서 특정 조건의 요소만 선택하여 반환하기

<!DOCTYPE html>

<html>

<head>

*{font-size: 26pt; font-weight: lighter;}

div{color: blue;}

p{color: cyan; margin: 0;}

span{color: red;}

</style>

$(function() {

var arr =[1,9,3,8,6,1,5,9,4,7,3,8,6,9,1];

$("div").text(arr.join(", "));

arr = $.grep(arr, function(element,index) {

return(element != 5 && index > 4);

});

$("p").text(arr.join(", "));

arr = $.grep(arr, function(element){

return element != 9;

});

$("#mbc").text(arr.join(", "));

});

</script>

</head>

<body>

<p></p>

</body>

</html>

저작자표시 비영리 변경금지

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

5. jQuery (제이쿼리) 마지막 (0)	2017.04.20
3. jQuery (제이쿼리) (0)	2017.04.18
2. jQuery (제이쿼리) (0)	2017.04.17
1. jQuery (제이쿼리) (0)	2017.04.13

PREV 1 2 3 4 5 ···50 NEXT

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

테스토리

4. jQuery (제이쿼리)

1. 더블 클릭 이벤트

2. 마우스를 누르면 파란색, 놓으면 빨강색 배경

3. 마우스가 움직인곳의 위치 알아내기

4. 포커스를 받으면 글씨를 지우고 포커스를 잃으면 글씨 나타내기

5. 선택한 그림이 나오게 하기 = 콤보박스 사용

6. 해당 엘리먼트를 보이게 하기

7. 해당 엘리먼트 사라지게 하기

8. 해당 엘리먼트 사라지게 하기

9. Sliding 효과

10. 해당 엘리먼트를 서서히 보이게 하기

11. 페이딩 효과

12. 엘리먼트에 투명도 값 변경

13. animation 효과

14. jquery Array Test

15. jquery object test

16. 객체 리터럴로 객체 생성

17. Array 배열 반복 처리

18. 배열에서 특정 조건의 요소만 선택하여 반환하기

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

+ Recent posts

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역