jquery selector and javascript class example

프로그램/jQuery

jquery selector and javascript class example

mulderu 2010. 12. 9. 14:11

요즘들어 점점더 jquery 에 빠져 드는것 같다... 전에 델파이에 빠져들때가 있었는데,

그때와 느낌은 좀 다르지만 jqeury는 정말로 매력적이다.... 섹시하면서, 일도 잘한다.... :) ~~~ 라고 생각 하면

딱이다... ㅋㅋㅋ

요즘들어 jquery를 다시 기초부터 보기 시작했다... 왜냐 하면, 섹시한 여자를 첨 보았을때는 좋아 하기만 했지만,

이제 친구가 되었으니..... 자세히 물어 보기 시작 한거지...

자... 너는 어디가 젤 예쁘니~~~~, 이런 질문을 ... 너는 어디에 사나???, 멀 젤로 좋아하니 ?? 등등

그리고, 아래는 첨으로 syntaxHighlight 를 먹여 보았습니다.

(참고 사이트)

<!DOCTYPE html> 
	<html> 
	<head> 
		<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
		<title>jQuery: The Write Less, Do More, JavaScript Library</title> 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
		<script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><\/script>');</script> 
		<script src="http://static.jquery.com/files/rocker/scripts/custom.js"></script> 
		<link rel="shortcut icon" href="http://static.jquery.com/favicon.ico" type="image/x-icon"/> 
	
	<script type="text/javascript">
	
	//------------------------------------------------
	// javascript class definition two-way
	//------------------------------------------------	
	// class define by function
	//------------------------------------------------
	myClass = function(clsName) {
		this.clsName = clsName;
		this.create = function() {
			alert ('call create');
		};
		
		this.destroy = function() {
			alert ('call destroied');
		};
		
		this.doSomething = function() {
			alert ('hi mulder');
		}
	}
	
	//------------------------------------------------
	// singletone class define by json
	//------------------------------------------------
	var singleToneClass = {
		clsName: '',
		create: function(clsNameText) { this.clsName = clsNameText;  },
		doSomething: function() { alert ('call by direct .... this is singletone access, myname is :' + this.clsName); }
	}
	//------------------------------------------------
	
	
	//--------------------------------------------------------
	var actionIndex = 0;
	
	incActionIndex = function() { return ++actionIndex; }
	
	logA = function(str) { $('#logArea').append(str + '</br>'); }
	$(function() {
		logA ('hi document load');
		
		// selector demo
		$('input[value=prepend]').click(function() {
			logA ('prepend click fire');
			$('#firstDiv').prepend('<div style="border=1; border-style:solid; border-color:yellow;">iam prepend content #' +incActionIndex()+ '</div>');
		});
		
		$('input[value=append]').click(function() {
			logA ('append click fire');
			$('#firstDiv').append('<div style="border=1; border-style:solid; border-color:yellow;">iam append content #' +incActionIndex()+ '</div>');
		});
		
		$('input[value=next]').click(function() {
			logA ('next click fire');
			alert ( $('#firstDiv').next().attr('id') );
		});						
		
		// javascript class demo
		$('input[value=classDemo]').click(function() {
			logA ('classDemo click fire');
			var cls1 = new myClass();
			cls1.create();
			
			singleToneClass.create('hi mulder');
			singleToneClass.doSomething();
		});						
		
		
	});
	
	
	</script>
</head>
<body>

<div id="mainContainerDiv">
		<div id="logArea" style="border:1pt; border-color:aqua; border-style:solid;"></div>
		
		<div id="lineBreak" height="5pt" style="background-color:#AAA; font-size: 5pt;"> </div>
		
		<div id="actionArea" style="border:1pt; border-color:#A00; border-style:solid;">
			<input type="button" value="prepend"/>
			<input type="button" value="append"/>
			<input type="button" value="next"/>
			<input type="button" value="classDemo"/>
			
		</div>
		
		<div id="lineBreak" height="5pt" style="background-color:#AAA; font-size: 5pt;"> </div>
		
		<div id="firstDiv">
		    <ul>
		    	<li id="firstLI">hi iam first LI <a href="#" id="liFirstA">AAA</a></li>
		    	<li id="secondLI">hi iam first LI <a href="#" id="liSecondA">BBB</a></li>
		    	<li id="thirdLI">hi iam first LI <a href="#" id="liThirdA">CCC</a></li>		    	
		    	
		    </ul>
		</div>
		
		<div id="lineBreak" height="5pt" style="background-color:fuchsia; font-size: 5pt;"> </div>
		
		<div id="secondDiv">
		    <ul>
		    	<li id="firstLI">hi iam first LI <a href="#" id="liFirstA">AAA</a></li>
		    	<li id="secondLI">hi iam first LI <a href="#" id="liSecondA">BBB</a></li>
		    	<li id="thirdLI">hi iam first LI <a href="#" id="liThirdA">CCC</a></li>		    	
		    	
		    </ul>
		
		</div>
		
		<div id="lineBreak" height="5pt" style="background-color:maroon; font-size: 5pt;"> </div>
		
		<div id="thirdDiv">
		    <ul>
		    	<li id="firstLI">hi iam first LI <a href="#" id="liFirstA">AAA</a></li>
		    	<li id="secondLI">hi iam first LI <a href="#" id="liSecondA">BBB</a></li>
		    	<li id="thirdLI">hi iam first LI <a href="#" id="liThirdA">CCC</a></li>		    	
		    	
		    </ul>
		
		</div>
		
		
		
	</div>

</body>
</html>

현재글jquery selector and javascript class example

mulder's it blog

github : https://github.com/mulderu gist : https://gist.github.com/mulderu

apache, Find, 자전거, jquery widget, easyui, SQLServer, MySQL, SVN, ubuntu, EC2, jQuery, Servlet, AWS, Java, bash, springMVC, tomcat, spring, JavaScript, ant,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

mulder's it blog

jquery selector and javascript class example

'프로그램/jQuery'의 다른글

티스토리툴바

jquery selector and javascript class example

'프로그램/jQuery'의 다른글

관련글

티스토리툴바