[jquery.html]

1) .mouseover(), .mouseout()

 

<div class="lab">

        <div class="out">

            <p>마우스를 여기로 움직이세요.</p>

            <p>0</p>

        </div>

        <button id="b1">전체화면보기</button>

    </div>

 

jquery는 mouseover, mouseout을 둘다 지정해줘야함. 

hover와 다른 점은 마우스를 out했을 때 다시 돌아오지 않는다는 점. hover는 돌아옴

$("div.out").mouseover(function(){

        $("p:first",this).text("mouse over");

        $("p:last",this).text(++i);

    })

    $("div.out").mouseout(function(){

        $("p:first",this).text("mouse out");

    })

 ** this를 왜 해줘야 하나?

2) 버튼 클릭으로 구글 창 띄우기

 

$("#b1").on("click",

    {   url: "http://www.google.com",

        winattributes: "resize=1 , scrollbars=1, status=1"  },//상태바

        max_open);  //전체화면

function max_open(event){

    var maxwindow=window.open(event.data.url,"",event.data.winattributes);

    maxwindow.moveTo(0,0);

    maxwindow.resizeTo(screen.availWidth,screen.availHeight);// 사용가능한 가로세로 길이 받기

}

 

3) 버튼 동작 제어

<div class="lab">

            <button id="theone">Does nothing...</button>

            <button id="bind">Add Click</button>

            <button id="unbind">Remove Click</button>

            <div id="off_test" style="display:none;">Click!</div>

    </div>

    $("#bind").click(function() {

        //수업코드

        $("body")

        .on("click", "#theone", flash)

        .find("#theone").text("Can Click!");

        //내가 수정한코드

        // $("#theone").click(flash)

        // .text("Can Click!");

    })

    $("#unbind").click(function() {

        $("body")

        .off("click", "#theone", flash)

        .find("#theone").text("Does nothing...");

    })

   

   function flash() {  //click! div 보여주고 사라지는 동작 수행

        $("#off_test").show().fadeOut("slow");

    }

 

 

        // $("#theone").click(flash)  .text("Can Click!"); 쓰면안됨 

 

$("#theone").click(flash) .text("Can Click") 쓰면 안됨. $(body)통해서 on() off()주어야 does nothing이 작동함

왜 $("#theone")으로 접근하면 안됨?

 

 

4) 버튼 클릭 .trigger()

<div class="lab">

        <div id="trigger_test">

            <button id="button1">Button #1</button>

            <button id="button2">Button #2</button>

            <div><span>0</span>Button #1 clicks.</div>

            <div><span>0</span>Button #2 clicks.</div>

        </div>

</div>

 

    $("#trigger_test button:first").click(function(){                 

        update($("#trigger_test span:first"));

    });

    $("#trigger_test button:last").click(function(){

        $("#trigger_test button:first").trigger("click"); //button:first의 "click"기능 trigger

        update($("#trigger_test span:last"));

    });

 

    function update(j){

        var n = parseInt(j.text(),10);

        j.text(n+1);

    }

- #trigger_test 부모 지정안해주면 button 인식못함

-  j.text(n++); 안됨

 

5) 이미지 변경하기

<div class="lab">

    <h3>이미지 변경하기</h3>

        <div id="imageArea">

            <img src="paulkim1.jpg" width="240" alt="" id="image">

        </div>

</div>

 

 

-->여기서는 split으로 경로 안자름

-->ajax에서 잘랐었나 확인해보기

var imgsrc=$("#imageArea img").attr(src);

var src = imgsrc.split('/');

if("paulkim1.jpg"==src[imgsrc.length()-1])

$("#imageArea img").attr(src,"paulkim2.jpg");

 

 

    $("#image").click(function(){

        var src = $("#image").attr("src")

        if(src=="paulkim1.jpg"){

            $("#image").attr("src","paulkim2.jpg");

        }

       

        else{

            $("#image").attr("src","paulkim1.jpg");

        }

   

    })

 

6)이미지 앨범

 

<div class="lab">

    <h3>사진앨범</h3>

        <div><img src="" alt="" width="250" height="250" id="imgAlbum"></div>

</div>

 

 

var imgArray=["hangman0.gif","hangman1.gif","hangman2.gif","hangman3.gif","hangman4.gif"];

    var index=0;

    $("#imgAlbum").attr("src",imgArray[index]);

    $("#imgAlbum").click(function(){

        if(index==imgArray.length){

            index=0;

        }

        else{

            $("#imgAlbum").attr("src",imgArray[index]);

            index++;

        }    

    })

 

 

jQuery에서 src변경할 때 .attr()이용 .src()아님

 

7)스케줄 노트

 

- css에 popup 클래스를 만들어 두고 position fixed로 화면 가운데에 조그만 div띄우게 설정

- js에서 +이미지 클릭하면 display:none이던 기존 스케줄 노트 div에 addClass("popup")을 해서 position,top,left,z-index,backcolor등을 설정하고 fadeIn으로 화면을 띄워 팝업 효과를 냄. 적절한 fadeIn,fadeOut의 사용(display:block으로 접근X)

- popup클래스에서 확인누르면 popup div의 text박스에서 받은 .val()를 str에 저장했다가 스케줄노트 기록 div에 .text(str)로 추가.

<div class="lab" id="schedule">

    <div id="schedule_header">

        <h2>스케줄 노트</h2>

        <div id="add_img">

            <img src="plus_img.jpg" width="30px" style="display:inline-block;"/>

        </div>

    </div>

    <div id="note_form">

        <table>

            <tbody>

                <tr><td>제목</td><td><input type="text" id="note_title"></td></tr>

                <tr><td>날짜</td><td><input type="text" id="note_date"></td></tr>

                <tr><td>내용</td><td><textarea id="note_content" rows="20" cols="50"></textarea></td></tr>

                <tr><td colspan="2" align="center"><button id="add_note">확인</button></td></tr>

            </tbody>

        </table>

    </div>

    <div id="note"></div>

</div>

 

 

  $("#add_img img").click(function(){

        $("#note_form").addClass("popup");

        changePosition($(".popup"));

        $("#note_form").fadeIn(200);

    });

   

    function changePosition(obj){

        var l = ($(window).width() - obj.width())/2;

        var t = ($(window).height() - obj.height())/4;

        obj.css({top: t, left: l});

    }

    $(window).resize(function() {

        changePosition($(".popup"));

    })

   

    $("#add_note").click(push_data);

    function push_data(){

        var title=$("#note_title").val();

        var date=$("#note_date").val();

        var content=$("#note_content").val();

        var str = "<p>" +title+ "<br>" + date + "<br>" + content;

        $("#note_form").fadeOut(200);

        $("#note").append(str);

    }

8)애니메이션 박스

<div class="lab">

    <div id="animation_test">

        <button id="moving_button">이동</button>

        <div id="moving_box"></div>

    </div>

</div>

 

 

    $("#moving_button").click(function(){

        $("#moving_box").animate({

            right:'0px',

            height:'+=50px',

            width:'+=50px'

        });

        $("#animation_test").animate({

            height:'+=50px'

        })

    })

   

9)아코디언 

 

<div class="lab">

    <dl class="accordion">

    <dt>Item 1</dt>

    <dd>some explanation here. some explanation here.</dd>

    <dt>Item 2</dt>

    <dd>some explanation here. some explanation here.</dd>

    <dt>Item 3</dt>

    <dd>some explanation here. some explanation here. </dd>

    </dl>

    <dl class="accordion">

    <dt>Item 1</dt>

    <dd>some explanation here. some explanation here.</dd>

    <dt>Item 2</dt>

    <dd>some explanation here. some explanation here.</dd>

    <dt>Item 3</dt>

    <dd>some explanation here. some explanation here. </dd>

    </dl>

    </div>

 

$(".accordion").each(function() {

        var dl = $(this);

        var alldd = dl.find("dd");

        var alldt = dl.find("dt");

        function closeAll() {

            alldd.addClass("closed");

            alldt.addClass("closed");

        }

        function open(dt, dd) {

            dt.removeClass("closed");

            dd.removeClass("closed");

        }

        closeAll();

        alldt.click(function() {

            var dt = $(this);

            var dd = dt.next();

            closeAll();

            open(dt, dd);

        })

    })

 

10) 슬라이드쇼

<div class="lab">

        <h1>slideshow</h1>

        <div class="slideshow"> <img src="imgs/photo1-1.jpg" alt="" />

            <img src="imgs/photo1-2.jpg" alt="" class="alt" />

            <img src="imgs/photo1-3.jpg" alt="" class="alt" />

            <img src="imgs/photo1-4.jpg" alt="" class="alt" />

            <img src="imgs/photo1-5.jpg" alt="" class="alt" />

        </div>

        <div class="slideshow"> <img src="imgs/photo2-1.jpg" alt="" />

            <img src="imgs/photo2-2.jpg" alt="" class="alt" />

            <img src="imgs/photo2-3.jpg" alt="" class="alt" />

            <img src="imgs/photo2-4.jpg" alt="" class="alt" />

            <img src="imgs/photo2-5.jpg" alt="" class="alt" />

        </div>

        <div class="slideshow">

            <img src="imgs/photo4-1.jpg" alt="" />

            <img src="imgs/photo4-2.jpg" alt="" class="alt" />

            <img src="imgs/photo4-3.jpg" alt="" class="alt" />

            <img src="imgs/photo4-4.jpg" alt="" class="alt" />

            <img src="imgs/photo4-5.jpg" alt="" class="alt" />

        </div>

    </div>

 

 

 $(".slideshow").each(function(){

        var container = $(this);

        var timer;

   

        function switchImg() {

            var imgs = container.find('img');

            var first = imgs.eq(0);

            var second = imgs.eq(1);

            first.appendTo(container).fadeOut(2000);

            second.fadeIn();

        }

        function startTimer(){

            timer = setInterval(switchImg,interval);

        }

        function stopTimer() {

            clearInterval(timer);

        }

       container.hover(stopTimer,startTimer);

       startTimer();

    })

 

 

11) json파일 받아오기

 

<div class="lab">

        <h2>JSON TEST</h2>

        <div id="textbox"></div>

        <button id="getText1">가져오기</button>

        <button id="getText2">가져오기</button>

    </div>

 

 

var req = $.ajax({

        url: "data.txt",

        dataType: "json"

    });

    $("#getText1").on("click", function(){

        $("#textbox").text("글자 입력 테스트");

        // var req = $.ajax("data.json");

       

        req.done(function(data, status){

            /*******data.txt파일은

            ********json형태로의 변환이 필요해서

            ********JSON.parse(data)해야하지만

            ********json타입은 data를 객체로 바로 사용********/

            // var students = JSON.parse(data);

            for(var i = 0; i<data.length; i++){   // student.length -> data.length

                var str = "<br>"+data[i].name;    // student[i] -> data[i]

                $("#textbox").append(str);

            }

        })

    })

 

 

$("#getText2").click(function(){

        // 변수선언해두고 th.text("이름"),.text("학과")접근하지 않기 마지막 것만 append됨

        // var tr=$("<tr/>");

        // var th=$("<th/>");

       

        var table=$("<table/>");

        var row = $("<tr/>").append(

            $("<th/>").text("이름"),

            $("<th/>").text("아이디"),

            $("<th/>").text("학과"),

            $("<th/>").text("수강과목")

        )

        table.append(row);

       

        req.done(function(data, status){

            for(var i=0;i<data.length;i++){

                var rows=$("<tr/>").append(

                    $("<td/>").text(data[i].name),

                    $("<td/>").text(data[i].id),

                    $("<td/>").text(data[i].department),

                    $("<td/>").text(data[i].class)

                );

                table.append(rows);

            }

            $("#textbox").html(table);

        })

    })

 

12)string json형태로

<div class="lab">

        <h4>학생명단</h4>

    <p style="background-color: yellow;">

    이름:<span id="name"></span>&nbsp

    나이:<span id="age"></span>

    </p>

    <script>

        var s='['+

    '{"name":"Hong","age":"21"},'+ '{"name":"Kim","age":"22"},'+'{"name":"Park","age":"23"}]';

    var students = JSON.parse(s);

    students[1].name = "Lee";

    $("#name").text(students[1].name);

    $("#age").text(students[1].age);

    </script>

    </div>