. 제이쿼리 시작
- 방법1: $( document.ready ( function ( ){ 실행문 } ) );
- 방법2: $( function ( ) { 실행문 } );
- 방법3: $( ( ) => { 실행문 } );
. 선택자
선택자 설명
----------------------------------------------------------------------------------------
$(*) 전체요소선택
$("태그명,태그명,,") 해당 태그를 태그명으로 요소 선택
$("#아이디") 아이디명으로 선택
$(".클래스") 클래스명으로 선택
$("태그명1 태그명2")
$("태그명1>태그명2")
$("선택요소").parent()
&("선택요소").children('태그명')
$("선택요소").pre() 앞에있는 형제
$("선택요소").next() 뒤에있는 형제
$("선택요소").sibling('태그명') 형제중 해당태그
//form의 input요소를 선택할 경우
$(":종류")
- 예) $("선택자": text)
. CSS적용
- $("선택요소").css('속성','값').css('속성',값),,,
- $("선택요소").css('속성':'값', '속성':'값',,)
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('*').css('font-size','30px');
$('h1').css('color','red');
$('#firstTitle').css('color','green');
$('.nextTitle').css('color','blue');
$('.obj2>li').css('font-weight','bold').css('color','pink');
$('.obj2').children('.theObj1').css('color','purple');
$('.obj4').parent().css('border','1px dashed 2px #f00');
$('#wrap h3').css('font-size','20px').css('background-color','yellow');
$('.obj3').next().css('color','orange');
$('.obj4').prev().css('text-align','right');
$('.obj5').siblings('li').css('text-align','center');
$(':text').css({'background-color':'#css', 'border':'2px solid #357','color':'green'});
});
</script>
<body>
<div id='wrap'>
<h1>제이쿼리를 활용한 선택자 학습</h1>
<hr>
<h2 id="firstTitle">선택자</h2>
<h3 class="nextTitle">부모요소 선택자</h3>
<div>
<p class="obj1">현재 id가 "obj1"인 요소를 기준으로, 부모요소는 'div'요소입니다</p>
</div>
<ul class="obj2">
<li>리스트1</li>
<li class="theObj1">리스트2</li>
<li>리스트3</li>
</ul>
<h3>형 요소 선택자</h3>
<ul>
<li>리스트4</li>
<li class="obj3">리스트5</li>
<li>리스트6</li>
</ul>
<h3>동생 요소 선택자</h3>
<ul>
<li>리스트7</li>
<li class="obj4">리스트8</li>
<li>리스트9</li>
</ul>
<h3>형제 요소 선택자</h3>
<ul>
<li>리스트10</li>
<li class="obj5">리스트11</li>
<li>리스트12</li>
</ul>
<h3>입력요소 선택자</h3>
<p><label for="user_name1">이름1</label>
<input type="text" name="user_name" id="user_name1">
</p>
<p><label for="user_name2">이름2</label>
<input type="text" name="user_name" id="user_name2">
</p>
</div>
</body>
</body></html> 탐색선택자
$ ( ' # list: li : 속성 ').함수( ).함수( ),,
선 택 자 설 명
----------------------------------------------------------------------------------
$("ul li:odd") ul의 li요소 중 홀수
$("ul li:even")
$("ul li:first")
$("ul li:last")
$("ul li:eq(1)") 인덱스는 0부터 시작..두번째 것
>> $("ul li").eq(1)
$("ul li: lt(2)") 세번째 이전까지
$("ul li: gt(2)") 세번째 이후들
$("ul li: nth-child(2n)") 2의 배수요소들만
$("ul li: contains('문자')") li중 문자가 포함되어 있는 요소만
$("ul li: has("span")") span태그를 포함하는 li만
$("ul li: visible") li요소중 보이는 요소만
$("ul li: hidden")
$("ul li").filter(".theObj") 클래스가 theObj인 요소만
$("ul li").find('a') li가 포함하는 a요소만
$("ul li").not(:empty) li요소 중 내용을 가진 요소만
$("h1","h2") h1,h2요소만
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#list1 li:odd').css('background','yellow');
$('#list1 li:even').css('background','lightgray');
$('#list1 li:first').css('color','red');
$('#list li:last').css('color','green');
$('#list1 li').eq(1).css('font-style','italic');
$('#list1 li:lt(2)').css('border','2px dotted aqua');
$('#list1 li:gt(3)').css('border','purple 2px solid');
$('#list2 li:nth-child(2n)').css('background','orange');
$("#list2 li:contains('리스트11')").css('color','red');
$("#list2 li:has('span')").css("color","aqua");
$("#list2 li").filter('.theObj').css('font-size','20px');
$("#list2 li").find('a').css('background-color','red');
});
</script>
</head>
<body>
<div id='wrap'>
<h1>탐색 선택자 및 HTML조작</h1>
<h2>탐색 선택자</h2>
<ul id="list1">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
<li>리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
<ul id="list2">
<li>리스트8</li>
<li class='theObj'>리스트9</li>
<li><span>리스트10</span></li>
<li>리스트11</li>
<li><a href=#>리스트12</a></li>
<li>리스트13</li>
<li>리스트14</li>
</ul>
<h2 class='theTitle'>HTML조작</h2>
<ul>
<li>list_2</li>
</ul>
</div>
</body>
</html> 선택자와 함께 사용하는 함수들
$ ( '선택요소' ). html( '새요소' ) 선택한 요소의 하위 요소들을 새요소로 변경
text( '새텍스트' ) 선택한 요소의 텍스트를 새 텍스트로 변경
(추가)
$('선택요소').append("새요소") 맨마지막에 추가
$('선택요소').prepend('새요소') 맨앞에 추가
$('새요소').insertBefore('요소선택') 이전위치에 형제요소로 추가
$('새요소').insertAfter('요소선택') 선택한 요소의 뒤에 형제요소 추가
$('선택요소').remove() 선택요소 삭제
(속성지정)
$('선택요소').attr('속성') 해당속성의 값을 반환
$('선택요소').attr('속성','값') 속성지정
.addClass('클리스명') 새클래스명 부여
.removeClass('클래스명')
.toggleClass('클래스명') 선택요소에 해당 클래스명이 있으면 부여x, 없으면 부여o
.hasClass('클래스명') 클래스명이 있으면 true반환
.wrap("<div></div>") 선택요소를 <div>로 둘러싼다
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(()=>{
$('.theTitle').html("<a href='#'>HTML조작</a>");
$('.obj').text("'list2'를 'list_2'로 변경해봅니다.");
$('#list').append('<li>append로 새로 추가한 list6</li>');
$('#list').prepend('<li>prepend로 새로 추가한 list1</li>');
$('<li>insertBefore로 새로 추가한 요소</li>').insertBefore($('#list li').eq(4));
$('<li>insertAfter로 새로 추가한 요소</li>').insertAfter($('#list li').eq(5));
$('#list li').eq(0).remove();
$('#list li').eq(0).attr('class','obj2');
$('.obj2').css({'background-color':'yellow','border':'3px solid #000','color':'blue'});
$('#list li').eq(0).addClass('obj3');
$('.obj3').css('color','red');
});
</script>
</head>
<body>
<div id='wrap'>
<h2 class='theTitle'>HTML조작</h2>
<ul id='list'>
<li class='obj'>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
</ul>
</div>
</body>
</html> 이벤트
- 핸들러 : 이벤트가 발생되었을 떄 수행되도록 해당 이벤트를 지정해둔 요소(태그)
- 문법
$('선택요소').click(function(){실행문});
- on이 없다
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.menu a{cursor: pointer;}
.menu.hide{display: none;background-color: yellow;}
</style>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.menu>a').click(function() {
let submenu = $(this).next('ul');
if(submenu.is(':visible')){
submenu.slideUp();
}
else{
submenu.slideDown();
}
});
})
</script>
</head>
<body>
<div>
<ul>
<li class="menu">
<a><img src='../img/rol1.jpg'></a>
<ul class="hide">
<li>메뉴1
<li>메뉴2
<li>메뉴3
<li>메뉴4
<li>메뉴5
<li>메뉴6
</ul>
</li>
<li class="menu">
<a><img src='../img/rol3.png'></a>
<ul class="hide">
<li>메뉴1
<li>메뉴2
<li>메뉴3
<li>메뉴4
<li>메뉴5
<li>메뉴6
</ul>
</li>
</ul>
</div>
</body>
</html>'IT 공부 > JavaScript' 카테고리의 다른 글
| 여행사이트 만들기 (0) | 2022.07.18 |
|---|---|
| wow활용 (1) | 2022.07.18 |
| geolocation (2) | 2022.06.21 |
| snowdrop (0) | 2022.06.20 |
| canvas (0) | 2022.06.20 |