본문 바로가기
Front-End/jQuery

[jQuery] Selector

by 김뚱 2018. 8. 5.

1. #id

javascript = document.getElementById('intro')

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p id="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
</body>
<script>
document.getElementById('intro').style.backgroundColor = 'yellow';
</script>
</html>



jQuery : $('#intro')

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#intro').css('background-color', 'yellow');
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p id="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
</body>
</html>




2. .class

javascript : document.getElementByClassName('intro')

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<div class="intro">My name is Dolly.</div>
<p>I live in Duckburg.</p>
</body>
<script>
document.getElementsByClassName('intro')[0].style.backgroundColor = 'yellow';
document.getElementsByClassName('intro')[1].style.backgroundColor = 'yellow';
</script>
</html>



jQuery : $('.intro')


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.intro').css('background-color', 'yellow');
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<div class="intro">My name is Dolly.</div>
<p>I live in Duckburg.</p>
</body>
</html>




3. .class.class

javascript : document.getElementByClassName('intro')

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">This paragraph has class "intro".</p>
<p>This is a paragraph.</p>
<p class="demo">This paragraph has class "demo".</p>
<p>This is another paragraph.</p>
<p class="end">This paragraph has class "end".</p>
</body>
<script>
var intro = document.getElementsByClassName('intro')[0];
var demo = document.getElementsByClassName('demo')[0];
var end = document.getElementsByClassName('end')[0];
intro.style.backgroundColor = 'yellow';
demo.style.backgroundColor = 'yellow';
end.style.backgroundColor = 'yellow';
</script>
</html>



jQuery : $('.intro, .demo, .end')


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.intro, .demo, .end').css('background-color', 'yellow');
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">This paragraph has class "intro".</p>
<p>This is a paragraph.</p>
<p class="demo">This paragraph has class "demo".</p>
<p>This is another paragraph.</p>
<p class="end">This paragraph has class "end".</p>
</body>
</html>




4. element

javascript : document.querySelectorAll('p')

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
<script>
var list = document.querySelectorAll('p');
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = 'yellow';
}
</script>
</html>




jQuery : $('p')

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>



5. element1, element2, element3,...

javascript : document.getElementByTagName('h2')

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<h2>Nice to meet you</h2>
<div>Very nice indeed.</div>
<p>How are you?</p>
<p>I'm fine,
<span>thanks.</span>
</p>
</body>
<script>
document.getElementsByTagName('h2')[0].style.backgroundColor = 'yellow';
document.getElementsByTagName('div')[0].style.backgroundColor = 'yellow';
document.getElementsByTagName('span')[0].style.backgroundColor = 'yellow';
</script>
</html>



jQuery : $('h2, div, span')

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("h2, div, span").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<h2>Nice to meet you</h2>
<div>Very nice indeed.</div>
<p>How are you?</p>
<p>I'm fine,
<span>thanks.</span>
</p>
</body>
</html>



6. :first

javascript : document.getElementByTagName('p')[0]

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the last paragraph.</p>
</body>
<script>
document.getElementsByTagName('p')[0].style.backgroundColor = 'yellow';
</script>
</html>



jQuery : $('p:first')


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("p:first").css("background-color", "yellow");
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the last paragraph.</p>
</body>
</html>




7. :last

javascript : document.getElementByTagName('p')[2]

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the last paragraph.</p>
</body>
<script>
document.getElementsByTagName('p')[2].style.backgroundColor = 'yellow';
</script>
</html>




jQuery : $('p:last')

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:last").css("background-color", "yellow");
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the last paragraph.</p>
</body>
</html>




8. :even

javascript 


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</body>
<script>
isEven = function(n) {
if(n % 2 == 0) {
return false;
}
return true;
};
var count = document.getElementsByTagName('tr').length;
for (i = 0; i < count; i++) {
if(isEven(i)) {
document.getElementsByTagName('tr')[i].style.backgroundColor = 'yellow';
}
};
</script>
</html>




jQuery : $('tr:even')


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</body>
</html>




9. :odd

javascript 


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</body>
<script>
isEven = function(n) {
if(n % 2 == 0) {
return true;
}
return false;
};
var count = document.getElementsByTagName('tr').length;
for (i = 0; i < count; i++) {
if(isEven(i)) {
document.getElementsByTagName('tr')[i].style.backgroundColor = 'yellow';
}
};
</script>
</html>




jQuery : $('tr:odd')


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:odd").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</body>
</html>




10. :first-child 

Select every <p> element that is first child of its parent.

javascript 


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>The first paragraph in body.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<span>This is a span element.</span>
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>
<p>The last paragraph in body.</p>
</body>
<script>
document.body.firstElementChild.style.backgroundColor = 'yellow';
document.getElementsByTagName('div')[0].childNodes[1].style.backgroundColor = 'yellow';
</script>
</html>




jQuery : $('p:first-child')


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:first-child").css("background-color", "yellow");
});
</script>
</head>
<body>
<p>The first paragraph in body.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<span>This is a span element.</span>
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>
<p>The last paragraph in body.</p>
</body>
</html>




11. :first-of-type

Select every <p> element that is the first <p> element of its parent.

javascript

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>The first paragraph in body.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div>
<br>
<div style="border:1px solid;">
<span>This is a span element.</span>
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>
<p>The last paragraph in body.</p>
</body>
<script>
document.getElementsByTagName('body')[0].getElementsByTagName('p')[0].style.backgroundColor = 'yellow';
document.getElementsByTagName('div')[0].firstElementChild.style.backgroundColor = 'yellow';
document.getElementsByTagName('div')[1].getElementsByTagName('p')[0].style.backgroundColor = 'yellow';
</script>
</html>



jQuery : $('p:first-of-type')


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("p:first-of-type").css("background-color", "yellow");
});
</script>
</head>
<body>
<p>The first paragraph in body.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div>
<br>
<div style="border:1px solid;">
<span>This is a span element.</span>
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>
<p>The last paragraph in body.</p>
</body>
</html>




12. :last-child

Select every <p> element that is the last child of its parent.

javascript

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>The first paragraph in body.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
<span>This is a span element.</span>
</div>
<p>The last paragraph in body.</p>
</body>
<script>
document.getElementsByTagName('div')[0].lastElementChild.style.backgroundColor = 'yellow';
var count = document.getElementsByTagName('p').length - 1;
document.getElementsByTagName('p')[count].style.backgroundColor = 'yellow';
</script>
</html>



jQuery : $('p:last-child')

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:last-child").css("background-color", "yellow");
});
</script>
</head>
<body>
<p>The first paragraph in body.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
<span>This is a span element.</span>
</div>
<p>The last paragraph in body.</p>
</body>
</html>




13. :last-of-type

Select every <p> element that is the last <p> element of its parent.

javascript

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>The first paragraph in body.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
<span>This is a span element.</span>
</div>
<p>The last paragraph in body.</p>
</body>
<script>
var count = document.getElementsByTagName('body')[0].getElementsByTagName('p').length - 1;
document.getElementsByTagName('body')[0].getElementsByTagName('p')[5].style.backgroundColor = 'yellow';
document.getElementsByTagName('div')[0].lastElementChild.style.backgroundColor = 'yellow';
document.getElementsByTagName('div')[1].getElementsByTagName('p')[1].style.backgroundColor = 'yellow';
</script>
</html>




jquery : $('p:last-of-type')

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:last-of-type").css("background-color", "yellow");
});
</script>
</head>
<body>
<p>The first paragraph in body.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
<span>This is a span element.</span>
</div>
<p>The last paragraph in body.</p>
</body>
</html>





참조 : https://www.w3schools.com/jquery/jquery_ref_selectors.asp

728x90
반응형

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] checkbox relation 만들기 (dataset object concept)  (0) 2018.09.09
[jQuery] onchange() : 요소의 값이 변경될 때 발생  (0) 2018.09.09
[jQuery] .is() : 선택한 요소 중 하나가 selectorElement와 일치하는지 확인  (0) 2018.09.09
[jQuery] .not() : 특정 Element를 제외한 나머지 Element 선택하기  (0) 2018.09.09
[jQuery] attr(), prop() 차이점  (0) 2018.08.18

관련글

댓글

티스토리툴바