jQuery는 '명령 대상 ($('#typo'))에 명령 내용 (css('color','#ebc000'))을 보낸다'고 해석한다.

 

명령 내용

css('color','#ebc000');

"CSS의 color 속성에 #ebc000라는 값을 지정하라"

css()라는 명령은 JavaScript에 정의되어 있지 않은 jQuery의 명령입니다. 즉 jQuery의 js파일 안에 css() 라는 명령이 정의되어 있으며, 해당 명령을 main.js에서 이용합니다.

이러한 jQuery의 명령을 'jQuery메서드' 라고 합니다. (이후에는 '메서드' 라고 표기하겠습니다.)

또한 css()의 괄호() 안에 작성한 CSS 속성과 값 처럼, 메서드에 전달되는 데이터를 '매개변수'라고 합니다.

우선 위 코드가 jQuery 메서드 (css() )와 두 개의 매개변수 ('color', '#222') 로 구성되어 있음을 알아야합니다.

 

 

명령 대상 : $() 함수와 jQuery 객체

css() 메서드의 '명령 대상' 이 되는 것은 'id=typo'가 지정된 HTML 요소' 입니다. 하지만 jQuery는 HTML요소에 직접 css() 메서드를 실행할 수 없습니다. css() 메서드를 사용하려면 jQuery 명령 대상을 고유의 형식으로 지정해야한다. 

$('#typo')

$() 함수는 'HTML 요소를 기반에 두고 jQuery의 고유 요소를 생성한다 라는 기능이 있는 함수이다. 

$()함수와 css() 메서드는 매개변수를 전달받는다는 의미에서 비슷하지만, $()는 메서드라고 말하지 않고 함수라고 한다. 그 차이는 이해하기 어렵기 때문에 명령문 앞에 점(.)이 붙어 있으면 '메서드', 점이 붙어 있지 않으면 '함수'라고 이해하면 된다.

 

 

 

점과 세미콜론의 역할

$() 함수와 css() 메서드 사이에는 점(.)으로 jQuery 객체와 jQuery 메서드를 이어주는 것을 확인할 수 있습니다.

즉 점(.)은 jQuery 객체와 메서드를 이어주는 역할이라고 생각하면 됩니다.

 

 

'Web > jQuery' 카테고리의 다른 글

jQuery CSS 스타일 변경하기  (0) 2021.02.09
JQuery?  (0) 2021.02.08
jQuery.ready() 란  (0) 2021.02.04

jQuery를 사용하여 CSS 스타일을 변경해 보겠습니다.

 

HTML 코드

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content ="IE= edge">
    <title>Creative jQuery</title>
    <link rel = "stylesheet" href ="./css/normalize.css">
    <link rel ="stylesheet" href="./css/main.css">

    <script src = "./js/vendor/jquery-1.10.2.min.js"></script>
    <script src = "./js/vendor/jquery-ui-1.10.3.custom.min.js"> </script>
    <script src = "./js/main.js"></script>


  </head>
  <body>
    <header class ="page-header" role = "banner">
        <h1> Creative jQuery Sample </h1>
    </header>

    <div class = "page-main" role="main">
        <div id ="typo"> //변경될 부분
            <div class ="inner"> Creative jQyery </div>
        </div>
    </div>

    <footer class ="page-footer" role ="contentinfo">
        <small class ="copyright"> COPYRIGHT *copy;
            <a href = "http://shsdfjk.co.jp" target ="_blank">
                SHIFTBISIA INC. </a>
        </small>
    </footer>



   </body>
</html>

 

main.js

$(function()
{
  $('#typo').css('color','#ebc000');
});

 

스타일을 변경하는 코드

$('선택자').css('속성', '값');

 

 

더 자세하게 설명하는 css() 메서드

 

css() 메서드에서 현재 속성값을 검색하는 방법
$(function() {
	$('#typo').css('color');
});

위 코드는 현재 속성값을 검색만 합니다. 따라서 코드를 실행하면 웹 브라우저에서 아무것도 변화하지 않습니다. (HTML 요소에는 아무런 변화가 없습니다.) 이런 코드를 작성하는 경우는 뒤에서 설명할 것이므로 여기서는 '현재 속성값을 검색할 수 있다." 라고만 기억하면 됩니다. 

 

css() 메서드에서 여러 가지 속성값을 한꺼번에 변경하는 방법

css() 메서드에서 여러 가지 속성값을 한꺼번에 변경하려면 코드를 어떻게 작성해야 할까요? 예를 들어 다음과 같은 코드를 작성하는 사람도 있을 겁니다.

  • 여러 가지 속성값을 변겅하는 방법 (1)
$(function() {
	$('#typo').css('font-size', '50px');
    $('#typo').css('background-color', '#ae5e9b');
    $('#typo').css('color', '#ebc000');
});
  • 효율적인 변경하는 방법
$('선택자').css({
	'속성 1' : '수치 1',
    '속성 2' : '수치 2',
    '속성 3' : '수치 3',
 });
  • 여러 가지 속성값을 변겅하는 방법 (2)
$(function(){
	$('#typo').css({
    	'font-size' : '50px' ,
        'background-color : '#ae5e9b',
        'color : 'ebc000'
    })
});
  • 여러 가지 속성값을 변겅하는 방법 (3)
$(function(){
	$('#typo').cs({
    	fontSize : '50px',
        backgroundColor : '#ae5e9b',
        color : '#ebc000'
   })
});

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'Web > jQuery' 카테고리의 다른 글

jQuery 기본 구문 설명  (0) 2021.02.09
JQuery?  (0) 2021.02.08
jQuery.ready() 란  (0) 2021.02.04

라이브러리란?

자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드

"CSS를 적용할 수 있으며 DOM을 쉽게 다룰 수 있다."

보통웹 페이지에서는 id 속성과 class 속성으로 지정한 HTML 요소에 javaScript에서 구현한 기능이나 효과를 추가합니다. (id는 html에서 고유한 이름 class는 html에서 고유하지 않은 집합의 이름)

HTML요소를 이렇게 조작하거나 바꾸는 작업을 DOM 조작이라고 함

 

jQuery? 

  • 엘리먼트를 선택하는 강력한 방법 제공
  • 선택된 앨리먼트들을 효율적으로 제어할 수 있는  다양한 수단을 제공
  • 자바스크립트 라이브러리

jQuery를 사용해서 HTML 요소 추가

$('#books > ul.list').append('<li>Creative jQuery</li>

위의 코드에서는 CSS(#books>ul.list)와 HTML(<li>Creative jQuery</li> 이 함께 사용되는 것을 알 수 있습니다. 위 코드를 실행하면 HTML은 1번과 2번을 통해 다음과 같이변경 됩니다.

번경전

<div id = "books">
	<ul class ="list">
    	<li> Text of jQuery </li>
    </ul>
</div>

변경후

<div id = "books">
	<ul class ="list">
    	<li> Text of jQuery </li>
        <li> Create jQuery </li> //추가
    </ul>
</div>

 

코드를 적게 작성하므로 개발 시간을 단축할 수 있습니다.

JavaScript

  • 버튼을 눌러 'Hello World'를 출력하는 코드
var button =documetn.getElementById('greeting'),
	sayHello =function(){
    	alert("Hello World");
     }; 
 if(button.addEventListener){
 	button.addEventListener('click',sayHello,false);
 }else if (button.attachEvent){
 	button.attachEvent('onclick',sayHello);
 }

 

jQuery

  • 버튼을 눌러 'Hello World'를 출력하는 jQuery 코드
$('#greeting').on('click',function() {
	alert('Hello World!');\
 });

 

Hello world - 첫번째 jQuery

사용방법

1. 직접 서비스하는 경우

  • http://jquery.org에서 jQuery 소스코드를 다운로드한다.
  • 위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다.

2. 구글의 자바스크립트 라이브러리를 사용하는 경우

<html>
     <body>
         <div class="welcome"></div>
         <div class="welcome"></div>
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
         <script type="text/javascript">
                 $('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
         </script>
     </body>
 </html>

 

'Web > jQuery' 카테고리의 다른 글

jQuery 기본 구문 설명  (0) 2021.02.09
jQuery CSS 스타일 변경하기  (0) 2021.02.09
jQuery.ready() 란  (0) 2021.02.04

jQuery .ready() vs .onload() 특징 및 차이

 

개요

jQuery를 이용한 뷰단 event 함수 구현 중 비슷하지만 다른 두 jQuery 함수에 대한 궁금증

 

$(document).ready(function(){
	alert('hi-ready');
 });
 
 $(window).onload(function(){
 	alert('hi-load');
 });
  • 호출 시점의 차이 : 한 페이지에 두 함수가 다 있다면 실행 우선 순위 (.ready() -> .onlad() 순으로 실행)
    • .ready() 호출시점 : DOM Tree 생성 완료 후
    • .onload() 호출시점 : 모든 페이지 구성요소 페인팅 완료 후

내용

우선 알아둬야할 내용 "웹 브라우저의 HTML문서 랜더링 과정"

  1. 불러오기 (Loading)
    • 불러오기는 HTTP 모듈 또는 파일시스템으로 전달 받은 리소스 스트림(Resource Stream)을 읽는 과정으로 로더(Loader)가 이 역할을 맡고 있다.
    • 로더는 단순히 읽는 것이 아니라, 이미 데이터를 읽었는지도 확인하고, 팝업창을 열지 말지, 또는 파일을 다운로드 받을 지를 결정한다.
  2. 파싱(Parsing)
    • 파싱은 DOM(Document Object Model) 트리를 만드는 과정이다.
    • 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다.
    • DOM Tree : 내용을 저장하는 트리로 javascript에서 접근하는 DOM객체를 쓸 때 이용됨.
  3. 랜더링 트리 만들기 (Rendering Tree)
    • 랜더링 트리 : DOM Tree와는 별도로 그리기 위한 트리가 만들어져야 하는데, 그것이 랜더링 트리이다.
  4. CSS 결정
    • CSS는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 CSS 스타일을 분석해 태그에 스타일 규칙이 적용되게 결정한다.
  5. 레이아웃(LayOut)
    • 랜더링 트리에서 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 정해주는 과정을 레이아웃이라고 한다.
  6. 그리기
    • 랜더링 트리를 탐색하면서 페이지를 그려나간다.

결론 

jQuery .ready() : 1~2번 과정이 완료되어 DOM Tree 생성이 완료된 후 호출

jQuery.onload() : 모든 과정이 완료되어, 웹 페이지가 다 구성된 후 호출.

'Web > jQuery' 카테고리의 다른 글

jQuery 기본 구문 설명  (0) 2021.02.09
jQuery CSS 스타일 변경하기  (0) 2021.02.09
JQuery?  (0) 2021.02.08

+ Recent posts

티스토리툴바