테스토리 :: 테스토리

5. jQuery (제이쿼리) 마지막

2017. 4. 20. 13:02

1. Array

<!DOCTYPE html>

<html>

<head>

<title>Array</title>

div{color: blue;}

span{color: red;}

</style>

$(function() {

var arr = [1,"two",3,"four","ldm"];

var $spans = $("span");

$spans.eq(0).text($.inArray("one",arr));

$spans.eq(1).text($.inArray(2,arr));

$spans.eq(2).text($.inArray(3,arr));

$spans.eq(3).text($.inArray("four",arr));

$spans.eq(4).text($.inArray("ldm",arr));

});

</script>

</head>

<body>

</body>

</html>

2. Array Test

<!DOCTYPE html>

<html>

<head>

<title>Array Test</title>

*{font-size: 16pt; font-weight: bold;}

div{color: cyan;}

p{color: green; margin: 0;}

</style>

$(function() {

var months = ["Sunday","Monday","Tuesday","Wedensday",

"Thursday","Friday","Saturday"];

var mons = $.map(months,function(value,indexOrKey){

return value.substr(0,3);

});

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

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

});

</script>

</head>

<body>

<p></p>

</body>

</html>

3. 맵 형식 테스트

<!DOCTYPE html>

<html>

<head>

div{color: red;}

</style>

$(function() {

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

var elems = $("div");

var arr = $.makeArray(elems);

arr.reverse();

$(arr).appendTo(document.body);

});

</script>

</head>

<body>

<div>First</div>

<div>Second</div>

<div>Third</div>

<div>Fourth</div>

</body>

</html>

4. 서버의 데이타를 대상 엘리먼트에 삽입하기

<!DOCTYPE html>

<html>

<head>

<title>서버의 데이타를 대상 엘리먼트에 삽입하기</title>

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

</style>

$(function() {

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

$("#container").load("resource.html");

});

</script>

</head>

<body>

</body>

</html>

<html>

<b> Happy New Year !!</b>

<resource.html>

5. 서버의 데이타를 대상 엘리먼트에 삽입

<!DOCTYPE html>

<html>

<head>

<title>서버의 데이타를 대상 엘리먼트에 삽입</title>

div{

width: 180px; height: 80px;

margin: 5px; float: left;

}

</style>

$(function() {

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

$("#message1").load("menu.html");

return false;

});

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

$("#message2").load("menu.html li");

return false;

});

</script>

</head>

<body>

<div>

</div>

<div>

</div>

</body>

</html>

<html>

<ul>

</ul>

<p> 메뉴를 골라주세요.</p>

<menu.html>

6. 서버 데이타를 대상 엘리먼트에 삽입

<!DOCTYPE html>

<html>

<head>

<title>서버 데이타를 대상 엘리먼트에 삽입</title>

div{

width: 200px; height: 80px;

margin: 5px; float: left;

}

</style>

$(function() {

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

$.ajax({

url:"menu.html",

dataType:"html",

success: function(data) {

$("#message1").html(data);

}

});

return false;

});

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

$.ajax({

url:"menu.html",

dataType:"html",

success: function(data) {

$("#message2").html($(data).find('li'));

}

});

return false;

});

</script>

</head>

<body>

<div>

</div>

<div>

</div>

</body>

</html>

7. Json Test

<!DOCTYPE html>

<html>

<head>

td{

border: 1px solid gray;

}

</style>

$(function() {

$.ajax({

url : "item.json",

dataType : "json",

success : function(data) {

$("#treeData").append(

"<tr><td>id</td>" +

"<td>name</td>" +

"<td>price</td>" +

"<td>description</td>" + "</tr>");

$.each(data,function(){

$("#treeData").append("<tr>" + "<td>"

+ this.id + "</td>" + "<td>"

+ this.name + "</td>" + "<td>"

+ this.price + "</td>" + "<td>"

+ this.description + "</td>" + "</tr>");

});

}

});

</script>

</head>

<body>

</body>

</html>

<html>

[

{

"id": "1",

"name": "레몬",

"price": " 3000",

"description": "레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다."

{

"id": "2",

"name": "키위",

"price": " 2000",

"description": "비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다."

{

"id": "3",

"name": "블루베리",

"price": " 5000",

"description": "블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다."

{

"id": "4",

"name": "체리",

"price": " 5000",

"description": "체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다."

{

"id": "5",

"name": "메론",

"price": " 5000",

"description": "메론에는 비타민A와 칼륨이 많이 포함되어 있다."

{

"id": "6",

"name": "수박",

"price": "15000",

"description": "수분이 풍부한 과일이다."

{

"id": "7",

"name": "두리안",

"price": "20000",

"description": "냄새가 고약하다."

}

]

<item.json>

8. JSON Test

<!DOCTYPE html>

<html>

<head>

td{

border : 1px solid gray;

}

</style>

$(function() {

$.getJSON("item.json",function(data, textStatus){

$("#treeData").append(

"<tr><td>id</td>" + "<td>name</td>"

+"<td>price</td>" + "<td>description</td>" + "</tr>");

$.each(data, function() {

$("#treeData").append("<tr>" + "<td>"

+ this.id + "</td>" + "<td>"

+ this.name + "</td>" + "<td>"

+ this.price + "</td>" + "<td>"

+ this.description + "</td>" + "</tr>");

});

</script>

</head>

<body>

</body>

</html>

9. $.getJSON으로 데이타 얻기

<!DOCTYPE html>

<html>

<head>

<title>$.getJSON으로 데이타 얻기</title>

img{height: 100px; float: left;}

</style>

$(function() {

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?"

+ "tags=hippo&tagmode=any&format=json&jsoncallback=?",

function(data) {

$.each(data.items,function(i,item){

$("<img />").attr("src",item.media.m).appendTo("#images");

if (i == 4) {

return false;

}

});

</script>

</head>

<body>

</body>

</html>

10. XML file get 방식으로 로드

<!DOCTYPE html>

<html>

<head>

td{

border : 1px solid gray;

}

</style>

$(function() {

$.get("item.xml",function(data){

$("#treeData").append(

"<tr><td>id</td>" + "<td>name</td>"

+"<td>price</td>" + "<td>description</td>" + "</tr>"

);

$(data).find("item").each(function() {

var $item = $(this);

$("#treeData").append("<tr>" + "<td>"

+$item.attr("id") + "</td>" + "<td>"

+$item.attr("name") + "</td>" + "<td align='right'>"

+$item.find("price").text() + "</td>" + "<td>"

+$item.find("description").text() + "</td>" + "</tr>"

);

});

</script>

</head>

<body>

</body>

</html>

<html>

<?xml version="1.0" encoding="UTF-8"?>

<items>

<description> 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. </description>

</item>

<description> 비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다. </description>

</item>

<description> 블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다. </description>

</item>

<description> 체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다. </description>

</item>

<description> 메론에는 비타민A와 칼륨이 많이 포함되어 있다. </description>

</item>

</item>

</item>

</items>

<item.xml>

11. $.ajax 로 jsp 화일 로드

<!DOCTYPE html>

<html>

<head>

td{border: 1px solid gray;}

</style>

$(function() {

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

var username = $(".username").val();

var sendData = "username=" + username;

$.post(

"welcome.jsp",

sendData,

function(msg){

$("#message").html(msg);

});

return false;

});

</script>

</head>

<body>

<form>

<label>이름을 입력하세요~~~</label>

</form>

</body>

</html>

12. $.ajax 로 jsp 화일 로드

<!DOCTYPE html>

<html>

<head>

td{

border: 1px solid gray;

}

</style>

$(function() {

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

var username = $(".username").val();

var pwd = $(".passwd").val();

var email = $(".email").val();

var sendData = "username=" + username + "&password=" + pwd + "&email=" + email;

$.ajaxSetup({

type:"post",

url:"logincheck.jsp",

dataType:"text",

success: function(msg) {

$("#message").html(msg);

}

});

$.ajax({

data: sendData

});

return false;

});

</script>

</head>

<body>

<form>

<label>이름을 입력하세요~~</label>

<label>암호를 입력하세요</label>

<label>이메일을 입력하세요</label>

</form>

</body>

</html>

<html>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

입력한 아이디는 ${param.username}이며

<c:choose>

<c:when test="${param.username=='admin' && param.password=='1234' && param.email=='korea'}">

당신은 접근 권한이 있습니다.

</c:when>

<c:otherwise>

죄송합니다. 당신은 접근 권한이 없습니다.

</c:otherwise>

</c:choose>

</body>

</html>

<logincheck.jsp>

13. script 로드

<!DOCTYPE html>

<html>

<head>

<title>script 로드</title>

$(function() {

$.getScript("test.js");

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

var msg = call($(".username").val(),$(".passwd").val());

$("#message").html(msg);

return false;

});

</script>

</head>

<body>

<form>

</form>

</body>

</html>

<html>

function call(param1, param2){

return ("Hello, " + param1 +" 비밀번호 : " + param2);

}

<test.js>

14. 폼데이타를 쿼리스트링으로 변환

<!DOCTYPE html>

<html>

<head>

<title>폼데이타를 쿼리스트링으로 변환</title>

div{font-weight: bold; color: red;}

</style>

/*$(function() {

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

var form_data = $("form").serialize();

$("#result").text(form_data);

});

});*/

$(function() {

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

$("#result").empty();

var form_data = $("form").serializeArray();

console.log(form_data);

//.serializeArray();폼 엘리먼트의 값을 객체 배열로 변환한다

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

$("#result").append(value.name + "=" + value.value + "<br/>")

});

</script>

</head>

<body>

<form>

<label>이름을 입력하세요</label>

<label>암호를 입력하세요</label>

<input type="checkbox" name="hobby" value="music"/>music

<input type="checkbox" name="hobby" value="yoga"/>yoga

<input type="checkbox" name="hobby" value="reading"/>reading

<input type="checkbox" name="hobby" value="biking"/>biking<br/>

</form>

</body>

</html>

15. Insert title here

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

href="http://www.datatables.net/media/images/favicon.ico"/>

@import "media/css/demo_page.css";

@import "media/css/demo_table.css";

</style>

$(function() {

$('#example').dataTable();

});

</script>

</head>

<body>

<thead>

<tr>

<th>price</th>

<th>description</th>

</tr>

</thead>

<tbody>

<tr>

<td>레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다.</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다.</td>

</tr>

<tr>

<td>레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다.</td>

</tr>

<tr>

<td>레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다.</td>

</tr>

<tr>

<td>레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다.</td>

</tr>

<tr>

<td>레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다.</td>

</tr>

<tr>

<td>레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다.</td>

</tr>

<tr>

<td>레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다.</td>

</tr>

<tr>

<td>레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다.</td>

</tr>

<tr>

<td>레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다.</td>

</tr>

</tbody>

</table>

</body>

</html>

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

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

4. jQuery (제이쿼리) (0)	2017.04.19
3. jQuery (제이쿼리) (0)	2017.04.18
2. jQuery (제이쿼리) (0)	2017.04.17
1. jQuery (제이쿼리) (0)	2017.04.13

PREV 1 2 3 4 ···50 NEXT

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

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

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

테스토리

5. jQuery (제이쿼리) 마지막

1. Array

2. Array Test

3. 맵 형식 테스트

4. 서버의 데이타를 대상 엘리먼트에 삽입하기

5. 서버의 데이타를 대상 엘리먼트에 삽입

6. 서버 데이타를 대상 엘리먼트에 삽입

7. Json Test

8. JSON Test

9. $.getJSON으로 데이타 얻기

10. XML file get 방식으로 로드

11. $.ajax 로 jsp 화일 로드

12. $.ajax 로 jsp 화일 로드

13. script 로드

14. 폼데이타를 쿼리스트링으로 변환

15. Insert title here

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

+ Recent posts

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역