카테고리 없음
82일차-jQuery_소개
초코맛
2019. 3. 3. 22:57
반응형
JQuery
-
//자바스크립트는 브랜든아이크가 만들었는데, 이벤트 등록처리를 권장하여 길어진다.
-
//존래시그라는 사람이 좀더 단순화해서 하나 만듦 그게 JQuery-DB와는 아무 상관이 없다.
-
2000년대 초 John Resig가 개발
-
JavaScript library (library:필요한 기능을 미리 구현해 놓은것)
-
=>library: 자주 사용될 기능을 미리 구현해 놓은 것(=프레임 워크(커스텀 마이징해 사용)/차이: library는 생명주기를 개발자가 관리+제공되는 기능을 그대로 사용.)
-
jQuery말고도 되게 많지만 기본적!
-
단순화, 크로스브라우징,쉽게 사용하는 A jax
-
단순화 : 코딩이 간단(적게쓰고 많은 일을 함)
-
크로스 브라우징 : 모든 브라우저에서 동일한 동작을 수행.
-
JQuery.com에서 JQuery.....js파일을 다운 받거나 CDU url(네트워크가 된다면 이게 더 편리)제공받아 사용한다.
-
Compressed : 코드 압축기로 코드를 압축한 버전
-
unCompressed : 코드압축기로 압축하지 않은 버전 -파일의 크기가 커진다/개발자가 읽기 좋게 만든 것.
-
코드 압축기 : 엔터와 탭이 들어가면 이 코드 실행과의 관련이 없어
-
코드 내 필요없는 \t,공백,\n등의 코드를 없애는 툴 (마지막에 엔터하나 나온다) //+필요한건 남겨두는듯.
-
파일의 크기가 줄어 네트웤을 타고 들어올때 훨씬 빨리읽어 로딩속도가 빨라짐
-
단) 실행에는 문제가 없으나 읽기 어렵다.
-
제공하는 기능 : DOM, Event(단순해 지나 주는것같진 않음), Effect, Ajax 등을 제공
-
다양한 selector사용(selector: CSS에서 디자인을 부여할 태그를 정하는것과 같은..)(selector 기반)
-
CSS의 selector와 비슷
-
$의 사용(JQueryObject)
-
plugin지원
-
JQuery를 사용하여 특정기능을 미리 구현해 놓은 것.(다른사람이 만들음)
-
Mobile UI용 JQueryMobile도 제공
-
기본 문법)
-
$(function(){ //스크립트 태그에 넣고 onload와 비슷
-
코드
-
});
-
원형/위에건 이걸 줄인것)
-
$(document).readdy(function(){ //HTML의 태그 정보만 로딩되면 동작하게 되는 것 1먼저동작
-
-
});
-
//HTML 에서 필요한 모든 대상(외부파일,이미지)들이 로딩된 후에 동작하게 되는 것 2나중동작
-
$(window).load(function(){
-
});
<<JQuery를 사용하려면>>>
프로젝트의-Properties-JavaScript-Tern-Modules에서
JQuery체크
+
jQuery.com사이트에서 CDN을 html-script부분에 넣어준다.
-CDN : 동영상이나 파일을 더빨리 제공하기 위한 네트워크(유동적으로 제일 가까운 서버에서 파일을 받을 수 있다.=>훨신 빠름
<<<홈페이지에서 여러가지 API 를 제공해 준다.>>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
alert("window.load: HTML에서 사용할 모든 자원(파일,이미지,,)등 이 로딩 된 후 동작(느림) 2.");
});
//$(document).ready(function(){//를 주로 사용하고 먼저 뜨게됨 심지어 줄여서도 사용
$(function(){
alert("document.ready: HTML의 tag정보가 로딩된 후 동작 1.")
});
</script>
</head>
<body>
</body>
</html>
==>이걸 잘 가지쳐서 기본템플릿을 만듦
<<<기본 템플릿 만들기>>>
-새 HTML을 만들때, 만들 템플릿을 복사해두고-Template를 설정하는화면에서 finish위쪽에 존재하는 HTML Templates-new-name을 지정해주고, Context를 New HTML(로 지정해야 보인다),설명을 간단히 적고 아래 Pattern에 복붙해 준다.이때insert Variable을 사용하면 상황에 맞는 charset을 넣을 수 있다!-ok!끝
<<<CDN으로 사용하다가 만약을 위해 그파일을 이름바꾸어 넣어 네트워크가 끊겼을때 이걸 연결하여 사용하도록>>>
WebContent-common-js-jquery2.2.4.min.js를 따로 넣어준다.
*selector 사용
-
jQueryObject이 접근하게 될 tag를 지정하는 것.
-
접근하여 값설정,값얻기, 디자인을 변경, 효과,이벤트처리,,,등의 일을 하기 위해 사용.
-
형식)
-
$(selector).jQuery에서 제공하는 함수(값,,,); //태그를 지정해 일을하게 함
-
=>$: jQueryObject/ selector: 기능을 적용받을 tag지정/ 함수: 제공하는 기능/ 그때 적용할 값
반응형