'css'에 해당되는 글 1건

  1. 2011.11.10 jQuery - jQuery 시작하기
posted by Solver Full-stack Developer 2011.11.10 18:02
Step 1 . Download jQuery

-http://jquery.com/
 
 


Step 2. Add script
- 해당페이지에 js파일을 넣는다. 
- 아래와 같이 추가한다.

<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>
</head>
</html> 

Step 3. Use jQuery

 
<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>
<script>

$(function(){

//alert($('li').length);
$('ul#sectionList li');
document.getElementsByTagName('ul')[0].getElementById('sectionList').childNodes;

var cnt = $('ul#sectionList').children().length;
console.log(cnt);
$('ul#sectionList li').css({
width: 100/cnt+'%',
});
console.log($('ul#sectionList li'));
$('ul#sectionList li').click(function(){
//hide selected image
$('ul#sectionList li.selected').removeClass('selected');
//show image for only this li
$(this).addClass('selected');
});
});

</script>

Sample code
-주석없는 예제는 하단에 있습니다.
<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>// jQuery를 추가한다.
<script>//스크립트 사용
//$의 의미는 jQuery이다. 즉, jQuery가 $로 typedef되어있다. jQuery == $
//jQuery를 사용할때는 $()형식으로 사용한다. 
$(function(){//c에서 main함수 같은 것이다. 이렇게하면 body의 script가 로딩된후 해당함수가 실행된다. 
html은 맨위에서 한줄한줄 적용된다. 즉 해당소스를 크게보면 head안에 <meta .../>를 수행하고 script src="..</script>를 수행하고 <script> ... </script>를 수행한다. 그 후 <body>의 script가 수행된다는 점을 기억하자.


        $('#sectionList li');//#->id .->class #sectionList li(공백)->id가 sectionList 하위의 li(parent elemtnt 공백 parent elemnt child)
document.getElementById('sectionList').childNodes;
//위의 $('#sectionList li');와 같은 기능의 소스다. 한눈에봐도 jQuery를 사용하는게 짧은것을 볼수있다.(즉, 같은 기능을 짧은코드로 수행할 수 있어서 매우 효율적이다.)

var cnt = $('ul#sectionList').children().length;//id가 sectionList인 ul의 li개수를 가져온다.
console.log(cnt);//chrome을 사용하고 요소검사를 하면 로그가 보일것이다.
$('ul#sectionList li').css({//id가 sectionList인 ul의 li들의 css를 변경한다.
width: 100/cnt+'%',//JSON처럼 ,로 설정할것을을 나열한다. ;으로 끝나지 않는다.
});
console.log($('ul#sectionList li'));
$('ul#sectionList li').click(function(){//$('ul#sectionList li')는 배열이다 즉 모든 li에 동일 작업roof가 도는것과 같다.
//hide selected image
$('ul#sectionList li.selected').removeClass('selected');//바로전에 클릭된던 li의 class를 제거한다.
//show image for only this li
$(this).addClass('selected');//click한 li에 select라는 class를 add한다. class는 class=" selected fooclass sooclass"와같이 여러클레스를 다중 추가해줄 수 있는데 공백으로 구분한다.
});
});

</script>
<style type="text/css">
ul#sectionList li.selected {
background-color: red;
}
li{
float: left; //리스트가 달릴때 vertical로 안달리고 horizental식으로 달리게하는 설정이다.
}

body{
margin:0px;
}

ul#sectionList{
-webkit-padding-start:0px;
background-color: green;
overflow:hidden;//상위 element가 height가 설정하지않고, 하위 li들이 flot될때 height가 0이되는 현상이 일어나는데 overflow:hidden;을 해준다면 child의 height로 보여주게 됩니다.
}
</style>
</head>
<body>
<div>
<ul id="sectionList">
<li> <a>전체</a> </li>//chrome에서 요소검사를하면 class가 추가 삭제 되는 현상을 볼수있다.
<li> <a>야구</a> </li>
<li> <a>축구</a> </li>
<li> <a>종합</a> </li>
<li> <a>포토</a> </li>
</ul>
</div>
</body>
</html>

----------------------예제----------------------
<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>
<script>

$(function(){

$('#sectionList li');
document.getElementById('sectionList').childNodes;


var cnt = $('ul#sectionList').children().length;
console.log(cnt);
$('ul#sectionList li').css({
width: 100/cnt+'%',
});
console.log($('ul#sectionList li'));
$('ul#sectionList li').click(function(){
//hide selected image
$('ul#sectionList li.selected').removeClass('selected');
//show image for only this li
$(this).addClass('selected');
});
});

</script>
<style type="text/css">
ul#sectionList li.selected {
background-color: red;
}
li{
float: left;
}

body{
margin:0px;
}

ul#sectionList{
-webkit-padding-start:0px;
background-color: green;
overflow:hidden;
}
</style>
</head>
<body>
<div>
<ul id="sectionList">
<li> <a>전체</a> </li>
<li> <a>야구</a> </li>
<li> <a>축구</a> </li>
<li> <a>종합</a> </li>
<li> <a>포토</a> </li>
</ul>
</div>
</body>
</html> 
 
신고

'Programming > Web Programming' 카테고리의 다른 글

JavaScript 개요  (0) 2014.06.24
webapp deploy in tomcat 7.0  (0) 2014.04.16
javascript - oop  (0) 2014.03.14
javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss  (0) 2014.01.13
jQuery - jQuery 시작하기  (0) 2011.11.10
HTML - HTML 시작하기  (0) 2011.11.08
TAG