Cute Blinking Unicorn

서버/JQ

제이쿼리 문서 객체 선택자와 조작법

민밥통 2023. 12. 1. 13:53
더보기

코드의 재사용
- 개발 비용을 줄이고 신뢰성과 생산성을 높이는 특징
- 객체 재사용 > 기존 객체의 인터페이스를 맞추어 새로운 프로그램에서 재사용 (다시 개발하지 않아도 되니까 개발기간을 줄임)
- 상속(inheritance) 재사용성때문에 상속을 받는다.
다시 정의할 필요가 없다
ㄴ 필요한 경우에는 재정의하면 된다.

부모 상위 객체, 자식 하위 객체
--------------------------------------

다형성( polymorphism )
- 같은 이름의 여러 메소드가 필요할 때 선택적으로 수행되는 특징
-100m 뛸 때 특징과 행동이 있다. 
 ㄴ 데이터라고 이야기 했고, 함수라고 이야기 했다.

데이터의 형정의를 하잖아
함수를 정의> 함수는 움직임에 대한 부분을 정의해야하고
함수는 항상 데이터에 종속적이다. 
이제는 동일, 개체를 같이 구성함.
함수는 어디에 속하지 않았음
객체라고 정의하면서 움직임을 함수로 표현한 것.
함수랑 합침 (데이터로 모양을 만들 수 있잖아. 설명할 수 있어 ex 잘생김 안경씀 이렇게 표현할 수 있는데 애가 글 쓰고 이런 거는 움직임이기 때문에 형태로 할 수 없었다.)
그거를 함수라는 거로 합쳐서 어떤 것의 특징을 대표하도록 만든게 개체.
표현을 이건 형태만 표현하면 된다 했는데 아니게 된거임.

<자바의 캡슐화 구현>
- 캡슐화된 클래스를 조합하여 프로그램 구성
class 키워드를 사용하여 클래스 생성

자바스크립트를 이용해서 만든 라이브러리 > 더 편리하고 더 효율적으로 개발할 수 있도록 패키지화시켜서 라이브러리

> 자바스크립트로 이런 다양한 함수들을 가지고 있는 라이브러리들을 만들어줘서 좀 더 편하게 개발할 수 있다.

(161페이지)

 

부트스트랩을 이용하려면 필요한 라이브러리를 우리가 연동 시켜야함.

첫번째는 아예 라이브러리를 다운로드받아서  내로컬 컴퓨터에 개발 컴퓨터에 넣어놓고 거기에서 불러들여서 하는 방법

두번째는 다운로드받지 않고 애네가 만들어놓은 어딘가 서버에 있는 네트워크를 가져다가 쓰는 방법

 

버전이 세가지로 되어 있다

ㅇ.ㅇ.ㅇ

앞자리가 바뀌면 엄청 많은 부분이 변경된다는 것 두번째는 조금 덜 세번쨰는 간단한 디버깅 정도

 

최신 라이브러리를 쓰는 게 다 좋은 건 아니다. 

자동차도 최신 모델을 사면 가끔 리콜이 들어갈 때가 있다. 조금 더 안정화된 자동차를 사면 그동안 많은 문제점이 해결되어 있기 때문에 조금 더 안정화되어 있다.

 

실제 상용화된 소프트웨어를 개발할 때는 최신버전보다 좀 아래버전 LTS버전을 쓰는 게 가장 좋다. 


직접 선택자와 인접 선택자에 관한 실습을 진행

전에 html수업할때 css를 했어서 간략하게 기재할 예정.

 


그룹 선택자 ( 한번에 여러개의 요소를 선택할 때 사용)

<h1>과 <h3 id>를 같이 태그

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>예제</title>
    <script src="/2023-12-01/js/jquery.js"></script>
    <script>
      $(function () {
        $("#tit3, h1")
          .css("background-color", "#0ff")
          .css("border", "2px dashed #f00");
      });
    </script>
  </head>
  <body>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3 id="tit3">직접 선택자</h3>
    <h3>인접 선택자</h3>
  </body>
</html>


$.inArray() , $.isArray, $.merge() 메서드

1. 배열에 저장된 데이터 중 지정한 데이터를 찾아 안덱스값을 반환한다.

ex) $.inArray(data, Array, start index) 

  ㄴ  배열에 저장된 데이터 중 지정한 데이터를 인덱스 오름차순으로 찾아 먼저 찾은 데이터의 인덱스값을 반환

 

2. 지정한 두데이터가 배열 객체면 true를, 배열 객체가 아니면 false를 반환

ex) $.inArray(object)

지정한 객체가 배열 객체면 true를, 아니면 false를 반환

 

3. 메서드는 두 배열 객체를 하나의 객체로 묶는다.

ex) $.merge(Array1, Array2)

두배열 객체를 하나의 배열 객체로 묶는다.

'서버 > JQ' 카테고리의 다른 글

우분투 활용  (1) 2023.12.08
jsq 끝나고 다음 수업 예정  (0) 2023.12.08
java를 이용한 html 활용  (1) 2023.11.28
브라우저 객체 모델  (0) 2023.11.27
String 문자열 객체의 메서드 및 속성  (1) 2023.11.24