jquery, javascript_스터디3(요소찾기: 태그명, eq(), children(), parent(), parents(), next(), prev(), insertBefore(), insertAfter(), prependTo(), appendTo(), html(), clone(), 이동시키기, remove(), 속성값 얻기, 속성값 넣기 )

2018. 2. 19. 22:31

오늘 배운 것들

태그명, 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">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<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">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<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">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
 <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="뉴스&amp;행사" /></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>
<!-- http://www.lgdisplay.com/lgdhp/app/com/home.dev-->

html(): 기존에 있었던 태그들이 사라지고, html()안에 기재된 요소만 생성됨.

<!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" lang="ko" xml:lang="ko">
 <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="뉴스&amp;행사" /></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>
<!-- http://www.lgdisplay.com/lgdhp/app/com/home.dev-->

연습문제: 투자정보에 hotInfo넣기

insertBefore() 또는 prependTo() 사용하기

<!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" lang="ko" xml:lang="ko">
 <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="뉴스&amp;행사" /></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>
<!-- http://www.lgdisplay.com/lgdhp/app/com/home.dev-->

연습문제: appendTo()를 써서 특정태그 이동시키기

<!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" lang="ko" xml:lang="ko">
 <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="뉴스&amp;행사" /></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>
<!-- http://www.lgdisplay.com/lgdhp/app/com/home.dev-->

clone(): 복사하기

연습문제: 복사해서 이동시키기

<!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" lang="ko" xml:lang="ko">
 <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="뉴스&amp;행사" /></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>
<!-- http://www.lgdisplay.com/lgdhp/app/com/home.dev-->

remove(): 특정 변수 삭제하기

연습문제: $news2 삭제하기

<!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" lang="ko" xml:lang="ko">
 <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="뉴스&amp;행사" /></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>
<!-- http://www.lgdisplay.com/lgdhp/app/com/home.dev-->

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">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
 <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="뉴스&amp;행사" /></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>
<!-- http://www.lgdisplay.com/lgdhp/app/com/home.dev-->

저작자표시 비영리 변경금지

'코드(프로그램언어) > 자바스크립트(Javascript),제이쿼리(Jquery)' 카테고리의 다른 글

jquery, javascript_스터디7( 애니메이션-show, hide, toggle, slideDown, slideUp, slideToggle, 애니메이션 중복막기, stop, fadeIn, fadeOut, fadeToggle, fadeTo ) (0)	2018.03.05
jquery, javascript_스터디6( 위치 활용: 이미지 x, y축으로 움직이기, 스크롤값이용 이미지 올리기) (0)	2018.02.28
jquery, javascript_스터디5( setInterval 활용한 랜덤숫자 css, clearInterval, 상태변수, 화면위치좌표:position, outerHeight, outerWidth, scrollTop, scrollLeft, top, left ) (0)	2018.02.26
jquery, javascript_스터디4( attr, click, mouseover, mouseout, 임의함수이벤트걸기, bind, unbind, setInterval, Math.random, parseInt ) (0)	2018.02.21
jquery, javascript_스터디2(함수, 내장함수, 외장함수, jquery사용법) (0)	2018.02.12
jquery, javascript_스터디1(변수, 개체속성, alert, confirm, if) (0)	2018.02.12

강서딸바보's TECH

jquery, javascript_스터디3(요소찾기: 태그명, eq(), children(), parent(), parents(), next(), prev(), insertBefore(), insertAfter(), prependTo(), appendTo(), html(), clone(), 이동시키기, remove(), 속성값 얻기, 속성값 넣기 )

'코드(프로그램언어) > 자바스크립트(Javascript),제이쿼리(Jquery)' 카테고리의 다른 글

+ Recent posts

티스토리툴바