반응형
children( ) => 지정한 엘리먼트의 바로 아래 자식 노드 (parent( )는 부모 노드)
each( ) => 각각 엘리먼트에 차례로 접근

<html>
<head>
	<title>jquery each()</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {

			//root의 자식 노드 선택
			var nodes=$("#root").children();

			//nodes의 갯수를 alert
			alert(nodes.length);

			//변수 txt 선언
			var txt="";	
			//nodes 의 각각 엘리먼트에 차례로 접근해서 txt에 입력
			nodes.each(function(){
				txt+=" "+$(this).text();
			});
			alert(txt);
		});
	</script>
</head>
<body>
	<div id="root">
		<div>Azit4u</div>
		<div>S2ang</div>
		<div>Hello</div>
	</div>
</body>
</html>

 

http://azit4u.phps.kr/jquery/each.html

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

'jQuery' 카테고리의 다른 글

jQuery 마우스 이벤트(클릭한 버튼, 클릭한 위치) event.button, event.screenX, event.screenY  (0) 2011.10.14
jQuery bind(), unbind(), trigger()  (0) 2011.10.14
google jQuery 최신 버전 지원(1.버전대)  (0) 2011.10.07
jquery 기본 필터  (0) 2011.07.31
jquery 셀렉터  (0) 2011.07.31
반응형
textarea 글자수 체크 하기

<html>
<head>
	<meta charset="utf-8">
	<title>textarea maxlength</title>
	<script>
		function checkcnt(obj,maxcnt){
			var cnts=obj.value;
			var cnt=cnts.length;
			var msg;
			var nowcnt=0;
			
			//입려되어있는 글자수만큼 반복
			for(i=0;i<cnt;i++){
				//txt에 i위치에 해당되는 글자 입력
				txt=cnts.charAt(i);
					// escape한 txt의 길이를 체크해서 4이상이면(한글) nowcnt + 2 
					if( escape(txt).length > 4){
						nowcnt+=2;
					}else{
						//아니면서 escape한 txt가 엔터값이 아니면 (엔터의 경우 %0D,%0A 두번 되는데
						//엔터는 1바이트 처리) nowcnt + 1
						if(escape(txt)!='%0A'){
							nowcnt++;
						}
					}
					//nowcnt 가 maxcnt 보다 크면 
					if(nowcnt>maxcnt){
						alert('글자수 초과');
						//txta 에 cnts의 값을 0 부터 i 까지 잘라서 입력
						document.getElementById("txta").value=cnts.substring(0,i);
						break;
					}else{
						//nums에 현재 바이트수 입력
						document.getElementById("nums").innerHTML=nowcnt+"byte";
					}
			}
		}
	</script>

</head>
<body>
	<textarea  id="txta" cols=50 rows=10 onkeyup="return checkcnt(this,10)"></textarea>
	<span  id="nums" style="width:100px;">0byte</span>
</body>
</html>
http://azit4u.phps.kr/script/maxlength.html


charAt(i) --> i번째 해당 되는 글자
반응형
저작자표시 비영리 변경금지

'자바스크립트' 카테고리의 다른 글

자바스크립트로 각자리 숫자 합계 구하기  (0) 2014.01.24
javascript 메뉴  (0) 2011.10.05
javascript 롤링  (0) 2011.07.27
반응형

자바 스크립트 메뉴 만들기 
<html>
<head>
	<title>menu1</title>
	<meta charset="utf-8">
	<style type="text/css">
		ul {list-style:none;}
		#menus a {
			text-decoration:none;
			color:#444;
			font-size:14pt;
		}
		.submenu {font-size:12pt}
		#menus a:hover {color:red;}
	</style>
	<script type="text/javascript">
		function showMenu(idx){
			//submenu1~submenu3까지 display=none 으로 변경
			for(i=1;i<4;i++){
				document.getElementById("submenu"+i).style.display="none";
			}
			//선택한  idx의 submenu 만 화면출력
			document.getElementById("submenu"+idx).style.display="block";
		}
	</script>
</head>
<body>
	<div id="wrap">
		<ul id="menus">
			<li><a href="#" onclick="showMenu(1); return false;">메뉴1</a></li>
				<ul id="submenu1" class="submenu" style="display:none">
					<li>메뉴1-1</li>
				</ul>
			<li><a href="#"  onclick="showMenu(2); return false;">메뉴2</a></li>
				<ul id="submenu2" class="submenu" style="display:none">
					<li>메뉴2-1</li>
					<li>메뉴2-2</li>
				</ul>
			<li><a href="#"  onclick="showMenu(3); return false;">메뉴3</a></li>
				<ul id="submenu3" class="submenu" style="display:none">
					<li>메뉴3-1</li>
					<li>메뉴3-2</li>
					<li>메뉴3-3</li>
				</ul>
		</ul>
	</div>
</body>
</html>
확인:http://azit4u.phps.kr/menu/menu.html
반응형
저작자표시 비영리 변경금지

'자바스크립트' 카테고리의 다른 글

자바스크립트로 각자리 숫자 합계 구하기  (0) 2014.01.24
글자수 체크 하기  (0) 2011.10.05
javascript 롤링  (0) 2011.07.27
반응형

필터

설명

:first

선택된 개체들 중 첫 번째 요소

:last

선택된 개체들 중 마지막 요소

:even

짝수

:odd

홀수

:eq(Index)

인덱스에 해당하는 요소

:gt(Index)

인덱스보다 높은 인덱스를 가진 요소

:lt(Index)

인덱스 봐 낮은 인덱스를 가진 요소

:header

모든 헤더 요소들(

:animated

현재 에니메이션 중인 모든 요소

 

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

'jQuery' 카테고리의 다른 글

jQuery 마우스 이벤트(클릭한 버튼, 클릭한 위치) event.button, event.screenX, event.screenY  (0) 2011.10.14
jQuery bind(), unbind(), trigger()  (0) 2011.10.14
google jQuery 최신 버전 지원(1.버전대)  (0) 2011.10.07
jQuery children(),each()  (0) 2011.10.07
jquery 셀렉터  (0) 2011.07.31

+ Recent posts

티스토리툴바