Blog Content

08.loadMethod.htm load 메서드로 서버에 데이터 전송 및 받기 $(document).ready(function() { $('#btn').click(function() { $('#pnlDisplay').load("05.FrmResponseData.aspx", { 'Msg': $(this).val() }); }); }); 여기에 출력 결과화면 기타설명 패널디스플레이 패널에 바로 로드시킴 실행결과를 대신 맵을 서버로 부터 값을 전송하고 현재시간을 출력 차이점 $에 어디에 로드 매서드를 지정($('#pnlDisplay'))

07.postMethod.htm post 방식으로 서버에 데이터 전송 및 받기 $(document).ready(function(){ $('#btn').click(function() { $.post("05.FrmResponseData.aspx", { 'Msg':'Post방식으로 전송'}, function(data){ $('#pnlDisplay').html(data); }); }); }); 여기에 출력 결과화면

06.getMethod.htm get 방식으로 서버에 데이터 전송 및 받기 $(document).ready(function() { $('#btn').click(function() { $.get( "05.FrmResponseData.aspx",//[1] 서버측 스크립트 언어 : ASP.NET, JSP, PHP {'Msg': $(this).val() }, //[2] 쿼리스트링 : ?키=값&키2=값2 function(data) { //[3] 콜백함수 : 결과값 받기, data로 받아옴 $('#pnlDisplay').html(data); } ); //end $.get() }); }); 여기에 출력 결과화면 추가 설명 $.get( "05.FrmResponseData.aspx", //1. 해당페이지를 불러오고 {'..

주소창에 입력한 값을 출력하는 예제입니다. WebForm을 추가합니다. (FrmResponseData.aspx) 바로 코드비하인드 페이지로 이동 서버측 데이터 출력 페이지 05.FrmResponseData.aspx.cs protected void Page_Load(object sender, EventArgs e) { Response.ContentType = "text/html"; string html = "안녕" + Request["Msg"] + "," + DateTime.Now.ToShortTimeString() + ""; Response.Clear(); Response.Write(html); Response.End(); } 결과화면

Xml에서 데이터 가져올때(읽어올때) $.get 공백 주의! 주석 주의! 04.Company.htm XML 파일 로드하기 $(document).ready(function() { $('#btn').click(function() { $.get('04.Company.xml', function(data) { $('#ctlGrid').empty(); $(data).find('Company').each(function() { var $entry = $(this);//현재 시점의 레코드의 엔트리를 읽어오기 //특성(Attribute)읽어오기 var html = "" + $entry.attr('CompanyType') + ""; html += "" + $entry.find('CompanyNumber').text() +..

$.getScript : 동적으로 JavaScript 로드 03.jQuery.getScript.htm 하나의 완성된 자바스크립트 파일을 동적 로드/실행 $(document).ready(function() { $('#btn').click(function() { //아래 코드가 실행되는 시점에 js 파일의 기능 실행됨 $.getScript('03.jQuery.getScript.js'); }); }); 03.jQuery.getScript.js [ JScript.js파일 ] //JSON 데이터 var tableData = [ { "Num": "1", "Name": "홍길동", "Title": "안녕" }, { "Num": "1", "Name": "백두산", "Title": "방가" }, { "Num": "1",..

JSON(JavaScript Object Notation) - Key와 Value로 구성 - []를 사용하여 배열형 Value 사용가능 - JSON 공식 사이트 : http://json.org 02.jQuery.getJSON.htm 비동기적으로 JSON파일 로드 $(document).ready(function() { $("#btn .btnLoad").click(function() { $.getJSON("02.jQuery.getJSON.js", function(data) { $('#pnlDisplay').empty(); //패널(div)의 내용 초기화 var table = "인덱스번호이름"; //data를 탐색 : each() 메서드를 사용해서 데이터가 있는 만큼 반복 $.each(data, functio..

jQuery.load(url, data, callback) : Ajax 기능으로 HTML을 로드하고 DOM에 삽입 $('id or class).load('url', params, callback) Url : 서버측 언어 url parameters : 매개변수 - 쿼리스트링 callback : 콜백함수 01.jQuery.load.htm 동적으로 원격 페이지 로드 $(document).ready(function() { $("#btn .btnLoad").click(function() { //원하는 레이어에(ctlGrid)에 로드해라 : 비동기적으로 페이지 로드 = 인클루드 함 $('#ctlGrid').load("01.HtmlSamplePage.htm"); window.alert("이 메시지는 먼저 출력됨. W..

입력한 값 을 출력하는 예제입니다. 여기에 워터마크 텍스트 박스를 적용했습니다. WaterMarkTextBox.htm 워터마크 텍스트박스 .water{ color:Silver; } $(document).ready(function() { //로드시 텍스트박스의 텍스트에 water 클래스 적용 $('#txtUserID').addClass("water"); //레이블의 값을 워터마크텍스트로 가져옴 var watermakedText = $('#lblUserID').remove().text(); $('#txtUserID').val(watermakedText) .focus(function() { if (this.value == watermakedText) { $(this).val(''); //텍스트를 입력가능하도록..

TreeView.htm 트리뷰 컨트롤 fieldset { width:250px; } $(document).ready(function() { //[1] 리스트의 기본 모양 지정 : //를 자식으로 가지지 않는 li의 불릿기호는 기본 모양 $('li:not(:has(ul))').css({ cursor: 'default', 'list-style-image': 'none' }); //[2] 자식 요소를 갖는 li에 대해서는 plus.gif를 지정 $('li:has(ul)') //자식 요소를 갖는 요소에 대해서 .css({ cursor: 'pointer', 'list-style-image': 'url(plus.gif)' })//+기호설정 .children().hide(); //자식 요소 숨기기 //[3] +로 설..

현재까지 진행된 jQuery 전체 소스 파일입니다.

Stop() : 현재 진행중인 애니메이션효과를멈춤 06.Stop.htm 애니메이션 효과 멈추기 div { position:absolute; background-color:#abc; left:0px; top:50px; width:60px; height:60px; margin:5px; } $(document).ready(function() { //Start animation $("#go").click(function() { $(".block").animate({ left: '+=100px' }, 2000); }); //Stop animation when button is clicked $("#stop").click(function() { $(".block").stop(); }); //Start animati..

animate() : 여러개의 애니메이션 효과를 동시 부여 http://docs.jquery.com : 참고하기 05.Animate.htm 여러가지 효과 동시 처리 #my .hover { cursor:pointer; background-color:Yellow; } $(document).ready(function() { $("#moreRegion").hide(); //기본값으로 숨기기 $("span.more").click(function() { $("#moreRegion").animate({ height: '200px', width: 'show', opacity: 'show' }, 'slow'); $(this).hide('fast'); }); }); 안녕하세요. 여기는 본문입니다. more... 또 만나요..

SlideToggle (speed, callback) : 슬라이드 업/다운에 대한 토글링 04.SlideToggle.htm 슬라이드 업/다운 $(document).ready(function() { $("#btn").click(function() { //[!1] 숨김-보임-숨김 $("#first").slideToggle('slow'); }); }); 첫번째 영역 결과화면

slideUp (speed, callback) : 아래에서 위로 슬라이드가 업됨 (사라짐) slideDown (speed, callback) : 위에서 아래로 슬라이드 다운됨(보여짐) 03.SlideUp.htm 슬라이드업 #my .hover { cursor:pointer; background-color:Yellow; } div{ background-color:Silver; height:100px; } $(document).ready(function() { $("#btn").click(function() { $("#first") .fadeIn('slow') //서서히 보이기 .slideUp('slow'); //슬라이드업 : 숨기기 }); }); 첫번째 영역 두번째 영역 결과화면 다시 원래화면으로 돌아감