2022-02-04

yyj·2022년 2월 11일
0

.

목록 보기
12/21

"jQuery"

static web

  • web client가 web server에게 이미 web server가 가지고 있는 resource(html,css,js)요청하는 경우

dynamic web

  • web client가 web server에게 program을 실행시켜 그 결과를 요청하는 경우

JS(javascript)는 HTML, CSS로 browser에 rendering된 화면을 동적으로 제어

  • JQuery라는 library를 이용해서 처리할 예정

- 실행과정

  1. HTML의 태그로 화면을 만들고

  2. 그것을 통해 브라우저에 랜더링을 통해 화면에 화면을 그림
    -> HTML을 분석(Parsing)을 하여 내부적으로 DOM Tree를 만듬
    - DOM Tree(Document Object Model Tree)
    [ 트리로된 자료구조를 만듬]

  • DOM Tree를 만들고 나서 이것을 기반으로 화면에 랜더링 작업진행
    [엘리먼트와 매칭되는 개별적인 요소들] = 컴포넌트를 통해 버튼 등을 만듬

  1. JavaScript에서 DOM Tree중 필요한 객체를 문서객체(Document Object)형태로 가져다가 사용
    [컴포넌트를 만들고 자바스크립트에서 그 컴포넌트를 제어하기 위해 자바스크립트에서 객체화 시키는데 이러한 컴포넌트를 문서객체(document object)로 가져와서 작업한다]

  2. jQuery로 이 작업을 대체해서 작업함 js로 처리하기 너무 힘들기 때문




jQuery의 형태를 알아보자

  • $ 달러로 시작함 그러고 괄호 ( ) 가 나옴

    • $( ) 이형태를 가진다
      • 내부에 두가지가 들어갈 수있다.
      1. Selector라는 특수한 형태의 문자열
      2. document object

  • 즉, $(selector or document object).method() 이런식의 형태이다.

    • method는 정해져 있다!

    -> jQuery는 document object를 직접 사용하지 않아 jQuery객체로 변환 시킴

    -> 또한 selector 문자열을 통해 jquery 객체를 얻어낼 수 있음

    -> jQuery객체로 변환시키면 -> browser에 component를 지칭
    => 즉 component는 HTML Element를 지칭 (엘리먼트 요소를 통해 만든 것)
    ex) 버튼




jQuery의 select 문자열

jQuery의 select 문자열? 얘는 뭐하는 놈인가?

  • selector 문자열로 제어할 document object를 찾고 그것을 어떤 method로 제어할지 정함!
  • 기본적으로 jQuery의 함수는 다음과 같이 선언 할 수 있다.
function my_func() {
// 예제를 들기위해 함수명을 my_func으로 선언하였다.
// 이후에 나오는 $~~~내용이 여기에 들어간다고 생각하면 된다!.
// 편의상 function my_func()는 생략하여 작성하겠다.
// html 문서도 마찬가지로 my_func을 실행하기 위한 input type의 버튼은 생략하여 작성 하겠다.
}

Selector

  • Selector에 대해 알아보자
  1. 현재 HTML안에 있는 모든 Element를 선택(전체 선택자)
  • 이럴때 사용하는게 전체선택자이다
    • 기호로는 * 을 이용한다
$(html:'*').css(propertyName:'color',value_function:'red')
  • ' '기호앞에 html, propertyName 등은 무엇을 지시하는지 보여주는것 이기 때문에 주석 처리시 ' ' 기호안에 글자만 표현되고 나머지는 사라진다.
// $('*').css('color','red')
  • 문자열 형태로 되어있는 기호 이것이 셀렉터이다!
  • 싹다 선택해서 글자색을 빨강으로 바꾸라는 의미이다.

  1. 태그 선택자 (tag selector)
    • 태그 명을 이용해서 선택할 수 있음!
alert($(html:'div').text())
  • 화면에 div사이에 들어간 문자를 알림으로 띄워줌!
  • text( )는 인자가 없으면 태그사이의 문자열을 알아옴!
  • text( )메소드에 인자기 있으면 태그 사이의 문자열을 메소드 인자내용으로 변경!
$(html:'div').text('호호호')

  1. ID 선택자(ID selector)
  • 속성으로 사용되는 id는 어떤 태그든 다 붙을 수 있다.
  • id는 하나의 html내에서 중복되면 안됨!
    • id는 기본적으로 식별자기 때문에 중복 x
    • id 값을 통해 그 엘리먼트를 찾을 수 있음
    • id selector 는 #을 이용
    • id selector는 대소문자를 구분
  • html문서
<ul>
	<li id ='seoul'>서울</li>
</ul>
  • jQuery문서
$(html:'#seoul').remove()
// remove()메소드는 삭제를 의미

  1. class 선택자 (class selector)
  • 속성으로 사용되는 class도 어떤 태그에든 붙일 수 있다.
    • id와 class의 가장 큰 차이점은 class는 중복이 가능하다!
    • 기호로는 . 을 사용
  • html문서
<ul>
	<li id ='seoul' class='myClass'>서울</li>
    <li id ='inchon'class='myClass'>인천</li>
</ul>
  • jQuery문서
$(html:'.myClass').css(propertyName:'color', value_function: 'yellow')

  1. 자식 선택자, 후손 선택자
  • 부모, 자식, 후손 관계가 있따.
    • 자식 선택자는 > 기호를 이용
    • 후손 선택자는 (공백)을 이용
  • html문서
<body>
  <ul>
      <li id ='seoul' class='myClass'>서울</li>
      <li id ='inchon'class='myClass'>인천</li>
  </ul>
</body>
  • body 기준 ul은 자식 li는 후손관계
  • ul 기준 li는 자식이면서 후손관계
  • li는 li와 형제관계

  • jQuery문서
$(html:'ul > li').css(propertyName:'color', value_function: 'yellow')
$(html:'ul li').css(propertyName:'color', value_function: 'yellow')

  1. 동위 선택자 == 형제에 대해서 선택이 가능
    • +와 ~을 이용
    • +: 바로 다음에 나오는 형제를 지칭
    • ~: 바로다음에 나오는 형제부터 그 밑까지 지칭
  • html문서
<body>
  <ul>
      <li id ='seoul' class='myClass'>서울</li>
      <li id ='inchon'class='myClass'>인천</li>
      <li id ='busan'class='myClass'>부산</li>
  </ul>
</body>
  • jQuery문서
$(html:'#seoul + li').css(propertyName:'color', value_function: 'yellow')
// 아이디가 서울인 녀석의 바로 다음에 나오는 형제를 지칭
// 즉 인천만 노랑색으로 바뀜
$(html:'#seoul ~ li').css(propertyName:'color', value_function: 'red')
// 아이디가 서울인 녀석의 바로 다음에 나오는 형제 모두를 지칭
// 즉 인천 부산의 색이 빨간색으로 바뀜

  1. 속성 선택자
  • attribute를 통해 선택
    • 기호로는 [ ] 대괄호를 이용
  • html문서
<input type ="button" value="버튼클릭" onclick="my_func()">
  • jQuery문서
$(html:'[value =버튼클릭]').remov()
// 속성중에 value가 버튼클릭인  값을 찾아라! 라는 의미
  • 여기까지가 기본 선택자이다 이것 말고도 여러가지가 있으니 추가로 찾아봐서 공부하도록 하자!

"CSS"

css 클래스를 이용해서 css를 조절한다.

  • css 폴더를 하나 만들고
  • 그안에 css파일을 작성후
  • link를 통해 css 경로를 연결해준다
    • < link >라는 태그를 사용한다.
<link rel = "stylesheet" href="css/myStyle.css"> 
<!-- html에는 이형식을 이용하여 작성한다. -->
  • 예제
    css문서
myClass {
    color: blue;
    background-color: yellow;
}
  • html 문서
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <!-- jQuery를 사용하기위한 라이브러리를 참조해서 가져온다. -->
    <script src = "js/aa.js"></script>
    <link rel = "stylesheet" href="css/myStyle.css">
  </head>
  <body>
    <ul>
        <li id ='seoul' class='myClass'>서울</li>
        <li id ='inchon'class='myClass'>인천</li>
        <li id ='busan'class='myClass'>부산</li>
    </ul>
    <input type = "button" value = "클릭" onclick ="my_func()">
 </body>
</html>

  • 좀 더 쉽게 이용하는 방법이 있다.
  • 예제를 통해 알아보도록 하자!
  • html 문서
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src = "js/aa.js"></script>
    <link rel = "stylesheet" href="css/jQuery05.css">
  </head>
  <body>
    <ul>
        <li>아이유</li>
        <li>김연아</li>
        <li>홍길동</li>
    </ul>
    <input type = "button" value = "클릭" onclick ="my_func()">
 </body>
</html>
  • css 문서
myStyle {
	color : red;
    background-color: yellow;
  • jQuery
function my_func() {
   // $(' ul > li:eq(1)').css('color', 'red')
   // $(' ul > li:eq(1)').css('background-color', 'yellow')
   // css는 한번에 1개의 style만 적용해서 그림! 너무 많이하면 깜빡거리면서 코드가 동작하는 모습이 보인다.
  $(html:' ul > li:eq(1)').addClass(className_function:'myStyle')
  • css()는 잘 사용되지 않고 주로 addClass()가 사용됨
  • removeClass()는 class 속성을 삭제한다.

"특수한 선택자들"

jQury

  • 7개의 셀렉터들로 선택할 방법이 없을 때 특수한 선택자들이 존재한다.
  • 예제
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <!-- jQuery를 사용하기위한 라이브러리를 참조해서 가져온다. -->
    <script src = "js/jQuery02.js"></script>
  </head>
  <body>
    <div>
      <ul>
          <li id ='apple'>사과</li>
          <li id ='pineapple'>파인애플</li>
          <li class='MyList'>참외</li>
      </ul>

      <form>
        <input type="text" id="uID" size="20">
      </form>
      <ol>
          <li class='MyList'>고양이</li>
          <li class='MyList'>호랑이</li>
          <li class='MyList'>강아지</li>
      </ol>
    </div>
    <input type = "button" value = "클릭클릭!" onclick ="my_func()">
 </body>
</html>
  • jQuery문
  • 예제 1
// 사과, 파인애플, 참외를 console에 출력해보는 예제이다
// 콘솔에 찍기위해선 console.log를 이용한다
    // console.log($('#apple').text()) // 사과
    // console.log($('#pineapple').text()) // 파인애플
    // console.log($('#pineapple + li').text()) // 참외 출력or
    // console.log($('ul > li.MyList').text()) //  참외출력
    // console.log($('ul > *[class]').text()) //  참외출력
    // console.log($('[type=text]').attr('size'))

    // size라는 속성의 값을 알고싶다. attr을 선언하고 속성에대해 size라는 속성의 값을 알아오면된다.
    // 속성중에 type이 text인것을 찾아서 값을 변경해라!
    // console.log($('[type=text]').attr('size', 30))
    // attr(가져올값, 변경값)
    // 크기 변경됨

    // 입력상자안에 사용자가 입력한 값을 알아오려면?
    // alert($('[type=text]').val())
    // text는 태그 사이의 값을 가져오는것
    // val은 입력상자안에 사용자가 입력한 값을 가져옴
    // 입력상자안에 새로운 내용을 넣으려면?
    // $('[type=text]').val('변경해요!!')
    // val은 인자를 넣으면 그 값을 찾아서 변경함!
    ```

  1. 순서를 가지고 선택
<ol>
    <li class='MyList'>고양이</li>
    <li class='MyList'>호랑이</li>
    <li class='MyList'>강아지</li>
</ol>
  • ol의 자식으로 있는 li들에 대한 선택
    // console.log($('ol > li:first').text())
    // console.log($('ol > li:last').text())
    // console.log($('ol > li:first + li').text()) // 고양이 다음에 있는 호랑이를 가져옴
    // console.log($('ol > li:eq(1)').text())

	// :first 하면 ol의 li중에 첫번째 라는 의미 (고양이)
  	// :last 하면 마짐가 위치에 있는게 선택된다. (강아지)
  	// eq() 순번 / index로 보면됨 0번째부터 시작한다.
    // : eq(1) 0번째부터 하나씩 출력됨 순번을 표현 (호랑이 출력)
  • 콤보박스
  • html문
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="js/jQuery03.js"></script>
</head>
<body>
    <select onchange="my_func()">
        <option>아이유</option>
        <option>김연아</option>
        <option>홍길동</option>
        <option>신사임당</option>
    </select>

    <div>여기에 선택한 사람이 출력되요</div>

    <input type="button" value="클릭">
</body>
</html>

onchange - 변경되는 값들을 설정해준다

  • jQuery문
function my_func() {
  $(html: 'div').text($(html:'select > option:selected').text())
}

selected : 내가 선택한 옵션의 내용을 가져온다.

  • 결과

  • 이런식으로 콤보박스의 내용을 선택하면 변경이된다.

  • 예제 3
  • html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="js/jQuery04.js"></script>
</head>
<body>

    <input type="checkbox"><span>아이유</span><br>
    <input type="checkbox"><span>김연아</span><br>
    <input type="checkbox"><span>홍길동</span><br>
    <input type="checkbox"><span>신사임당</span><br>

    <input type="button" value="클릭클릭" onclick="my_func()">

</body>
</html>

  • 체그박스를 찾는 Query문
// 버튼을 누르면 체크박스에서 선택된 사람이 콘솔에 한줄에 한명씩 출력됨
function my_func() {
     console.log($('[type=checkbox]:checked + span').text())
  // 선택된 것을 찾아서 뒤에있는 span태그를 찾는다는 의미
  // type = checkbox의 뒤의 형제 구문인 span의 내용을 가져온다는 의미
  // span을 통해서 범위가 설정되어 입력값을 가져오고
  // text를 호출하면 하나의 문자열만 나와야한다.
}
// checked == checkbox가 선택한 것을 의미한다.

  • 선택된 엘리먼트들이 콘솔창에 찍히는것을 볼 수있다.
  • 하지만 2개 이상 선택시 선택된 element를 한줄로 인식하여 출력하게 된다.
  • 이를 처리하기 위해선 어떻게 해야하는가?

  • each( )를 이용하면 된다!
  • each() : 선택된 element가 여러개이면 그 각각에 대해서 each 안에 들어있는 람다 함수를 호출한다.
  • 다음과 같이 입력해보자!
function my_func() {
    // 선택된 element가 여러개면 그 각각에 대해서each안에 들어있는 람다함수를 호출
    // $('selector').each() // each는 다음과 같이 사용한다.
    // $('[type = checkbox]:checked + span').each(function() { 
	//       console.log('hoho')	
    //  })
    // 기본적으로 람다 함수가 호출이 되는데 인자가 두개가 호출이 된다. / 다음과 같이 표현할 수 있다.
    $('[type=checkbox]:checked + span').each(
        function (idx,item) {
            // idx는 0부터 1씩 증가하는 index의 값
            // item은 현재 선택된 element의 document object(jQuery가 아님)
            console.log($(item).text())
            // jQuery 객체는 $(document object) 형식으로 바꿔줘야한다
            // 즉 위에와 같이 써주면 jQuery객체로 바꾸어 활용할 수있따.
    })
  • 결과
  • 다음과 같이 여러개를 선택해도 분리되서 콘솔에 출력되는 것을 확인할 수 있다!
profile
yyj
초보개발자
이전 포스트

2022-02-03-HTML

다음 포스트

2022-02-07

0개의 댓글