Daily coding
JQuery : JQuery 시작하기, 함수 본문
1> JQuery 시작하기
: 제이쿼리는 스크립트문에서 사용할 수 있다.
JQuery를 사용 시 페이지를 먼저 로드한 후에 함수를 실행하는 방식과,
함수부터 불러오는 방식이 존재한다.
1 ) 페이지를 로드 후 함수 실행
$(document).ready(function func() {
jquery 및 함수 작성
});
2 ) 함수부터 실행
$(function() {
});
< JQuery 설정하기 및 시작 >
<script type="text/javascript">
// 제이쿼리 로드하기
$(document).ready(function func() {
});
// 도큐먼트 먼저 다 읽은 후에 함수 불러오기
// 위 또는 아래 방식
$(function() {
/* $("#ptag").click(function() {
alert('click');
});
$("button").click(function() {
alert("button click");
});
$("#ptag").on("click", function () {
alert("p tag");
});
*/
// 자바스크립트 function불러오기 ()없음
$("button").on("click", buttonClick);
});
// 자바 스크립트 함수
function buttonClick() {
alert("button on click");
}
// 함수부터 불러오기
</script>
2 > 기본 함수
: JQuery는 함수로 데이터를 모으거나 설정한다.
** id / class / name
- id : js에서 데이터를 조작할 때 사용하는 고유한 속성, JQuery에서 #으로 표현
EX> $("#ptag").html( '안녕하세요' ); ---> '' 안의 문자열 설정하는 jquery 코드 - class : css에서 주로 사용하는 태그 개체의 이름속성, 중복값 허용. .(반점)으로 표현
EX> $(".ptag").html( '안녕하세요' ); - name : jsp로 데이터를 던질 때 사용, JQuery에서는 "[name=이름]" 문법을 사용해서 조작
EX> $("[ name=_name ]").html( '안녕하세요');
1) Getter / Setter
: 텍스트 태그의 데이터 값을 불러오는 함수
* html()
- getter
var v = $("p").html( );
---> p태그의 내용을 모두 받아서 변수에 담기 (html태그 적용시킴)
-setter
$("p").html( '<b>강조태그</b>여기다 기입');
* text()
var v = $("#ptag").text();
$("#pid").text('야기다 기입하기');
** input 태그의 값의 getter / setter : val
setter
$("#text").val("여기에 기입");
getter : input - text에서 주로 사용함
var va = $("#text").val();
JQuery : getter
var str = $("#demo").html();
alert(str);
JavaScript
var str = document.getElementById("demo").innerHTML;
alert(str);
* 태그 안의 내용 바꾸기
1. html : 일반 태그에 사용, html 태그를 새로 만들 수 있음
$("p").html("hello p tag");
// setter == innerHTML과 비슷한 역할, ""안의 문자열을 html로 인식함
$("p").html("<b>hello p Tag</b>");
// 모든 p태그에 관해서 적용, 태그도 안에 넣으면 적용됨
2. text : 문자열만 입력시 사용
$("p").text("hello p tag");
// text 함수
$("p").text("<b>hello p Tag</b>"); ---> 잘못된 태그 삽입 방식
// text 함수는 문자열로만 인식하므로 <b> 태그는 인식 불가
3. JavaScript
document.getElementById("demo").innerHTML = "hello p tag";
// jquery의 html태그와 같은 역할
===> 위와 같은 결과
4. JQuery
$("demo").html("Hello P tag");
$("demo").text("Hello P tag");
// 태그가 없을때는 html과 text는 같은 역할
< JQuery 기본 및 함수 1>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<!-- JQuery 링크 -->
<!-- <script type="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
<!-- Java Script 문법
<p id="ptag" onclick="func()">p tag</p>
<br>
<button type="button" onclick="func()">버튼</button>
<script type="text/javascript">
function func() {
alert('클릭되었음');
}
</script>
-->
JQuery 문법
<p id="ptag">p tag</p>
<br>
<button type="button">버튼</button>
<script type="text/javascript">
/*
$(document).ready(function func() {
});
*/
// 도큐먼트 먼저 다 읽은 후에 함수 불러오기
// 위 또는 아래 방식
$(function() {
/* $("#ptag").click(function() {
alert('click');
});
$("button").click(function() {
alert("button click");
});
$("#ptag").on("click", function () {
alert("p tag");
});
*/
// 자바스크립트 function불러오기 ()없음
$("button").on("click", buttonClick);
});
// 자바 스크립트 함수
function buttonClick() {
alert("button on click");
}
// 함수부터 불러오기
</script>
</body>
</html>
< JQuery 함수 2 >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="ptag"> p tag id ptag</p>
<h3 class="h3tag" >h3 tag class h3tag</h3>
<input type="text" id="text" value=""><br>
<button type="button">button</button>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
// id
// setter
$("#ptag").html("<b>새로운 p 태그의 문자열</b>");
// getter
var v = $("#ptag").text();
//alert(v);
// class
// setter
$(".h3tag").text("새로운 h3 태그의 문자열");
// getter
var va = $(".h3tag").html();
// alert(va);
// input태그의 값 설정하기 / 가져오기 : val
//setter
// $("#text").val("여기에 기입");
//getter : input - text에서 주로 사용함
var va = $("#text").val();
alert(va);
});
});
</script>
<script type="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
</body>
</html>'Front-end > Client' 카테고리의 다른 글
| JQuery : 기본함수 : mouseover / mouseout (0) | 2020.01.13 |
|---|---|
| JQuery : 선택자 > 의 의미, this ,기본함수 - click (0) | 2020.01.10 |
| JQuery : JQuery 기본 및 임포트 (0) | 2020.01.10 |
| CSS : include 사용해보기 (0) | 2020.01.10 |
| CSS : 배경이미지 반복 (0) | 2020.01.10 |