메뉴 건너뛰기

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<!-- 
방법 1)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 -->
 
<!-- 
방법 2) 다운로드 받아서 직접 연결하기 -> 인터넷 주소로 연결하는 것보다 빠름
<script type="text/javascript" src="./jquery/jquery.min.js"></script>
 -->
 
<!-- 방법 3) -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
<!--
항상 최신버전으로 사용 
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
 -->
 
</head>
<body>
    <!-- 
Javascript : client 언어(front), web server와 관계가 없다.
CSS : client. 디자인
JQuery : Javascript를 경량화, 간략화 시켜 놓은 것이다. 
    document.getElementById("id").innerHTML, value;
    $("#id").text() .val();
    Ajax가 포함, DOM조작등을 단순화시켜 놓은 것이다.
 -->
 
    <p>여기가 p 태그입니다</p>
 
    <p id="demo">여기는 p태그이며, id는 demo입니다</p>
 
    <p id="cls" class="cls">여기는 p태그이며, class는 cls입니다</p>
 
    <h3 class="cls">여기는 h3태그이며, class는 cls입니다</h3>
 
    <pre>
입력:<input type="text" id="id" value="abc">
<button type="button" id="btn" name="btn" onclick="myfunc()">버튼</button>
</pre>
 
    <br>
    <br>
 
    <select id="sel">
        <option value="apple">사과</option>
        <option value="pear" selected="selected">배</option>
    </select>
 
 
 
    <script type="text/javascript">
        // javascript function 활용
        function myfunc() {
            /*
            // innerHTML은 html코드를 가져오는 것 (html코드로 들어감)
            var text = document.getElementById("demo").innerHTML;
            document.getElementById("demo").innerHTML = "Hello"
            
            // p태그의 text만 가져오려면 (문자열로만 들어감)
            var _text = document.getElementById("id").value;
            document.getElementById("id").value = "World"; */
            /* 
            var text = $("#demo").text();
            $("#demo").text("jHello");
            
            var _text = $("#id").val();
            $("#id").val("jWorld");
             */
        }
 
        // JQuery
        $(function() {
            // JQuery 영역    
            //    alert("JQuery 실행");
 
            // p태그 감추기
            //    $("p").hide();
 
            // id 접근 (demo 감추기)
            //    $("p#demo").hide();
            //    $("#demo").hide();
 
            // 클래스 접근
            //    $(".cls").hide();
            //     $("#id").hide();
 
            // id 중복해서 사용 잘 안함
            // class는 중복해서 사용함
 
            // 일반 태그 가져오기
            //    alert($('#demo').text());
 
            // textfield, textarea
            //    alert($('#id').val());
 
            //    alert($('#sel').val());
 
            // 클릭되면 demo에 텍스트 필드의 값을 집어 넣음
            $("#btn").click(function() {
                //    alert("클릭");
                //    alert($('#sel').val());
                $('#demo').text($("#id").val());
            });
        });
    </script>
 
</body>
</html>


  1. jquery 팝업 차단 없이 띄우기

    Date2019.03.05 Views2855
    Read More
  2. [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법

    Date2019.03.05 Views1129
    Read More
  3. jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값)

    Date2019.01.16 Views1079
    Read More
  4. jQuery 기초 (클릭하면 이미지 변경 / mouseover시 애니메이션 효과주기 / 동적으로 변경)

    Date2019.01.16 Views1502
    Read More
  5. jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover)

    Date2019.01.16 Views1261
    Read More
  6. jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입)

    Date2019.01.16 Views1181
    Read More
  7. jQuery 기초 (JQuery - text(), val(), html(), attr(), prop())

    Date2019.01.16 Views1054
    Read More
  8. jQuery 기초 (attr()로 두가지 동시에 접근 / 변경)

    Date2019.01.16 Views1119
    Read More
  9. jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery)

    Date2019.01.16 Views1409
    Read More
  10. jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty)

    Date2019.01.16 Views1084
    Read More
  11. jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json))

    Date2019.01.16 Views3222
    Read More
  12. Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort))

    Date2019.01.16 Views2191
    Read More
  13. jQuery 기초 (jQuery 달력 (datepicker))

    Date2019.01.16 Views1321
    Read More
  14. jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼)

    Date2019.01.16 Views1349
    Read More
  15. .removeAttr() : 특정 속성을 제거

    Date2019.01.16 Views1021
    Read More
  16. .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정

    Date2019.01.16 Views961
    Read More
  17. popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인

    Date2019.01.16 Views1233
    Read More
  18. jQuery Plugin : Slider

    Date2019.01.10 Views1113
    Read More
  19. jQuery datepicker 팝업창 사이즈 바꾸기

    Date2019.01.10 Views1495
    Read More
  20. jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow)

    Date2019.01.10 Views1093
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved