Language/Javascript

jQuery

🔯 jQuery

  • jQuery는 크로스 브라우징을 해결한 자바스크립트 라이브러리이다.
  • jQuery는 빠르고 작고 기능이 풍부한 Javascript 라이브러리이다.
  • jQuery는 Javascript의 동일한 기능을 간결한 문법과 함수로 제공한다
  • 그 중에서 대표적인 것들이 웹페이지에 대한 onload 이벤트 처리와 HTML 요소를 Javascript에서 객체로 생성하는 방법이다.
  • 크로스 브라우징 처리를 위해 if문으로 브라우저를 구별하는 분기문을 작성해야만 하는데 jQuery는 이러한 번거로움을 jQuery() 함수 하나로 해결할 수 있다.
  • jQuery() 함수에게 파라미터로 전달하는 것만으로 크로스 브라우징이 지원되는 onload 처리가 완료된다.
Javascript document.getElementById("homePage").innerHTML="홈페이지";
jQuery $("#homePage").html("홈페이지");
≫  id가 homePage인 요소를 찾아서 내용을 변경한다 
function initPage() {
jQuery(initPage); }

 

 

🖤 jQuery 문법

일반적으로 jQuery는 초기화 코드와 이벤트 처리 기능을 $(핸들러)에 넣어 사용한다.

브라우저가 현재 웹페이지에 대한 DOM구성을 완료했을 때 jQuery에 의해 호출된다.

$(function(){
	...jQuery를 활용한 기능 구현...
});

 

 

🖤 jQuery 문장의 구조

  • $()함수는 선택된 HTML요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할을 한다.
  • $(...)안에 선택자를 넣어서 원하는 요소를 선택하고, 선택된 요소에 대하여 여러 가지 조작을 한다.

  • $("p").show() : 모든 <p>요소들을 찾아서 화면에 표시한다.
  • $("#content").hide() : id=content인 요소를 화면에서 감춘다.

 

 

🖤 jQuery를 이용한 이벤트 처리

  • 모든 이벤트는 jQuery 객체의 함수 형태로 제공된다.
$(function(){
	$("셀렉터").이벤트명(function(){	// $("셀렉터")=css선택자 ✏️
		...처리 내용...
	});
});
  • $ 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다.
  • 선택자를 이용하여 원하는 HTML요소를 선택하고, 익명 함수를 정의하여 선택된 요소에 원하는 동작(기을)을 설정한다.

 

 

🖤 이벤트의 종류

•*¨*•.¸¸☆*･ﾟ✡*｡ﾟ✧*。*•.❥﹢◊*ﾟ•*¨*•.¸¸♪•*¨*•.¸¸☆*･ﾟ✡*｡ﾟ✧*。*•.❥﹢◊*ﾟ•*¨*•.¸¸♪•*¨*•.¸¸☆*･ﾟ✡*｡ﾟ✧*。*•.❥﹢◊*ﾟ

 

 

🖤 jQuery를 이용한 CSS속성과 클래스 제어

jQuery 설 명
css("속성") 속성값 읽기
css("속성", "값")
css({"속성1":"값1", "속성2":"값2",...});		 속성값 변경/추가
addClass("클래스명") 특정 요소에게 CSS클래스를 적용할 경우 사용
removeClass("클래스명") HTML 태그 요소에 적용된 특정 CSS클래스를 제거할 경우에 사용
toggleClass() 토글처리: 어떤 요소에 특정 클래스의 적용과 해제를 순환적으로 처리하는 것

 

 

🖤 Query 동적으로 요소 생성하기

  • 정적 요소의 객체화: $("셀렉터")는 <body>안에 존재하는 요소에 대한 객체화 방식이다.
  • 동적 요소를 객체화: let 객체이름 = $("<태그명>")
  • 생성한 요소를 화면에 적용하기
    ➞ A.html(B) : A요소의 시작태그와 종료 태그 사이의 내용을 B로 대체한다.
    ➞ remove() : 해당 요소를 삭제한다.
    ➞ A.append(B) : A에 B를 추가한다. (태그 사이의 내용을 그래도 유지하면서 B의 내용을 뒤에 추가한다)
    ➞ B.appendTo(A) : B에 A를 추가한다.

'Language > Javascript' 카테고리의 다른 글

Ajax  (0) 2022.06.22
JSON(Javascript Object Notation)  (0) 2022.05.22
정규 표현식(Regular Expression)  (0) 2022.05.22
2. DOM 선택자  (0) 2022.05.20
1. DOM (Document Object Model)  (0) 2022.05.17

티스토리툴바