변수 선언 방법

var name = '홍길동';
let name = '홍길동';
const name = '홍길동';

자바스크립트 변수에는 자료형은 따로 선언은 없습니다. 

입력된 데이터에 따라 문자, 숫자가 될 수 있습니다. 

 

var

let과 거의 비슷하지만 var에는 블록 스코프가 따로 없기 때문에 요즘에는 잘 사용하지 않습니다.

 

let

변수를 선언시 사용하는 키워드입니다. 

 

const

상수(변하지 않는 값)를 선언시 사용하는 키워드입니다.

1. Vue.js 설치방법

vue.js를 사용하기 위해서는 2가지 방법 사용자 pc에 소스를 직접 내려받아서 적용하는 방법과 CDN주소를 이용해 적용시키는 설치 방법에 대해 알아보겠습니다.

 

설치를 위해서는 공식 사이트(kr.vuejs.org)를 이용해 다운로드를 받습니다.

해당 사이트에 들어가는 다운로드가 개발 버전, 프로덕션 버전 2가지가 있습니다. 개발기간에는 개발 버전을 이용해 작업을 해고, 배포 시에는 프로덕션 버전을 사용하시면 되겠습니다.

 

다운로드 경로에 가시면 아래와 같은 내용으로 적용을 시키면 되겠습니다.

2. Vue.js 직접 다운로드

vue.js 다운로드

 

3. Vue.js CDN 주소 활용

vue.js CDN 주소

 

 

 

 

 

 

제이쿼리(Jquery) 이벤트 종류

.bind( eventType, handler ) 바인드 함수를 사용하면서 요소에 이벤트를 적용시 eventType이 있습니다.

eventType은 선언된 이벤트 외 다른 이벤트를 요소에 주어진다고 해도 이벤트 핸들러가 실행이 되지 않습니다.

이런 이벤트는 키보드, 마우스, 화면 등.. 여러가지가 존재를 합니다.

 

1. 제이쿼리(Jquery) 이벤트 종류 표

1.1 키보드 이벤트

이벤트 설명
keydown 키보드 버튼을 눌렀을 때 이벤트 발생
keyup 키보드 버튼을 누른 상태에서 떼었을때 이벤트 발생
keypress 키보드 버튼을 계속 누르고 있는 상태에 이벤트 발생

1.2 마우스 이벤트

이벤트 설명
click 마우스를 클릭 했을 때 이벤트 발생 
dbclick 마우스를 더블클릭 했을 때 이벤트 발생
mouseenter 부모 요소에서 이벤트 걸린 요소로 마우스 진입시 이벤트 발생
mouseleave 이벤트 걸린 요소에서 부모 요소로 마우스 진입시 이벤트 발생
mouseover 이벤트 걸린 요소와 자식요소에 마우스 진입시 이벤트 발생
mouseout 이벤트 걸린 요소에서 부모 요소로 마우스 진입시 이벤트 발생
hover mouseenter, mouseleave 이벤트를 같이 적용 시킵니다.
mouseup 이벤트가 걸린 요소에서 마우스 클릭시 이벤트 발생

1.3 입력 폼 이벤트

이벤트 설명
blur 포커스된 입력 폼에서 밖으로 나갈때 이벤트 실행
focus 입력 폼으로 포커스 될때 이벤트 실행
submit 폼이 submit 시킬때 이벤트 실행
change 입력 폼에 값이 변경이 될때 이벤트 실행
select  

1.4 기타 이벤트

이벤트 설명
resize 브라우저 창 크기가 변할 때 이벤트 발생
ready 현재 페이지 문서가 전부 로드 되었을 때 이벤트 발생
unload 현재 페이지 문서에서 다른 페이지로 이동할 때 이벤트 발생

1. 제이쿼리(Jquery) 이벤트  등록, 제거

요소에 이벤트 핸들러를 지정하기 위해서 bind() 및 제거에 해당하는 unbind() 함수를 사용해 각각에 요소에 이벤트 핸들러를 추가할 수가 있습니다.

 

 

2. 제이쿼리(Jquery) 이벤트  등록 .bind()

<input type="button" id="btn">

<script type="text/javascript"> 
	$("#btn").bind("click",function(){
		alert("클릭");
	}); 
</script>

.bind(eventType,handler)

id가 btn이라는 요소에 이벤트 핸들러를 추가를 합니다. eventType은 click, handler는 클릭이라는 문구를 출력하는 알럿창이 나오도록 함수를 지정합니다.

 

이렇게 되면 id가 btn요소를 클릭시 '클릭'문구가 나오는 알럿창이 화면이 표시가 됩니다.

 

 

3. 제이쿼리(Jquery) 이벤트  제거 .unbind()

<input type="button" id="btn">

<script type="text/javascript"> 
	$("btn").unbind();
</script>

.unbind([eventType] [, handler])

id가 btn인 요소에 추가된 이벤트를 제거합니다.

1. 매개변수가 없으면 모든 이벤트 제거

2. eventType 지정시 지정된 이벤트 제거

3. handler 지정시 click에 대한 이벤트는 남아있어도 핸들러에 해당되는 부분이 제거

 

1. 제이쿼리(Jquery) Ajax

Ajax는 웹 페이지를 다시 요청하지 않고 동적으로 서버와 HTTP 통신이 이루워져 데이터를 처리하는 방식이다.

Ajax는 또한 프레임워크 중에서도 많이 사용을 하는 편이여서 알아뒀다가 사용을 하면 편하게 작업을 진행을 할 수 있습니다.

 

 

2. 제이쿼리(Jquery) Ajax 사용법

<input type="button" id="ajaxBtn">
<div id="printText"></div>
<div id="printError" style="color:red;"></div>

<script type="text/javascript"> 
	$("#ajaxBtn").bind("click",function(){
		$.ajax({
			url : "/rest/rest.jsp",		// 서버로 통신할 URL 주소
			data : {name:"홍길동"},	// 서버로 보낼 데이터
			method : "POST",		// HTTP 요청 메서드 [ "GET", "POST" ]  
			dataType : "text",			// 서버에서 보내줄 데이터 타입 [ "json", "xml", "text", "html" ]
			success : function(data){
				// 성공 콜백 함수 
			},
			error : function(jqXHR,status,error){
				// 실패 콜백 함수 
			},
			complete : function(){
				// 처리 후 콜백 함수 
			}
		})
		
		// 성공 체이닝
		.done(function(data){  
			$("#printText").html("data : " + data);
		})  
		
		// 실패 체이닝
		.fail(function(jqXHR,status,error){ 
			$("#printError").html("xhr : " + xhr + "<br/> error : " + error + "<br/> status : " + status);
		})
		
		// 처리 후 체이닝
		.always(function(){
			alert("처리 끝");
		})				
	});
</script>

1. 성공 처리 -> 성공 콜백 함수(success) -> 처리 후 콜백 함수(complete) -> 성공 체이닝(.done) -> 처리 후 체이닝(.always)

2. 실패 처리 -> 실패 콜백 함수(error) -> 처리 후 콜백 함수(complete) -> 실패 체이닝(.fail) -> 처리 후 체이닝(.always)

 

 

3. Ajax 사용 옵션

옵션 설명
url URL 주소 서버 URL 주소 또는 같은 서버 페이지 위치
data name : 홍길동 key:value 쌍으로 된 데이터
method "GET", "POST" 서버 요청 메소드
dataType "json", "xml", "text", "html" 서버에서 보내주는 데이터 타입

제이쿼리(Jquery) 필터링 선택자#4

제이쿼리에 요소를 선택 후 선택한 요소를 필터링하기 위해 제이쿼리에서 제공하고 있는 메서드를 사용해 요소를 다시 선택하는 방법에 대해서 알아보겠습니다.

 

 

1. 제이쿼리(Jquery) 필터링 함수 표

선택자 예시 설명
.first() $("#selector").first() 선택된 요소 중에서 첫 번째 요소 선택
.last() $("#selector").last() 선택된 요소 중에서 마지막 요소 선택
.eq() $("#selector").eq(index) 선택된 요소 중에서 index에 해당하는 요소 선택
.filter() $("#selector").filter( [selector] ) 선택된 요소 중에서 해당 요소가 있으면 해당 요소를 선택
.not() $("#selector").not( [selector] ) 선택된 요소 중에서 해당 요소가 있으면 해당 요소를 제외한 나머지 요소 선택
.has() $("#selector").has( [selector] ) 선택된 요소 중에서 해당 요소가 자식으로 되어 있으면 해당 요소 선택
.is() $("#selector").is( [selector] ) 선택된 요소 중에서 해당 요소가 있으면 true 값을 반환
.slice()

$("#selector").slice(index,index)

선택된 요소 중에서 index 범위에 해당하는 요소 선택

 

 

1.1 제이쿼리(Jquery) 필터링 사용 예시

1.1.1 .first() .last() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").first().css("color","red");
	$("li").last().css("color","red");
</script>

결과값

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

선택된 li 전체 태그들 중에서 처음과 마지막에 해당하는 1, 6인 요소가 선택됩니다.  

 

 

1.1.2 .eq() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").eq(2).css("color","red");
</script>

결과값

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

선택된 li 전체 태그들 중에서 index가 2번인 3번째 li 요소가 선택이 됩니다.

index 번호는 0번 부터 시작이 된다.

 

 

1.1.3 .filter() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").filter(":odd").css("color","red");
</script> 

결과값

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

선택된 li 전체 요소 중에서 filter에 해당하는 짝수 요소들만 선택이 됩니다.

 

 

1.1.4 .not() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").not(":odd").css("color","red");
</script>

결과값

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

선택된 li 전체 요소 중에서 not에 해당하는 짝수가 아닌 홀수 요소들을 선택이 됩니다.

 

 

1.1.5 .has() 함수 사용

<div>
	<ul>
		<li><span>1</span></li>
		<li><span>2</span></li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").has("span").css("color","red");
</script>

결과값

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

선택된 li 전체 요소 중에서  has에 해당하는 자식요소가 span를 갖는 li 태그만 선택이 됩니다.

 

 

1.1.6 .is() 함수 사용

<div>
	<ul>
		<li id="selector">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li> 
	</ul>
</div> 
<script type="text/javascript">
	var flag = $("li").is("#selector");
	if(flag){
		$("#selector").css('color','red');
	}
</script>

결과값

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

선택된 li 전체 요소 중에서 id가 selector 값이 있으면 true 값을 반환하는 기능입니다.

 

 

1.1.7 .slice() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li> 
	</ul>
</div> 
<script type="text/javascript">
	$("li").slice(1,2).css('color','red');
</script> 

결과값

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

선택된 li 전체 요소 중에서 slice에 해당하는 인덱스가 1부터 2이전 인덱스에 해당 하는 요소를 선택합니다.

.slice(startIndex, endIndex) index는 0부터 시작 startIndex(포함) 부터 endIndex(미포함) 이전까지 해당하는 요소

.slice(startIndex) startIndex(포함) 부터 마지막 요소(포함)까지 해당하는 요소 선택

제이쿼리(Jquery) 부모, 형제, 자식 선택자#3

제이쿼리에 요소를 선택 후 선택된 요소에서 부모, 형제, 자식 요소를 찾는 방법에 대해서 알아보겠습니다.

선택된 요소를 감싸고 있는 상위 노드를 부모, 반대로 선택된 요소가 어떤한 요소를 감싸고 있을때 감쌓여진 요소를 자식, 또는 선택된 요소와 같은 트리위치에 있는 요소들을 형제 요소라고 부릅니다.

 

 

1. 제이쿼리(Jquery) 부모 선택자 함수 표

 선택자

 예시

설명 

 .parent( [selector] )

 $("#selector").parent()

or

 $("#selector").parent([selector])

1. 매개변수가 있을 경우 

선택된 요소에 부모 노드 중에 해당되는 요소를 찾음 

 

2. 매개변수가 없는 경우

선택된 요소에 부모 노드 요소를 찾음

 .parents( [selector] )

 $("#selector").parents() 

or

 $("#selector").parents([selector])

1. 매개변수가 있는 경우

선택된 요소에 최상위 부모 노드 중에 해당되는 요소를 찾음

 

2. 매개변수가 없는 경우

선택된 요소에 최상위 부모 노드 요소 전체를 찾음

 .closest( [selector] )

$("#selector").closest( [selector] )  

선택된 요소에 부모 노드 요소중에 가장 가까운 요소를 찾음

 

 

1.1 부모 선택자 사용 예시

1.1.1 .parent() 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul>
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").parent().css("color","red");
</script> 

 

결과값

메뉴
  • 1
  • 2
  • 3
    • 3-1
    • 3-2
  • 4

부모 요소인 ID가 'parentUl2' 요소가 선택된다.

 

 

1.1.2 .parents() 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul> 
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").parents().css("color","red");
</script>

 

결과값

메뉴
  • 1
  • 2
  • 3
    • 3-1
    • 3-2
  • 4

 

부모요소들인 ID가 'parentDIV', 'parentLI', 'parentUl2' 요소들이 선택된다.

 

 

1.1.3 .closest( [selector] ) 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul> 
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").closest("li").css("color","red");
</script> 

결과값

메뉴
  • 1
  • 2
  • 3
    • 3-1
    • 3-2
  • 4

선택된 현재 요소부터 가장가까운 요소를 자기 자신이므로 ID가 selector인 요소를 찾게됩니다.

 

2. 제이쿼리(Jquery) 형제 선택자 함수 표

선택자

예시

설명

.prev( [selector] )

$("#selector").prev()

or

$("#selector").prev([selector])

1. 매개변수가 있는 경우

선택된 요소에 같은 노드 위치에서 선택된 요소에 이전 요소가 selector와 같은 요소를 찾음

 

2. 매개변수가 없는 경우

같은 노드 위치에서 선택된 요소에 이전 요소를 찾음

 .prevAll( [selector] )

 

$("#selector").prevAll()

or

$("#selector").prevAll([selector])

1. 매개변수가 있는 경우

같은 노드 위치에서 선택된 요소에 이전 요소들 중에 selector에 해당하는 요소만 찾음

 

2. 매개변수가 없는 경우

같은 노드 위치에서 선택된 요소에 이전 요소들을 전부 찾음

 .next( [selector] )

 

$("#selector").next()

or

$("#selector").next([selector])

1. 매개변수가 있는 경우

같은 노드 위치에서 선택된 요소에 다음 요소가 selector와 같은 요소를 찾음

 

2. 매개변수가 없는 경우

같은 노드 위치에서 선택된 요소에 다음 요소를 찾음

 .nextAll( [selector] )

 

$("#selector").nextAll()

or

$("#selector").nextAll([selector])

 1. 매개변수가 있는 경우

같은 노드 위치에서 선택된 요소에 다음 요소들 중에 selector에 해당하는 요소만 찾음

 

2. 매개변수가 없는 경우

같은 노드 위치에서 선택된 요소에 다음 요소들을 전부 찾음

 .siblings()

$("#selector").siblings() 

 .siblings() 같은 노드 위치에서 선택된 요소를 제외한 나머지 요소를 전부 찾음

 

 

2.1 형제 선택자 사용 예시

2.1.1 .prev() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li> 
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").prev("#prevLI1").css("color","red"); 
</script> 

결과값

메뉴
  • 1
  • 2
  • 3
  • 4
  • 5

선택된 요소에 이전 요소인 ID가 prevLI1이 선택이 되고 selector에 해당하는 아이디가 prevLI1인 요소를 선택하게 됩니다.

 

2.1.2. .prevAll() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li> 
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").prevAll("#prevLI2").css("color","red"); 
</script> 

결과값

메뉴
  • 1
  • 2
  • 3
  • 4
  • 5

선택된 요소에 이전 요소 전체 ID값이 prevLI2, prevLI1 인 요소를 찾습니다. 그중에서 ID가 prevLI2인 요소만 찾게 됩니다.

 

 

2.1.3 .next() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").next().css("color","red");
</script> 

결과값

메뉴
  • 1
  • 2
  • 3
  • 4
  • 5

 

선택된 요소에 다음 요소인 ID가 nextLI1 요소가 선택이 됩니다.

 

 

2.1.4 .nextAll() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").nextAll("#nextLI2").css("color","red");
</script> 

결과값

메뉴
  • 1
  • 2
  • 3
  • 4
  • 5

 

선택된 요소에 다음 요소 전체를 ID가 nextLI1, nextLI2를 찾습니다. 그중에서 ID가 nextLI2인 요소가 선택이 됩니다.

 

 

2.1.5 .siblings() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").siblings().css("color","red");
</script> 

결과값

메뉴
  • 1
  • 2
  • 3
  • 4
  • 5

선택된 요소에 같은 노드에 해당하는 요소들을 전체 선택하게 됩니다.

 

 

3. 제이쿼리(Jquery) 자식 선택자 함수 표

 선택자

예시 

설명 

 .children( [selector] )

 

$("#selector").children()

or

$("#selector").children([selector])

1. 매개변수가 있는 경우

선택된 요소에서 자식 노드에 해당하는 요소를 찾음

 

2. 매개변수가 없는 경우

선택된 요소에서 자식 노드에 해당하는 요소를 찾음

 

 .find( [selector] )

 $("#selector").find( [selector]

선택된 요소에서 자식 노에 해당하는 요소들 중  매개변수에 해당하는 요소를 찾음

 

 

3.1 자식 선택자 사용 예시

3.2.1 .children() 사용 접근

<div>메뉴
 <ul>
  <li>1</li>
  <li id="selector">2
   <ul id="children1">
    <li>2-1</li>
    <li>2-2</li>
    <li id="children2">2-3
     <ul id="children3">
      <li id="children4">2-3-1</li>
      <li>2-3-2</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").children().css("color","red");
</script>

결과값

메뉴
  • 1
  • 2
    • 2-1
    • 2-2
    • 2-3
      • 2-3-1
      • 2-3-2

 

선택된 요소에 해당하는 자식요소인 ID가 children1 인 요소가 선택이 됩니다.

 

 

3.2.2 .find() 사용 접근

<div>메뉴
 <ul>
  <li>1</li>
  <li id="selector">2
   <ul id="children1">
    <li>2-1</li>
    <li>2-2</li>
    <li id="children2">2-3
     <ul id="children3">
      <li id="children4">2-3-1</li>
      <li>2-3-2</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").find("#children4").css("color","red");
</script>

결과값

메뉴
  • 1
  • 2
    • 2-1
    • 2-2
    • 2-3
      • 2-3-1
      • 2-3-2

 

선택된 요소에 자식요소들 중에서 ID가 children4인 요소를 선택하게 됩니다.

 

개발노트 :: 제이쿼리(Jquery) 속성 선택자#2

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

이번에는 요소에 해당하는 속성값을 이용해 선택을 해보겠습니다.

 

1. 속성 선택자 표

 선택자

예시 

설명 

element[attribute]

 $("element[title]")

title 속성을 가진 요소 

element[attribute=text]

 $("element[title = 'text']")

 title 속성 값이 'text'로 된 요소

element[attribute!=text]

 $("element[title != 'text']")

title 속성 값이 'text'가 아닌 요소 

element[attribute$=text]

 $("element[title $= 'text']")

title 속성 값이 'text'로 끝나는 요소

element[attribute|=text]

 $("element[title |= 'text']")

title 속성 값이 'text' 일치 또는 'text-'시작하는 요소 

element[attribute^=text]

 $("element[title ^= 'text']")

title 속성 값이 'text'로 시작하는 요소 

element[attribute~=text]

 $("element[title ~= 'text']")

title 속성 값이 'text'단어가 포함된 요소  

element[attribute*=text]

$("element[title *= 'text']")  

 title 속성 값이 'text'이 포함된 요소  

 

2. 속성 선택자 사용

2-1 element[attribute] attribute속성을 가진 요소 선택

<span id="text1" title="text1" >Header1</span>
<script type="text/javascript">
   $("span[id]").css("color",'red');
</script>

결과값

Header1

 

 

2-2 element[attribute=value] attribute속성이 value값인 된 요소 선택

<span title="text2">Header2</span>
<script type="text/javascript">
   $("span[title = 'text2']").css("color",'red');
</script>

결과값

Header2

 

 

2-3 element[attribute!=value] attribute속성이 value값이 아닌 요소 선택

<span title="text1">Header2</span>
<script type="text/javascript">
  $("span[title != 'text2']").css("color",'red');
</script>

결과값 

Header2

 

 

2-4 element[attribute$=value]  attribute속성이 value값으로 끝나는 요소 선택

<span title="valueText1">Header2</span>
<script type="text/javascript">
 $("span[title $= 'Text1']").css("color",'red');
</script>

결과값

Header2

 

 

2-5 element[attribute|=value] attribute속성이 'value'일치 또는 'value-'으로 시작하는 요소

<span title="text1">Header2</span><br/>
<span title="text1-text2">Header2</span> 
<script type="text/javascript">
 $("span[title |= 'text1']").css("color",'red');
</script>

결과값

Header2
Header2

 

 

 

2-6 element[attribute^=value] attribute속성이 value값으로 시작하는 요소 선택

<span title="text1text2">Header2</span> 
<script type="text/javascript">
 $("span[title ^= 'text1']").css("color",'red');
</script>

 

결과값

Header2

 

 

2-7 element[attribute~=value] attribute 속성이 value 단어를 포함되어 있는 요소 선택

<span title="text1 text2">Header2</span> 
<script type="text/javascript">
 $("span[title ~= 'text1']").css("color",'red');
</script>

결과값

Header2

 

 

2-8 element[attribute*=value] attribute속성이 value 값을 포함되어 있는 요소 선택

<span title="text1text2">Header2</span>  
<script type="text/javascript">
 $("span[title *= 'text1']").css("color",'red');
</script>

결과값

Header2

 

+ Recent posts