'JS/jQuery'에 해당되는 글 3건

  1. 2017.03.27 jQuery 메뉴트리 이벤트
  2. 2015.08.13 jQuery append, prepend
  3. 2015.08.13 jQuery each() 반복문

jQuery 메뉴트리 이벤트

JS/jQuery 2017. 3. 27. 15:13 |


JQuery 메뉴트리 


<head>
    <script type="text/javascript">
        $(document).ready(function () {
            //상위 메뉴 
            $("ul.sidemenu li.firstOff, ul.sidemenu li.firstOn").click(function (e) {

                var data = $(this).data();
                if (menuChildMenuCnt < 1) {
                    doPageMove();
                    return;
                }

                if ($(this).hasClass("firstOff")) {
                    $(this).removeClass("firstOff").addClass("firstOn");
                    $(this).find("ul:first").removeClass("hide").addClass("show");
                }
                else {
                    $(this).removeClass("firstOn").addClass("firstOff");
                    $(this).find("ul:first").removeClass("show").addClass("hide");
                }
                doPageMove();
            });

            // 하위 메뉴 ON, OFF
            $("ul.sidemenu li.secondOff, ul.sidemenu li.secondOn, ul.sidemenu li.secondOut").click(function (e) {

                var data = $(this).data();

                if (menuChildMenuCnt < 1) {
                    doPageMove();
                    return;
                }
                doPageMove();
            });
          
            //메뉴 클릭시 이벤트
            function doPageMove() {
            alert("메뉴트리")   
        })
        ;
    </script>
</head>
<div class="lnb">
    <ul class="sidemenu">
            <li class="firstOn">
                <a href="javascript:void(0);"><b>상위</b></a>
                <ul class="show">
                    <#list 201701..201705 as item>
                        <li class="secondOut">
                          <a href="javascript:void(0);">하위1</a>
                        </li>
                         <li class="secondOut">
                          <a href="javascript:void(0);">하위2</a>
                        </li>
                         <li class="secondOut">
                          <a href="javascript:void(0);">하위3</a>
                        </li>
                </ul>
            </li>
    </ul>
</div>


페이지 이동할 경우엔 doPageMove 함수에 정의해주면 된다.


저작자표시

'JS > jQuery' 카테고리의 다른 글

jQuery append, prepend  (0) 2015.08.13
jQuery each() 반복문  (0) 2015.08.13
Posted by 양승아
:

jQuery append, prepend

JS/jQuery 2015. 8. 13. 11:20 |

jQuery append, prepend 함수 


append 는 뒤로 추가되는거!

prepend 는 앞에 추가되는거!

추가 되는건 같지만 위치다름!!


$("selector").append('<b>셀렉터 뒤에 추가</b>');
$("<b>추가</b>").appendTo("<h1>");                    //셀렉터가 <h1> 사이에 추가됨 (맨뒤)
$("selector").prepend('<b>셀렉터 앞에 추가</b>')     // 맨앞에 추가됨
$("<b>추가</b>").prependTo("<h1>");                   //셀렉터가 <h1> 사이에 맨앞에 추가됨


append는 셀렉트 사이에 에서 맨뒤에 추가

appendTo 는 셀럭트가 엘러먼트 사이 맨뒤에 추가


prepend 는 셀렉트 사이 맨앞에 추가

prependTo 는 셀렉트가 엘리먼트 사이 맨앞에 추가

저작자표시

'JS > jQuery' 카테고리의 다른 글

jQuery 메뉴트리 이벤트  (0) 2017.03.27
jQuery each() 반복문  (0) 2015.08.13
Posted by 양승아
:

jQuery each() 반복문

JS/jQuery 2015. 8. 13. 10:58 |

jQuery 반복문 each 함수!


.each(function(index,element)) 




$('selector').each 

:셀렉터는 앞에 원하는걸로 선택함.




function

: 반복문 한 바퀴마다 실행될 익명함수




index 

: 반복문이 몇바퀴 째인지 알수 있는 인덱스



element

: 현재 반복문에서 셀렉트되는 엘리먼트를 나타냄

익명함수 내부에서 $(element)로 셀렉트 할수 있음

사용하지 않을 경우헤는 제외해도됨

또한 element대신 this 사용해도됨


 


결과 :

테스트01

테스트02

테스트03


이렇게 나옴

e = this 라고 보면 된다.


index 출력시


0

1

2


결과적으로 each 함수는 셀렉터만 잘 잡고 익명함수를 구현하면 된다.!!



저작자표시

'JS > jQuery' 카테고리의 다른 글

jQuery 메뉴트리 이벤트  (0) 2017.03.27
jQuery append, prepend  (0) 2015.08.13
Posted by 양승아
:

티스토리툴바