💻 Web/-- JAVA SCRIPT

jQuery란 ? selector (선택자) , val (값 가져오기) , 간단 예제 , 사용법

jQuery 란 ?

HTML 요소들을 편하게 사용할 수 있도록 만들어 놓은 javascript로 작성된 라이브러리.

*import(임포트)

head태그 내부에 CND(링크를 통해 임포트)을 한줄 추가시켜주면 사용할 수 있다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
///<head>태그 내부에 삽입후 사용하면 됨.

* 선택자 (Selector)

$("") 내부에는 선택자를 넣어주면 된다.

id값인경우는 #+id명

class인경우 . + class명을 삽입하면 된다.

ex)id값으로 선택하기 첫번째는 javascript선택자, 두번째는 jQuery선택자

document.getElementById("element3")

$("#element").hide();

예제. Val( ) - 값 가져오기 (value)

위의 방법으로 값을 가져올 태그를 선택해준다. 그리고 .val()를 해주면 값을 가져오게된다.

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

<body>
<h3>jQuery로 data 가져오기</h3>
<input type="text" id = "data1" >
<input type="email" id = "data2">
<button type = "button" onclick="gett()" > submit</button>
</body>

대충 input태그로 입력양식을 만들어준뒤

<script>
    function gett(){
    let data1 = $("#data1").val();
    let data2 = $("#data2").val();
    console.log("data1:" + data1);
    console.log("data2:" + data2);
    }
</script>

이런식으로 사용한다. 위코드대로라면 콘솔창에 입력한 값이 찍히게 된다.

'💻 Web > -- JAVA SCRIPT' 카테고리의 다른 글

(Javascript) - 함수들 (0)	2020.05.05
(Javascript) 데이터 타입(Data type) - 문자열 , 숫자 (0)	2020.05.05
JavaScript - eval( ) , parseInt( ) , isNaN( ) (0)	2020.03.24
JavaScript 문법 - 변수, 조건문, 반복문 , 함수 (0)	2020.03.24

Contents

새소식

인기 검색어