복습 ARCHIVE/java script
[jQuery] Selector - 홀짝, contains, sibling 등 /.tagName / .bind()
SummerON
2021. 6. 7. 23:14
기본 Selector
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Selector : 선택자/선택기/실렉터/셀렉터</title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<style type="text/css">
.bg{ background-color:Yellow;}
.horizontal { float:left; list-style:none; margin:10px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
//[1] li > u 에 대해서 배경색을 Yellow로 설정
$('li > u').addClass('bg'); // li 자식 요소 중 u 태그인것만 선별
//[2] id 속성이 myFavorites인 것의 자식 요소중 li에 CSS클래스 적용
$("#myFavorites > li").addClass("horizontal");
//[3] id 속성에 대해서 직접 접근
jQuery('#jquery').click(function(){ alert('jQuery'); });
$('.sil').click(function(){alert('실버라이트'); });
}
);
</script>
</head>
<body>
<h3>관심사항</h3>
<ul id="myFavorites">
<li><u>C#</u></li>
<li>ASP.NET</li>
<li></li>
<li class="sil">Silverlight</li>
<li id="jquery">j<u>Q</u>uery</li>
</ul>
</body>
</html>
특정 문자열 포함 Selector
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정규표현식 selector</title>
<style type="text/css">
.red { color:Red; }
.green { color:Green; }
.silver { color:Silver; }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function() {
//[1] dotnet이라는 단어가 들어가는 링크에 배경을 red로 설정
$("a[href*='dotnet']").addClass("red");
//[2] aspx로 끝나는 링크의 배경 green으로 설정
$('a[href$="aspx"]').addClass("green"); // ~로 끝나는
//[3] mailto:로 시작하는 링크의 배경을 silver로 설정
jQuery("a[href^='mailto:']").addClass("silver");
$('a[href$="com"]').addClass("red");
}
);
</script>
</head>
<body>
<a href="http://www.dotnetkorea.com/">닷넷코리아</a>
<br>
<a href="http://www.visualacademy.com/Default.aspx">비주얼아카데미</a>
<br>
<a href="mailto:redplus@hawaso.com">이메일</a><br>
<a href="http://www.naver.com">네이버</a><br>
<a href="http://www.google.com">구글</a><br>
<a href="http://www.nate.com">네이트</a>
</body>
</html>홀수 짝수 Selector
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블의 짝수번째 배경색 변경</title>
<style type="text/css">
.redColor { background-color: Red; }
.blueColor { background-color:Green; }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('tr:odd').addClass("redColor");
$('tr:even').addClass("blueColor");
}
);
</script>
</head>
<body>
<table width="100">
<tr>
<td>0</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
</body>
</html>특정 요소 포함 Selector (contains)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>특정 텍스트 검색</title>
<style type="text/css">
.redColor { color:Red; }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function() {
// [1] td 태그내의 텍스트가 RedPlus를 포함하는 요소를 검색 후 배경색을 red
$("td:contains('RedPlus')").addClass('redColor');
}
);
</script>
</head>
<body>
<table>
<tr><td>RedPlus</td></tr>
<tr><td>DotNetKorea</td></tr>
<tr><td>Hawaso</td></tr>
</table>
</body>
</html>메서드 체인
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메서드 체인</title>
<style type="text/css">
.redColor{ color:Red }
.blueColor{ color:Blue }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('td:contains("RedPlus")') // <td>RedPlus</td>
.siblings() // <td>레드플러스</td><td>닷넷</td>
.addClass("redColor")
.parent()
.find('td:eq(0)') //td의 0번째
.addClass("blueColor");
}
);
</script>
</head>
<body>
<table>
<tr>
<td>NickName</td><td>이름</td><td>비고</td>
</tr>
<tr>
<td>RedPlus</td><td>레드플러스</td><td>닷넷</td>
</tr>
<tr>
<td>Hawaso</td><td>하와소</td><td>강의</td>
</tr>
</table>
</body>
</html>
요소 가져오기
<!DOCTYPE html>
<html>
<head>
<title>DOM 요소 가져오기</title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
// $(document).ready(
// $().ready(
$(
function() {
var tagName = $('#dnk').get(0).tagName;
alert(tagName);
}
);
</script>
</head>
<body>
<a href="http://www.dotnetkorea.com/" id="dnk">닷넷코리아</a>
</body>
</html>
.bind() - add-remove
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스타일 추가/제거</title>
<style type="text/css">
.yellowBorder{ background-color: yellow; border:1px solid red }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('#btnClick') // 두가지 기능을 하나의 함수로 묶어서 사용
.bind("mouseover", function() {$('#btnClick').addClass('yellowBorder') })
//마우스를 올렸을 때
.bind("mouseout", function() {$(this).removeClass('yellowBorder')});
//마우스를 내렸을 때
});
</script>
</head>
<body>
<div id="btnClick">
마우스를 올려보세요!!!
</div>
</body>
</html>.bind() - 배경색 바꾸기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bind() 메서드로 동적으로 이벤트 부여</title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('#btnClick').bind("click", function() { alert('클릭됨'); });
$('#btnClick').bind("mouseover", function() {
document.getElementById('btnClick').style.backgroundColor = 'red';
});
$('#btnClick').bind("mouseout", function() {
$('#btnClick').get(0).style.backgroundColor = 'Blue';
});
});
</script>
</head>
<body>
<div id="btnClick">
클릭하세요!!!
</div>
</body>
</html>아이디를 selector로 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this.id로 DOM 요소의 id 속성 가져오기</title>
<style type="text/css">
.redColor{ color:Red }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//[1] 닷넷코리아 레이어 클릭시 CSS 클래스 해제
$('#dnk').bind('click', function() {
//[a] 해제
$('#mainMenu .redColor').removeClass('redColor'); //3개의 요소의 CSS 클래스 해제
//[b] #dnk만 다시 적용
$(this).addClass('redColor'); // 현재 나만 다시 적용
});
});
</script>
</head>
<body>
<div id="mainMenu">
<div id="dnk" class="redColor">닷넷코리아</div>
<div id="va" class="redColor">비주얼아카데미</div>
<div id="ll" class="redColor">라이선스랜드</div>
</div>
</body>
</html>
아이디를 통해 한꺼번에 같은 효과 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this.id로 DOM 요소의 id 속성 가져오기</title>
<style type="text/css">
.redColor{ color:Red }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//[2] mainMenu의 모든 항목에 대해서 click 이벤트 적용
$('#mainMenu .redColor').bind("click", function() {
//[!] this.id로 분기
if (this.id == "va") {
alert("비주얼 아카데미 클릭");
}else if (this.id == "ll") {
alert($(this).text()); // #ll 안에 들어있는 텍스트
}
});
});
</script>
</head>
<body>
<div id="mainMenu">
<div id="dnk" class="redColor">닷넷코리아</div>
<div id="va" class="redColor">비주얼아카데미</div>
<div id="ll" class="redColor">라이선스랜드</div>
</div>
</body>
</html>