달력

1

« 2020/1 »

  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  

후손 선택자

   

자식 선택자 vs 후손 선택자

여러 태그 선택

,

$('h1, p')

자식 선택자

>

$('body > div')

후손 선택자

  

$('body div')

   

   

소스코드

   

   

소스코드

//후손 선택자

$('body div').css('border', '5px solid orange')

   


   

   

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

배열과 객체의 사용- 07.html  (0) 2014.12.06
속성 제거- 06.html  (0) 2014.11.30
후손 선택자- 08.html  (0) 2014.11.25
빈 객체에 속성 추가- 05.html  (0) 2014.11.23
객체의 활용- 04.html  (0) 2014.11.19
자식선택자- 07.html  (0) 2014.11.18
Posted by codedragon codedragon

댓글을 달아 주세요

자식선택자

   

소스코드

   

   

소스코드

//자식 선택자

//태그의 자식(직계자식)으로 범위 한정

$('body > div').css('border', '5px solid orange')

   


   

   

Posted by codedragon codedragon

댓글을 달아 주세요

   

Project Explorer내 위치 선택 > 마우스 우클릭 > New > Other...

   

JavaScript - JavaScrpt Source File

Next

   

File name작성(app.js)

Finish

Posted by codedragon codedragon

댓글을 달아 주세요

태그선택자와 클래스선택자 연결

   

   

소스코드

<script type="text/javascript">

//$(document).ready(function(){}) = $(function(){})

$(function(){

$('.item').css('color', 'orange');                

});

</script>

</head>

<body>

<h1 class="item">Header-0</h1>

<h1 class="item select">Header-1</h1>

<h1 class="item">Header-2</h1>

<p class="item">Item-0</p>

</body>

   


   

   

   

소스코드

$('.item').css('color', 'orange');

$('h1.item').css('background', 'red');

   


   

   

   

   

소스코드

$('.item').css('color', 'orange');

$('h1.item').css('background', 'red');

$('h1.item.select').css('background', 'yellow');

   


   

Posted by codedragon codedragon

댓글을 달아 주세요

 

 

개별 파일선택 후 인코딩 설정하기

해당 파일 선택 > 마우스 우클릭 > Properties

   

Resource > Text file encoding-Other >

UTF-8 설정 > OK

   

파일의 인코딩 방식이 바로 변경되어 한글이 깨지게 됩니다.

그러므로 인코딩 방식 변경 전에 해당파일의 내용을 다른 곳(메모장, Sublime, EditPlus등)에 복사 한 후 인코딩 방식을 변경하시기 바랍니다.

그 다음 인코딩 방식을 변경한 후 복사해 놓은 내용을 해당 파일에 다시 붙여 넣기 하여 인코딩 변경 후에도 한글이 깨지는 문제를 쉽게 해결할 수 있습니다.

   

임시로 저장한 js파일 내용

   

다시 이클립스의 js파일로 붙여넣기 한 화면

   

 

 

 

Posted by codedragon codedragon

댓글을 달아 주세요

태그선택자와 id선택자 연결

   

   

소스코드

<body>

<h1>header-0</h1>

<h1 id="target">header-1</h1>

<h1>header-2</h1>

</body>

   

출처: <https://github.com/10zeroone/study_jQuery/blob/master/jQuery/WebContent/ch01-selector/05.html>

   

출력결과

   

   

소스코드

//특정 id속성을 가지는 태그 선택

$('h1#target').css('color', 'red');

   


   

출력결과

Posted by codedragon codedragon

댓글을 달아 주세요

 

 

JavaScript Source File(.js)만 인코딩 설정하기

메뉴 > Window > Preferences > General-Context Types > Content types:-Text-JavaScript Source File 선택

   

Default encoding: UTF-8 입력 >

Update > OK

   

이제 부터 새로 만들어지는 js파일은 UTF-8로 지정되어 있습니다.

app3.js생성 후 등록정보 확인

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

여러 개의 태그 선택

   

   

소스코드

<body>

<h1></h1>

<p>여름</p>

<h1>가을</h1>

<div>겨울</div>

</body>

   


   

   

   

소스코드

//여러개의 태그 선택

$('h1, p').css('color', 'red');

   


   

   

Posted by codedragon codedragon

댓글을 달아 주세요

 

Workspace 폴더 전체에 인코딩 설정하기

   

메뉴 > Window > Preferences > General-Workspace > Text file enconding-Other

   

Other-UTF-8로 설정 > OK

Workspace의 텍스트 파일에 대해 인코딩이 적용됩니다.

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

태그 선택자, 클래스 선택자, ID선택자

   

id는 반드시 중복되지 않토록 uniqe하게 명명해야 되며

class나 name은 동일 명칭을 가져도 상관없습니다.

   

(주의)

class선택자

.

id선텍자

#

   

   

소스 파일

<body>

<p class="study">jQuery 실습</p>

<div>

<div id="content">id값이 content div tag</div>

</div>

<span>span1</span>

<span class="study">span2</span>

</body>

   


   

   

   

//태그 선택자 (중복 가능)

//속성, 속성값

$('span').css('border', '5px solid red');

   


   

   

   

//클래스 선택자 (중복 가능)

$('.study').css('border', '7px solid olive');

   


   

   

   

//id선택자(중복 불가능)

$('#content').css('background', 'magenta');

   


   

Posted by codedragon codedragon

댓글을 달아 주세요