컴퓨터 프로그래밍/JQuery
JQuery Selector
깝돌이
2020. 5. 30. 12:38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>selector</title>
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//h1 tag and p tag를 선택하면 한꺼번에 선택자로 지정
$('h1, p').css('color', 'orange');
//div tag의 자식인 p tag를 선택자로 지정 컬러 red
$('div p').css('color', 'red');//$('div>p')이것도 됨
//3의 p tag 중에서... 첫번째 p tag를 선택자로 지정.... 배경색을 gray
//$('p:first').css('background', 'gray');
//$('p').first().css('background', 'gray');
//$('p:last').css('background', 'gray');
//$('p').last().css('background', 'gray');
$('p:eq(0)').css('background', 'gray');
//p인데, id가 paragraph
$('p#paragraph').css('border', '1px solid green');
//p의 자식중에 id가 paragraph인놈
/*$('p #paragraph').css('border', '1px solid green');*/
$('p.statement').css('border', '1px solid blue');//공통적으로 statement로 적용하고,
$('.item').css('color', 'red'); //독자적으로 item으로 또 적용합니다.
});
</script>
</head>
<body>
<h1>What is jQuery?</h1>
<div>
<p>Query is a fast, small, and feature-rich JavaScript library.</p>
</div>
<p id="paragraph">It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.</p>
<p class="statement">With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.</p>
<p class="statement item">With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1. body tag의 모든 자식을 선택자로 지정(color:purple)
$('body *').css('border', '1px solid purple');
//$('body>*').css('border', '1px solid purple');//두개 차이가 많이 납니다. 자식인지 직계인지 잘 구분해서 써야합니다.
//$('body').css('border', '1px solid purple');
});
</script>
</head>
<body>
<div>
<ul>
<li>Apple</li>
<li>Grape</li>
<li>Banana</li>
<li>Orange</li>
<li>Melon</li>
<li>Peach</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>s</title>
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
///1.
$('input[type=text]').val('hello jquery!!!');//input은 form field입니다. JQuery val()은 자바스크립트 value 필드와 같습니다.
$('input:text').val('hello jquery');// 모든 텍스트 박스에 다 들어갑니다.
//2. 속성이 name이고 값으로 한국이 포함되어 있는 선택자를 지정하고, 배경색을 yellow로 합니다.
//$('input[name~=한국]').css('background','yellow');//단어로서 포함되어져 있어야한다.
$('input[name*=한국]').css('background','yellow'); //단어가 아니라 그 글이 있으면 됨.
//3. 속성값이 사람으로 끝나는 선택자를 지정... 색깔을 red $
$('input[value$=사람]').css('color','red');
//4.ko로 시작하는 사람
$('input[value^=KO]').css('color','blue');
});
</script>
</head>
<body>
<h3>폼 속성</h3>
<input type ="text">
<input name = "한국" value = "한국">
<input name = "한국인" value = "한국인">
<input name = "한국 민" value = "한국 민">
<input name = "대 한국 민" value = "대 한국 민">
<br/><hr><br/>
<input type ="text">
<input id = "한국" value = "한국사람">
<input id = "한국인" value = "KO한국인">
<input id = "한국 민" value = "한국 민">
<input id = "대 한국 민" value = "대 한국 민">
<br/><hr><br/>
</body>
</html>