jQuery Hello World(Hello ITPANGPANG) 찍기

Posted by ITPangPang
2016. 10. 2. 03:31 웹(Web)/jQuery


jQuery Hello World

(Hello ITPANGPANG)

찍기



ㆍ 요즘 안드로이드만 하느라 바쁘다보니 웹을 미뤄뒀다가

    주말이라서 새로운걸 해보고 싶어서 jQuery를 써봤습니다.


ㆍ 저는 아직 개발을 막 시작한 쥬니어다 보니 항상 여러가지를

    써보고 싶은마음이 있습니다..



그래서 

항상 귀로 듣기만

했었던 jQuery가 뭔지

궁금해서 한번

써봤습니다


jQuery를 사용하기 위해서는

라이브러리를 추가해줘야 됩니다


코드에 src로 추가시켜주기 위해서

아래 사이트에 접속해줍니다


https://developers.google.com/speed/libraries/


위 사이트에 접속을 해서

jQuery를 검색해서 위치로

이동합니다


위와 같이 위치로 이동하면


추가해줘야할 코드가

친절하게 나와있습니다.


3.1.1을 가져와서 추가해보도록

하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    
    </script>
</head>
<body>
  
</body>
</html>
cs


이렇게만 추가하면

이제부터 jQuery를 

사용할 수 있습니다.


그 다음 

Hello ITPANGPANG

이라는 문자열을

찍어주기 위해서

<body> </body>

사이에 다음과 같은

코드를 추가해줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        
 
    </script>
</head>
<body>
  <h1 id="idtest"></h1>
  <h1>Hello ITPANGPANG</h1>
</body>
</html>
cs


2줄을 추가했습니다

<h1 id="idtest"></h1>

<h1>Hello ITPANGPANG</h1>


첫번째 줄은 ID만 지정해줬습니다


두번째 줄은 일반적으로 

HTML로 문자열을 출력해주기위한

코드입니다


이 상태에서

결과를 보면 당연히

두번째 코드에 적힌


Hello ITPANGPANG만

찍히겠죠?


이제

jQuery로 문자열을

찍어주기 위해서


<head></head>

부분에서 idtest라는

아이디를 찾아서

해당 엘리먼트를 컨트롤

해주면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () 
        {
            $("#idtest").html("Hello ITPANGPANG").css({"border-color": "#BDBDBD",
                                                       "border-width":"5px",
                                                        "border-style":"solid"}).css("background-color","green");
        });
    </script>
</head>
<body>
  <h1 id="idtest"></h1>
  <h1>Hello ITPANGPANG</h1>
</body>
</html>
cs


이런식으로

$("#idtest")를 찾아서

.html("Hello ITPANGPANG")

html 코드를 적용하고


.css(border, background)

css 코드를 적용해주면 됩니다


css 적용하는 방법은

("" : "")

이런식으로 : 로 나눠줘도 되고


("","")

이렇게 ,로 구분해줘도 됩니다.


그리고 여러가지 동시에 적용하기

위해서는 {}를 사용해서 묶어주시면

동시에 사용이 가능합니다


결과를 보면


이런식으로 첫번째

Hello ITPANGPANG에

CSS 효과가 제대로

적용된 것을 확인 할 수 있습니다

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

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

jQuery 이벤트 발생시켜보기  (0) 2016.10.03
jQuery - Selector  (0) 2016.10.02
Trackback: Comment:

티스토리툴바