<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
	<script src="./jquery-1.7.2.min.js"></script>
    <script>
    	$(document).ready(function(){
			$('ol').css('list-style-type','none');
        	$('li:eq(4)').css("font-size","2em");
			$('li').css("float","left");
			$('li').css("margin","10px");
			
			console.log('check1');
			// = > < ! 로 선택하기
			//li <1
			$('li:lt(2)').css('color','rgb(0,0,255)');
            //li >4
			$('li:gt(2)').css('color','rgb(0,0,255)');
			
			$('li:not( :eq(4))').css("font-size","1.5em");
			
			$('li:not( :even)').css('color','green');
			$('li:not(*)').css('color','green');
			
			//div중에서 id가 one인 것들
			$('div[id="one"]').css('color','red');
			
			//div중에서 name이라는 attribute가 있는 것들
			$('div[name]').css('color','blue');
			
			// ^= 헷 은 "f"로 시작하는 것들
			$('div[id^="f"]').css('color','rgb(250,30,30)');
			
			// $=는 ""로 끝나는 것들
			$('div[id$="x"]').css('color','brown');
			// *=는 ""가 포함된 것들
			$('div[id*="v"]').css('font-size','2em');
			
			//img
			$('img').attr('src','http://static.naver.net/www/u/2010/0611/nmms_215646753.gif');
        
		//<img id="image1">
		//alert($('img').attr('width'));
		$('img').attr('id','image1').attr('width','500').attr('height','200');
		$('img').removeAttr('height');
		
		//{속성:'벨류','속성:'벨류', 속성:'벨류'}
		$('img:last').attr({src:'http://static.naver.net/www/u/2010/0611/nmms_215646753.gif',width: '200',height: '100'});
		
		});
    </script>
    <style>
		#image1{border:2px solid gray; padding:2px;}
		div[name]{border:2px solid gray;}
		div[id$="x"]{background-color:#000;}
		div[id^="f"]{border:2px solid pink;}
	</style>
</head>
	
<body>
	<img src=""/>
    <img src=""/>
	<div id="one">one</div>
    <div id="two" name="hi">two</div>
    <div id="three">three</div>
    <div id="four">four</div>
    <div id="five">five</div>
    <div id="six">six</div>
	
	&lt; &gt;
    <ol>
    	<li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li> 
    </ol>
</body>
</html>



'JavaScript > JQuery' 카테고리의 다른 글

jquery - 버튼 클릭시 이미지 hide&show  (0) 2012.06.15
jquery - setInterval  (0) 2012.06.15
jquery - ol,sibling  (0) 2012.06.15
jquery 라이브러리 및 시작  (0) 2012.06.15
jquery-slicing  (0) 2012.06.07

+ Recent posts