오봉이와 함께하는 개발 블로그
jQuery - 코드 형태, 선택자 예제 본문
728x90
jQuery 코드 형태
- 객체 구조로 객체.메소드 형태
- 객체 선택
- %('선택자').메소드
- $('p').css('color', 'red') : 모든 <p> 태그 선택하고 스타일 적용
- 사용자가 생성한 객체 사용
- 객체.메소드
- var obj = $('선택자').메소드;
- obj.메소드
- 메소드 체이닝
- 여러 개의 메소드를 연결해서 사용
- 객체.메소드1.메소드2.@@@@.메소드n;
- jQuery 치환
- jQuery의 모든 함수 및 객체는 jQuery에서 제공되는 것이라는 점을 나타내기 위해 코드 앞에 jQuery라는 키워드를 사용
- jQuery(document).ready( function(){ alert("jQuery 시작 - external 방식"); } );
- 쉽게 하기 위헤 $로 치환해서 사용
- $(document).ready( function(){ alert("jQuery 시작 - external 방식"); } );
- jQuery의 모든 함수 및 객체는 jQuery에서 제공되는 것이라는 점을 나타내기 위해 코드 앞에 jQuery라는 키워드를 사용
- $(document).ready(함수) 명령어
- 화면에 페이지가 로딩된 후 실행
- HTML 문서가 화면에 보여진 후 자동으로 포함된 함수 실행
- 자바스크립트의 window.onload와 동일하게 사용
- window.onload = function() { @@@ };
- $(document).ready()와 window.onload = function()
- 공통점
- 콜백 함수가 호출되는 시점에서 DOM 요소에 접근 가능
- 차이점
- $(document).ready()는 DOM 요소가 load 되었을 때 이벤트 발생하며 호출(외부 리소스, 이미지, 또는 음악 등이 로드 되기 전)
- window.onload = function()은 DOM 요소 뿐 아니라 외부 리소스, 이미지 또는 음악 등 모든 컨텐츠의 로드가 끝나는 시점에서 이벤트 발생하며 호출
- 공통점
- $(document).ready(함수)의 단축 형태
- $(function() { @@@ });
jQuery 선택자
- jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음
- 중간에 자바스크립트 코드 같이 작성
- HTML 태그를 쉽게 선택하기 위해 선택자 사용
- 선택자 구조
- $(‘선택자’).메소드(매개변수, 함수 등)
- $(‘span’).hide();
- 큰 따옴표 / 작은 따옴표 다 사용 가능
- 선택자 종류
- 직접 선택자
- 전체 : $("*")
- 태그 : $("태그명")
- 아이디 : $("#id 명")
- 클래스 : $(".class 명")
- 그룹 선택자
- 인접 관계 선택자
- 상위 요소(조상/부모) 선택자
- 하위 요소 (자식/자손) 선택자
- 형제 선택자
- 필터 선택자
- 속성 선택자
- 컨텐츠 탐색 선택자
- 직접 선택자
태그 선택자 - tag-Select.html
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 태그 선택자
$('h1').css('color', 'red');
$('h1').css('background', 'black');
//메소드 체인 방식
$('h1').css('width', '50%').css('height', '40px');
});
</script>
</head>
<body>
<h1>Header1</h1>
<h1>Header2</h1>
<h1>Header3</h1>
</body>아이디 선택자 - id-Select.html
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 아이디 선택자
$('#h1').css('color', 'red');
$('#h2').css('background', 'black');
//메소드 체인 방식
$('h1').css('width', '50%').css('height', '40px');
});
</script>
</head>
<body>
<h1 id="h1">Header1</h1>
<h1 id="h2">Header2</h1>
<h1>Header3</h1>
</body>클래스 선택자 - classSelector.html
<script type="text/javascript">
$(document).ready(function(){
$('.group1').css({
float: 'left',
background:'blue',
color:'white',
width: '90%',
height: '30px'
});
$('.group2').css({
float: 'right',
background:'yellow',
color:'black',
width: '90%'
});
});
</script>
</head>
<body>
<div id="box1">
<div class="group1">A</div>
<div class="group2">A</div>
<div class="group1">B</div>
<div class="group2">B</div>
<div class="group1">C</div>
<div class="group2">C</div>
</div>
</body>인접 관게 선택자 - childSelector.html
<script src= "jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){ //$(document).ready(함수)의 단축 형태
//1. <ol> 태그의 모든 자손 <li> 태그 글자색 red
$('ol li').css('color', 'red');
//2. <ol> 태그의 자식 <li> 태그 글자색 blue
$('ol>li').css('color', 'blue');
//3. 아이디가 children인 요소의 자식 <li> 태그 밑줄
$('#children>li').css('textDecoration', 'underline');
//4. 클래스가 method 요소의 모든 자손 요소의 글자색을 black
//find() 메소드 사용
$('.method').find('li').css('color', 'black');
//5. 클래스가 method 요소의 자식 요소에 속성 2개 설정
//children() 메소드 사용
$('.method').children('li').css({'color':'green', 'font-style':'italic'});
});
</script>
</head>
<body>
<h3>자식/자손 선택자</h3>
<ol>
<li>자손 요소의 선택 방법</li>
<ul>
<li>$(“선택자 선택자”)</li>
<li>$(“ol li”)</li>
<li>ol 의 자손인 모든 li 태그 선택 : 글자색(red)</li>
</ul>
<li>자식 요소의 선택 방법</li>
<ul id="children">
<li>$(“선택자>선택자”)</li>
<li>$(“ol>li”)</li>
<li>ol의 자식인 li 태그 선택 : 글자색(blue)</li>
<li>$(“ul>li”)</li>
<li>ul의 자식인 li 태그 선택 : 글자(underline)</li>
</ul>
<li>메소드를 사용하는 방법</li>
<ol class="method">
<li>자손 요소 선택 : find()</li>
<ul>
<li>$(“선택자”).find(“선택자”)</li>
<li>$(“.method).find(“li”)</li>
<li>클래스 method 모든 자손 li 태그 선택 : 글자색(black)</li>
</ul>
<li>자식 요소 선택 : children()</li>
<ul>
<li>$(“선택자”).children(“선택자”)</li>
<li>$(“.method).children(“li”)</li>
<li>클래스 method 자식 선택 : 글자색(green)</li>
</ul>
</ol>
</ol>
</body>전체, 태그, ID, 클래스 선택자 - directSelector.html
<script src= "jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1. 전체 선택자 : 문서 전체의 글자색 변경
$("*").css("color", "red");
//2. 태그 선택자 : h3 태그에 밑줄 그리기
$('h3').css('textDecoration','underline');
//3. 태그 선택자 : h3, h4 태그에 배경색 pink 지정하기
$('h3, h4').css('backgroundColor','pink');
//4. ID 선택자 : id가 idSelector인 태그의 글자 색상을 blue/#0000ff/#00f
//id가 jQuery인 태그의 글자 색상을 green으로 설정
$("#idSelector").css('color','blue');
$("#jQuery").css('color','green');
//5. 클래스 선택자 : class가 selector인 태그의 글자를 이탤릭체로,
//class가 web인 태그의 글자를 굵게
$(".selector").css('font-style', 'italic');
$(".web").css('font-weight', 'bold');
});
</script>
</head>
<body>
<h3>jQuery 직접 선택자 (selector)</h3>
<div class="selector">
<ol>
<li>전체 선택자</li>
<li>태그 선택자</li>
<li id="idSelector">ID 선택자 </li>
<li>클래스 선택자</li>
</ol>
</div>
<h4>웹 프로그래밍</h4>
<div class="web">
<ol type="A">
<li>JSP</li>
<li>Javascript</li>
<li id="jQuery">jQuery</li>
<li>Ajax</li>
</ol>
</div>
</body>728x90
'FE > jQuery' 카테고리의 다른 글
| jQuery - 변수 (0) | 2021.12.14 |
|---|---|
| jQuery - 속성 선택자 (0) | 2021.12.14 |
| jQuery - 필터 선택자 (0) | 2021.12.14 |
| jQuery - 조상/부모/형제 요소 선택자 (0) | 2021.12.14 |
| jQuery - 기본 (0) | 2021.12.13 |
Comments