JavaScript/JQuery
jquery - attribute
Bohemian life
2012. 6. 15. 12:45
<!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>
< >
<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>
