[jQuery] 기본기 갖추기 1
필그램
·2017. 11. 1. 02:05
jQuery의 기본기능을 설명하고자 한다.
각 라인 뒤의 //(주석) 뒤의 번호라인을 설명을 위한 숫자이다.
<script type="text/javascript">
$("document").ready(function() { //0
$("p").css("border", "3px solid red"); //1
$(".selectors").css("border", "3px solid red"); // 2 .selectors는 클래스
$("#intro").css("border", "3px solid red"); //3
$("p:first").css("border", "3px solid red"); //4
$("h2:not(.selectors)").css("border", "3px solid red"); //5
});
</script>
0라인 $("document").ready(function() 은 jQuery를 시작하는 문장이다.
이 문장의 아래 적용내용에서
각 라인을 제외하고, 나머지를 주석처리하면 적용내용을 볼 수 있다.
먼저 $(" ") 에서 #을 쓰면 특정 id이고 .(점)을 쓰면 특정 클래스를 지정하는 것이다.
$("p").css("border", "3px solid red");
은 html의 <p>부분을 전체 3픽셀의 빨간줄로 테둘이 하는 것이다.
$(".selectors").css("border", "3px solid red");
id 가 셀렉터인 부분의 css를 빨간 테둘이로...
$("#intro").css("border", "3px solid red");
클래스가 intro인 부분의 css를 빨간 테둘이로..
$("p:first").css("border", "3px solid red");
html 의 첫번째 <p>의 css를 빨간 테둘이로..
second는 없다. ㅎㅎ
$("h2:not(.selectors)").css("border", "3px solid red");
h2의 아이디가 .selectors가 아닐경우 css를 빨간 테둘이로..
[전체 코드]
jQuery 부분의 주석을 한줄씩 지우고 테스트해 보세요
<!DOCTYPE html>
<html>
<head>
<title>Selectors and Filters</title>
<!--<link rel="stylesheet" href="../style.css" />-->
<script type="text/javascript" src="../jquery-3.0.0.js"></script>
<script type="text/javascript">
$("document").ready(function() {
// $("p").css("border", "3px solid red");
// $(".selectors").css("border", "3px solid red");
// $("#intro").css("border", "3px solid red");
// $("p:first").css("border", "3px solid red");
// $("h2:not(.selectors)").css("border", "3px solid red");
});
</script>
</head>
<body>
<h1 id="intro">Introduction to jQuery Selectors and Filters</h1>
<div id="content">
<p>Selectors and Filters provide a way of finding and extracting information from Web pages.</p>
<h2 class="selectors">Selectors</h2>
<p>Selectors are used to select parts of the Web page using a common CSS-style syntax.</p>
<p>For example, <code>$("p")</code> will select all of the paragraph tags in a document and return them as a list that
can be further operated upon.</p>
<h2 class="filters">Filters</h2>
<p>Filters are used to further refine the results returned from selectors.</p>
<p>For example, <code>$("p:first")</code> will select the first paragraph in the returned set from <code>$("p")</code>.</p>
</div>
</body>
</html>
이후의 설명을 위한 css파일은 내용은 아래와 같다
body {
font-family: "Open Sans", sans-serif;
font-size: 12pt;
margin: 0;
line-height: 1.2em;
}
body > h1 {
background-color: #33d;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
margin:0;
padding-left: 10pt;
padding-right: 10pt;
padding-top:25pt;
padding-bottom: 15pt;
box-shadow: 0px 5px 5px 0px rgba(171,171,171,1);
}
#content {
margin: 10pt;
}
#example {
border: 1px solid gray;
background-color: #b3c8d0;
font-size:14pt;
padding-left: 10pt;
padding-right: 10pt;
min-height: 200px;
}
.box {
border: 1px solid gray;
background-color: #b3c8d0;
font-size:14pt;
padding-left: 10pt;
padding-right: 10pt;
min-height: 200px;
width: 300px;
}
.box p {
margin: 0 1pt 0 2pt
}
.smallbox {
border: 1px solid gray;
background-color: #b3c8d0;
font-size:14pt;
padding-left: 10pt;
padding-right: 10pt;
margin-bottom: 10pt;
margin-right: 0;
margin-left: 0;
min-height: 150px;
width: 200px;
}
.inline {
display: inline-block;
}
code {
background-color: #e8e8e8;
border: 1px solid #a8a8a8;
border-radius: 3px;
padding: 1pt 2pt;
margin: 2pt;
font-family: "source-code-pro", Consolas, monospace;
font-size: .9em;
}
li {
line-height: 1.3em;
}
button {
font-size: 14pt;
margin: 8px;
}
#eventDetails {
border: 1px solid #aaa;
margin-top: 8pt;
padding: 2pt;
}
.lineitem {
width: 120px;
display: inline-block
}
'프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 애니메이션 구현하기 (0) | 2017.11.01 |
|---|---|
| [jQuery] 제이쿼리 환경설정 (0) | 2017.11.01 |
| [jquery] 이벤트 핸들링 (0) | 2017.11.01 |
| [jquery] 컨텐츠 내용 생성 및 수정 (0) | 2017.11.01 |
| jQuery를 WebStorm(웹스톰)에 설정하기 (0) | 2017.11.01 |
