달력

12

« 2019/12 »

  • 15
  • 16
  • 17
  • 18
  • 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

댓글을 달아 주세요

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

   

   

소스코드

<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

댓글을 달아 주세요

태그선택자와 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

댓글을 달아 주세요

여러 개의 태그 선택

   

   

소스코드

<body>

<h1></h1>

<p>여름</p>

<h1>가을</h1>

<div>겨울</div>

</body>

   


   

   

   

소스코드

//여러개의 태그 선택

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

   


   

   

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

댓글을 달아 주세요

전체 선택자

  • CSS와 동일하므로 익숙하게 익혀야 함

선택자

설명

*

  • 전체 선택자
  • 문서 객체 전체 선택(DOM에서는 태그가 객체로 인식됨)

   

   

jQuery 내용 분량

1/3

선택자

CSS에서도 사용되는 선택자 임

1/3

DOM and event

1/3

ajax

   

   

소스코드

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

//*        : 전체 선택자로 문서 객체 전체 선택(DOM에서는 태그가 객체로 인식됨)

$('*').css('color', 'blue');

});

</script>

</head>

<body>

<h1>계절</h1>

</body>

 


 

   

출력결과

   

마우스 우클릭 > 요소 검사

모든 태그에 적용된 것을 확인 할 수 있습니다.

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

js파일 인코딩 방식 설정 방법 3가지  (0) 2014.09.26
NaN(Not a Number)  (0) 2014.09.22
02.html-전체 선택자  (0) 2014.09.21
객체의 프로퍼티 접근하기  (0) 2014.09.10
Sencha 라이브러리 설치  (0) 2014.09.04
01.html-객체 생성 2  (0) 2014.09.02
Posted by codedragon codedragon

댓글을 달아 주세요

   

jQuery(document).ready()

문서의 준비가 완료되면 매개 변수로 전달된 함수를 실행하라는 의미 

<script>

$(document).ready(function(){

 

});

</script>

   

아래의 표현도 동일한 기능 수행

   

<script>

$(function(){

 

});

</script>

   

   

jQuery 기본 선택자

   

선택자

설명

전체 선택자

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자

태그 선택자

HTML 페이지 있는 문서 객체를 태그 이름으로 선택하는 선택자

아이디 선택자

HTML 페이지 안의 특정 ID 속성을 가지고 있는 문서 객체를 선택하는 선택자

클래스 선택자

HTML 페이지 안의 특정 class 속성을 가지고 있는 문ㅅ 객체를 선택하는 선택자

자식 선택자

자식 선택자는 자식을 선택하는 선택자이며 '부모 > 자식'의 형태로 사용

후손 선택자

후손 선택자는 이름 그대로 후손을 선택하는 선택자. '요소 A 요소 B'의 형태로 사용하여 요소 A의 후손으로 범위를 한정

속성 선택자

속성 선택자는 태그이름에 속성을 조합해서 선택하는 방식

입력 양식 필터 선택자

  

 필터 선택자

기본 필터 선택자와 함수 필터 선택자가 있음

   

   

전체 선택자

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

$('*').css('color','red');

});

</script>

   

태그 선택자

HTML 페이지 있는 문서 객체를 태그 이름으로 선택하는 선택자

   

<script>

$(document).ready(function(){

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

});

</script>

   

아이디 선택자

HTML 페이지 안의 특정 ID 속성을 가지고 있는 문서 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

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

});

</script>

   

클래스 선택자

HTML 페이지 안의 특정 class 속성을 가지고 있는 문ㅅ 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

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

});

</script>

   

자식 선택자

자식 선택자는 자식을 선택하는 선택자이며 '부모 > 자식'의 형태로 사용

   

<script>

$(document).ready(function(){

$('body > div').css('color','red');

});

</script>

   

후손 선택자

후손 선택자는 이름 그대로 후손을 선택하는 선택자. '요소 A 요소 B'의 형태로 사용하여 요소 A의 후손으로 범위를 한정

   

<script>

$(document).ready(function(){

$('body div').css('color','red');

});

</script>

   

속성 선택자

속성 선택자는 태그이름에 속성을 조합해서 선택하는 방식

   

선택자 형태

설명

요소[속성]

특정 속성을 가지고 있는 문서 객체를 선택

요소[속성=값]

속성 안의 값이 특정 값과 같은 문서 객체를 선택

요소[속성~=값]

속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택

요소[속성^=값]

속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택

요소[속성$=값]

속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택

요소[속성*=값]

속성 안의 값이 특정 값을 포함하는 문서 객체를 선택

   

입력 양식 필터 선택자

   

선택자 형태

설명

요소:button

input 태그 중 type 속성이 button인 문서 객체와 button 태그를 선택

요소:checkbox

input 태그 중 type 속성이 checkbox인 문서 객체를 선택

요소:file

input 태그 중 type 속성이 file인 문서 객체를 선택

요소:image

input 태그 중 type 속성이 image인 문서 객체를 선택

요소:password

input 태그 중 type 속성이 password인 문서 객체를 선택

요소:radio

input 태그 중 type 속성이 radio인 문서 객체를 선택

요소:reset

input 태그 중 type 속성이 reset인 문서 객체를 선택

요소:submit

input 태그 중 type 속성이 submit인 문서 객체를 선택

요소:text

input 태그 중 type 속성이 text인 문서 객체를 선택

   

선택자 형태

설명

요소:checked

체크된 입력 양식을 선택

요소:disabled

비활성화된 입력 양식을 선택

요소:enabled

활성화된 입력 양식을 선택

요소:focus

초점이 맞춰져 있는 입력 양식을 선택

요소:input

모든 입력 양식을 선택(input,textarea,select,button 태그)

요소:selected

option 객체 중 선택된 태그를 선택

   

필터 선택자

   

기본 필터 선택자 

선택자 형태

설명

요소:odd

홀수 번째에 위치한 문서 객체를 선택

요소:even

짝수 번째에 위치한 문서 객체를 선택

요소:first

첫 번째 위치한 문서 객체를 선택

요소:last

마지막에 위치한 문서 객체를 선택

   

함수 필터 선택자 

선택자 형태

설명

요소:contains(문자열)

특정 문자열을 포함하는 문서 객체를 선택

요소:eq(n)

n번째에 위치하는 문서 객체를 선택

요소:gt(n)

n번째 초과에 위치하는 문서 객체를 선택

요소:has(h1)

h1태그를 가지고 있는 문서 객체를 선택

요소:lt(n)

n번째 미만에 위치하는 문서 객체를 선택

요소:not(선택자)

선택자와 일치하지 않는 문서 객체를 선택

요소:nth-child(3n+1)

3n+1번째에 위치하는 문서 객체를 선택(1,4,7,...)

   

    

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

Sencha 라이브러리 설치  (0) 2014.09.04
01.html-객체 생성 2  (0) 2014.09.02
00.jQuery 기본  (0) 2014.08.31
객체 생성1  (0) 2014.08.26
프로젝트 생성  (0) 2014.08.24
jQuery API 문서 2  (0) 2014.08.23
Posted by codedragon codedragon

댓글을 달아 주세요

jQuery학습을 위한 참조사이트

 

http://learn.jquery.com/

   

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

객체 생성1  (0) 2014.08.26
프로젝트 생성  (0) 2014.08.24
jQuery API 문서 2  (0) 2014.08.23
객체 (Object)  (0) 2014.08.19
전역객체, 전역변수, this바인딩  (0) 2014.08.17
메소드 호출시 this바인딩  (0) 2014.08.12
Posted by codedragon codedragon

댓글을 달아 주세요

즉시 실행 함수(immediate funtions)

함수를 정의함과 동시에 바로 실행되는 함수

익명함수를 응용한 형태

즉시 실행함수는 한번 수행 후, 다시 호출할 수 없습니다.

이런, 특성으로 최초 한 번의 실행만을 필요로 하는 초기화 코드부분에 패턴으로 사용되어 집니다.

   

즉시 실행 함수 형식

( function( ) {

코드

})( )

괄호 ( ) 로 함수리터럴을 사용한 함수 정의 부분을 감쌉니다. 그런 다음 함수가 바로 호출될 수 있게 ( ) 괄호 쌍을 추가합니다.

   

즉시 실행 함수 패턴

라이브러리 코드가 처음 로드되어 초기화할 때, 즉시 실행 함수 패턴이 많이 사용되어 집니다.

라이브러리 코드를 즉시 실행 함수 내부에 정의하게 되면 라이브러리 내의 변수들은 함수 외부에서 접근할 수 없게 됩니다. 이렇게 함으로써 이후 다른 자바스크립트 라이브러리들을 동시에 로드하더라도 라이브러리간 변수 이름 충돌 같은 문제를 방지할 수 있습니다.

   

라이브러리

즉시 실행 함수

설명

jQuery 1.11.1

(function( global, factory ) {

…………….

})(window);

window를 즉시실행함수의 인자로 넘기며 호출합니다.

Underscore 1.3.3

(function(){

var root=this;

var previousUnderscore=root._;

…………….

}).call(this);

call함수를 this인자와 함께 사용하였습니다. 실행시 this가 즉시 실행함수 내부의 this에 연결되어 root라는 함수 내부 변수에 저장되어 사용되어 집니다.

Sugar 1.2

(function(){

………………

buildObject();

buildFunction();

initializeClass(date);

})( );

특별한 인자 없이 즉시 실행함수를 호출합니다.

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>즉시 실행 함수</title>

<script type="text/javascript">

(function (name) {

            document.write(name + ' 실행되었습니다.');

})('즉시실행함수');

</script>

</head>

<body>

</body>

</html>

   


   

출력 결과

('즉시실행함수')로 즉시 실행 함수를 호출 했으며, 이 때 '즉시실행함수' 라는 문자열을 인자로 념겨 호출하였습니다. 이 값은 즉시 실행 함수의 name매개 변수에 넘겨져서 출력되게 됩니다.

   

Posted by codedragon codedragon

댓글을 달아 주세요

  1. 준티 2017.02.12 13:48 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다~