jQuery (1) 제이쿼리 정의, 역사, 개요

Javascript/JQuery 2019. 6. 28. 11:20

728x90

제이쿼리(jQuery)란?

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

제이쿼리의 역사

제이쿼리는 2006년 미국의 존 레식(John Resig)이 뉴욕시 바캠프(Barcamp)에서 처음으로 소개하였다.

현재는 jQuery Team이라는 개발자 그룹이 jQuery Foundation을 통해 개발과 유지 보수를 담당하고 있다.

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

CDN을 사용한 jQuery 활용

jQuery 공식 홈페이지에서는 발표된 모든 버전의 jQuery 스크립트 CDN 서버를 제공하며 사용자는 jQuery CDN 서버로 연결되는 외부 링크만으로 jQuery 스크립트를 불러와서 제이쿼리의 모든 기능을 사용할 수 있다. 이 방법은 사이트 트래픽량을 감소시킬 수 있다. jQuery는 한 개의 스크립트로 이루어져 있음과 동시에 한 개의 jQuery() 함수로 구성되어 있다.

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

code.jquery.com

인터넷만 연결되어있으면 제이쿼리 라이브러리를 가져다 사용 가능하다. 여기에서는 구글 개발 라이브러리를 사용했다. 사용 방법은 매우 간단! 위의 코드를 긁어와서 html 헤더 부분에 복사 + 붙여넣기해서 사용하면 된다.

Hosted Libraries | Hosted Libraries | Google Developers

A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.

developers.google.com

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

제이쿼리 셀렉터 문법과 간단한 실습 (선택자)

jQuery() 함수는 HTML의 DOM 객체를 선택하는 함수이고 반환되는 오브젝트는 선택된 객체의 핸들러이다. 그리고 jQuery라는 함수명을 계속 사용하는 것은 번거롭기 때문에 이 함수명을 대체할 수 있는 식별자($)를 사용한다.

※ 기존의 홈페이지에서 prototype과 같은 다른 자바스크립트 프레임워크를 사용하고 있는 경우에는 식별자 $를 사용했을 때 프레임워크끼리의 충돌로 인해 오류가 발생할 수 있는데, 이 때에는 $가 아닌 원래의 함수인 jQuery를 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery - 셀렉터</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        body{
            font-size: 17px;
            font-family: Arial, Helvetica, sans-serif;
            background: #f4f4f4;
            line-height: 1.5em;
        }
        header {
			background: #333;
			color: white;
			padding: 20px;
			text-align: center;
			border-bottom: 4px solid black;
			margin-bottom: 10px;
		}
		#container {
			width: 90%;
			margin: auto;
			padding: 10px;
		}
    </style>

</head>
<body>
    <header>
        <h1>jquery시작하기</h1>
    </header>

    <div class="container">
        <h1 class="heading1">첫 번째 제목</h1>
        <p id="para1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et saepe, accusamus labore laudantium debitis tenetur commodi, doloribus enim quas, iure odio aliquid! <span>Officia nemo accusantium</span> veritatis aliquam labore beatae enim!</p>

		<h1 class="heading2">두 번째 제목</h1>
        <p class="para2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et saepe, accusamus labore laudantium debitis tenetur commodi, doloribus enim quas, iure odio aliquid! <span>Officia nemo accusantium</span> veritatis aliquam labore beatae enim!</p>
        
        <ul id="list">
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
        </ul>
        
        <input type="button" value="Button">
        <input type="submit" value="Submit">
        <input type="text">
        <a href="https://www.google.co.kr/">Google</a>
        <a href="https://www.naver.com/">Naver</a>
    </div>
    
    <script>
        // $('h1').hide();
        $('h1.heading2').hide(); 
        $('p span').css('color', 'red');
        $('ul#list li:first').css('color', 'red');
        $('ul#list li:last').css('color', 'blue');

        $('ul#list li:even').css('background-color', 'yellowgreen');
	    $('ul#list li:odd').css('background-color', 'pink');
        $('ul#list li:nth-child(3)').css('list-style', 'none');
        //$('ul#list li:nth-child(3n)').css('list-style', 'none'); 3의 배수로 선택가능

        $(':button').hide();

        $('[href]').css('color', 'red');
        $('a[href="https://www.naver.com/"]').css('color', 'gray');
        //$('*').hide();

    </script>

</body>
</html>

728x90

저작자표시 비영리 변경금지

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

오류: 다른 요소(element)도 같이 선택되는 문제 (1)	2019.12.05
jQuery (5) Ajax 기술 사용해서 json 파싱하기 (0)	2019.07.03
jQuery (4) 애니메이션 효과 (0)	2019.06.28
jQuery (3) 돔 (DOM) (0)	2019.06.28
jQuery (2) 제이쿼리 이벤트 (0)	2019.06.28

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.