테스토리 :: 테스토리

2. jQuery (제이쿼리)

2017. 4. 17. 17:49

1. 첫번째와 마지막 자식 엘리먼트에 스타일 적용하기

- : first-child, :last-child

<!DOCTYPE html>

<html>

<head>

<title>첫번째와 마지막 자식 엘리먼트에 스타일 적용하기

- : first-child, :last-child</title>

$(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>three,</span>

</div>

<div>

<span>seven,</span>

<span>eight</span>

</div>

</body>

</html>

2. n 번째 혹은 짝수 또는 홀수 자식 엘리먼트 검색 -

- :nth-child(n), :nth-child(even), :nth-child(odd)

<!DOCTYPE html>

<html>

<head>

<title>n 번째 혹은 짝수 또는 홀수 자식 엘리먼트 검색 -

- :nth-child(n), :nth-child(even), :nth-child(odd)</title>

div {float:left;}

span {color:blue;}

</style>

$(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>

</ul>

</div>

<div>

<ul>

</ul>

</div>

<div>

<ul>

</ul>

</div>

</body>

</html>

3. 조건에 반대되는 엘리먼트 검색

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

//$('input:checked + span').css('background-color','#cccc66');

$('input:not(:checked) + span').css('background-color','#cccc66');

});

</script>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

4. 어트리뷰트를 조건으로 제시하여 엘리먼트를 찾기 -

E[A], E[A=V], E[A^=V], E[A$=V], E[A*=V]

<!DOCTYPE html>

<html>

<head>

<title>어트리뷰트를 조건으로 제시하여 엘리먼트를 찾기 -

E[A], E[A=V], E[A^=V], E[A$=V], E[A*=V]</title>

.sportlight {background-color: #ff0}

.redtext {color: #f00}

.bluetext {color: #00f}

.largetext {font-size: 30pt}

.italictext {font-size: italic}

.box {border: 3pt solid #f00}

</style>

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>

</body>

</html>

5. 여러개의 취미를 체크 박스에서 선택하기 -:checkbox

<!DOCTYPE html>

<html>

<head>

<title>여러개의 취미를 체크 박스에서 선택하기 -:checkbox

</title>

div {padding: 5px 5px 5px 5px}

.item {float: left; width: 100px}

</style>

$(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>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

6. 엘리먼트의 어트리뷰트 값을 가져오고, 설정하기

<!DOCTYPE html>

<html>

<head>

<title>엘리먼트의 어트리뷰트 값을 가져오고, 설정하기</title>

img {padding: 20px;}

div {color: blue; font-size: 30px;}

</style>

$(document).ready(function(){

$("img").attr("src","../images/im0.jpg")

.attr("title","똘또리군~~")

.attr("alt","puppy picture");

$("div").text($("img").attr("alt"));

});

</script>

</head>

<body>

<div><B>어트리뷰트 테스트~~~</B></div>

</center>

</body>

</html>

7. 엘리먼트 집합들을 한 번에 처리하기

<!DOCTYPE html>

<html>

<head>

img {padding: 20px;}

div {color: blue; font-size: 30px;}

</style>

$(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>

<div><b>어트리뷰트가 나옴</b></div>

</center>

</body>

</html>

8. 엘리먼트의 속성 값을 콜백함수에서 얻어와서 설정

<!DOCTYPE html>

<html>

<head>

<title>엘리먼트의 속성 값을 콜백함수에서 얻어와서 설정</title>

$(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>

</body>

</html>

9. 엘리먼트의 속성값 제거

<!DOCTYPE html>

<html>

<head>

<title>엘리먼트의 속성값 제거</title>

//$(document).ready(function(){

$(function(){

$("button").click(function() {

$(this).next().removeAttr("src");

});

</script>

</head>

<body>

<img alt="puppy picture"

src="../images/im0.jpg" title="들이군~~~">

</body>

</html>

10. background

<!DOCTYPE html>

<html>

<head>

<title>background</title>

div{background: white;}

.red{background: red;}

.red.green{background: green;}

.yellow{background: yellow;}

</style>

$(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>

<ul>

</ul>

<p>green 배경색은 없음 addedClass 메소드가 성공적으로 수행하면

green 배경색을 갖음, addedClass 메소드가 성공적으로 수행 못하면

red 배경색을 갖음</p>

</body>

</html>

11. 엘리먼트로부터 클래스 제거하기

<!DOCTYPE html>

<html>

<head>

<title>엘리먼트로부터 클래스 제거하기</title>

p{margin: 4px; font-size: 20px; font-weight:bolder;}

.red {color: red;}

.under{text-decoration: underline;}

.highlight{background: yellow;}

</style>

$(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>

</body>

</html>

12. 엘리먼트에 해당 클래스가 있으면 제거하고 없으면 추가

<!DOCTYPE html>

<html>

<head>

<title>엘리먼트에 해당 클래스가 있으면 제거하고 없으면 추가</title>

p{margin: 4px; font-size: 18px;

font-weight: bolder; cursor: pointer;}

.blue {color: blue;}

</style>

$(function() {

$("p").click(function() {

$(this).toggleClass("blue");

});

</script>

</head>

<body>

<p class="blue">엘리먼트에 적용된 클래스를</p>

<p>추가하고 제거하기를 반복 ~~~~</p>

</body>

</html>

13. 엘리먼트에 클래스 존재 여부를 확인 하기

<!DOCTYPE html>

<html>

<head>

<title>엘리먼트에 클래스 존재 여부를 확인 하기</title>

div{width: 150px; height: 150px; border: 1px solid #000000;

cursor: pointer; margin: 40px; float: left;}

.toggleStyle{background-color: blue; color:white;}

</style>

$(function() {

$("div").click(function() {

if($(this).hasClass("toggleStyle")){

$(this).removeClass("toggleStyle");

}

else{

$(this).addClass("toggleStyle");

}

});

</script>

</head>

<body>

<div class="toggleStyle">hasClass()는 선택된 엘리먼트에 해당 클래스가</div>

<div>아직 적용되지 않았으면 false 를 리턴 한다</div>

</body>

</html>

14. 엘리먼트의 태그 내부의 HTML 콘텐츠 얻어 오기

<!DOCTYPE html>

<html>

<head>

<title>엘리먼트의 태그 내부의 HTML 콘텐츠 얻어 오기</title>

p{margin: 14px; cursor:pointer;}

b{text-decoration: underline;}

button {cursor: pointer;}

#console{font-size: 20px; color: blue; font-weight: bold;}

</style>

$(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>버튼을 포함한<button name="okbtn">button</button>문장이다.</p>

</body>

</html>

15. 엘리먼트 내부의 HTML 콘텐츠 변경하기

<!DOCTYPE html>

<html>

<head>

.red {color: red;}

</style>

$(function() {

$("button").click(function() {

$("div").html("<soan class='red'> 엘리먼트 태그 내부의 "

+ "<b>HTML</b> 컨텐츠 변경하기</span>");

});

</script>

</head>

<body>

</body>

</html>

16. 탐색한 엘리먼트들에 기준이 되었던 엘리먼트를 추가하기

<!DOCTYPE html>

<html>

<head>

<title>탐색한 엘리먼트들에 기준이 되었던 엘리먼트를 추가하기</title>

div{width: 60px; height: 60px; margin: 10px; float: left;}

p{clear: both;}

.redBorder{border: 2px solid red}

.yellow{background: yellow}

</style>

$(function() {

$("button").click(function() {

$("div").addClass('redBorder')

.add("p")

.addClass("yellow");

});

</script>

</head>

<body>

<p> redBorder 클래스의 적용을 받지 못하고 yellow 클래스의 적용을 받음</p>

</body>

</html>

17. 선택된 엘리먼트 중에서 조건에 맞는 엘리먼트 얻기

<!DOCTYPE html>

<html>

<head>

div{width: 60px; height: 60px;

margin: 5px; float: left;

border: 2px white solid;}

</style>

$(function() {

$("div").css("background","yellow")

.filter(function(index) {

return index == 1 || $(this).attr("id") == "fourth";

})

.css("border-color","red");

});

</script>

</head>

<body>

</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

PREV 1 2 3 4 5 6 7 ···50 NEXT

테스토리

2. jQuery (제이쿼리)

1. 첫번째와 마지막 자식 엘리먼트에 스타일 적용하기

- : first-child, :last-child

2. n 번째 혹은 짝수 또는 홀수 자식 엘리먼트 검색 -

- :nth-child(n), :nth-child(even), :nth-child(odd)

3. 조건에 반대되는 엘리먼트 검색

4. 어트리뷰트를 조건으로 제시하여 엘리먼트를 찾기 -

E[A], E[A=V], E[A^=V], E[A$=V], E[A*=V]

5. 여러개의 취미를 체크 박스에서 선택하기 -:checkbox

6. 엘리먼트의 어트리뷰트 값을 가져오고, 설정하기

7. 엘리먼트 집합들을 한 번에 처리하기

8. 엘리먼트의 속성 값을 콜백함수에서 얻어와서 설정

9. 엘리먼트의 속성값 제거

10. background

11. 엘리먼트로부터 클래스 제거하기

12. 엘리먼트에 해당 클래스가 있으면 제거하고 없으면 추가

13. 엘리먼트에 클래스 존재 여부를 확인 하기

14. 엘리먼트의 태그 내부의 HTML 콘텐츠 얻어 오기

15. 엘리먼트 내부의 HTML 콘텐츠 변경하기

16. 탐색한 엘리먼트들에 기준이 되었던 엘리먼트를 추가하기

17. 선택된 엘리먼트 중에서 조건에 맞는 엘리먼트 얻기

'제이쿼리(jQuery)' 카테고리의 다른 글

+ Recent posts

티스토리툴바