메뉴 건너뛰기

프로그램언어

Home 프로그램언어 JAVA jquery
✔ 뷰어로 보기
2019.01.16 19:03

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

조쉬
조회 수 1232 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!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>
  
     
 
     
 
  
    <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>
Facebook Twitter Google Pinterest
위로 아래로 댓글로 가기 인쇄
에디터 선택하기
?
List of Articles
번호 제목 날짜 조회 수
119 jquery 팝업 차단 없이 띄우기 2019.03.05 3084
118 [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법 2019.03.05 1299
» jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값) 2019.01.16 1232
116 jQuery 기초 (클릭하면 이미지 변경 / mouseover시 애니메이션 효과주기 / 동적으로 변경) 2019.01.16 1661
115 jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover) 2019.01.16 1418
114 jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입) file 2019.01.16 1332
113 jQuery 기초 (JQuery - text(), val(), html(), attr(), prop()) 2019.01.16 1426
112 jQuery 기초 (attr()로 두가지 동시에 접근 / 변경) 2019.01.16 1267
111 jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery) file 2019.01.16 1537
110 jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty) file 2019.01.16 1246
109 jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json)) file 2019.01.16 3426
108 Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort)) file 2019.01.16 2347
107 jQuery 기초 (jQuery 달력 (datepicker)) file 2019.01.16 1529
106 jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼) file 2019.01.16 1484
105 .removeAttr() : 특정 속성을 제거 2019.01.16 1206
104 .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정 2019.01.16 1129
103 popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인 file 2019.01.16 1429
102 jQuery Plugin : Slider file 2019.01.10 1309
101 jQuery datepicker 팝업창 사이즈 바꾸기 file 2019.01.10 1827
100 jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) file 2019.01.10 1279
쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

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

© 2016 JOSHI. All Rights Reserved
© k2s0o1d4e0s2i1g5n. All Rights Reserved

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

나눔고딕 사이트로 가기

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5