한바다
[jQuery]jQuery시작하기 본문
✔jQuery 란?
모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리
2006년1월 존레식이 발표. 무료로 사용가능한 오픈소스 라이브러리
Document소스를 줄여주는 역할, 시각적 효과 쉽게 구현, 이로간된 이벤트 연결 쉽게 구현 등
＃사용법
첫번째 방법은 https://jquery.com/ 다운로드 해서 사용할 수 있다
두번째 방법은 CDN 호스트 사용하는 방법이다.
jQuery CDN에서 파일을 가져오거나 직접 링크 살 수 있음
http://code.jquery.com/jqueru-3.7.0.js
http://code.jquery.com/jquery-3.7.0.min.js
단 인터넷 연결이 안되면 CDN을 사용할 수 없다
어떻게 사용하냐면 HTML페이지에서 <head>영역에 쓴다
<script src="http://code.jquery.com/jquery-3.7.1.js"></script>
(자바의 import와 유사한 기능)
✔jQuery - 코드형식
＊jquery는 $() 표기
$(document).ready(function(){
// jQuery 코드 작성
});
$() 함수를 사용하여 선택자를 지정
선택된 엘리먼트에 대해 원하는 작업을 수행
＊jquery는 $() 표기
✔[기본문법]
1. id 문법
$(document).ready(function(){ //문서에서 어떤 행동을 할 준비가 되어 있다.
$("#아이디이름").click(function(){ // 아이디이름을 클릭했을 때 할 동작
동작에 관련된 코드 작성
})
})
2. 이벤트리스터 문법(onclick, keyon, onchange...)
function 이벤트리스너에 작성한이름() {
$("#아이디명").기능작성();
}
3. 다른 아이디값에서 원하는 태그를 선택할 때 사용하는 문법
$(#아이디명 태그명:)
✔[선택자 문법]
1. csst 선택
$("태그명이나 #아이디명 .클래스명").css("배경",색상);
2.toggle 선택 사용
$(태그명이나 #아이디명 .클래스명").toggle("속도조절"); //속도생략가능
3. hide() show() 선택 사용
보이기 숨기기
4.slideToggle 선택사용
토글과 비슷하나 주로 이미지를 보이고 숨길 때 사용방법
5. append() 선택 사용
태그나 값을 추가할 때 사용
6. val()
input textarea select 같은 폼의 태그의 값을 가지고 오거나 설정하는데 사용
값을 가져올 때 $(태그명, #아이디명, .클래스명).val()
-> $("input").val()
-> $("#아이디명").val()
-> $(".클래스명).val()
값을 설정할 때 $(태그명, #아이디명, .클리스명).val("새로운 값 설정")
-> $("input").val(새로운 값 설정)
-> $("#아이디명").val(새로운 값 설정)
-> $(".클래스명").val(새로운 값 설정)
7. this()
현재 실행중인 함수(태그)의 문맥을 나타냄
this 이벤트가 발생한 태그를 참조
$("#인풋필드").on("input, function() {
consloe.log(this): //이벤트가 발생하 input 태그를 바라봄
8.on()
이벤트 기능 하나 이상의 이벤트를 처리
$(태그명, #아이디명, .클래스명).on(event, function(){
})
event에 속하는 유형 : clic input mouseover mouseenter
on 같은 경우에는 on에 해당하는 이벤트가 많기 때문에 on을 작성한 후
on("이벤트명": , function(){} 이벤트명을 작성해줘야 하지만
다른 속성들은 "이벤트명"을 작성하지 않아도 됨
9.keyup()
사용자가 입력 창(input textarea,....)에 키를 입력할 때 마다 발생하는 이벤트를 감지
키보드의 키가 눌릴 때마다 발생
10. each()
for문처럼 지정한 태그나 클래스명이나 아이디명을 반복하는 기능작성
$("li).each(function)(){
})
li 태그에 해당하는 모든 값을 가져와서 반복해서 수행하고자 하는 기능을 진행
11. indexOf()
문자열 또는 문자에서 첫 번째 발생한 인덱스를 반환
찾지 못할 경우 -1을 반환( 에러 최소화 )
const 과일들 = ["사과","바나나"];
const 바나나찾기 = 과일들.indexOf("바나나");
console.log(바나나찾기); //출력 1
const 수박찾기 = 과일들.indexOf("수박");
console.log(수박찾기) | //출력 -1
indexOf를 했을 때 검색을 지우가 나면 문자열 ""
keyup 이벤트에서 검색어가 빈 문자열이면 모든 항목을 보이도록 설정
indexOf "" 모든 값에 잠재적으로 저장돼 있음