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

테스토리