# 사용방법 1>

<div id="list1" data-id="1" data-name="홍길동"> 오호호 </div>

jQuery

var obj = $('#list1');

var data_id = obj .data('id');

var data_name = ob.data('name');

# 사용방법 2>

<div id="list2" data-id="2" data-member-name="유관순"> 대한독립만세 </div>

jQuery

var obj2 = $('#list2');

var data_id = obj2.data('id');

var data_member_name = obj2.data('memberName');

# 사용방법 3>

<div id="list3" data-id="3" data-options="{'name':'이순신', 'level':'장군'}"> 이순신 장군 </div>

jQuery

var obj3 = $('list3');

var data_id = obj3.data('id');

var data_options_name = obj3.data('options').name;

var data_options_level = obj3.data('options').level;

적극적으로 활용하세요.

저 같은 경우엔 touch start, touch move, touch end 같은 이벤트를 활용할때

a href 링크 대싱 data-url 를 활용해서 사용하고 있습니다.

<a href="">메뉴1</a> -> <a data-url="">메뉴 1</a>

$('a').on('click', function(){

var data_url = $(this).data('url');

window.location = data_url;

});

javascript 로 현재 접속 URL 을 알아 낼 수 있는 스크립트 함수가

document.location.href 와 document.URL 이 있다. 이 주소로 현재 주소를 불러온다.

< script>
// http://apmsoft.tistory.com/test.php?gid=123&n=000
var this_url = document.location.href;
< /script>

#@  gid 값만 가져 오기

< script>
function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

// ?gid=123&n=000
var s = parseUrl(lux_gaq[i]).search;

if(s.match(/gid/)){
	var id = s.match(/gid=([^&]+)/)[1];
	
	// gid=123
	alert('gid='+id); 
}		

< /script>

@ 실습 하기 /===============================================================

< script>
var lux_drf=(document.referrer)?encodeURIComponent(document.referrer):encodeURIComponent(parent.document.referrer);
var lux_page=(document.location)?encodeURIComponent(document.location):encodeURIComponent(document.URL);
var lux_gaq=lux_gaq||[];
lux_gaq.push(['MjNFNzhNUFE5WDE%3D']);
lux_gaq.push([lux_drf]);
lux_gaq.push([lux_page]);
(function(){
	var lux_ga=document.createElement('script');lux_ga.type='text/javascript';lux_ga.async=true;
	lux_ga.src=('https:'==document.location.protocol?'https://ssl':'http://')+'test.com/ga.js';
	var lux_gas=document.getElementsByTagName('script')[0];lux_gas.parentNode.insertBefore(lux_ga,lux_gas);
})();
< /script>



// test.com/gajs

function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

// 주소 : http://test.com/ga.html?kid=NEY2MExOTzFYNDM%3D
var lux_params='';
var lux_ak=Array('gid','kid','mid');
for(var i=0;i

jQuery ajax와 $.Callback() 함수를 활용하기

$('#list').fusionAjaxRecord 를 통해 ajax 통신을 마친 후
외부 함수인 prints 로 데이타를 전송한다.

# @ 외부 함수인 prints 함수를 ajax 통신이 마친 후 호출 및 데이타 전송

< script type="text/javascript">
$(document).ready(function()
{
	// obj : html 아이디 및 클래스 elementTag
	function prints(obj,data){
		$.each(data, function(key,state)
		{
			// 값 처리
		});
	}
	
	$('#list').fusionAjaxRecord({
		'filename':'./modules/test_view.php',
		'data':{
                         'tname':'bbs_notice',
		         'current_record':'1'
                 }
	}, prints);
});
< /script>

@# 전체소스 /==========================================================

< script>
jQuery(function($) 
{
	/**
	@prints : 외부 함수 function prints(){}
	function prints(obj, data){
	}
	
	$('#list').fusionAjaxRecord({
		'filename':'./modules/bbs_view.php',
		'data':{
				page:1,
				uid:10
		}
	}, prints);
	*/
	$.fn.fusionAjaxRecord= function(params,callMethod)
	{
		var targetID = $(this);
		var callbacks = $.Callbacks();
		var callFunction =callMethod;

		var param = $.extend({
			filename : null,
			data : ''
		},params||{});

		$.ajax({
			type: "post",
			url: param.filename,
			cache: false,
			dataType :'text',
			data :param.data,
			success: function(data, status)
			{
				var json = eval("(" + data + ")");				
				if(typeof(json.result) != 'undefined')
				{
					if(json.result == 'false')
						alert(json.msg);
					else{
						callbacks.add(callFunction);
						callbacks.fire(targetID,json);
					}
				}
			},
			error: function(data, status, errorThrown){
				alert(data.responseText+' '+status+' '+errorThrown);
			}
		});
	}
});
< /script>

jQuery SELECT 메뉴 onChange 이벤트

#@ HTML

< select name="selectEmail" id="selectEmail">
						< option value="">직접입력< /option>
						< option value="naver.com">naver.com< /option>
						< option value="chol.com">chol.com< /option>
						< option value="dreamwiz.com">dreamwiz.com< /option>
						< option value="empal.com">empal.com< /option>
				  < /select>

#@ 방법 1 /=============

< script>
$(document).ready(function()
{
	$('#selectEmail').change(function(){
		alert( $("#selectEmail option:selected").val() );
	});
});
< /script>

#@ 방법2 /===============

< script>
$(document).ready(function()
{
	$('#selectEmail').change(function(){
		$("#selectEmail option:selected").each(function () {
               		alert( $(this).val()+' '+ $(this).text()  );
		});
	});
});
< /script>

동적 스크립트 로딩 및 액션

jQuery 특정 자바스크립트가 로딩 된 후

원하는 작업을 하도록 할때

$.getScript("myplugin.js", function() {
     alert('이벤트 처리를 합시다');
});