JQuery: 셀렉터로 CSS 변경

jQuery 2016. 2. 17. 17:04

JQuery

셀렉터의 종류 셀렉터 표현 방법

CSS처럼 특정 태그, 아이디, 클래스명을 선택하여 CSS를 변경해줄 수 있다.

All Selector $("*")

ID Selector $("#id")

Element Selector $("elementName")

Class Selector $(".className")

Multiple Selector $("selector1, selector2, selector3, selectorN")

예제) HTML 문서내의 모든 엘리먼트를 찾아 붉은 선으로 표시

$(document).ready(function() {

alert('jquery');

$("*").css("border","1px solid pink");

});

</script>

</head>

<body>

</body>

예제) 세일상품, 일반상품을 별도 div로 묶어 각각의 버튼 누를 때 테두리선 변경

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

div{border:1px solid blue; width:200px;margin-bottom:10px;font-size:12px;}

</style>

$(document).ready(function(){

$(".discount").css("text-decoration", "line-through");

});

function bgSet(mode){

if(mode == 'sale') {

$(".sale").css("border", "solid 1px pink");

$(".common").css("border", "solid 1px blue");

}

else {

$('.sale').css("border", "solid 1px blue");

$('.common').css("border", "solid 1px pink");

}

</script>

</head>

<body>

<ul>

<li>상품명:플레이스테이션4</li>

</ul>

</div>

<ul>

<li>상품명:플레이스테이션3</li>

</ul>

</div>

<ul>

<li>상품명:플레이스테이션2</li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</body>

</html>

속성값을 이용한 요소 선택

개체의 속성값을 통해 요소를 선택할 수 있다. - Attribute Selector

$(Selector[attr]) attr 속성(attribute)값을 가지는 Selector 요소와 일치

$(Selector[attr=”value”]) attr 속성의 값이 value와 동일한 값이 Selector 요소와 일치

$(Selector[attr!=”value”]) attr 속성의 값이 value와 같지 않은 값이 Selector 요소와 일치 $(Selector[attr^=”value”]) attr 속성의 값이 value 값으로 시작하는 Selector 요소와 일치 $(Selector[attr$=”value”]) attr 속성의 값이 value 값으로 끝나는 Selector 요소와 일치

$(Selector[attr*=”value”]) attr 속성의 값이 value 값을 포함하는 Selector 요소와 일치

$(Selector[attr~=”value”]) attr 속성의 값이 공백과 함께 value 값을 포함하는 Selector 요소와 일치

예제) input name이 Rq로 끝나는 것만 색상 변경

<script>

$(document).ready(function(){

$("input[name*='Rq']").css("background", "pink");

});

</script>

</head>

<body>

<form>

아이디: <input type="text" name="idRq"><br />

패스워드: <input type="password" name="pwRq"><br />

이름: <input type="text" name="nameRq"><br />

이메일: <input type="text" name="email"><br />

</form>

DOM 계층을 이용한 요소 접근

DOM 계층(Hierarchy)을 이용하여 요소를 선택할 수 있다.

Child Selector $(“parent > child”) 부모 바로 아래 자식 요소 반환

Descendant Selector $(“ancestor descendant”) 조상과 일치하는 요소에 포함된 모든 후손 중 후손 요소와 일치

Next Adjacent Selector $(“prev + next”) 평행관계에서 일치하는 요소 반환

Next Siblings Selector $(“prev ~ siblings”) 형제 요소 중 동일 요소 반환

예제) siteUrl1>li 와 siteUrl1 li의 차이점

$(document).ready(function () {

$("#siteUrl1 > li").css("border", "1px solid #ff0000");

$("#siteUrl2 li").css("border", "1px solid blue");

});

</script>

</head>

<body>

<h2>jQuery 시작 Selector</h2>

<p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문할 수 있다.</p>

<div>

<li>Sqler : http://www.sqler.com</li>

<li>jQuery : http://jquery.com</li>

<li>

<ul>

<li>Blog : http://www.hows.kr</li> // 2단계째의 li에는 적용 안됨

<li>Community : http://www.hoons.kr</li> // 2단계째의 li에는 적용 안됨

</ul>

</li>

<li>Items</li>

</ul>

<li>Sqler : http://www.sqler.com</li>

<li>jQuery : http://jquery.com</li>

<li>

<ul>

<li>Community : http://www.hoons.kr</li>

</ul>

</li>

<li>Items</li>

</ul>

</div>

</body>

</html>

siteUrl1>li는 해당 ul 바로 한칸 아래의 li에만 css가 적용된 반면,

siteUrl1 li는 해당 ul 아래의 모든 요소에 css가 적용된다.

예제) 버튼을 눌러 siteUrl1>li 와 siteUrl1 li 색상 변경

<!DOCTYPE html>

<html>

<head>

<title>jQuery Selector</title>

<style>

div {

background-color: #EEEEEE;

padding: 10px;

}

</style>

function selectMenu(mode){

if(mode == 'siteUrl1') {

$("#siteUrl1 > li").css("border", "2px solid pink");

$("#siteUrl2 li").css("border", "1px solid blue");

}

else {

$("#siteUrl1 > li").css("border", "1px solid blue");

$("#siteUrl2 li").css("border", "2px solid pink");

}

</script>

</head>

<body>

<div>

<li>Items</li>

</ul>

<li>Items</li>

</ul>

</div>

</body>

</html>

필터를 이용한 셀렉터

필터를 이용한 개체 접근

:animated 에니메이션이 동작중인 모든 요소와 일치하는 요소를 반환한다.

:eq(index) Index에 할당하는 요소를 반환한다.(단일요소)

:even 짝수의 요소를 반환한다. (0부터 시작)

:odd 홀수의 요소를 반환한다. (0부터 시작)

:first 첫번째 요소를 반환한다.

:last 마지막 요소를 반환한다.

:gt(index) Index 보다 높은 Index에 할당되는 요소를 모두 반환한다.

:lt(index) Index 보다 낮은 Index에 할당되는 요소를 모두 반환한다.

:header 모든 헤더 요소들을 반환한다.(h1,h2,h3….)

:not(selector) Selector와 일치되는 요소를 제외한 나머지 요소를 반환한다.

:focus 현재 포커스가 위치한 요소를 반환한다. (1.6 이상에서 지원)]

$(“td:eq(0)”)

td 요소중에 첫번째 항목맊을 선택한다. (eq의 index는 0부터 시작이다.)

eq의 index는 0부터 시작을 하며 0 이면 요소중 첫번째, 1이면 두번째 요소가 된다.

$(“td:even”) $(“td:odd”)

td 요소중에 짝/홀수번째 요소를 선택한다.

짝/홀수의 구분은 eq의 index와 동일하게 구분이 된다.

$(“td:first”) $("td:last")

td 요소중에 첫번째 요소, 마지막 요소를 선택한다.

$(“td:gt(2)”) $(“td:lt(2)”)

td 요소중에 2번째 요소 이후의 모든 요소를 선택하거나 2번째 요소 이전의 모든 요소를 선택한다.

$(“td:not(„.noselect‟)”)

td 요소중에 클래스명이 “notSelect”인 항목을 제외한 요소의 집합을 선택한다.

예제) tr:even으로 짝수번째에는 #aaa CSS를 적용

$(document).ready(function() {

$("tr:even").css("background", "#AAA");

});

</script>

even으로 짝수에 적용시켰는데 홀수 넘버에 적용된 이유는 넘버링의 카운트가 0부터 시작되기 때문이다.

즉, 1번째 tr은 사실 0번째 tr이고, 2번째 tr이 1번째이므로 정상적으로 적용된 것이 맞다.

문제) input box에 넣은 숫자 위치에 background를 pink로 변경되는 Jquery 작성

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 선택을 누르면 num에 1있으면 1번째 줄 상품 background를 pink로 변경

function selGoods() {

var num = parseInt(document.f1.num.value);

if(num == 1) {

$("td:eq(0)").css("border", "1px solid pink");

$("td:eq(1)").css("border", "0px solid black");

$("td:eq(2)").css("border", "0px solid black");

}

else if(num == 2) {

$("td:eq(0)").css("border", "0px solid black");

$("td:eq(1)").css("border", "1px solid pink");

$("td:eq(2)").css("border", "0px solid black");

}

else if(num == 3) {

$("td:eq(0)").css("border", "0px solid black");

$("td:eq(1)").css("border", "0px solid black");

$("td:eq(2)").css("border", "1px solid pink");

}

else {

$("td:eq(0)").css("border", "0px solid black");

$("td:eq(1)").css("border", "0px solid black");

$("td:eq(2)").css("border", "0px solid black");

}

</script>

</head>

<div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</body>

</html>

강사님이 풀어준 것)

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 선택을 누르면 num에 1있으면 1번째 줄 상품 background를 pink로 변경

function selGoods() {

var numObj = document.getElementById('num');

var rowNum = numObj.value;

rowNum = rowNum - 1; // 1이 0이므로 1을 빼줌

$('tr').css('background', 'white');

$('tr:eq('+rowNum+')').css('background','pink');

}

</script>

</head>

<div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

폼 필터

폼 필터 이용하여 요소를 선택할 수 있다.

:button <input type=”butto” /> :checkbox <input type=”checkbox” />

:checked <input type=”checkbox” checked=”checked” />

:disabled <input type=”text” disabled=”disabled” />

:enabled <input type=”text” enabled=”enabled” />

:file <input type=”file” /> :focus (1.6 이상에서 지원)

:image <input type=”image” />

:input <input> 모듞 input 요소

:password <input type=”password” /> :radio <input type=”radio” />

:reset <input type=”reset” />

:selected <select><option selected="selected"></option></select>

:submit <input type=”submit” />

:text <input type=”text” /> :hidden <input type=”hidden” />

1. :checked , :selected

<input type=”checkbox”/>체크박스, 라디오버튼<input type=”radio” />, 셀렉트<select>의 상태를 확인 하여 선택된 상태 요소들의 집합을 선택 반환한다.

2. :enabled, :disabled 사용이 가능하거나, 사용이 불가능한 요소를 선택하여 할당 요소의 집합을 반환한다. <input type="text" disabled="disabled" />의 경우

자식 필터 Child Filter

폼 필터 이용하여 요소를 선택할 수 있다.

1. 자식필터<Child Filter>

아래 목록을 통해핬 나열된 내용을 보면 이번강의 초반에 나왔던 필터와 비슷하게 보이실 겁니다.

사용하는 구문도 많은 부분이 비슷하지만 결과는 정말 다릅니다. 우선 자식필터(Child Fiter)에한 간단히 정리하고 앞서 말한 결과의 차이에 대해 알아 보기로 하겠다.

:first-child 자식 요소 중 첫번째에 할당하는 요소를 모두 반환한다.

:last-child 자식 요소 중 마지막에 할당하는 요소를 모두 반환한다.

:nth-child(index/odd/even/equation) 자식 요소 중 지정된 값에 할당하는 요소를 모두 반환한다.

:only-child 자싞이 부모 요소와 유일한 자식인 모든 요소를 반환한다.

탐색(Traverse) 메서드

셀렉터를 통한 선택한 개체에서 다시 한번 개체를 찾고, 필터링하고, 추가하는 작업을 쉽게 구현 할 수 있도록 도와주는 메서드

1. Filtering

.eq(index) 선택한 요소들 중에서 인덱스와 일치하는 단일 요소를 선택 반환한다.

.filter(expr) 선택한 요소에서 표현식(expr)과 일치하는 요소의 집합을 선택 반환한다. 표현식에는 selector, function, element, jQuery object가 올 수 있다.

.first() 선택한 요소에서 첫 번째 단일 요소를 선택 반환한다.

.has(selector) 선택한 요소에서 selector핫목을 가지고 있는 요소의 집합을 선택 반홖한다.

.is(expr) 표현식과 읷치하는 조건이 있으면 true를 반환한다. 표현식에는 selector, function, element, jQuery object가 올 수 있다.

.last() .first() 와 반대되는 메서드로 마지막 단일 요소를 선택 반환한다.

.map(callback) jQuery 개체에 있는 요소의 집합을 다른 집합으로 변경해서 이동 시킵니다.

.not(expr) 표현식과 읷치하지 않는 요소의 집합을 선택 반환한다.

.slice(start,[end] 선택한 요소에서 start, end번 째에 할당하는 집합을 선택 반환한다.

$(“td:eq(0)”) == $(“td”).eq(0)

$(“td:first”) == $(“td”).first()

$(“td:last”) == $(“td”).last()

$(“td:not(„.myClass‟)”) == $(“td”).not(“.myClass”)

양쪽다 모두 동일한 결과를 보인다.

2) .not()

필터 메서드와는 반대로 동작하는 메서드이다. 필터 메서드는 표현식과 일치하는 요소를 선택하는 반면에 이(.not()) 메서드는 표현식과 일치하지 않는 요소를 선택 반환한다.

예제)

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function () {

$("td").not(function (index) {

return index % 3 == 0;

}).css("background", "red");

});

</script>

</head>

<body>

</head>

<div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

3) .has(selector)

기본 셀렉터를 통해 가져온 개체의 집합에서 selector에 할당하는 요소를 가짂 개체맊을 선택 반환한다.

$(document).ready(function () {

$("li").has("ul").css("background", "red");

});

4) .is(expr)

기본 셀렉터에서 가져온 개체의 집합에서 표현 식과 일치하는 부분이 있는지에 대한 여부를 반환한다. 집합에서 단 하나라도 일치하는 항목이 존재한다면 “true”를 반환한다. 물론 일치하는 항목이 존재하지 않다면 “false”를 반환하게 된다.

$(document).ready(function () {

$("*").each(function () { // 전체(*) 태그의 인덱스를 각각(each) 가져옴

if ($(this).is("li")) { // li인 것만

$(this).css("border", "1px solid red");

}

});

예제)

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function() {

$("*").each(function() { // 전체(*) 태그의 인덱스를 각각(each) 가져옴

if ($(this).is("li")) { // li인 것만

$(this).css("border", "1px solid red");

}

});

</script>

</head>

<body>

</head>

<div>

<ul>

<li>list item 2

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

문제) 셀렉트에서 [1월]을 선택하면 1월 실적 배경을 오렌지로 , [2월]을 선택하면 2월 실적 배경을 오렌지로,

[선택]을 선택하면 원래상태로 되돌려라.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

function setLine() {

var ant = document.getElementById('ant');

var antIdx = ant.selectedIndex;

antIdx = antIdx + 1;

if (antIdx == 2) {

$("td").css("background", "white");

$("td:nth-child("+antIdx+")").css("background", "orange");

}

else if (antIdx == 3){

$("td").css("background", "white");

$("td:nth-child("+antIdx+")").css("background", "orange");

}

else if (antIdx == 1){

$("td").css("background", "white");

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</select>

</body>

</html>

5) .map(callback)

셀렉터를 통해 가져온 개체의 집합을 jQuery개체의 배열 형식으로 반환한다.

Callback 함수를 이용하면 셀렉터를 이용한 가져온 개체의 집합에서 원하는 작업을 진행하고 할당 작업의 결과를 jQuery의 배열 형식으로 반환 할 수 있다.

$(document).ready(function () {

var liText = $("li > ul").map(function (index) {

return "[(" + index + ")" + $(this).text() + "]"; // this는 가져온 데이터 자체. 문자열(text)로.

}).get().join(','); // 가져온 여러개의 데이터를 get()으로 배열로 쓸 수 있게 만들어주고

// join으로 배열 내용 사이에 콤마(,)를 넣어줌

$("#result").text(liText); });

※ text() 해당 객체의 내용을 문자열로 리턴

text(content) 해당 객체의 내용을 content로 변경

get(), join() 메서드는 집합(배열) 형식의 개체에 접근하는 방법과 join() 메서드의 인자 값으로 연결된 문자를 text()메서드는 셀렉터를 통해 가져온 개체의 text를 가져오는 역할

Value 값에 접근 하기 위핬서는 val()이라는 메서드를 사용.

위 예제는 “li” 요소를 선택 후 할당 개체의 text값을 map() 메서드를 통해 반환하고 있다

<html>

<head>

<title>jQuery Selector</title>

<style>

div,pre { background : #FFF; padding:10px; margin:10px; }

table { border:1px solid #AAA; }

td { border:1px solid #AAA; width:25px; height:25px; }

</style>

text() 해당 객체의 내용을 문자열로 리턴

text(contet) 해당 내용을 content로 변경

$(document).ready(function() {

var liText = $('li > ul').map(function(index){

return '['+index+ $(this).text() + ']';

}).get().join(',');

$('#result').text(liText);

});

</script>

</head>

<h2>jQuery 시작 Selector</h2>

<p>jQuery 에 대한 자세한 내용을 보려면 jquery.com 을 방문할 수 있다.</p>

<div>

<ul>

<li>list item 2

<ul>

</ul>

</li>

</ul>

</div>

<div>

Result : <span id="result"></span>

</div>

</body>

</html>

6) .slice(start, [end])

선택한 요소에서 start 번째에서 시작하고 end번째에서 끝나는 개체의 집합을 반환한다.

총 8개의 요소를 선택했다고 가정한다.

각 요소의 집합에 번호를 주면, 할당 인덱스는 0부터 시작이므로 0, 1, 2, 3, 4, 5, 6, 7이 된다.

1) .slice(2) 경우 : 2, 3, 4, 5, 6, 7에 할당하는 개체의 집합을 반환한다.

2) .slice(2,4) 경우 : 2, 3 에 할당하는 개체의 집합을 반환한다.

1)의 경우 0, 1, 2, 3, 4, 5, 6, 7 앞에서 2개의 집합을 제거 한다.

2)의 경우 0, 1, 2, 3, 4, 5, 6, 7 앞에서 2개의 집합을 동일하게 제거 후 4번째를 포함한 집합을 한번 더 제거 후 반환하게 된다.

<!DOCTYPE html>

<html>

<head>

<style>

div { width:40px; height:40px; margin:10px; float:left;

border:2px solid blue; }

span { color:red; font-weight:bold; }

button { margin:5px; }

</style>

</head>

<body>

<p><button>Turn slice yellow</button>

<span>Click the button!</span></p>

//$('div').slice(2,5).text('mydiv');

function colorEm() {

var $div = $("div");

var start = Math.floor(Math.random() * $div.length);

var end = Math.floor(Math.random() * ($div.length - start)) +

start + 1;

if (end == $div.length) end = undefined;

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

if (end)

$div.slice(start, end).css("background", "yellow");

else

$div.slice(start).css("background", "yellow");

$("span").text('$("div").slice(' + start + (end ? ', ' + end : '') + ').css("background", "yellow");');

// end에 값이 있으면 ,end) 없으면 ) 그냥 )를 닫는다.

}

$("button").click(colorEm); // button 태그를 찾아서 스크립트에서 클릭 했을 때 colorEm 메소드 호출

</script>

</body>

</html>

예제 출처 : Query 사이트

저작자표시

'jQuery' 카테고리의 다른 글

JQuery: find(), siblings() (0)	2016.02.19
JQuery: add(), andSelf(), contents(), end() (0)	2016.02.19
CSS로 패럴렉스 이펙트 + jQuary 추가 (0)	2016.02.05
JavaScript(jQuery)에서 패럴렉스 이펙트 (1)	2016.02.05
패럴렉스 스크롤(Parallax scrolling)에 관하여 (0)	2016.02.05