관리 메뉴

moozi

3/17 jquery append prepend 예제 본문

TIS_2016/HTML5_1기

3/17 jquery append prepend 예제

moozi 2016. 3. 17. 14:29

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>

$(document).ready(function(){

    var count=0;

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

        if(count==0){

            $("#q1").append("<p><b>HTML은 하이퍼링크를 사용하며, 마크업방식으로 작성합니다.</b>.</p>");

        }

        count++;

    });


    var count2=0;

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

        if(count2==0){

         $("#q2").append("<p><b>javascript는 사용자컴퓨터에서 실행되는 스크립트기반의 언어입니다.</b></p>");

        }

        count2++;

    });

    

    var count3=0;

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

        if(count3==0){

            if(document.form1.q1.value=="" || document.form1.q1.value==null){

                $("#q1").prepend("<strong style='color:red;'>미체크</strong>");

                return false;//함수종료

            }

        }

        count3++;

    });

    

    

});

</script>

</head>

<body>


<p id="q1">1.다음중 HTML의 명칭으로 올바른것 은?</p>


<form action="quiz.jsp" name="form1" method="get">

<input type="radio" value="1" name="q1">HyperText Markup Language<br>

<input type="radio" value="2" name="q1">Highlight Markup Language<br>

<input type="radio" value="3" name="q1">Hello Markup Language<br>

<input type="radio" value="4" name="q1">HyperText Manipulation Language<br>

    

<input type="button" value="힌트" id="btn1">

    

<p id="q2">2.다음중 javascript의 특징으로 올바르지 않은 것은?</p>

<input type="radio" value="1" name="q2">Front End 기술이다.<br>

<input type="radio" value="2" name="q2">Server Side 기술이다.<br>

<input type="radio" value="3" name="q2">Client Side 기술이다.<br>

<input type="radio" value="4" name="q2">스크립트기반의 언어이다.<br>

        

<input type="button" value="힌트" id="btn2">

    

    <p><input type="submit" value="제출" id="submit"></p>

</form>

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

</body>

</html>



'TIS_2016 > HTML5_1기' 카테고리의 다른 글

jquery xml 파싱 정리 잘된 블로그  (0) 2016.03.18
메뉴왼쪽으로 옮기기  (0) 2016.03.18
3/17 attr 메서드를 활용하는 예제  (0) 2016.03.17
3/16 animation 예제 코드  (0) 2016.03.16
animation 샘플이미지  (0) 2016.03.16
Comments