Daily coding
JQuery : JQuery 기본 및 임포트 본문
JQuery
JavaScript : client(front), web 서버와 관련없음
- 주목적 : 화면의 resource와 값을 설정, 취득하는 부분을 처리
- DOM(getElementById, nodelist)
CSS (Cascading Style Sheet) : 디자인. front
JQuery : 자주 사용하는 자바 스크립트를 경량화 시킨 것. java script를 통해서 제작함.
- Ajax(비동기 통신)
- <a <form <location.href
- 자바스크립트 초창기에 자바스크립트가 복잡하고 사용하기 어려운 부분이 있어 나옴
- Vue, React : jQuery 대용
JQuery-UI : button, textField, slide ..등 다양한 ui소스 가지고 있음
실행을 위한 3가지 방법이있음
1. head에 세팅하기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>를 헤드태그 안쪽에 넣어 실행
2. 파일을 다운로드 한 뒤 현재 프로젝트에 임포트해서 불러오기 (body태그 안)
<script type="./js/jquery.min.js">
코드 작성하기
</script>
3. 바디 태그안쪽 끝에 작성
< script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!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
Java Script : client(front), web 서버와 관련없음
- 주목적 : 화면의 resource와 값을 설정, 취득하는 부분을 처리
- DOM(getElementById, nodelist)
CSS(Cascading Style Sheet) : 디자인. front
JQuery : 자바 스크립트를 경량화 시킨 것. java script를 통해서 제작해둠.
- Ajax(비동기 통신)
- <a <form <location.href
- 자바스크립트를 사용하기 어려워서 나옴
- Vue, React : jQuery 대용
JQuery-UI : button, textField, slide ..등 다양한 ui소스 가지고 있음
실행을 위한 3가지 방법이있음
-->
<p>여기가 p태그 입니다.</p>
<p id="demo">p tag id demo</p>
<p class="cls">p tag class cls</p>
<h3 class="cls">h3 tag class cls</h3>
<script type="text/javascript">
/*
// 자바 스크립트로 접근
var arrPtag = document.getElementsByTagName("p");
for ( i = 0; i < arrPtag.length; i++) {
console.log(arrPtag[i].innerHTML);
arrPtag[i].innerHTML = "hello p tag";
}
*/
<!-- JQuery 실행코드-->
$(document).ready(function () {
//alert('jquery 실행');
/*
var v = $(태그명 또는 id 또는 class).핸들러함수() ----> getter
$(태그명 또는 id 또는 class).핸들러함수(매개변수); ----> setter
.html() : 문자열안의 태그를 인식함
.text() : 문자열로 모두 인식함
*/
// 태그 안의 내용 바꾸기
//1. 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> 태그는 인식 불가
// JS
// document.getElementById("demo").innerHTML = "hello p tag"; // jquery의 html태그와 같은 역할
// 위와 같은 결과
//JQuery
// $("demo").html("Hello P tag");
// $("demo").text("Hello P tag"); // 태그가 없으므로 같은 역할
// JQuery getter
// var str = $("#demo").html();
// alert(str);
// JS
// var str = document.getElementById("demo").innerHTML;
// alert(str);
// jquery
$(".cls").text("class cls인 태그입니다");
var cls = $(".cls").text();
alert(cls); //2번 출력(클래스가 2개이기 때문)
});
</script>
<!-- 밑의 방법이 조금더 빨리 로드됨 : body안에 스크립트 문으로 작성 -->
<script type="./js/jquery.min.js">
코드 작성하기
</script>
<!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-->
</body>
</html>'Front-end > Client' 카테고리의 다른 글
| JQuery : 선택자 > 의 의미, this ,기본함수 - click (0) | 2020.01.10 |
|---|---|
| JQuery : JQuery 시작하기, 함수 (0) | 2020.01.10 |
| CSS : include 사용해보기 (0) | 2020.01.10 |
| CSS : 배경이미지 반복 (0) | 2020.01.10 |
| CSS : Gradient 만들기 (linear-gradient) (0) | 2020.01.10 |