๐ป
JavaScript ์ ์ดํด - [jQuery] Selector(2) : ํํฐ ๋ณธ๋ฌธ
https://api.jquery.com/category/selectors/basic-filter-selectors/
Basic Filter | jQuery API Documentation
Select all elements that are in the progress of an animation at the time the selector is run. Select the element at index n within the matched set. Selects even elements, zero-indexed. See also :odd. Selects the first matched DOM element. Selects element i
api.jquery.com
10_BasicFilter.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - ๊ธฐ๋ณธ ํํฐ ์ ํ์</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:even").css("color","red"); //์ง์์ ํ(0๋ฒ์ง)
$("p:first").css("color","blue");
$("p:last").css("color","pink");
$("p:eq(2)").css("color","yellow"); //(๋ฒ์ง๊ฐ)
//class๊ฐ first์ธ ํ๊ทธ์ ์์ ์ค์ ์ง์๋ฒ์งธ liํ๊ทธ
$(".first > li:even").css("color", "blue");
//class๊ฐ first์ธ ํ๊ทธ์ ์์ ์ค์ ํ์๋ฒ์งธ liํ๊ทธ
$(".first > li:odd").css("color", "red");
$(".second > li:first").css("color", "red");
$(".second > li:last").css("color", "blue");
$(".second > li:eq(2)").css("color", "yellow");
//class๊ฐ third์ธ liํ๊ทธ์ 2๋ฒ์งธํ๊ทธ๋ณด๋ค ์ธ๋ฑ์ค๊ฐ ํฐ ๊ฒ ์ ํ
$(".third > li:gt(2)").css("color", "red");
//class๊ฐ third์ธ liํ๊ทธ์ 2๋ฒ์งธํ๊ทธ๋ณด๋ค ์ธ๋ฑ์ค๊ฐ ์์ ๊ฒ ์ ํ
$(".third > li:lt(2)").css("color", "blue");
//class๊ฐ third์ธ liํ๊ทธ์ 2๋ฒ์งธํ๊ทธ๊ฐ ์๋ ๊ฒ๋ค ์ ํ
$(".third > li:not(:eq(2))").css("font-size", "20px");
});
</script>
</head>
<body>
<p>1์</p>
<p>2์</p>
<p>3์</p>
<p>4์</p>
<p>5์</p>
<p>6์</p>
<p>7์</p>
<p>8์</p>
<p>9์</p>
<p>10์</p>
<p>11์</p>
<p>12์</p>
<br/><br/>
<div>
<ul class="first">
<li>์ฌ๊ณผ</li>
<li>๋ฐ๋๋</li>
<li>๋ธ๊ธฐ</li>
<li>๋ฉ๋ก </li>
</ul>
</div>
<div>
<ul class="second">
<li>์ง์ฅ๋ฉด</li>
<li>์ฐ๋</li>
<li>์งฌ๋ฝ</li>
<li>ํ์์ก</li>
</ul>
</div>
<div>
<ul class="third">
<li>์ปคํผ</li>
<li>์ฝ๋ผ</li>
<li>์ฌ์ด๋ค</li>
<li>ํํ</li>
<li>์ฐ์ </li>
</ul>
</div>
</body>
</html>
11_BasicFilter.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - ๊ธฐ๋ณธ ํํฐ ์ ํ์</title>
<style type="text/css">
.theme_hot {
width:300px;
background:#aaeeaa;
color:#404040
}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#content a:first').click(function(){
$('.theme_1 > li:eq(2)').addClass('theme_hot');
$('.theme_2 > li:eq(0)').addClass('theme_hot');
$('.theme_3 > li:eq(1)').addClass('theme_hot');
});
$('#content a:last').click(function(){
$('.theme_1 > li:eq(2)').removeClass('theme_hot');
$('.theme_2 > li:eq(0)').removeClass('theme_hot');
$('.theme_3 > li:eq(1)').removeClass('theme_hot');
})
});
</script>
</head>
<body>
<div>
<ul id="content">
<li><a href="#">์ธ๊ธฐ์ถ์ </a></li>
<li><a href="#">์ค๋น์ค์ธ ์ถ์ </a></li>
</ul>
</div>
<h2>์ฃผ์์ง์ญ๋ณ ์ถ์ ์ ๋ณด์๋ด</h2>
<ul class="theme">
<li>
<b>์์ธ๋ฐ ๊ทผ๊ต์ง์ญ</b>
<ul class="theme_1">
<li>๊ฐํ ๊ณ ๋ ค์ฐ ์ง๋ฌ๋ ์ถ์ </li>
<li>๊ณ ์ ๊ตญ์ ๊ฝ ๋ฐ๋ํ</li>
<li>์๋ฒ๋๋ ํค๋ฆฝ์ถ์ </li>
<li>์ฐ์ฒ ์ ๊ณก๋ฆฌ ๊ตฌ์๊ธฐ ์ถ์ </li>
</ul>
</li>
<li>
<b>๊ฐ์๋</b>
<ul class="theme_2">
<li>๊น์ ์ ๋ฌธํ์ </li>
<li>์ถ์ฒ ๋ง์ ์ถ์ </li>
</ul>
</li>
<li>
<b>์ถฉ์ฒญ๋</b>
<ul class="theme_3">
<li>๋ณด๋ น๋จธ๋์ถ์ </li>
<li>ํ์ ํ์ธ๋ฆฝ ๊ฝ ์ถ์ </li>
</ul>
</li>
<li>
<b>์ ๋ผ๋</b>
<ul class="theme_4">
<li>์ง๋ ์ ๋น์ ๋ฐ๋ท๊ธธ ์ถ์ </li>
<li>์์ฒ๋ง ๊ตญ์ ์ ์ ๋ฐ๋ํ</li>
<li>ํจํ ๋๋น ์ถ์ </li>
</ul>
</li>
</ul>
</body>
</html>
13_VisibilityFilter.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery - ๋ณด์ ํํฐ ์ ํ์</title>
<style type="text/css">
div {
width: 50px;
height: 40px;
margin: 5px;
border: 3px outset green;
float: left;
}
.div_hidden {
display: none;
}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
//๋ณด์ด์ง ์์ ๋ display:none, type(hidden), width/height(0)
$(document).ready(function(){
$('#btn').click(function(){
//1์ด๋์ ์ฒ์ฒํ ๋ณด์ฌ์ง๊ฒ ์๊ฐ์ ์ค์
$('div:hidden').show(1000);
});
//๋ณด์ฌ์ง๋ ๊ฑด visible
$('div:visible').click(function(){
$(this).css("background", "yellow");
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="๋ฒํผํด๋ฆญ"/>
<div></div>
<div></div>
<div class="div_hidden"></div>
<div></div>
<div style="display:none;"></div>
</body>
</html>
14_ContentFilter.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - ๋ด์ฉ ํํฐ ์ ํ์</title>
<style type="text/css">
body{
font-size:12px;
}
</style>
</head>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){ //var obj = new Jquery(document); obj.ready(abc);
$('li:contains("ap")').css({ //(๊ดํธ)์ ํ
์คํธ์ ์ผ์นํ๋ ๋ฌธ์์ด ์์
backgroundColor: '#9AB92E',
border:"1px solid #05184D"
});
$('#sub:has(li)').css({ //์์ ๋ด๋ถ์ ์ฐพ๊ณ ์ถ์ ํ๊ทธ๋ฅผ ํ์ ์์๊น์ง ์ฐพ์์ค๋ค.
backgroundColor: "#9AB92E",
border:"1px solid #05184D"
});
//๋น๋ถ๋ถ
$('li:empty').text("Hello");
//์ฑ์์ง๋ถ๋ถ
$('li:parent').css("color", "red");
});
</script>
<body>
<div>
<ul>
<li>apple</li>
<li>banana</li>
<li>grape</li>
<li></li>
</ul>
<ul id="sub">
<li>lion</li>
<li>tiger</li>
<li>fox</li>
<li></li>
</ul>
</div>
</body>
</html>
15_Attribute.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - ์์ฑ ์ ํ์</title>
<style type="text/css">
body{
font-size:12px;
}
.spotlight{
background-color:#ff0;
}
.redtext{
color:#f00;
}
.bluetext{
color:#00f;
}
.largetext{
font-size:30px;
}
.italctext{
font-style:italic;
}
.box{
border:3px solid #f00;
}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
$('span[id]').addClass('spotlight');
$('span[id=simpletext1]').addClass('redtext');
$('span[id!=simpletext1]').addClass('bluetext');
$('span[id^="complex"]').addClass('largetext'); //์์๋ถ๋ถ
$('span[id$="text1"]').addClass('italctext'); //๋๋๋๋ถ๋ถ
$('span[id*="text"]').addClass('box'); //ํฌํจ
});
</script>
</head>
<body>
<span id="simpletext1">SIMPLETEXT1</span>
<span class="simpletext2">SIMPLETEXT2</span>
<span id="complextext1">COMPLEXTEXT1</span>
<span id="complextext2">COMPLEXTEXT2</span>
<span id="complex">COMPLEX</span>
</body>
</html>
16_Validity.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - ์์ฑ ์ ํ์</title>
</head>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
$('input[type="text"]').val('๊ฐ์ ์
๋ ฅํ์ธ์');
$('input[type="text"]').click(function(){
$(this).val("");
});
$('input[id="btn"]').click(function(){
var arr = new Array();
var name = $('input[name="name"]').val();
var id = $('input[name="id"]').val();
var idType = $('input[name="id"]').attr('type');
$('input[name="id"]').attr("style", "color:red");
$('input[name="id"]').attr("size", "50");
arr.push(name);
arr.push(id);
arr.push(idType);
alert(arr);
});
var div = $('div:eq(0)').text();
alert(div);
$('div:eq(1)').text('์๋
ํ์ธ์');
});
</script>
<body>
<div>hi</div>
<div></div>
<div></div>
<form action="#" method="post">
<label>์ด๋ฆ</label>
<input type="text" id="name" name="name"/>
<br/><br/>
<fieldset>
<legend>ํ์์
๋ ฅ์ฌํญ</legend>
<label>์์ด๋</label>
<input type="text" id="id" name="id"/>
<label>๋น๋ฐ๋ฒํธ</label>
<input type="password" id="password" name="password"/>
</fieldset>
<br/><br/>
<label>
E-MAIL
<input type="text" id="email" name="email" />
</label>
<br/><br/>
<input type="button" id="btn" value="์
๋ ฅ"/>
</form>
</body>
</html>
17_Validity.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - ์์ฑ ์ ํ์</title>
</head>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
if($('#id').val()==""){
alert('์์ด๋๋ฅผ ์
๋ ฅํ์ธ์.');
$('#id').focus();
return;
}
if($('#name').val()==""){
alert('์ด๋ฆ์ ์
๋ ฅํ์ธ์.');
$('#name').focus();
return;
}
var str = $('input[name="gender"]:checked').val();
if(str==null){
alert('์ฑ๋ณ์ ์ฒดํฌํ์ธ์.');
return;
}
var value ="";
$('input[name="hobby"]:checked').each(function(index, element){
value+=$(this).val() + ",";
alert(value);
});
if(value==""){
alert('์ทจ๋ฏธ๋ฅผ ํ๊ฐ์ด์ ์ฒดํฌํ์ธ์.');
return;
}else{
$('input[name="hobbyResult"]').val(value);
}
$('form').submit();
});
});
</script>
<body>
<form action="#" method="get">
<label>์์ด๋</label>
<input type="text" id="id" name="id"/>
<br/><br/>
<label>์ด๋ฆ</label>
<input type="text" id="name" name="name"/>
<br/><br/>
<label>๋จ</label>
<input type="radio" name="gender" value="๋จ์" />
<label>์ฌ</label>
<input type="radio" name="gender" value="์ฌ์" />
<br/><br/>
<label>์์
</label>
<input type="checkbox" name="hobby" value="์์
"/>
<label>์๊ฐ</label>
<input type="checkbox" name="hobby" value="์๊ฐ"/>
<label>๋
์</label>
<input type="checkbox" name="hobby" value="๋
์"/>
<input type="hidden" name="hobbyResult"/>
<br/><br/>
<input type="button" id="btn" value="์ ์ก"/>
<input type="reset" value="์ทจ์"/>
</form>
</body>
</html>๋ฐ์ํ
'KITRI > JAVASCRIPT' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| JavaScript ์ ์ดํด - [jQuery] DOM ํจ์(2) (0) | 2020.07.22 |
|---|---|
| JavaScript ์ ์ดํด - [jQuery] DOM ํจ์(1) (0) | 2020.07.21 |
| JavaScript ์ ์ดํด - [jQuery] Selector(1) : ๊ธฐ๋ณธ, ์์(์์/ํ์ ) (0) | 2020.07.20 |
| JavaScript ์ ์ดํด - [AJAX] Kakao ์ง๋ Javscript API ์ด์ฉํด์ ์ง๋๊ทธ๋ฆฌ๊ธฐ (0) | 2020.07.20 |
| JavaScript ์ ์ดํด - [AJAX] ๊ธฐ์์ฒญ ๋ฐ์ดํฐ Parsing (0) | 2020.07.20 |
'KITRI/JAVASCRIPT' Related Articles
more
Comments