본문 바로가기
JavaScript/JQuery

jQuery의 사용(연결방법 포함)

by amoomar 2022. 2. 22.
반응형

 

해당 포스팅의 목차는 다음과 같다.

1. jQuery란?

2. jQuery라이브러리 연결
  1) 파일 다운하여 연결하는 방법
  2) CND활용 연결 방법

3. 문법과 선택자
  1) 문법
  2) 선택자

4. jQuery를 활용한 기능 구현
  1) 무한 스크롤
  2) 풀다운
  3) 갤러리(배너)

5. 플러그인

 

 

1. jQuery란?

 

 

제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다.
제이쿼리는 여러분의 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해줍니다.
또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다.
이러한 제이쿼리는 오늘날 가장 인기 있는 자바스크립트 라이브러리 중 하나입니다.

 

 

이런 제이쿼리의 장점은 다음과 같다.

 

  • 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다.
  • HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다.
  • 애니메이션 효과나 대화형 처리를 간단하게 적용해 줍니다.
  • 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다.
  • 다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다.
  • 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있습니다.

 

 

출처

http://www.tcpschool.com/jquery/intro 

 

 

2. jQuery라이브러리 연결

라이브러리를 연결하는 방법은 두가지로 분류된다. 파일의 다운은 번거롭고, 프로젝트 파일을 무겁게 하므로 일반적으로 후자의 방법을 많이 사용한다.

 

1) 파일 다운하여 연결하는 방법

 

1. google에 jquery라고 검색하면 해당 홈페이지로 접근할 수 있는 링크가 조회된다. 

 

2. 오른쪽의 다운로드 버튼을 클릭하면 다음과 같은 링크들을 확인할 수 있다.

압축파일은 배포시 파일이 가볍다. 일반적으로 압축파일을 사용한다. 비압축 파일은 보통 분석할때나 사용됨/

 

3. 새로운 txt파일을 생성하고 내용에 압축 링크의 내용을 붙여넣는다.

* 이때, txt파일은 확장자를 고려하여 resource파일에 저장할 수 있도록 한다.

 

4. 파일명은 다음 사진의 커서로 드래그된 부분과 같이 한다.

txt파일형식을 지우고, js로 설정해야한다.

 

결과 화면은 다음 사진과 같다.



5. 연결 코드를 html파일의 body하단에 작성한다. 코드는 다음과 같다.

//1. 다운받은 파일 연결
<script src="js/jquery-3.6.0.min.js"></script>
//2. 라이브러리 연결
<script type="text/javascript">
//window.onload 이벤트와 같은 기능을 수행한다
$(document).ready(console.log('kQuery 라이브러리 연결 확인'));
</script>

 



 

2) CND활용 연결 방법

 

1. jquery홈페이지의 다운로드 버튼을 클릭한 후 그 경로에서 스크롤을 내리다 보면 다음과 같은 섹션을 마주할 수 있다.

이때 형광펜으로 표시된 링크를 클릭한다. 

 

2. 조회된 화면에서 다운받을 버전의 미니파일 링크를 클릭한다.

 

3. 해당 링크에서 조회되는 js코드를 복사하여 html파일의 <body> 하단에 붙여넣는다.

js에 추가할 코드

 

4. 마찬가지로 링크의 연결과 함께 라이브러리의 연결도 확인한다. 적용 예시는 다음과 같다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
//window.onload 이벤트와 같은 기능을 수행한다
$(document).ready(console.log('kQuery 라이브러리 연결 확인'));
</script>

 

 

 

3. 문법과 선택자

 

1) 문법

사용되는 문법은 다음과 같다. 이때 $표시는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자라고 한다.

동작함수는 객체가 사용할 API를 의미한다. 

$(선택자).동작함수();

 

이벤트 적용시에는 동작함수의 괄호 내에 사용할 함수를 포함한다.

이 내용을 가지고 window.onload()와 document.ready()을 비교하면 다음과 같다.

$(document).ready( function() { //모든 함수들은 문서가 로드 되었을때 진행되도록 한다
    $("#doc").text("문서가 전부 로드됐어요!");
});

$(window).load( function() {
    $("#win").text("창이 모두 로드됐어요!");
});

 

 

2) 선택자

jQuery에서 선택자는 CSS의 선택자를 사용할 수 있으며, jQuery에서만 적용되는 비표준 선택자도  사용할 수 있다.

이때, 비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링까지 할 수 있다.

 

CSS선택자에 대한 내용은 기존에 다루었기에 생략하고, 비표준 선택자의 종류에 대해서만 정리하면 아래와 같다.

 

출처 :&nbsp;http://www.tcpschool.com/jquery/jq_elementSelection_jqSelector

 

선택자와 관련하여 더 자세한 내용은 아래 링크에서 확인 가능하다.

 

http://www.tcpschool.com/jquery/jq_elementSelection_jqSelector

 

 

 

4. jQuery를 활용한 기능 구현

 

1) 무한 스크롤

데이터가 존재하면, 스크롤을 계속해서 내릴 수 있는데,

스크롤을 내리는 행위로 인해 데이터가 추가되는 원리로 작동한다.

해당 내용을 구현한 코드는 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>무한스크롤</title>
</head>
<body>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">

$(document).ready(function(){//문서객체(h1같은)를 추가할 수 있는 코드를 추가
	var ele=function(){//이벤트가 발생한다면 해당 함수 수행
	
		//$(?)을 body에 붙여주세요-> 그걸 20번 반복
		for(var i=1; i<=20; i++){			
			$('<h1>'+i+'<h1>').appendTo('body');
		}
		
	};
	ele();//데이터 호출
	$(window).scroll(function (){//이벤트의 연결
		var a=$(window).scrollTop()+$(window).height();//스크롤상단+바의 길이가(스크롤의 크기)
		var b=$(document).height(); //스크롤바의 총 길이가 다큐먼트의 길이랑 같다면?(전체문서크기)
		
		if(a==b){ //if, 스크롤바가 밑에 닿으면
			ele();//데이터 호출
		}
	});
}); //이벤트의 연결 부분

</script>

</body>
</html>

 

 


 2) 풀다운

nav에서 주로 사용되는 방식으로, 해당 li를 호버했을때 숨겨진 아이템을 보여주는 방식으로 구현된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>풀다운</title>

<!-- =============================스타일=============================== -->
<style type="text/css">
   * {
      margin: 0; padding: 0;
   }
   a {
      text-decoration: none;
   }
   li {
      list-style: none;
   }
   body {
      width: 1000px; margin: 0 auto;
      background: lightgray;
   }
   #wrapper {
      background: white;
      margin: 30px;
      padding: 10px;
   }
   #main-navigation {
      height: 70px;
   }
   .outer-menu-item {
      float: left;
      position: relative;
   }
   .outer-menu-item:hover {
      background: black;
      color: white;
   }
   .menu-title {
      height: 50px; line-height: 50px;
      display: block;
   }
   .inner-menu {
      display: none;
      position: absolute;
      z-index: 100; /*1,10,100이런 식으로 관리*/
   }
   .inner-menu-item > a {
      display: block;
      color: black;
   }
   .inner-menu-item > a:hover {
      background: black;
      color: white;
   }
</style>


</head>
<body>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script type="text/javascript">
   $(document).ready(function(){
      $('.outer-menu-item').hover(function(){//마우스가 호버되면
         $(this).find('.inner-menu').show();
      },function(){//마우스가 제거되면
         $(this).find('.inner-menu').hide();
      });
   });   
</script>


<!-- =============================구조=============================== -->
<!-- ul을 박스로 한 번 묶고, 그걸 nav로 묶고, 최종적으로 div로 wrapper함 -->
<div id="wrapper">
	<nav id="main-navigarion">
		<div>
			<ul class="outer-menu">
				<li class="outer-menu-item">
					<span class="title">HTML</span>
					<ul class="inner-menu">
						<li class="inner-menu-item"><a href="#">목록</a></li>
						<li class="inner-menu-item"><a href="#">목록</a></li>
					</ul>
				</li>
				<li class="outer-menu-item">
					<span class="title">CSS</span>
					<ul class="inner-menu">
						<li class="inner-menu-item"><a href="#">목록</a></li>
						<li class="inner-menu-item"><a href="#">목록</a></li>
						<li class="inner-menu-item"><a href="#">목록</a></li>
						<li class="inner-menu-item"><a href="#">목록</a></li>
					</ul>
				</li>
				<li class="outer-menu-item">
					<span class="title">JS</span>
					<ul class="inner-menu">
						<li class="inner-menu-item"><a href="#">목록</a></li>
						<li class="inner-menu-item"><a href="#">목록</a></li>
						<li class="inner-menu-item"><a href="#">목록</a></li>
						<li class="inner-menu-item"><a href="#">목록</a></li>
						<li class="inner-menu-item"><a href="#">목록</a></li>
						<li class="inner-menu-item"><a href="#">목록</a></li>
						<li class="inner-menu-item"><a href="#">목록</a></li>
						<li class="inner-menu-item"><a href="#">목록</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</nav>
</div>

</body>
</html>

 


 3) 갤러리(배너)

이미지 배너를 구현하는 코드를 하단에 첨부하였다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>갤러리(배너)</title>
<style type="text/css">
   * {/*실습의 간편성을 위한 전체선택자 사용*/
      margin: 0;
      padding: 0;
   }
   #wrap {
      width: 300px;
      margin: 0 auto;
   }
   #wrap .page {
      text-align: right;
      margin: 5px;
   }
   #wrap .page .info {
      display: inline-block;
      margin: 10px;
   }
   #wrap .page button {
      border: none;
      background: lightgreen;
      color: red;
      width: 25px;
      height: 25px;
   }
   #wrap .image {
      width: 200px;
      height: 200px;
      border: 2px solid black;
      overflow: hidden;
   }
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
   $(document).ready(function(){
      var totalNum= $('.image > div').length; // querySelectorAll();
      var currNum = 1;
      
      //text 기초설정
      $('.info > span:first').text(currNum);
      $('.info > span:last').text(totalNum);
      
      //이전버튼 클릭시
      $('.prev').click(function(){
         currNum--;
         if(currNum<1){//만약 1보다 현재 페이지가 작다면
            currNum=totalNum;
         }
         $('.info > span:first').text(currNum);//클릭시마다 텍스트 변경
         $('.image div:last').insertBefore('.image div:first');//첫번째 사진 앞에 마지막사진이 오도록
      });
      
      //다음 버튼 클릭시
      $('.next').click(function(){
         currNum++;
         if(currNum>totalNum){//만약 현재페이지가 total보다 크다면
            currNum=1;
         }
         $('.info > span:first').text(currNum);//클릭시마다 텍스트 변경
         $('.image div:first').insertAfter('.image div:last');//마지막 사진 뒤에 첫번째 사진이 오도록
      });
   });
</script>

<div id="wrap">
   <div class="page">
      <span class="info">
         <span></span> / <span></span>
      </span>
      <button class="prev">&lt;</button>
      <button class="next">&gt;</button>
   </div>
   <div class="image">
      <div><img alt="1" src="image/KakaoTalk_20220204_104518834.jpg"></div>
      <div><img alt="2" src="image/KakaoTalk_20220204_104518899.jpg"></div>
      <div><img alt="3" src="image/KakaoTalk_20220204_104518969.jpg"></div>
   </div>
</div>

</body>
</html>

 

 

5. 플러그인

이미 잘 만들어진 리소스들을 다운받아 사용하는 것으로, 효율적이고 다채로운 이벤트들을 쉽게 이용할 수 있게 된다.

 

html의 경우 구조, 틀, calss, id명을 선 구현,
css의 경우 margin, padding, 레이아웃을 선 구현
js의 경우 다양한 메서드를 선 구현 해놓은 상태로 내용을 이루고 있다.

추가로 이런 내용들을 사용자가 효율적으로 쓸 수 있도록 예제파일(Demo파일)을 포함하고 있다

 

아래로는 가장 보편적으로 사용되는 플러그인 3가지를 사용해보는 실습을 진행해보았다.

 

 

1) lightBox 플러그인

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>light box플러그인</title>
<!-- light박스의 스타일시트 연결 -->
<link rel="stylesheet" href="jquery.lightbox-0.5.css">
</head>
<body>

<!-- light박스의 js파일 연결 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="jquery.lightbox-0.5.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$('lightbox').lightBox();
	});
</script>

<a class="lightbox" href="image/KakaoTalk_20220204_104518834.jpg">lightbox</a>
<a class="lightbox" href="image/KakaoTalk_20220204_104518899.jpg">lightbox</a>
<a class="lightbox" href="image/KakaoTalk_20220204_104518969.jpg">lightbox</a>

</body>
</html>

 

 

2) masonry 플러그인

동적인 레이아웃을 구성할때 사용하는 플러그인으로,

masonry페이지에서 플러그인에 사용할 코드와, 레이아웃 등 여러 데모 파일들을 살펴보고 필요에 맞게 이용할 수 있다.

 

https://masonry.desandro.com/

 

Masonry

Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works o

masonry.desandro.com

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Masonry</title>
    <style>
        * { margin: 0; padding: 0; }
        .box { 
            background: lightblue;
            margin: 5px;
        }
        .box2 { 
            background: lightpink;
            margin: 5px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
    <script>

        $(document).ready(function () {

            for (var i = 0; i < 100; i++) {
               if(i%2==0){
                   $('<div></div>').addClass('box').css({
                       width: 100,
                       height: Math.floor(Math.random() * 100) + 50
                   }).appendTo('body');
                }
               else{
                  $('<div></div>').addClass('box2').css({
                        width: 100,
                        height: Math.floor(Math.random() * 100) + 50
                    }).appendTo('body');
               }
            }
			//플러그인 적용
            $('body').masonry({
               transitionDuration: '3s'
            });
        });
    </script>
</head>
<body>

</body>
</html>

 

 

 

3) swiper플러그인

이미지 파일을 배너형식으로 사용할때 많이 쓰이는 플러그인이다.

마찬가지로 하단의 링크를 통해 플러그인에 사용할 코드와, 레이아웃 등 여러 데모 파일들을 살펴보고 필요에 맞게 이용할 수 있다.

 

https://swiperjs.com/

 

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Swiper</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #FFFF99;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 80%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      header{
      	margin: 10px;
      }
     a{
     	text-decoration: none;
     	color: black;	
     }
     a:hover{
     	font-size: 20px;
     	color: green;
     	cursor: pointer;
     }
     footer{
     	text-align: center;
     	font-size: 10px;
     }
     label {
		display: block;
	}
    </style>
  </head>

  <body>
  
  <header>
  	<h2><a href="https://www.google.co.kr/search?q=%EB%A7%B9%EA%B5%AC&source=hp&ei=dXEUYqiKBcifhwPsjqDwDg&iflsig=AHkkrS4AAAAAYhR_hbgWTdxCayfvIsgsMPhC7mdSMxDx&ved=0ahUKEwjomOOBx5L2AhXIz2EKHWwHCO4Q4dUDCAk&uact=5&oq=%EB%A7%B9%EA%B5%AC&gs_lcp=Cgdnd3Mtd2l6EAMyCwgAEIAEELEDEIMBMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCC4QgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEOg4ILhCABBCxAxDHARDRAzoRCC4QgAQQsQMQgwEQxwEQ0QM6CwguEIAEEMcBEKMCOgsILhCABBDHARDRAzoUCC4QgAQQsQMQgwEQxwEQ0QMQ1AI6CAgAEIAEELEDOggILhCABBCxAzoRCC4QgAQQsQMQgwEQxwEQrwE6DgguEIAEELEDEIMBENQCOgsILhCABBCxAxCDAToLCC4QgAQQxwEQrwFQAFiOEGCtEWgEcAB4AoAB1QOIAb0TkgEJMC42LjEuMi4ymAEAoAEBsAEA&sclient=gws-wiz">돌 줍는 맹구 후원사이트</a></h2>
  </header>
  
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img alt="사진1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVjXBxKkHM-Xnuhf8-BLgQMDHmQTi5WTrxCw&usqp=CAU"></div>
        <div class="swiper-slide"><img alt="사진2" src="https://img.insight.co.kr/static/2021/03/12/700/img_20210312174643_p3obsnj9.webp"></div>
        <div class="swiper-slide"><img alt="사진3" src="http://i.imgur.com/5p0j5L3.jpg"></div>
        <div class="swiper-slide"><img alt="사진4" src="https://2.gall-img.com/hygall/files/attach/images/82/321/808/313/36f7d88431f2f4b17e6930807fcee265.png"></div>
        <div class="swiper-slide"><img alt="사진5" src="https://blog.kakaocdn.net/dn/NuIEf/btraPurzdkd/aGFxQ0JKL0wD3BLYQX4NNk/img.jpg"></div>
        <div class="swiper-slide"><img alt="사진6" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvJWeSKafZ5O_oLpXR-qAcb3Fhz-cTNrvWGw&usqp=CAU"></div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>
	<br>
	<div class="doll">
		<form method="get" action="https://www.childfund.or.kr/regularSpon/regular.do?utm_medium=cpc&utm_source=google&utm_campaign=g_search_pc&utm_content=&utm_term=%ED%9B%84%EC%9B%90&gclid=Cj0KCQiAjc2QBhDgARIsAMc3SqSczB1iQdqZZU1oBbIge2zmf98WYTSB4Feh9QmR3UJI3pPZ9wTffnoaAvHeEALw_wcB">
		<fieldset>
			<legend>맹구를 위해 후원하고싶나요?</legend>
			<label>이름 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="text" placeholder="후원자 명">
			</label>
			<label>계좌정보
				<select>
					<option>신한</option>
					<option>농협</option>
					<option>국민</option>
					<option>새마을</option>
					<option>카카오뱅크</option>
				</select>
				<input type="text" placeholder="계좌번호">
				<input name="sand" type="submit" value="입력완료">
			</label>
			
		</fieldset>
		</form>
	</div>

	<footer>ⓒmaeng9world</footer>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script type="text/javascript">
    $(document).ready(function(){
      var swiper = new Swiper(".mySwiper", {
        pagination: {
          el: ".swiper-pagination",
          type: "progressbar",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    });
    </script>
  </body>
</html>

 

 

 

 

 

 

반응형

'JavaScript > JQuery' 카테고리의 다른 글

[tooltip] JQuery-ui.js, 요소 tooltip 생성부터 커스텀까지  (4) 2023.12.07
AJAX로 json데이터 넘겨받기  (0) 2022.08.04
타임슬라이더 구현  (0) 2022.06.24
요소의 조작 : 제이쿼리  (0) 2022.05.31
aJax와 Json  (0) 2022.02.23

관련글

티스토리툴바