오늘 배운 것들
태그명, eq(), children(), parent(), parents(), next(), prev(), insertBefore(), insertAfter(), prependTo(), appendTo(), html(), clone(), 이동시키기, remove(), 속성값 얻기, 속성값 넣기
"ul" 태그명으로 요소 찾기
eq, children, parent, parents, next, prev 활용하기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
// subMenu라는 클래스명을 가진 것들을 담은 배열
var $subMenu = $(".subMenu");
// subMenu와 같은 것들을 선택할수 있는 다른 방법(요소 네이밍 파악후 가능)
// mainMenu클래스 아래에 ul이라는 요소는 전부 subMenu라는 클래스를 가지고 있기에 아래처럼 만들수 도 있음.
var $subMenu = $(".mainMenu").children("ul");
// subMenu라는 클래스명을 가진 것들 중에서 첫번째에 해당되는 것에만 css 속성 부여
$subMenu.eq(0).css("border", "solid 3px red");
// subMenu라는 클래스명을 가진 것들 중 첫번째에 해당되는 것들 아래에 해당되는 것들 중에 2번째
var $ceo = $subMenu.eq(0).children().eq(1);
// subMenu라는 클래스명을 가진 것들 중 첫번째에 해당되는 것들 아래에 해당되는 것들 중에 2번째에 css 속성 부여
$ceo.css("border", "solid 5px yellow");
// 뉴스행사라는 것 찾아서 보라색 칠하기
$subMenu.eq(2).children().eq(0).css("border", "solid 2px purple");
// parent 사용하기: 직계부모만 호출
var $subMenu = $(".subMenu");
var $mainMenu = $subMenu.parent();
$mainMenu.css("border","solid 4px green");
// parents 사용하기: 직계부모 전부 호출하기
var $upperParents = $subMenu.parents();
$upperParents.css("border","solid 4px gray");
//prev(), next() 사용하기(형제요소)
$ceo.css("border", "solid 3px green");
$ceo.prev().css("border", "solid 3px red");
$ceo.next().css("border", "solid 3px purple");
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
insertAfter(): 어떤 요소 뒤에 생성
insertBefore(): 어떤 요소 앞에 생성
jquery는 $()안에 태그구문을 넣어주면, 동적으로 태그를 생성해줌.
html dom구조안에 생성시켜줌.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
// 스크립트를 이용해서 태그를 동적을 생성하기
// $()안에 태그가 기재되면 동적으로 태그를 생성하게됨.
var $hotInfo = $("<li><a href='#'><img src='images/main/hotinfo.gif' alt='hotinfo' /></a></li>");
// ceo 태그 셀렉팅하기: subMenu를 클래스명으로 가진 것들중 첫번째의 2번째 자식태그
var $subMenu = $(".subMenu");
var $ceo = $subMenu.eq(0).children().eq(1);
$ceo.css("border", "solid 3px red");
// $ceo를 기준으로 그 전에 $hotInfo를 넣어줌
$hotInfo.insertBefore($ceo);
// $ceo를 기준으로 그 다음에 $hotInfo를 넣어줌
$hotInfo.insertAfter($ceo);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
prependTo(): 어떤 요소 안의 맨처음에 생성
appendTo(): 어떤 요소 안의 다음에 생성
슬라이드가 위의 2개를 사용한 로직이 적용되어 많이 사용됨
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
// 스크립트를 이용해서 태그를 동적을 생성하기
// $()안에 태그가 기재되면 동적으로 태그를 생성하게됨.
var $hotInfo = $("<li><a href='#'><img src='images/main/hotinfo.gif' alt='hotinfo' /></a></li>");
// ceo 태그 셀렉팅하기: subMenu를 클래스명으로 가진 것들중 첫번째의 2번째 자식태그
var $subMenu = $(".subMenu");
var $ceo = $subMenu.eq(0).children().eq(1);
$ceo.css("border", "solid 3px red");
// $subMenu안의 요소 맨 뒤에 ()안의 태그들이 추가로 생성됨.
$hotInfo.appendTo($subMenu);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
html(): 기존에 있었던 태그들이 사라지고, html()안에 기재된 요소만 생성됨.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
// 스크립트를 이용해서 태그를 동적을 생성하기
// $()안에 태그가 기재되면 동적으로 태그를 생성하게됨.
var $hotInfo = $("<li><a href='#'><img src='images/main/hotinfo.gif' alt='hotinfo' /></a></li>");
// ceo 태그 셀렉팅하기: subMenu를 클래스명으로 가진 것들중 첫번째의 2번째 자식태그
var $subMenu = $(".subMenu");
var $ceo = $subMenu.eq(0).children().eq(1);
// html(): 기존에 있었던 태그들이 사라지고, html()안에 기재된 요소만 생성됨.
$subMenu.html($hotInfo);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
연습문제: 투자정보에 hotInfo넣기
insertBefore() 또는 prependTo() 사용하기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
// 스크립트를 이용해서 태그를 동적을 생성하기
// $()안에 태그가 기재되면 동적으로 태그를 생성하게됨.
var $hotInfo = $("<li><a href='#'><img src='images/main/hotinfo.gif' alt='hotinfo' /></a></li>");
// ceo 태그 셀렉팅하기: subMenu를 클래스명으로 가진 것들중 첫번째의 2번째 자식태그
var $subMenu = $(".subMenu");
var $ceo = $subMenu.eq(0).children().eq(1);
var $newsEventSubmenu = $subMenu.eq(2);
var $newsEvent = $subMenu.eq(2).children().eq(0);
//$hotInfo.insertBefore($newsEvent);
$hotInfo.prependTo($newsEventSubmenu);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
연습문제: appendTo()를 써서 특정태그 이동시키기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
var $subMenu2 = $(".subMenu").eq(2);
var $news = $subMenu2.children().eq(0);
$news.css("border", "solid 2px red");
// appendTo()를 써서 $news 이동시키기
var $subMenu4 = $(".subMenu").eq(4);
$news.appendTo($subMenu4);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
clone(): 복사하기
연습문제: 복사해서 이동시키기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
var $subMenu2 = $(".subMenu").eq(2);
var $news = $subMenu2.children().eq(0);
$news.css("border", "solid 2px red");
// appendTo()를 써서 $news 이동시키기
var $subMenu4 = $(".subMenu").eq(4);
var $news2 = $news.clone();
$news2.appendTo($subMenu4);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
remove(): 특정 변수 삭제하기
연습문제: $news2 삭제하기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
var $subMenu2 = $(".subMenu").eq(2);
var $news = $subMenu2.children().eq(0);
$news.css("border", "solid 2px red");
// appendTo()를 써서 $news 이동시키기
var $subMenu4 = $(".subMenu").eq(4);
var $news2 = $news.clone();
$news2.appendTo($subMenu4);
// remove(): 삭제하기
$news2.remove();
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>
css의 속성값 얻기, 넣기
overflow hidden 하기전
overflow hidden 한 후
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQueryDom_test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
var $header = $("#header");
//alert($header.css("height"));
$header.css("height", 80);
var $subMenu=$(".subMenu");
// css 속성 opacity를 이용해서 opacity 0 만들기
$subMenu.css("opacity", 0);
// css 속성 overflow를 이용해서 테두리 바깥에 나가는 부분은 안보이게 하기
$header.css("overflow", "hidden");
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="skip"><a href="#container">본문 바로가기</a></p>
<div class="headerInner">
<h1 class="skip">LG디스플레이로고</h1>
<p id="logo"><a href=""><img src="images/main/logo.gif" alt="LG디스플레이" /></a></p>
<ul class="gnbMenu">
<li><a href="#"><img src="images/main/util_home_off.gif" alt="홈" /></a></li>
<li><a href="#"><img src="images/main/util_faq_off.gif" alt="FAQ" /></a></li>
<li><a href="#"><img src="images/main/util_sitemap_off.gif" alt="sitemap" /></a></li>
<li><a href="#"><img src="images/main/util_eng_off.gif" alt="ENG" /></a></li>
<li class="last"><a href="#"><img src="images/main/util_chn_off.gif" alt="CHN" /></a></li>
</ul>
<h2 class="skip">메인메뉴</h2>
<ul id="mainMenu">
<li class="mainMenu"><a href="#"><img class="onimg" src="images/main/gnb01_00_off.gif" alt="기업정보" /></a>
<p><img src="images/main/gnb01_txt.gif" alt="기업정보 - 세계표준이 되는 디스플레이 기업 LG Display" /></p>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb01_01_off.gif" alt="비젼" /></a></li>
<li><a href="#"><img src="images/main/gnb01_02_off.gif" alt="ceo인사말" /></a></li>
<li><a href="#"><img src="images/main/gnb01_03_off.gif" alt="경영진소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_04_off.gif" alt="사업분야" /></a></li>
<li><a href="#"><img src="images/main/gnb01_05_off.gif" alt="사업장소개" /></a></li>
<li><a href="#"><img src="images/main/gnb01_06_off.gif" alt="연혁" /></a></li>
<li><a href="#"><img src="images/main/gnb01_07_off.gif" alt="Ci" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb02_00_off.gif" alt="제품기술정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb02_01_off.gif" alt="제품소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_02_off.gif" alt="기술소개" /></a></li>
<li><a href="#"><img src="images/main/gnb02_03_off.gif" alt="IPS" /></a></li>
<li><a href="#"><img src="images/main/gnb02_04_off.gif" alt="FPR3D" /></a></li>
</ul>
</li>
<li class="mainMenu" ><a href="#"><img src="images/main/gnb03_00_off.gif" alt="투자정보" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb03_01_off.gif" alt="뉴스&행사" /></a></li>
<li><a href="#"><img src="images/main/gnb03_02_off.gif" alt="공시정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_03_off.gif" alt="주식정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_04_off.gif" alt="재무정보" /></a></li>
<li><a href="#"><img src="images/main/gnb03_05_off.gif" alt="IR자료실" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb04_00_off.gif" alt="인재채용" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb04_01_off.gif" alt="채용공고" /></a></li>
<li><a href="#"><img src="images/main/gnb04_02_off.gif" alt="Why LG Display" /></a></li>
<li><a href="#"><img src="images/main/gnb04_03_off.gif" alt="입사지원 가이드" /></a></li>
<li><a href="#"><img src="images/main/gnb04_04_off.gif" alt="나의 지원내역" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb05_00_off.gif" alt="홍보센터" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb05_01_off.gif" alt="보도자료" /></a></li>
<li><a href="#"><img src="images/main/gnb05_03_off.gif" alt="사이버체험관" /></a></li>
<li><a href="#"><img src="images/main/gnb05_04_off.gif" alt="LG Display 사보" /></a></li>
<li><a href="#"><img src="images/main/gnb05_05_off.gif" alt="홍보자료관" /></a></li>
</ul>
</li>
<li class="mainMenu"><a href="#"><img src="images/main/gnb06_00_off.gif" alt="지속가능경영" /></a>
<ul class="subMenu">
<li><a href="#"><img src="images/main/gnb06_01_off.gif" alt="사회공헌" /></a></li>
<li><a href="#"><img src="images/main/gnb06_02_off.gif" alt="환경경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_03_off.gif" alt="정도경영" /></a></li>
<li><a href="#"><img src="images/main/gnb06_04_off.gif" alt="공정거래" /></a></li>
<li><a href="http://www.lgdisplay.com/lgdhp/app/com/home.dev" target="_blank"><img src="images/main/gnb06_05_off.gif" alt="지속가능경영보고서" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
<div id="mainVisual">
<ul class="script">
<li class="visual01"><a href="#"><img id="visual_img" class="img01" src="images/main/visual_01.jpg" alt="" /></a></li>
</ul>
</div>
<ul class="control">
<li id="stop_btn"><a href="#"><img src="images/main/btn_prev.gif" alt="이벤트멈추기" /></a></li>
<li id="start_btn"><a href="#"><img src="images/main/btn_next.gif" alt="이벤트실행" /></a></li>
</ul>
</div>
</div>
</body>
</html>