.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript "></script>
    <script type="text/javascript ">
        $(document).ready(function () {
            //h3요소 모두 가져오기
            var headers = $('h3');
            //반복문을 써서 반복: for문보다는 jQuery의 each문이 사용하기 편리
            for (var i = 0; i < headers.length; i++) {
                alert($(headers[i]).html());
            }

            $('h3').each(function (index) {
                alert($(this).html());
            });
        });
    </script>
</head>
<body>
<h3>제목1</h3>
<h3>제목2</h3>
</body>
</html>

오늘 jquery의 매력에 푸욱~ 빠졌다 ㅎ

웹표준을 준수한다는 점과 크로스브라우징으로 모든 브라우져가 가능 하다는 점(심지어 IE6도~!!!!!) 



45가지네비게이션 메뉴 튜토리얼
http://www.noupe.com/jquery/45-jquery-navigation-plugins-and-tutorials.html
  



38가지 서브메뉴 네비게이션  튜토리얼

http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/


여러 디자인의 서브메뉴

http://apycom.com/
 


다양하고 신기한 Jquery  예제 튜토리얼 사이트

http://tympanus.net/codrops/category/tutorials/ 

<script language="JavaScript1.2" type="text/javascript">
<!--
var slideshow_width='960px' //가로크기
var slideshow_height='530px' //세로크기
var pause=2000 //장면전환시간 (2000=2초)
var fadeimages=new Array()
    fadeimages[0]="/img_intro_001.jpg"
    fadeimages[1]="/img_intro_002.jpg"
    fadeimages[2]="/img/img_intro_003.jpg"
    fadeimages[3]="/img/img_intro_004.jpg"
    fadeimages[4]=/img/img_intro_005.jpg"
    fadeimages[5]="/img/img_intro_006.jpg"
    fadeimages[6]="/img/img_intro_007.jpg"
var preloadedimages=new Array()
    for (p=0;p<fadeimages.length;p++){
        preloadedimages[p]=new Image()
        preloadedimages[p].src=fadeimages[p]
}
var ie4=document.all
var dom=document.getElementById
if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
    else
        document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')
var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
    if (curpos<100){
        curpos+=10
    if (tempobj.filters)
        tempobj.filters.alpha.opacity=curpos
    else if (tempobj.style.MozOpacity)
        tempobj.style.MozOpacity=curpos/101
    }
    else{
        clearInterval(dropslide)
        nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
        tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
        tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
        nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
        var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
        tempobj2.style.visibility="hidden"
        setTimeout("rotateimage()",pause)
    }
}
function rotateimage(){
    if (ie4||dom){
        resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
        crossobj.style.zIndex++
        tempobj.style.visibility="visible"
    var temp='setInterval("fadepic()",50)'
        dropslide=eval(temp)
        curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
        document.images.defaultslide.src=fadeimages[curimageindex]
        curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
    curpos=10
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    if (crossobj.filters)
        crossobj.filters.alpha.opacity=curpos
    else if (crossobj.style.MozOpacity)
        crossobj.style.MozOpacity=curpos/101
}
function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
        crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
        rotateimage()
}
if (ie4||dom)
    window.onload=startit
    else
        setInterval("rotateimage()",pause)
//-->
</script>

+ Recent posts