본문 바로가기
javascript, framework/jquery

Step09_example

bono.html 2022. 9. 16. 11:26

Step09_example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Step09_example.html</title>
    <style>
        #msgList li:hover{
            background-color: yellow;
            cursor: pointer;
        }
    </style>
</head>
<body>
<input type="text" id="inputMsg"/>
<button id="sendBtn">전송</button>
<ul id="msgList">
    <li>하나</li>
    <li>두울</li>
</ul>
<script src="js/jquery-3.4.1.js"></script>
<script>
    // #msgList li 를 클릭하면 클릭한 li 요소 제거하기 
    // $("#msgList li").on("click", function(){
    //     $(this).remove();
    // });
    
    // 현재 존재하거나 미래에 추가될 요소에 대해서 이벤트 걸어주기
    // .on(이벤트명, 선택자, 호출될 함수)
    $(document).on("click", "#msgList li", function(){
        $(this).remove();
    });

    //버튼을 클릭하면 입력한 문자열을 li 요소로 출력하기 
    $("#sendBtn").click(function(){
        var msg=$("#inputMsg").val();
        $("<li/>")
        .text(msg)
        .appendTo("#msgList");
    });

</script>    
</body>
</html>

input에 문자열을 입력하고 전송 버튼을 누르면 글자가 생긴다.

생성된 글자에 마우스 오버를 하면 효과가 나타난다.

생성된 글자를 누르면 삭제된다.  -> $(this).remove

 

 

Step09_example2

append와 appendTo 사용법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Step09_example2.html</title>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>주소</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>김구라</td>
            <td>노량진</td>
        </tr>
    </tbody>
</table> 
<script src="js/jquery-3.4.1.js"></script>
<script>

    var td1=$("<td/>").text(1);
    var td2=$("<td/>").text("김구라");
    var td3=$("<td/>").text("노량진");

    $("<tr/>")
    .append(td1)
    .append(td2)
    .append(td3)
    .appendTo("tbody");

</script>   
</body>
</html>

td1, td2, td3 변수를 적절히 만들어서 append와 appendTo를 활용해서 tbody안에 입력하였다.

 

 

Step09_example3

for 활용 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Step09_example3.html</title>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>주소</th>
        </tr>
    </thead>
    <tbody>
       
    </tbody>
</table> 
<button id="showBtn">출력하기</button>
<script src="js/jquery-3.4.1.js"></script>
<script>
    var members=[
        {num:1, name:"김구라", addr:"노량진"},
        {num:2, name:"해골", addr:"행신동"},
        {num:3, name:"원숭이", addr:"동물원"}
    ];
    //출력하기 버튼을 누르면 members 배열의 내용을 이용해서
    //tbody 에 tr 을 3개 추가해 보세요.
    $("#showBtn").click(function(){
        for(var i=0; i<members.length; i++){
            //i 번째 object 의 참조값
            var tmp=members[i];
            var td1=$("<td/>").text(tmp.num);
            var td2=$("<td/>").text(tmp.name);
            var td3=$("<td/>").text(tmp.addr);
            $("<tr/>")
            .append(td1)
            .append(td2)
            .append(td3)
            .appendTo("tbody");
        }
    });

</script>       
</body>
</html>

 

 

Step09_example4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Step09_example4.html</title>
	<style>
        .spacer{
            height: 500px;
            background-color: #999;
            border: 1px solid green;
        }
        .console{
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
        }
        .console p{
            background-color: #000;
            color: #fff;
            font-size: 25px;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="console">
    <p id="sTop"></p>
    <p id="wHeight"></p>
    <p id="dHeight"></p>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<script src="js/jquery-3.4.1.js"></script>
<script>
    //scroll 이벤트 처리 
    $(window).on("scroll", function(){
        console.log("scroll!");
        //위쪽으로 스트롤된 길이
        var scrollTop=$(window).scrollTop();
        //window 의 높이
        var windowHeight=$(window).height();
        //document 의 높이
        var documentHeight=$(document).height();

		//출력해 보기 
		$("#sTop").text("scrollTop:"+scrollTop);
		$("#wHeight").text("windowHeight:"+windowHeight);
		$("#dHeight").text("documentHeight:"+documentHeight);

        //바닥까지 스크롤했는지 여부
        var isBottom = scrollTop+windowHeight == documentHeight;

        if(isBottom){
            $("<div/>")
            .text("추가된 div 입니다.")
            .addClass("spacer")
            .appendTo("body")
            .hide()
            .fadeIn(1000);
        }
    });
</script>	    
</body>
</html>

 

Step09_makeElement

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Step09_MakeElement.html</title>
    <style>
        .my-image{
            width: 200px;
        }
    </style>
</head>
<body>
<ul id="msgList">

</ul>
<div id="imgPanel">
    
</div>
<script src="js/jquery-3.4.1.js"></script>
<script>
    var msgs=["하나", "두울", "세엣"];

    for(var i=0; i<msgs.length; i++){
        $("<li/>").text(msgs[i]).appendTo("#msgList");
    }

    var imgs=["images/image1.png",
    "images/image2.png","images/image3.png"];

    //배열에 있는 내용을 이용해서 img 요소를 만들어서
    // #imgPanel 에 추가 해보세요.
    for(var i=0; i<imgs.length; i++){
        $("<img/>")
        .attr("src", imgs[i])
        .addClass("my-image")
        .appendTo("#imgPanel");
    }


</script>    
</body>
</html>

 

저작자표시

'javascript, framework > jquery' 카테고리의 다른 글

Step08_regExp(정규표현식 활용 예제)  (0) 2022.09.16
Step07_form (폼)  (0) 2022.09.16
Step06_animate (트랜지션, 이동)  (0) 2022.09.16
step05_effect (사라졌다 나타나는 효과들)  (0) 2022.09.16
Step01~04 (html, css 접근, event)  (0) 2022.09.16

'javascript, framework/jquery' Related Articles

티스토리툴바