Jquery - 개요
들어가기전
[제이쿼리란?]
- 존 레식에 의해 개발된 경량 JavaScript 라이브러리
- 복잡했던 코드를 쉽게 구현하였는데 특히 DOM과 관련된 처리, 일관된 이벤트 연결, 시각적 효과, Ajax 애플리케이션을 쉽게 구현
- 그 외에도 jQuery 플러그인을 통해 차트 작성, 슬라이드 쇼, 엑셀 같은 테이블도 간단히 구현 가능
- 제이쿼리의 모토는 최대한 짧게 적어서 많은 기능을 구현하는 것이다!
[제이쿼리 쓰기]
jQuery는 DOM객체를 편리하게 다룰수 있는 다양한 함수를 제공한다
- DOM에 접근하려면 $표현을 이용하거나 jQuery변수를 이용한다
- $,jQuery를 이용할 때 선택자를 사용한다 -> 가져오기 원하는 태그를 설정할 때
- $("선택자") || jQuery("선택자") == document.querySelectorAll("선택자");
- $("선택자")로 태그를 불러오면 jQuery가 제공하는 함수를 이용해서 Element를 조작한다
- 메소드명 참고는 https://www.w3schools.com/jquery/jquery_dom_remove.asp 에서 하면 된다
- 앞으로 자주 쓰이는 메소드명과 함께 정리하며 글을 쓸 예정
(예시)
<body>
<h1>jquery활용하기</h1>
<script>
$('h1').css("color","lime");
</script>
</body>$(선택자선택).접근하는메소드(구현할 로직); => 선택자에게 바로 접근이 가능하다
짧아진 로직...제이쿼리의 제일 큰 장점!!
① jQuery로 Element를 불러오기
<p id="first">첫번째 p태그</p>
<script>
const $e=$("p#first");
console.log($e); // Element 객체가 불러와짐
console.log($e[0]); //테그 시작~테그 끝 사이의 내용이 불러와짐
$e.css("color","red") // 객체에 메소드로 접근해서 적용해야함
</script>
② .text (= innerTEXT)
<p id="first">첫번째 p태그</p>
<script>
const $e=$("p#first");
$e.text("내가바로 제이쿼리다").css("color":"red");
</script>기존에 있던 텍스트(첫번째 p태그)가 사라지고 .text에서 삽입된 문자열이 들어간다
③ 색상코드 만들기
<script>
const choiceColor=(e)=>{
console.log(e.target.value);//색상코드가 나옴
}
</script>
ⓕ ready() 함수
컴퓨터는 원래 위에서 아래 순으로 읽기때문에 선언하기 전에
<script>
console.log($("#container"));
</script>
<div id="container">
<p>제이쿼리<p>
</div>라고 쓴다면 console에 나오는 결과는
이렇게 나온다. 위에서 읽으면서 container라는 로직은 아직 읽기 전인 상태에서 console에 출력하는 로직을 봤기때문에 아무값이 없는 걸로 출력한다.
하지만 ready()함수를 쓴다면 window.onload속성에 이벤트를 등록한 것과 동일한 효과를 누릴 수 있다
즉 전체 코딩을 읽고 나서 결과값을 내린다
<script>
$(document).ready(function(){
console.log($("#container"));
});
</script>
<div id="container">
<p>제이쿼리<p>
</div>
console을 먼저 찾는 로직을 먼저 쓰고 나서 생성을 한다고 해도 ready()함수는 한바퀴돌고 결과값을 출력하기 때문에 console에 결과값이 있다고 나온다
+) 이처럼 제이쿼리는 선택자로 바로 접근이 가능하기 때문에 선택자 태그를 정확히 작성하는 것이 올바르다
<선택자>
|
<div id="container"> <p id="pTag">p태그</p>
<p class="test">p.test</p>
<p>피태그</p>
<h3 class="test">h3태그</h3>
<span class="test">sapn</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
|
|
| 태그 선택자 | 예시 |
| first 선택자로 선택된 태그중 첫번째 태그 선택 |
$("#container>*:first") 선택된 태그 : <p id="pTag">p태그</p> |
| last 선택자로 선택된 태그중 맨 마지막 태그 선택 |
$("#container>*:last") 선택된 태그 : <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
|
| odd 홀수인덱스의 태그들 |
$("#container>*:odd") 선택된 태그 : <p class="test">p.test</p> <h3 class="test">h3태그</h3> <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
|
| even 짝수인덱스의 태그들 |
$("#container>*:even") 선택된 태그 <p id="pTag">p태그</p> <p>피태그</p> <span class="test">sapn</span> |
| eq(n) n번째 인덱스의 태그를 선택 |
$("#container>*:eq(0)") 선택된 태그 : <p id="pTag">p태그</p> |