제이쿼리(Jquery) 아이디, 클래스, 태그 선택자#1

제이쿼리를 이용해 특정 요소를 선택하는 방법에 대해 알아보겠습니다.

이번에는 요소에 해당하는 아이디, 클래스, 태그를 이용해 선택을 해보겠습니다.

아이디, 클래스, 태그 값으로 찾기위해서는 제이쿼리가 정해놓은 아래 표에있는 기호를 이용해 선택을 하시면 되겠습니다.

 

1. 아이디, 클래스, 태그 선택자 표

 선택자

 예시

 설명 

 #id 

$("#idName") 

id가 idname인 요소 선택

 .class

$(".className") 

 class가 className인 요소 선택

 element

$("p")

<p> 태그인 요소 선택

 

2. 아이디, 클래스, 태그 선택자

 <h1 id="red">Header1</h1>
 <h1 class="blue">Header2</h1>
 <h2>Header3</h2>
 
 <script type="text/javascript">
  $("#red").css("color","red");
  $(".blue").css("color","blue");
  $("h2").css("color","gray");
 </script>

 

결과값

 

Header1

Header1

Header2

 

 

'프론트 엔드 > Jquery' 카테고리의 다른 글

개발노트 :: 제이쿼리(Jquery) Ajax 사용법  (0) 2019.04.01
개발노트 :: 제이쿼리(Jquery) 필터링 선택자#4  (0) 2019.03.28
개발노트 :: 제이쿼리(Jquery) 부모, 형제, 자식 선택자#3  (0) 2019.03.27
개발노트 :: 제이쿼리(Jquery) 속성 선택자#2  (0) 2019.03.26
개발노트 :: 제이쿼리(Jquery) 프로젝트 적용  (0) 2019.03.22

1. Jquersy 란?

Jquey를 사용하기 위해서는 Javascript언어에 대해 기본적인 지식이 필요로 합니다.

 

2. Jquery 프로젝트 적용

제이쿼리(jquery) 공식 홈페이지를 통해 https://jquery.com 다운로드가 가능합니다.

프로젝트 적용방법은 2가지로 나눠집니다.

 

1. CDN 주소를 활용한 방법

  https://developers.google.com/speed/libraries/#jquery 주소를 접속을 하면 아래와 같은 화면이 보입니다.

 

 

 현재 기준으로 버전이 3.x 버전까지 지원이 되고 있으니 가급적이면 최신버전으로 이용을 합니다.

 버전에 해당하는 소스를 복사를 해 사용을 하고자 하는 프로젝트에 <head></head> 태그 안에 포함을 시켜줍니다. 

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

 

 

2. 라이브러리 다운 후 적용

  https://jquery.com/download/ 페이지에 접속을 하면 아래와 같은 화면이 나옵니다.

 

 

 여기서 실제 버전(production), 개발버전(development)이 존재를 하는데 필요하시는 버전을 클릭해 다운 후

 프로젝트에 <head></head>태그 사이에 다운로드한 파일을 경로를 넣어주시면 됩니다.

 

<head>
   <script src="../js/jquery-3.2.1.min.js"></script>
</head>

 

 3. Jquery 기능

3-1 요소 선택자

<링크>

제이쿼리(Jquery) 아이디, 클래스, 태그 선택자#1
제이쿼리(Jquery) 속성 선택자#2
제이쿼리(Jquery) 부모, 형제, 자식 선택자#3
제이쿼리(Jquery) 필터링 선택자#4

 

'프론트 엔드 > Jquery' 카테고리의 다른 글

개발노트 :: 제이쿼리(Jquery) Ajax 사용법  (0) 2019.04.01
개발노트 :: 제이쿼리(Jquery) 필터링 선택자#4  (0) 2019.03.28
개발노트 :: 제이쿼리(Jquery) 부모, 형제, 자식 선택자#3  (0) 2019.03.27
개발노트 :: 제이쿼리(Jquery) 속성 선택자#2  (0) 2019.03.26
개발노트 :: 제이쿼리(Jquery) 아이디, 클래스, 태그 선택자#1  (0) 2019.03.25

1. JSTL indexOf 사용

${fn:indexOf("jstl indexOf","jstl") }

${fn:indexOf("jstl indexOf","indexOf") }

${fn:indexOf("jstl indexOf","text") }

 

결과값

0
5
-1

 

${fn:indexOf("내용","찾는 문자열") }

찾는 문자열이 내용에 있으면 문자열이 시작하는 index 값을 리턴해 줍니다.

만약 찾는 문자열이 없다고 하면 -1이라는 값을 리턴이 된다.

'프론트 엔드 > JSTL' 카테고리의 다른 글

개발노트 :: JSTL length 및 substring 함수 사용  (0) 2019.03.19
개발노트 :: JSTL 날짜 포맷 <fmt:formatDate> <fmt:parseDate>  (0) 2019.03.19
개발노트 :: JSTL 숫자 포맷 <fmt:formatNumber>,<fmt:parseNumber>  (0) 2019.03.18
개발노트 :: JSTL switch문 <c:choose>, <c:when>, <c:otherwise>  (0) 2019.03.18
개발노트 :: JSTL for문 및 varStatus 옵션 <c:forEach>  (1) 2019.03.18

JSTL length 및 substring 함수 사용

1. length 함수 사용

<c:set var="phoneNum" value="010-1234-5678"/>1
${fn:length(phoneNum)}

 

결과값

 13

 

2. substring 함수 사용

<c:set var="phoneNum" value="010-1234-5678"/>
${fn:substring(phoneNum,0,3) }<br/> 
${fn:substring(phoneNum,4,8) }<br/>
${fn:substring(phoneNum,9,13) }<br/>

 

결과값

010
1234
5678

 

'프론트 엔드 > JSTL' 카테고리의 다른 글

개발노트 :: JSTL indexOf 사용  (0) 2019.03.20
개발노트 :: JSTL 날짜 포맷 <fmt:formatDate> <fmt:parseDate>  (0) 2019.03.19
개발노트 :: JSTL 숫자 포맷 <fmt:formatNumber>,<fmt:parseNumber>  (0) 2019.03.18
개발노트 :: JSTL switch문 <c:choose>, <c:when>, <c:otherwise>  (0) 2019.03.18
개발노트 :: JSTL for문 및 varStatus 옵션 <c:forEach>  (1) 2019.03.18

JSTL 날짜 포맷 <fmt:formatDate> <fmt:parseDate> 

fmt:parseDate - 문자열 -> Date 타입으로 변경

fmt:formatDate - Date 타입 -> 문자열으로 변경

 

1. JSTL <fmt:parseDate>

<fmt:parseDate var="date1" value="2019-01-01" pattern="yyyy-MM-dd"/> 
${date1}

 

결과값

Tue Jan 01 00:00:00 KST 2019

 

 

2. JSTL <fmt:formatDate>

<fmt:formatDate  var="date2" value="${date1}" type="DATE" pattern="yyyy-MM-dd"/>
${date2}

 

결과값

 2019-01-01

 

 

3. pattern 형식

y(The year) 

년

M(The month)

월

d(The day of the month)

일

h(The hour(12-hour time))

시(12)

H(The hour(24-hour time))

시(24)

m(The minute)

분

s(The second)

초

 

 

 

'프론트 엔드 > JSTL' 카테고리의 다른 글

개발노트 :: JSTL indexOf 사용  (0) 2019.03.20
개발노트 :: JSTL length 및 substring 함수 사용  (0) 2019.03.19
개발노트 :: JSTL 숫자 포맷 <fmt:formatNumber>,<fmt:parseNumber>  (0) 2019.03.18
개발노트 :: JSTL switch문 <c:choose>, <c:when>, <c:otherwise>  (0) 2019.03.18
개발노트 :: JSTL for문 및 varStatus 옵션 <c:forEach>  (1) 2019.03.18

1. <fmt:formatNumber>숫자 포맷

<fmt:formatNumber var="num1" value="123456789" type="number"/>
<fmt:formatNumber var="num2" value="123456789" type="currency" currencySymbol="W"/>
<fmt:formatNumber var="num3" value="123.456789" pattern="0000.000"/>
<fmt:formatNumber var="num4" value="0.01" type="percent"/>
 
${num1}<br/>
${num2}<br/>
${num3}<br/>
${num4}

 

결과

123,456,789
￦123,456,789
0123.457
1%

 

2. <fmt:parseNumber> 숫자 파스

<fmt:parseNumber var="num1" value="1,234,567.89" type="number"/>
<fmt:parseNumber var="num2" value="123456789abcdef"  type="number" />
 
${num1}<br/>
${num2}  

 

 

결과

1234567.89
123456789

 

숫자 포맷 옵션

value

숫자 입력 

type

number|percent|currency

var

입력 안하면 곧바로 출력

pattern

패턴 사용 ex)00.00

 

'프론트 엔드 > JSTL' 카테고리의 다른 글

개발노트 :: JSTL length 및 substring 함수 사용  (0) 2019.03.19
개발노트 :: JSTL 날짜 포맷 <fmt:formatDate> <fmt:parseDate>  (0) 2019.03.19
개발노트 :: JSTL switch문 <c:choose>, <c:when>, <c:otherwise>  (0) 2019.03.18
개발노트 :: JSTL for문 및 varStatus 옵션 <c:forEach>  (1) 2019.03.18
개발노트 :: JSTL if문 <c:if>  (0) 2019.03.18

1. JSTL switch문 <c:choose>, <c:when>, <c:otherwise>

<c:choose>
 <c:when test="${num eq 50 }">
  50
 </c:when>
 <c:when test="${num > 50 }">
  50보다 큰 수
 </c:when>
 <c:when test="${num < 50 }">
  50보다 작은 수 
 </c:when>
 <c:otherwise>
  수가 아닙니다. 
 </c:otherwise>
</c:choose>

 

 

'프론트 엔드 > JSTL' 카테고리의 다른 글

개발노트 :: JSTL 날짜 포맷 <fmt:formatDate> <fmt:parseDate>  (0) 2019.03.19
개발노트 :: JSTL 숫자 포맷 <fmt:formatNumber>,<fmt:parseNumber>  (0) 2019.03.18
개발노트 :: JSTL for문 및 varStatus 옵션 <c:forEach>  (1) 2019.03.18
개발노트 :: JSTL if문 <c:if>  (0) 2019.03.18
개발노트 :: JSTL 변수 선언,수정,출력 <c:set> <c:remove> <c:out>  (0) 2019.03.18

1. JSTL <c:forEach> 태그

<c:forEach var="list"  items="${list}"  [begin="0"] [end="10"] [step="1"] [varStatus="status"]>
 이름 : ${list.name}<br/> 
 나이 : ${list.age}<br/>
 주소 : ${list.addr}<br/> 
</c:forEach>

 

2. 사용되는 옵션 값

begin 

리스트, 배열 반복 시작 번호( 초기값 : 0 ) 

end

리스트, 배열 반복 마지막 번호(초기값 : items에 들어있는 리스트 size)

step

리스트, 배열이 반복을 할때 마다 증가되는 값(초기값 : 1)

varStatus

리스트, 배열을 반복시 상태가 들어있는 변수

 

3. varStatus 상태값 표기

index

현재 리스트, 배열의 번호(0부터 시작)

count

현재 리스트, 배열의 반복 횟수(1부터 시작)

first 

첫번째 반복인지 확인(true|false)

last

마지막 반복인지 확인(true|false)

 

'프론트 엔드 > JSTL' 카테고리의 다른 글

개발노트 :: JSTL 숫자 포맷 <fmt:formatNumber>,<fmt:parseNumber>  (0) 2019.03.18
개발노트 :: JSTL switch문 <c:choose>, <c:when>, <c:otherwise>  (0) 2019.03.18
개발노트 :: JSTL if문 <c:if>  (0) 2019.03.18
개발노트 :: JSTL 변수 선언,수정,출력 <c:set> <c:remove> <c:out>  (0) 2019.03.18
개발노트 :: JSTL 라이브러리 다운 및 프로젝트에 적용  (0) 2019.03.15

+ Recent posts

티스토리툴바