1. 첫번째와 마지막 자식 엘리먼트에 스타일 적용하기
- : first-child, :last-child
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>첫번째와 마지막 자식 엘리먼트에 스타일 적용하기
- : first-child, :last-child</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div span:first-child, div span:last-child')
.css('text-decoration','underline')
.css('color', 'red')
.css('font-size','20pt');
});
</script>
</head>
<body>
<div>
<span>one,</span>
<span>two,</span>
<span>three,</span>
<span>four</span>
</div>
<div>
<span>five,</span>
<span>six,</span>
<span>seven,</span>
<span>eight</span>
</div>
</body>
</html>
2. n 번째 혹은 짝수 또는 홀수 자식 엘리먼트 검색 -
|
|
|
- :nth-child(n), :nth-child(even), :nth-child(odd)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>n 번째 혹은 짝수 또는 홀수 자식 엘리먼트 검색 -
- :nth-child(n), :nth-child(even), :nth-child(odd)</title>
<style tyle="text/css">
div {float:left;}
span {color:blue;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul li:nth-child(2)').append('<span> - 2nd!<span>');
$('ul li:nth-child(3)').append('<span> - ldm!<span>');
$('ul li:nth-child(even)').css('backgroundColor','pink');
$('ul li:nth-child(odd)').css('backgroundColor','green');
});
</script>
</head>
<body>
<div>
<ul>
<li>사과</li>
<li>토마토</li>
<li>바나나</li>
</ul>
</div>
<div>
<ul>
<li>해바라기</li>
</ul>
</div>
<div>
<ul>
<li>호랑이</li>
<li>코끼리</li>
<li>하마</li>
<li>원숭이</li>
</ul>
</div>
</body>
</html>
3. 조건에 반대되는 엘리먼트 검색
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>조건에 반대되는 엘리먼트 검색</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$('input:checked + span').css('background-color','#cccc66');
$('input:not(:checked) + span').css('background-color','#cccc66');
});
</script>
</head>
<body>
<div>
<input type="checkbox" name="fruit"> <span>사과</span>
</div>
<div>
<input type="checkbox" name="fruit"> <span>바나나</span>
</div>
<div>
<input type="checkbox" name="fruit" checked="checked">
<span>복숭아</span>
</div>
<div>
<input type="checkbox" name="fruit"> <span>수박</span>
</div>
</body>
</html>
4. 어트리뷰트를 조건으로 제시하여 엘리먼트를 찾기 -
E[A], E[A=V], E[A^=V], E[A$=V], E[A*=V]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>어트리뷰트를 조건으로 제시하여 엘리먼트를 찾기 -
E[A], E[A=V], E[A^=V], E[A$=V], E[A*=V]</title>
<style type="text/css">
.sportlight {background-color: #ff0}
.redtext {color: #f00}
.bluetext {color: #00f}
.largetext {font-size: 30pt}
.italictext {font-size: italic}
.box {border: 3pt solid #f00}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var output = function(selector){
var resultText = "";
console.log("\n" + selector + "로 검색된 엘리먼트 갯수" +$(selector).size());
$(selector).each(function(){
resultText += $(this).text() + "\t";
});
console.log(resultText + "\n");
};
$(document).ready(function(){
$('span[id]').addClass('soptlight');
$('span[id ="simpletext1"]').addClass('redtext');
$('span[id !="simpletext1"]').addClass('bluetext');
$('span[id ^="complex"]').addClass('italictext');
$('span[id $="text1"]').addClass('largetext');
$('span[id *= "text"]').addClass('box');
output("span[id]");
output("span[id='simpletext1']");
output("span[id != 'simpletext1']");
output("span[id ^= 'complex']");
output("span[id $='text1']");
output("span[id *='text']");
});
</script>
</head>
<body>
<span id="simpletext1">simple</span>
<span class="simpletext2">jquery</span>
<span id="completext1">basic</span>
<span id="completext2">example</span>
<span id="complex">book</span>
</body>
</html>
5. 여러개의 취미를 체크 박스에서 선택하기 -:checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여러개의 취미를 체크 박스에서 선택하기 -:checkbox
</title>
<style type="text/css">
div {padding: 5px 5px 5px 5px}
.item {float: left; width: 100px}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#selectBtn:button").click(function(){
var checkedList = "";
var checkedConsole = "";
$("input[name='hobby']:checkbox:checked").each(function() {
checkedConsole += $(this).val() + "\t";
checkedList += $(this).prev().text() + "\t";
});
$('#contents').html(checkedList);
console.log(checkedConsole);
});
});
</script>
</head>
<body>
<div>
<span class="item">음악감상</span>
<input type="checkbox" name="hobby" value="music">
</div>
<div>
<span class="item">요가</span>
<input type="checkbox" name="hobby" value="yoga">
</div>
<div>
<span class="item">독서</span>
<input type="checkbox" name="hobby" value="reading">
</div>
<div>
<input type="button" id="selectBtn" value="취미 선택">
</div>
<div id="contents">결과</div>
</body>
</html>
6. 엘리먼트의 어트리뷰트 값을 가져오고, 설정하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트의 어트리뷰트 값을 가져오고, 설정하기</title>
<style type="text/css">
img {padding: 20px;}
div {color: blue; font-size: 30px;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").attr("src","../images/im0.jpg")
.attr("title","똘또리군~~")
.attr("alt","puppy picture");
$("div").text($("img").attr("alt"));
});
</script>
</head>
<body>
<center>
<img /> <img /> <img />
<div><B>어트리뷰트 테스트~~~</B></div>
</center>
</body>
</html>
7. 엘리먼트 집합들을 한 번에 처리하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트 집합들을 한 번에 처리하기</title>
<style type="text/css">
img {padding: 20px;}
div {color: blue; font-size: 30px;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img").attr(
{src: "../images/im4.jpg",
title: "을이양~~~~",
alt:"Cat picture",
width:"130px",
height:"130px"
});
$("div").text($("img").attr("alt"));
});
</script>
</head>
<body>
<center>
<img /> <img /> <img />
<div><b>어트리뷰트가 나옴</b></div>
</center>
</body>
</html>
8. 엘리먼트의 속성 값을 콜백함수에서 얻어와서 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트의 속성 값을 콜백함수에서 얻어와서 설정</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img").attr(
{
width:"100px",
height:"100px",
});
$("img").attr("src",function(){
return "../images/" + this.title;
});
$("img").attr("title",function(index){
return index + "번 엘리먼트 타이틀은 " + this.title + " 이다.";
});
});
</script>
</head>
<body>
<center>
<img title ="image1.jpg"/>
<img title ="image2.jpg"/>
<img title ="image3.jpg"/>
<img title ="image4.jpg"/>
</center>
</body>
</html>
9. 엘리먼트의 속성값 제거
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트의 속성값 제거</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
//$(document).ready(function(){
$(function(){
$("button").click(function() {
$(this).next().removeAttr("src");
});
});
</script>
</head>
<body>
<button>속성 값 제거</button>
<img alt="puppy picture"
src="../images/im0.jpg" title="들이군~~~">
</body>
</html>
10. background
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background</title>
<style type="text/css">
div{background: white;}
.red{background: red;}
.red.green{background: green;}
.yellow{background: yellow;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("li").addClass(function(index,currentClass) {
var addedClass;
if(currentClass == "red") {
addedClass ="green";
$("p").text(index + "번째 항목에 그린 배경색이 생김");
}
else
{
addedClass = "yellow";
}
return addedClass;
});
});
});
</script>
</head>
<body>
<button>배경색 변경</button>
<ul>
<li>흰 배경색</li>
<li Class="red">배경색</li>
<li>흰 배경색</li>
</ul>
<p>green 배경색은 없음 addedClass 메소드가 성공적으로 수행하면
green 배경색을 갖음, addedClass 메소드가 성공적으로 수행 못하면
red 배경색을 갖음</p>
</body>
</html>
11. 엘리먼트로부터 클래스 제거하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트로부터 클래스 제거하기</title>
<style type="text/css">
p{margin: 4px; font-size: 20px; font-weight:bolder;}
.red {color: red;}
.under{text-decoration: underline;}
.highlight{background: yellow;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("p").addClass("red under");
$("#removeClass").click(function(){
$("p:even").removeClass("red under");
});
$("#changeClass").click(function() {
$("p:odd").removeClass("red under").addClass("highlight");
});
});
</script>
</head>
<body>
<button id="removeClass">removeClass~~</button>
<button id="changeClass">changeClass@@@</button>
<p>엘리먼트로 부터</p>
<p>클래스를</p>
<p>추가하고</p>
<p>제거하는 연습</p>
</body>
</html>
12. 엘리먼트에 해당 클래스가 있으면 제거하고 없으면 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트에 해당 클래스가 있으면 제거하고 없으면 추가</title>
<style type="text/css">
p{margin: 4px; font-size: 18px;
font-weight: bolder; cursor: pointer;}
.blue {color: blue;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("p").click(function() {
$(this).toggleClass("blue");
});
});
</script>
</head>
<body>
<p class="blue">엘리먼트에 적용된 클래스를</p>
<p>추가하고 제거하기를 반복 ~~~~</p>
</body>
</html>
13. 엘리먼트에 클래스 존재 여부를 확인 하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트에 클래스 존재 여부를 확인 하기</title>
<style type="text/css">
div{width: 150px; height: 150px; border: 1px solid #000000;
cursor: pointer; margin: 40px; float: left;}
.toggleStyle{background-color: blue; color:white;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("div").click(function() {
if($(this).hasClass("toggleStyle")){
$(this).removeClass("toggleStyle");
}
else{
$(this).addClass("toggleStyle");
}
});
});
</script>
</head>
<body>
<div class="toggleStyle">hasClass()는 선택된 엘리먼트에 해당 클래스가</div>
<div>적용되어 있으면 true 를 리턴하고</div>
<div>아직 적용되지 않았으면 false 를 리턴 한다</div>
</body>
</html>
14. 엘리먼트의 태그 내부의 HTML 콘텐츠 얻어 오기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트의 태그 내부의 HTML 콘텐츠 얻어 오기</title>
<style type="text/css">
p{margin: 14px; cursor:pointer;}
b{text-decoration: underline;}
button {cursor: pointer;}
#console{font-size: 20px; color: blue; font-weight: bold;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
var htmlStr;
$("p").click(function() {
htmlStr = $(this).html();
report(htmlStr);
});
});
function report(msg) {
$("#console").text(msg);
}
</script>
</head>
<body>
<p> <b>html</b>은 엘리먼트의 <span id="tag">내용을</span></p>
<p> HTML 형식의 <span id="text">문자열로</span> 리턴한다.</p>
<p>버튼을 포함한<button name="okbtn">button</button>문장이다.</p>
<div id="console"></div>
</body>
</html>
15. 엘리먼트 내부의 HTML 콘텐츠 변경하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트 내부의 HTML 콘텐츠 변경하기</title>
<style type="text/css">
.red {color: red;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("div").html("<soan class='red'> 엘리먼트 태그 내부의 "
+ "<b>HTML</b> 컨텐츠 변경하기</span>");
});
});
</script>
</head>
<body>
<button>클릭~~~</button>
<div></div>
<div></div>
</body>
</html>
16. 탐색한 엘리먼트들에 기준이 되었던 엘리먼트를 추가하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>탐색한 엘리먼트들에 기준이 되었던 엘리먼트를 추가하기</title>
<style type="text/css">
div{width: 60px; height: 60px; margin: 10px; float: left;}
p{clear: both;}
.redBorder{border: 2px solid red}
.yellow{background: yellow}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("div").addClass('redBorder')
.add("p")
.addClass("yellow");
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<p> redBorder 클래스의 적용을 받지 못하고 yellow 클래스의 적용을 받음</p>
<button>클클릭</button>
</body>
</html>
17. 선택된 엘리먼트 중에서 조건에 맞는 엘리먼트 얻기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택된 엘리먼트 중에서 조건에 맞는 엘리먼트 얻기</title>
<style type="text/css">
div{width: 60px; height: 60px;
margin: 5px; float: left;
border: 2px white solid;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("div").css("background","yellow")
.filter(function(index) {
return index == 1 || $(this).attr("id") == "fourth";
})
.css("border-color","red");
});
</script>
</head>
<body>
<div id="first"></div>
<div id="second" class="middle"></div>
<div id="third" class="middle"></div>
<div id="fourth" class="middle"></div>
<div id="five" class="middle"></div>
<div id="six"></div>
</body>
</html>
'제이쿼리(jQuery)' 카테고리의 다른 글
| 5. jQuery (제이쿼리) 마지막 (0) | 2017.04.20 |
|---|---|
| 4. jQuery (제이쿼리) (0) | 2017.04.19 |
| 3. jQuery (제이쿼리) (0) | 2017.04.18 |
| 1. jQuery (제이쿼리) (0) | 2017.04.13 |