2011. 11. 10. 18:02
Step 1 . Download jQuery
-http://jquery.com/
Step 2. Add script
- 해당페이지에 js파일을 넣는다.
- 아래와 같이 추가한다.
<html>
Sample code
-주석없는 예제는 하단에 있습니다.
-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>
</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를 사용할때는 $()형식으로 사용한다.
//jQuery를 사용할때는 $()형식으로 사용한다.
$(function(){//c에서 main함수 같은 것이다. 이렇게하면 body의 script가 로딩된후 해당함수가 실행된다.
※html은 맨위에서 한줄한줄 적용된다. 즉 해당소스를 크게보면 head안에 <meta .../>를 수행하고 script src="..</script>를 수행하고 <script> ... </script>를 수행한다. 그 후 <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 |
| HTML - HTML 시작하기 (0) | 2011.11.08 |
