'코드(프로그램언어)/자바스크립트(Javascript),제이쿼리(Jquery)' 카테고리의 글 목록 (2 Page)

코드(프로그램언어)/자바스크립트(Javascript),제이쿼리(Jquery)

jquery, javascript_스터디3(요소찾기: 태그명, eq(), children(), parent(), parents(), next(), prev(), insertBefore(), insertAfter(), prependTo(), appendTo(), html(), clone(), 이동시키기, remove(), 속성값 얻기, 속성값 넣기 ) 2018.02.19
jquery, javascript_스터디2(함수, 내장함수, 외장함수, jquery사용법) 2018.02.12
jquery, javascript_스터디1(변수, 개체속성, alert, confirm, if) 2018.02.12

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

jquery, javascript_스터디2(함수, 내장함수, 외장함수, jquery사용법)

2018. 2. 12. 22:18

함수란?

실행할 명령을 바로 실행하지 않고 함수에 저장하였다가 필요에 따라 그 함수명만 호출하여 그 함수에 저장되어 있는 명령을 실행하는 구문

형식

function 함수명(매개변수) {

저장할 명령

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>function_test</title>
  <meta name="description" content="">
  <meta name="author" content="Administrator">
  <meta name="viewport" content="width=device-width; initial-scale=1.0">
  <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <script>
    
    function printFruit(fruit){
        
        document.write(fruit);
        
    }
    
    printFruit('apple');
    
  </script>
</head>
<body>
 
</body>
</html>

내장함수: 자바스크립트에서 이미 정의내려둔 함수

외장함수: 사용자 임의 새로 정의해둔 함수

내장함수 사용 테스트

  <script>
 
    window.onload=function(){
        
        var divs = document.getElementsByTagName('div');
        alert(divs.length);
    }
    
  </script>

내장함수

getElementsByTagName(): 태그이름의 요소를 배열화해서 변수에 담기

getElementsByClassName(): 클래스이름의 요소를 배열화해서 변수에 담기

getElementByID(): 아이디이름의 요소를 변수에 담기

<script>
 
    window.onload=function(){
        
        var divs = document.getElementsByTagName('div');
        //alert(divs.length);
        
        
        /*divs[0].style.border = "solid 3px red";
        divs[1].style.border = "solid 3px red";
        divs[2].style.border = "solid 3px red";
        */
        for(var i = 0; i<divs.length; i++){
            
            divs[i].style.border = "solid 3px purple";
            
        }
        
        var subMenus = document.getElementsByClassName('subMenu');
        
        for(var i = 0; i<subMenus.length; i++){
            
            subMenus[i].style.border = "solid 3px yellow";
        }
        
        var logo = document.getElementById("logo");
        
        logo.style.border = "solid 3px red";
        
    }
   
  </script>

jquery

자바스크립트에서 자주쓰이는 것들을 간단하게 정의해놓은 것.

사용법

library파일을 호출하기

<script></script>안에서 사용하기

기본규칙

"태그명"

".클래스명"

"#아이디명"

스타일 함수

css("스타일종류", "스타일값")

tip: 자바스크립트와 다르게 jquery는 변수명 앞에 $를 붙이면 for문을 쓰지 않아도 됨.

<script src="libs/jquery-1.7.1.min.js"></script>
 
<script>
      $(document).ready(function(){
        
        //tip: 자바스크립트와 다르게 jquery는 변수명 앞에 $를 붙이면 for문을 쓰지 않아도 됨.        
        var $divs = $("div");
        
        $divs.css("border","solid 3px red");
        
        var $subMenu=$(".subMenu");
        
        $subMenu.css("border", "solid 3px purple");
        
        var $logo=$("#logo");
        $logo.css("border", "solid 3px green");
  
      });
</script>

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

'코드(프로그램언어) > 자바스크립트(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_스터디3(요소찾기: 태그명, eq(), children(), parent(), parents(), next(), prev(), insertBefore(), insertAfter(), prependTo(), appendTo(), html(), clone(), 이동시키기, remove(), 속성값 얻기, 속성값 넣기 ) (0)	2018.02.19
jquery, javascript_스터디1(변수, 개체속성, alert, confirm, if) (0)	2018.02.12

jquery, javascript_스터디1(변수, 개체속성, alert, confirm, if)

2018. 2. 12. 20:14

스크립트가 어렵지 않다.

재밌게 해보자.

지식을 배우는게 아니라, 엔지니어이면서 만들어내야하는 사람이다.

활용 배우는거 많이 나간다.

node설치

aptana studio 설치

설치는 어렵지 않음... 저장경로, next

화면디자인 설정

preference -> Themes ->Dark Studio, Monokai Dark 선택

파일을 생성해주기

new -> html -> html5 template

변수(variable)

임의의 데이터값을 특정 변수에 저장하여 그 데이터값을 수시로 바꿔가면서 쓸 수 있는 수

변수는 숫자로 시작할수 없음.

.... 너무 쉽다....

document.write 변수 넣은 결과

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Always force latest IE rendering engine  (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1">
  <title>자바스크립트</title>
  <meta name="description" content="">
  <meta name="author" content="Administrator">
  <meta name="viewport"  content="width=device-width; initial-scale=1.0">
  <!-- Replace favicon.ico &  apple-touch-icon.png in the root of your domain  and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon"  href="/apple-touch-icon.png">
  <script>
    
    var address = "서울시 마포구 노고산동 12345";
    
    document.write(address);
    
  </script>
</head>
<body>
  
</body>
</html>

숫자 + 숫자 결과값

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Always force latest IE rendering engine  (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1">
  <title>자바스크립트</title>
  <meta name="description" content="">
  <meta name="author" content="Administrator">
  <meta name="viewport"  content="width=device-width; initial-scale=1.0">
  <!-- Replace favicon.ico &  apple-touch-icon.png in the root of your domain  and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon"  href="/apple-touch-icon.png"> 
 <script>
    
    var a = "AptanaStudio";
    
    var b = 4;
    
    var c = 10;
    
    var result = b*c;
    
    document.write(result);
    
  </script>
</head>
<body>
  
</body>
</html>

문자 + 숫자 결과값

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Always force latest IE rendering engine  (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1">
  <title>자바스크립트</title>
  <meta name="description" content="">
  <meta name="author" content="Administrator">
  <meta name="viewport"  content="width=device-width; initial-scale=1.0">
  <!-- Replace favicon.ico &  apple-touch-icon.png in the root of your domain  and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon"  href="/apple-touch-icon.png">
<script>
    
    var a = "AptanaStudio";
    
    var b = 4;
    
    var c = 10;
    
    var result = a+c;
    
    document.write(result);
    
  </script>
</head>
<body>
  
</body>
</html>

문자-문자 결과값

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Always force latest IE rendering engine  (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1">
  <title>자바스크립트</title>
  <meta name="description" content="">
  <meta name="author" content="Administrator">
  <meta name="viewport"  content="width=device-width; initial-scale=1.0">
  <!-- Replace favicon.ico &  apple-touch-icon.png in the root of your domain  and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon"  href="/apple-touch-icon.png">
<script>

    
    var a = "AptanaStudio";
    
    var b = 4;
    
    var c = 10;
    
    var result = a+c;
    
    document.write(result);
    
  </script>
</head>
<body>
  
</body>
</html>

객체속성

배열형태로 담을 수 있음.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Always force latest IE rendering engine  (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1">
  <title>자바스크립트</title>
  <meta name="description" content="">
  <meta name="author" content="Administrator">
  <meta name="viewport"  content="width=device-width; initial-scale=1.0">
  <!-- Replace favicon.ico &  apple-touch-icon.png in the root of your domain  and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon"  href="/apple-touch-icon.png">
<script>
    
    var dog = {
        "age": 8,
        "name": "dog1"          
    }
    
    document.write("강아지 나이는 " + dog.age +  "살 입니다.");
    
    document.write("강아지 이름은 " + dog.name +  "입니다.");
  </script>
</head>
<body>
  
</body>
</html>

Alert, Confirm

if구문

if(조건1){

조건1에 해당될때 실행할 명령

}else if(조건2){

조건2에 해당될때 실행할 명령

}else{

아무 조건에 해당되지 않을때 실행할 명령

}

기본연산이해

a=b

a 라는 변수에 b값을 대입

a==b

a값과 b값이 서로 같다.

확인 클릭시

취소클릭시

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Always force latest IE rendering engine  (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1">
  <title>자바스크립트</title>
  <meta name="description" content="">
  <meta name="author" content="Administrator">
  <meta name="viewport"  content="width=device-width; initial-scale=1.0">
  <!-- Replace favicon.ico &  apple-touch-icon.png in the root of your domain  and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon"  href="/apple-touch-icon.png">
<script>
    
    var result = confirm("코딩이 재밌나요?");
    
    if(result == true){
        alert("나두 재밌어요.");
        
    }else if(result == false){
        alert("난 재밌는데~");       
    }
  </script>
</head>
<body>
  
</body>
</html>

주석처리

* 여러행주석처리

//한줄주석처리

//주석처리
    /*
     * 여러행주석처리
     */
    
    //한줄주석처리

if문 실습

문제

영어점수와 국어점수 모두 90점 이상이면 A학점

영어점수와 국어점수의 합이 170점 이상이면 B학점

영어점수 또는 국어점수가 90점 이상이면 C학점

나머지 모두는 D학점

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Always force latest IE rendering engine  (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1">
  <title>자바스크립트</title>
  <meta name="description" content="">
  <meta name="author" content="Administrator">
  <meta name="viewport"  content="width=device-width; initial-scale=1.0">
  <!-- Replace favicon.ico &  apple-touch-icon.png in the root of your domain  and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon"  href="/apple-touch-icon.png">
<script>
    
    
    /*
     * 영어점수와 국어점수 모두 90점 이상이면 A학점
     * 영어점수와 국어점수의 합이 170점 이상이면  B학점
     * 영어점수 또는 국어점수가 90점 이하이면 C학점
     * 나머지 모두는 D학점
     */
    var engScore = prompt("영어점수를  기입해주세요.");
    
    var korScore = prompt("국어점수를  기입해주세요.");
    
    if(engScore >=90 && korScore >= 90){
        document.write("학점은 A입니다.");
        
    }else if(engScore + korScore >=170){
        document.write("학점은 B입니다.");
                
    }else if(engScore >=90 || korScore >= 90){
        document.write("학점은 C입니다.");
        
    }else{
        
        document.write("학점은 D입니다.");
        
    }
    
    
  </script>
</head>
<body>
  
</body>
</html>

노하우 TIP

위의 if문은일반적 학점계산법이 적용되지 않았지만, 계산결과값은 A~D에서 정해짐.

그 이유는 첫번째 if가 아닌 것 중에서 2번째 else if가 아닌것 중에서 3번째 else if가 아닌 것 중에서 else임.

즉, if에는 순서가 적용되어서 걸러짐.

switch하고는 다른점이 논리적용 순서가 있다는 것이다.

for구문(반복구문)

특정한 규칙에 따라 실행할 명령을 반복해 주는 구문

형식

for(초기값; 조건식; 증감식){

반복할 명령

}

초기값: ~~부터

조건식: ~~할때까지

증감식: ~~하면서

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Always force latest IE rendering engine  (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1">
  <title>자바스크립트 수업</title>
  <meta name="description" content="">
  <meta name="author" content="Administrator">
  <meta name="viewport"  content="width=device-width; initial-scale=1.0">
  <!-- Replace favicon.ico &  apple-touch-icon.png in the root of your domain  and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon"  href="/apple-touch-icon.png">
  <script>
    
    for(var i = 0; i<=100; i++){
        
        document.write(i+"
");
    }
    
    
  </script>
</head>
<body>
  
</body>
</html>

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

'코드(프로그램언어) > 자바스크립트(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_스터디3(요소찾기: 태그명, eq(), children(), parent(), parents(), next(), prev(), insertBefore(), insertAfter(), prependTo(), appendTo(), html(), clone(), 이동시키기, remove(), 속성값 얻기, 속성값 넣기 ) (0)	2018.02.19
jquery, javascript_스터디2(함수, 내장함수, 외장함수, jquery사용법) (0)	2018.02.12

PREV 1 2 NEXT

강서딸바보's TECH