▼웹 개발자로 살기
- .css() 이용하여 버튼 보이지 않도록 하기 2016.07.11
- 체크박스 전체 개수, 선택 개수 구하기 2016.07.07
- 자바스크립트 체크박스의 .attr(), .prop() 차이는 뭘까? 2016.07.07
- 부트스트랩 modal 다른 페이지 내용 불러오기 2016.07.07
- 부트스트랩 modal 사용하기 2016.07.07 1
- API 작성을 도와주는 Javadoc 2016.07.06
- 자바스크립트 체크박스 전체선택, 전체해제 하고 삭제하기 2016.06.28 6
- jQuery 폼요소 선택하기 (Selecting Form Elements) 2016.05.23 1
- jQuery 요소 선택하기 2016.05.23
- jQuery Attributes(요소의 속성) getter/setter 2016.05.23
<button> 하나만으로는 jQuery의 .show(), .hide(), .css() 메소드가 먹히지 않는다.
<button> 이외에 elements 들도 마찬가지로 먹히지 않았다.
왜지...
jQuery API를 다시 정독해야겠다... 반만 알고 반은 모르니 이런 고생을 사서 하는구나...
때문에, wrapper 역할을 하는 div영역을 버튼 겉에 한번 감싸줬고, (display:none을 기본으로)
스크립트에서는 .css() 를 제어하는 방법으로 소스를 짰다.
제이쿼리 .css() 메소드는.. 문법을 잘 써야 된다.
속성이름과 값 모두 따옴표로 감싸줘야함.
HTML
|
1
2
3 |
<div id="divBtnDelete" style="display: none;">
<button type="button" name="btnDelete" id="btnDelete" onclick="goDelete();">전체삭제</button>
</div> |
cs |
button을 감싸는 div영역. 기본 속성은 보이지 않도록.
Script
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
$(document).ready(function() {
if ($("#wtype").val() == "build_edit") {
//같은 의미(propertyName, value 둘 다 따옴표로 감싸줘야 함)
$("#divBtnDelete").css("display", "inline");
//같은 의미(일반적인 style 작성방법)
$("#divBtnDelete").css({
display: "inline"
});
};
}) |
cs |
필요한 상황에서 div영역의 display 속성을 바꿔 화면에 보이도록 하는 스크립트.
.show(), .hide()를 사용해도 되는데, 깨지는 경향이 있어 .css() 메소드로 display 속성을 제어하도록 했다.
5번처럼 한 줄에 적어도 되고 (속성명과 값 모두 쌍따옴표로 감싸기... 이 미묘한 차이 때문에 됐다 안됐다 골치아프게 됨 ㅠ)
8~10번처럼 나열해서 적어도 된다.
참고 :
https://learn.jquery.com/using-jquery-core/css-styling-dimensions/
버튼 제이쿼리로 disabled 제어하기
1 | $("#btnReqOk").attr("disabled", "disabled"); | cs |
'3.자바스크립트 > jQuery' 카테고리의 다른 글
| jQuery 폼요소 선택하기 (Selecting Form Elements) (1) | 2016.05.23 |
|---|---|
| jQuery 요소 선택하기 (0) | 2016.05.23 |
| jQuery Attributes(요소의 속성) getter/setter (0) | 2016.05.23 |
참고 : http://kudolove.tistory.com/548
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
//checkbox의 전체 갯수와 선택된 갯수 구하기
//전체 갯수
$("input:checkbox[name=NAME명]").length
//선택된 갯수
$("input:checkbox[name=NAME명]:checked").length
//전체 checkbox 순회하기
$("input:checkbox[name=NAME명]").each(function() {
this.checked = true;
});
|
cs |
참고 : http://javascriptandjquerydev.blogspot.kr/2012/07/attr-prop.html
체크박스 제어할 때 늘 attr, prop 차이가 궁금했는데 위 사이트에서 설명이 잘 되어 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
//하나더 예를 들어보겠습니다. 체크박스의 checked의 대하여 입니다.
<checkbox id="private" type="checkbox" checked />
//체크박스의 checked의 값을 확인합니다.
var $checkbox = $('#private');
alert($checkbox.attr('checked')); // checked속성의 값을 표시 → "checked"
alert($checkbox.prop('checked')); // checked프로파티값을 표시 → true
//또 화면의 체크박스를 클릭하여 체크를 해제해보겠습니다.
//•.attr() → "checked"
//•.prop() → false
//.attr()의 경우는 변하지않습니다. 체크가 되어있는지 판단을 할경우 .prop()을 사용할 필요가 있습니다. |
cs |
체크박스를 전체 선택하고 해제하는 스크립트를 쓰려면 .prop()로 true/false 를 제어하자.
'3.자바스크립트 > JavaScript' 카테고리의 다른 글
| 열기, 닫기 클릭 시 div 보였다 안보였다 하게 하기 (0) | 2017.03.08 |
|---|---|
| 테이블 tr, td 등 선택하기 (0) | 2017.03.03 |
| 커서치면 아래에 뜨게 하기 (0) | 2016.08.12 |
| 인터넷 익스플로러에서만 개체가 'includes' 속성이나 메서드를 지원하지 않습니다 에러 발생 (1) | 2016.07.12 |
| Ajax (0) | 2016.05.12 |
아.. 모달 옵션 중 remote 가 부트스트랩 버전에 따라 사용이 불가능해지면서 jQuery.load 를 쓰라고 나와있어 검색을 엄청 해봤는데ㅠ
<a> 태그 href=url 은 스프링 프레임워크 url 로 호출해야 하고...
jsp화면 뿌리는건 또 Tiles로 이루어져 있어서...
엄청 헤매고 헤매다 시간만 하루가 멀다하고 허비하는 바람에 거의 포기 하고 있었는데...
이제서야 ㅠ 원하는대로 됐다...
어떻게 보면 엄청 간단한건데 기초가 부실하니 의미없는 타이핑과 새로고침만 하고 있었음..
참고 : http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=modal-with-remote-url
핵심은...
모달을 부르는 원래페이지에서는 .modal-content 까지만 선언하고...
서브페이지에는 .modal-head, .modal-body, .modal-footer 만 있으면 된다는거.
모달 부르는 jsp
|
1
2
3
4
5
6
7
8
9
10
11 |
<a data-toggle="modal" href="testForm.do" data-target="#modal-testNew" role="button" data-backdrop="static">
<span class="btn btn-xs btn-success">테스트 등록</span>
</a>
<div id="modal-testNew" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="테스트정보 등록" aria-describedby="테스트 모달">
<div class="modal-dialog" style="width:1200px;height:700px">
<div class="modal-content">
</div>
</div>
</div> |
cs |
모달 본체 jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">×</button>
<h3 class="smaller lighter blue no-margin modal-title">검수정보 등록</h3>
</div>
<div class="modal-body">
테스트입니다.
</div>
<div class="modal-footer">
<span class="btn btn-sm btn-warning" id="testDel">
전체삭제<i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
</span>
<span class="btn btn-sm btn-success" id="testSave">
저장<i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
</span>
<button class="btn btn-sm btn-danger pull-right" data-dismiss="modal" id="btnClose">
<i class="ace-icon fa fa-times"></i>닫기
</button>
</div> |
cs |
스프링 프레임워크 java
|
1
2
3
4
5
6
7
8
9 |
@RequestMapping(value="/testForm", method=RequestMethod.GET)
public String testForm(HttpServletRequest request, @RequestParam Map<String, Object> param, Model model) throws Exception {
if (!adminMemberService.isPermit(AdminMember.WEB)) {
return "/admin/permission.noTiles";
} else {
model.addAttribute("permission", adminMemberService.getPermission());
}
return "/admin/sale/testForm.noTiles";
} |
cs |
'2.마크업언어' 카테고리의 다른 글
| 부트스트랩 modal 사용하기 (1) | 2016.07.07 |
|---|
w3schools나 bootstrap 공식홈페이지를 잘 참고하고 있지만, 매번 까먹어서 이참에 정리를 해본다.
모달에 트리거를 거는 방법은 두 가지가 있다.
<a>태그나 <button>, 혹은 다른 element 에 data-toggle, data-target 옵션을 걸어 띄우거나
자바스크립트를 직접 작성하여 띄울 수 있다.
먼저 id="myModal"은 아래와 같고,
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> |
cs |
myModal을 띄우는 두 가지 방법은 아래에서 좀 더 자세하게 알아보자.
<a>태그나 <button>, 혹은 다른 element 에 data-* 속성 사용해서 모달 띄우기 (출처: w3schools)
|
1
2
3
4
5
6
7
8 |
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p> |
cs |
이때, data-toggle 옵션은 항상 필요하며
<a>태그의 경우에만 data-target 대신 href 를 사용할 수 있다.
만약 배경을 클릭해도 모달이 닫히지 않게 하려면 data-backdrop="static" 같은 옵션을 이 때 써도 된다.
별도의 자바스크립트는 필요하지 않다.
자바스크립트로 띄우기 (출처: w3schools)
html
|
1 |
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button> |
cs |
별도의 data-* 속성들은 사용하지 않는다.
JavaScript
|
1
2
3
4
5
6
7 |
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script> |
cs |
모달은 아래 클래스들의 div영역들이 모여서 만들어진다.
- .modal
- .modal-dialog
- .modal-content
- .modal-header
- .modal-body
- .modal-footer
.modal
여러 div가 모여 이뤄진 모달에서 부모div이다.
모달들간 구별을 위해 id를 지어줘야 한다. 이 id는 트리거영역의 data-target에 오는 id이다. (예. myModal)
화면에서 focus를 가져오는 역할을 한다. 따라서 모달을 닫을때 애니메이션 효과를 주는 클래스 .fade 를 넣을 수 있다.
화면을 보는사람들에게 좀더 접근을 쉽게 하기 위해 role="dialog" 속성을 줄 수 있다.
(출처: bootstrapk.com)
|
1 |
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
cs |
role="dialog", aria-labelledby="myModalLabel" -> 모달 제목을 알린다
aria-hidden="true" -> 모달의 DOM 요소를 건너뛰는 것을 보조 공학에게 전달하기 위해
aria-describedby -> 모달 다이얼로그의 설명을 넣을 수 있다
.modal-dialog
모달의 width, height 가로세로 크기를 결정한다.
모달의 크기를 조절하는 클래스는 .modal-sm, .modal-lg 가 있다. (Default는 medium 사이즈다.)
(출처: w3schools)
|
1 |
<div class="modal-dialog modal-sm"> |
cs |
|
1 |
<div class="modal-dialog" role="document"> |
cs |
role="document" -> 무슨 역할인지...
.modal-content
모달의 스타일(border, background-color 등)을 결정한다.
.modal-content 안에는 모달의 헤더, 바디, 푸터가 온다.
.modal-header
|
1
2
3
4
5 |
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div> |
cs |
class="close" -> x 버튼 스타일 결정
data-dismiss="modal" -> x아이콘을 클릭하면 모달이 닫히도록 한다
class="modal-title" -> 헤더에 적당한 line-height 스타일을 결정
.modal-body
마크업언어를 자유롭게 쓸 수 있다.
부트스트랩 그리드를 이용하려면 .row 를 사용하면 된다.
(출처: getbootstrap.com)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 |
<div class="modal-body">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</div> |
cs |
.modal-footer
오른쪽 정렬이 기본이다.
modal 전체 소스 (출처: bootstrapk.com)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> |
cs |
'2.마크업언어' 카테고리의 다른 글
| 부트스트랩 modal 다른 페이지 내용 불러오기 (0) | 2016.07.07 |
|---|
Javadoc은 API 문서에 대한 코멘트의 효율성을 높여주는 툴이다.
(DTD만 생각나고 Javadoc은 생각이 안 나서 한참을 검색함... '자바 주석 표준', '문서화 주석'이라고도 하는가보다.)
예를들면 클래스나 메소드에 마우스 포인트 갖다대면 뜨는 이런거..
Javadoc을 쓰려면 몇 가지 작성규칙을 따라야 한다.
예를 들면 첫번째 줄은 /** 로 시작해야 한다든지.
주석처리 입력하듯이 /** 엔터만 쳐도 템플릿이 자동완성 되긴 하지만,
이클립스 단축키 Alt+Shift+J 를 사용하면 좀 더 다양한 양식을 활용할 수 있다.
Javadoc 양식은 이클립스 Window>Preferences>Java>Code Style>Code Templates 에서 설정할 수 있다.
골뱅이(@)가 붙는 태그는 아래와 같은 종류, 순서를 따른다.
클래스, 인터페이스, 메소드를 구분하니 적절하게 잘 사용해야겠다.
자세한 정보는 오라클 사이트에서 제공하고 있다. (http://www.oracle.com/technetwork/java/javase/documentation/index-137868.html)
@author (classes and interfaces only, required)
@version (classes and interfaces only, required. See footnote 1)
@param (methods and constructors only)
@return (methods only)
@exception (@throws is a synonym added in Javadoc 1.2)
@see
@since
@serial (or @serialField or @serialData)
@deprecated (see How and When To Deprecate APIs)
오라클에서 제공하는 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120 |
/**
* Graphics is the abstract base class for all graphics contexts
* which allow an application to draw onto components realized on
* various devices or onto off-screen images.
* A Graphics object encapsulates the state information needed
* for the various rendering operations that Java supports. This
* state information includes:
* <ul>
* <li>The Component to draw on
* <li>A translation origin for rendering and clipping coordinates
* <li>The current clip
* <li>The current color
* <li>The current font
* <li>The current logical pixel operation function (XOR or Paint)
* <li>The current XOR alternation color
* (see <a href="#setXORMode">setXORMode</a>)
* </ul>
* <p>
* Coordinates are infinitely thin and lie between the pixels of the
* output device.
* Operations which draw the outline of a figure operate by traversing
* along the infinitely thin path with a pixel-sized pen that hangs
* down and to the right of the anchor point on the path.
* Operations which fill a figure operate by filling the interior
* of the infinitely thin path.
* Operations which render horizontal text render the ascending
* portion of the characters entirely above the baseline coordinate.
* <p>
* Some important points to consider are that drawing a figure that
* covers a given rectangle will occupy one extra row of pixels on
* the right and bottom edges compared to filling a figure that is
* bounded by that same rectangle.
* Also, drawing a horizontal line along the same y coordinate as
* the baseline of a line of text will draw the line entirely below
* the text except for any descenders.
* Both of these properties are due to the pen hanging down and to
* the right from the path that it traverses.
* <p>
* All coordinates which appear as arguments to the methods of this
* Graphics object are considered relative to the translation origin
* of this Graphics object prior to the invocation of the method.
* All rendering operations modify only pixels which lie within the
* area bounded by both the current clip of the graphics context
* and the extents of the Component used to create the Graphics object.
*
* @author Sami Shaio
* @author Arthur van Hoff
* @version %I%, %G%
* @since 1.0
*/
public abstract class Graphics {
/**
* Draws as much of the specified image as is currently available
* with its northwest corner at the specified coordinate (x, y).
* This method will return immediately in all cases, even if the
* entire image has not yet been scaled, dithered and converted
* for the current output device.
* <p>
* If the current output representation is not yet complete then
* the method will return false and the indicated
* {@link ImageObserver} object will be notified as the
* conversion process progresses.
*
* @param img the image to be drawn
* @param x the x-coordinate of the northwest corner
* of the destination rectangle in pixels
* @param y the y-coordinate of the northwest corner
* of the destination rectangle in pixels
* @param observer the image observer to be notified as more
* of the image is converted. May be
* <code>null</code>
* @return <code>true</code> if the image is completely
* loaded and was painted successfully;
* <code>false</code> otherwise.
* @see Image
* @see ImageObserver
* @since 1.0
*/
public abstract boolean drawImage(Image img, int x, int y,
ImageObserver observer);
/**
* Dispose of the system resources used by this graphics context.
* The Graphics context cannot be used after being disposed of.
* While the finalization process of the garbage collector will
* also dispose of the same system resources, due to the number
* of Graphics objects that can be created in short time frames
* it is preferable to manually free the associated resources
* using this method rather than to rely on a finalization
* process which may not happen for a long period of time.
* <p>
* Graphics objects which are provided as arguments to the paint
* and update methods of Components are automatically disposed
* by the system when those methods return. Programmers should,
* for efficiency, call the dispose method when finished using
* a Graphics object only if it was created directly from a
* Component or another Graphics object.
*
* @see #create(int, int, int, int)
* @see #finalize()
* @see Component#getGraphics()
* @see Component#paint(Graphics)
* @see Component#update(Graphics)
* @since 1.0
*/
public abstract void dispose();
/**
* Disposes of this graphics context once it is no longer
* referenced.
*
* @see #dispose()
* @since 1.0
*/
public void finalize() {
dispose();
}
} |
cs |
참고
Javadoc Tool
http://www.oracle.com/technetwork/java/javase/documentation/index-jsp-135444.html
'1.자바 > Java' 카테고리의 다른 글
| HttpClient, HttpPost, HttpResponse, HttpEntity 사용하기 (0) | 2016.08.12 |
|---|---|
| MultiValueMap, RestTemplate, HttpEntity 이용하기 (0) | 2016.08.12 |
| 자바 AES 256 암호화 복호화 (4) | 2016.08.09 |
| 자바 공백 검수 쉽게 하기 (0) | 2016.05.16 |
| Java 개발환경 설정 (Java 프로그램 실행 환경 이해하기) (0) | 2016.05.08 |
HTML
|
1
2
3
4
5
6
7
8
9 |
<thead>
<tr>
<th><input type="checkbox" name="checkAll" id="th_checkAll" onclick="checkAll();"/></th>
</tr>
</thead>
<tbody>
<tr>
<td class="center"><input type="checkbox" name="checkRow" value="${content.IDX}" /></td>
</tbody> |
cs |
thead 에 전체선택/전체해제용 체크박스 'checkAll' 를 만들고 클릭하면 checkAll() 를 타도록 함.
tbody 에는 각 행마다 체크박스 'checkRow' 만들어줌.
JavaScript
|
1
2
3
4
5
6
7
8 |
/* 체크박스 전체선택, 전체해제 */
function checkAll(){
if( $("#th_checkAll").is(':checked') ){
$("input[name=checkRow]").prop("checked", true);
}else{
$("input[name=checkRow]").prop("checked", false);
}
} |
cs |
thead 에 위치한 전체선택/전체해제용 체크박스를 클릭하면 타는 checkAll() 은 .prop() 를 통해 'checkRow' 이름을 가진 모든 체크박스들을 일괄 제어하는 내용이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 |
/* 삭제(체크박스된 것 전부) */
function deleteAction(){
var checkRow = "";
$( "input[name='checkRow']:checked" ).each (function (){
checkRow = checkRow + $(this).val()+"," ;
});
checkRow = checkRow.substring(0,checkRow.lastIndexOf( ",")); //맨끝 콤마 지우기
if(checkRow == ''){
alert("삭제할 대상을 선택하세요.");
return false;
}
console.log("### checkRow => {}"+checkRow);
if(confirm("정보를 삭제 하시겠습니까?")){
//삭제처리 후 다시 불러올 리스트 url
var url = document.location.href;
var page = $("#page").val();
var saleType = $("#saleType").val();
var schtype = $("#schtype").val();
var schval = $("#schval").val();
location.href="${rc.contextPath}/test_proc.do?idx="+checkRow+"&goUrl="+url+"&page="+page+"&saleType="+saleType+"schtype="+schtype+"schval="+schval;
}
} |
cs |
전체선택한 체크박스를 일괄 삭제하기 위해 Spring 프레임워크에 넘길 값을 세팅하는 내용이다.
컨트롤러에는 체크박스 값들을 배열로 넘기거나 하지 않고 문자열들을 콤마로 조합해서 하나의 문자 변수로 보낸다.
예) checkRow = 1, 2, 3, 4
컨트롤러나 서비스단에서 콤마를 구분자로 split 하여 for문 돌려서 쿼리를 돌리는 식으로 처리한다.
Java
|
1
2
3
4
5
6 |
//체크박스로 여러개 삭제하는 기능 추가.
String[] arrIdx = paramMap.get("idx").toString().split(",");
for (int i=0; i<arrIdx.length; i++) {
testMapper.delete(Integer.parseInt(arrIdx[i]));
} |
cs |
split() 을 이용해 콤마를 기준으로 값을 쪼개도록 하고, 그 쪼갠 값들을 배열 arrIdx에 담아 for문을 돌려 일일이 처리 되도록 한다.
jQuery는 폼 요소들을 찾는 것을 도와주기 위해 몇 가지 가상 선택자를 제공한다.
특히 폼요소 각각의 상태 또는 타입을 구분하기가 어려운데, 이것을 도와준다.
<상태로 구분해서 선택하기>
:checked
|
1 |
$( "form :checked" ); |
cs |
:checked 의 타겟은 :checkbox 가 아니라 "선택된" 체크박스(라디오 버튼, select 박스)이다.
(select 박스는 :selected 선택자도 사용 가능)
:disabled
|
1 |
$( "form :disabled" ); |
cs |
어떤 <input> 요소들이던지 disabled 속성을 가지고 있으면 다 타겟으로 한다.
:enabled
|
1 |
$( "form :enabled" ); |
cs |
:input
|
1 |
$( "form :input" ); |
cs |
input, textarea, select, button 요소를 타겟으로 하는 선택자이다.
:selected
|
1 |
$( "form :selected" ); |
cs |
option 요소가 있는 항목이면 타겟으로 한다.
<타입으로 구분해서 선택하기>
:password
:reset
:radio
:text
:submit
:checkbox
:button
:image
:file
http://learn.jquery.com/using-jquery-core/selecting-elements/
'3.자바스크립트 > jQuery' 카테고리의 다른 글
| .css() 이용하여 버튼 보이지 않도록 하기 (0) | 2016.07.11 |
|---|---|
| jQuery 요소 선택하기 (0) | 2016.05.23 |
| jQuery Attributes(요소의 속성) getter/setter (0) | 2016.05.23 |
어떤 요소를 선택하고, 그걸로 어떤 작업을 하는 것이 jQuery의 가장 기본적인 개념이다.
이때, 어떤 요소를 "선택"하는 방법은 아래와 같다.
(jQuery는 대부분의 CSS3 선택자를 지원한다.)
ID로 선택하기
|
1 |
$( "#myId" ); // Note IDs must be unique per page. |
cs |
클래스 이름으로 선택하기
|
1 |
$( ".myClass" ); |
cs |
속성으로 선택하기
|
1 |
$( "input[name='first_name']" ); |
cs |
CSS 선택자로 선택하기
|
1 |
$( "#contents ul.people li" ); |
cs |
콤마 구분자로 선택하기
|
1 |
$( "div.myClass, ul.people" ); |
cs |
가상 선택자
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
$( "a.external:first" );
$( "tr:odd" );
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
// All except the first three divs.
$( "div:gt(2)" );
// All currently animated divs.
$( "div:animated" ); |
cs |
:visible과 :hidden 가상 선택자는 요소의 실제 물리적인 높이나 가로 등의 가시성을 테스트한다.(CSS의 visibility나 display속성이 대상이 아니다.)
선택자가 어떤 요소를 포함했는지 확인하는 가장 좋은 방법은 .length 를 사용하는 것
|
1
2
3
4
5
6
7
8
9 |
// Doesn't work!
if ( $( "div.foo" ) ) {
...
}
// Testing whether a selection contains elements.
if ( $( "div.foo" ).length ) {
...
} |
cs |
http://learn.jquery.com/using-jquery-core/selecting-elements/
'3.자바스크립트 > jQuery' 카테고리의 다른 글
| .css() 이용하여 버튼 보이지 않도록 하기 (0) | 2016.07.11 |
|---|---|
| jQuery 폼요소 선택하기 (Selecting Form Elements) (1) | 2016.05.23 |
| jQuery Attributes(요소의 속성) getter/setter (0) | 2016.05.23 |
각 요소의 속성은 유용한 정보를 가지고 있기 때문에, 이것을 가지고 get/set 하는 것은 중요하다.
.attr() 메소드
.attr() 메소드로 getter/setter 작업 둘 다 할 수 있다.
.attr() setter:
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );
$( "a" ).attr({
title: "all titles are the same too!",
href: "somethingNew.html"
});
|
cs |
.attr() getter:
|
1 |
$( "a" ).attr( "href" ); // Returns the href for the first a element in the document |
cs |
'3.자바스크립트 > jQuery' 카테고리의 다른 글
| .css() 이용하여 버튼 보이지 않도록 하기 (0) | 2016.07.11 |
|---|---|
| jQuery 폼요소 선택하기 (Selecting Form Elements) (1) | 2016.05.23 |
| jQuery 요소 선택하기 (0) | 2016.05.23 |