3.자바스크립트/jQuery
- .css() 이용하여 버튼 보이지 않도록 하기 2016.07.11
- 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 |
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 |