왕초보10분 JQUERY

8개

select box 옆에 선택옵션별로 text 나타내기

2017.07.11 10:41

상품별 안내 메세지 다르게 나타내기

select box 옆에 선택옵션별로 text 나타내기




<script language="javascript" src="costchange.asp"></script>

<script type="text/javascript"> 


function pro_img_change_nomal(){

    var frm = document.orderform;

   if (frm.paper_code[frm.paper_code.selectedIndex].text == "상품 1"){

        frm.product_img.src= "/common/images/product_1.jpg"

   }

   else if (frm.paper_code[frm.paper_code.selectedIndex].text == "상품 2"){

         frm.product_img.src=  "/common/images/product_2.jpg"

   }

   else if (frm.paper_code[frm.paper_code.selectedIndex].text == "상품 3"){

         frm.product_img.src=  "/common/images/product_3.jpg"

   }

}

</script>


<table border="0" cellpadding="0" cellspacing="0">

  <tr>

<th class="pdt12" valign="top"><p class="t_txt06"></p></th>

  <td class="pdt12">

           <select class='drop02' style="width:160px; float:left;" id="paper_code" name="paper_code" onChange="javascript:pro_img_change_nomal();costchange();chkcost();">

<option value='ppkh5' <%if paper_code="ppkh5" then %> selected<%end if %>>상품 1</option>

<option value='ppkh6' <%if paper_code="ppkh6" then %> selected<%end if %>>상품 2</option>

<option value='ppkh8' <%if paper_code="ppkh8" then %> selected<%end if %>>상품 3</option>

    </select>

<span id="out_msg" style="display:none;"> <span id="out_msg_detail" class="font12" style=" color:#ff0000; vertical-align: top; line-height: 0px; font-weight:bold; font-size:11px;" ></span>

</span> 

<span id="out_msg_01" style="display:none;"> <span id="out_msg_detail" class="font12" style=" color:#ff0000; vertical-align: top; line-height: 0px; font-weight:bold; font-size:11px;" >* 상품 1 메세지</span>

</span>

<span id="out_msg_02" style="color:#ff0000; vertical-align: top; line-height: 8px; font-weight:bold; font-size:11px; padding-left:114px; display:none;">

<span>* 남은 수량 10개</span></span>

  </td>

</tr>

 </table>



costchange.asp 파일에

function costchange()

{


    if (document.orderform.paper_code.value == "ppkh5" ){

        document.all.out_msg_01.style.display="block";

        document.all.out_msg_02.style.display="none";

    }

else if (document.orderform.paper_code.value == "ppkh6" ){

        document.all.out_msg_01.style.display="none";

        document.all.out_msg_02.style.display="block";

    }


    else{

        document.all.out_msg.style.display="none";

    }

}



'왕초보10분 JQUERY' 카테고리의 다른 글

select box 옆에 선택옵션별로 text 나타내기  (0) 2017.07.11
상담신청 입력폼  (0) 2017.06.20
transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22
costchange, select, select box, 선택 메세지, 옵션 메세지, 옵션 박스

0개의 댓글이 있습니다.

상담신청 입력폼

2017.06.20 15:48


상담신청 입력폼 만들기





작성자가 입력하는 form 파일이 존재해야 합니다.
이건 일반적인 HTML 파일인데요...
내용은 대체로 다음과 같은 형식을 따릅니다.
이 파일의 이름은 아무거나 사용해도 됩니다.
여기선 test.html 이라고 가정합니다.

--------------------------------------------------------------------------------
<html>

<head>
<title>내용을 입력 받습니다.</title>
</head>

<body>

<form method="post" action="./sendme.php">
성명을 입력하세요 : <input type="text" name="iname" value="" size=10 maxlength=10><br>
전화번호 입력하세요 : <input type="text" name="itel1" value="" size=4 maxlength=4>-<input type="text" name="itel2" value="" size=4 maxlength=4>-<input type="text" name="itel3" value="" size=4 maxlength=4><br>
<input type="submit">
< / form >

</body>

</html>
--------------------------------------------------------------------------------

잠시 설명을 하자면...
<form method="post" action="./sendme.php">
라인에서 method는 입력된 값을 PHP 파일로 넘기기 위한 방법을 설정합니다.
여기에 사용할 수 있는 값은 post 내지는 get 인데... 일반적으로 post를 사용하시기 바랍니다.
get은 넘길 수 있는 값의 길이에 제한이 있는데다가 넘기는 값이 노출되어서 주민등록번호나 카드번호등 민감한 정보엔 사용하지 않습니다.
action="./sendme.php" 는 같은 디렉토리 내의 sendme.php 라는 파일로 전송하라는 얘깁니다.
이 <form> tag는 < / form > tag로 마무리를 해 주어야 합니다.

<form> tag와 < / form > tag 사이에는 <input> tag가 있습니다.
이 <input> tag가 실제로 값을 입력받는 역할을 합니다.
<input type="text" name="iname" value="" size=10 maxlength=10>

1) type="text"
type은 형식을 말합니다.
text는 일반적으로 글자를 입력받을 수 있게 하구요.
다른 값이 올 수도 있습니다.(hidden, password, image 등등)

2) name="iname"
이건 변수명을 말합니다.
다른 입력값들의 name 과 중복되면 안됩니다.
나중 PHP파일에서 $_POST["iname"] 이라는 변수명으로 접근할 수 있습니다.

3) value=""
초기값을 말합니다.
여기에 value="이름을입력" 이라고 해 놓으시면 입력란에 "이름을입력"이라는 글자가 보이게 됩니다.

4) size=10
입력창의 길이를 말합니다.
영문 10자까지가 바로 보일정도의 길이 입니다.

5) maxlength=10
최대 입력길이를 말합니다.
역시 영문 10자까지 입력 받을 수 있는 길이입니다.
이 값이 더 크면 입력창의 범위를 넘어서도 입력 가능합니다.

<input type="submit">
이건 버튼을 만듭니다.
일반 버튼이 아니라 입력된 값을 <fomr> tag 중 action="./sendme.php" 에 지정된 파일로 전송하는 버튼입니다.
여기서는 값은 디렉토리 내의 sendme.php 라는 파일로 전송됩니다.

여기까지 간단한 입력폼을 설명 했구요.
이제 이걸 처리해서 메일로 보내는 PHP 파일을 설명 드리겠습니다.
이 파일의 이름은 sendme.php 가 됩니다.

우선 메일을 받을 주소가 admin@test.com 이라고 가정하고 설명 하겠습니다.
위의 html 파일에서 정상적으로 값을 입력했다면 이 php 파일에서 확인할 수 있는 변수는 다음과 같이 총 4개가 됩니다.

$_POST["iname"], $_POST["itel1"], $_POST["itel2"], $_POST["itel3"]

이 값들을 눈으로 확인하시려면 아래 source 에서 <? 하단에

print_r($_POST);

라고 입력 하시면 됩니다.
이제 넘어온 값을 메일로 전송합니다.

--------------------------------------------------------------------------------
<?
$_mailbody = "성명 : ".$_POST["iname"]."\n전화번호 : ".$_POST["itel1"]." - ".$_POST["itel2"]." - ".$_POST["itel3"]."\n";
mail("admin@test.com", "메일제목", $_mailbody);
?>
--------------------------------------------------------------------------------

설명을 드리면...
<? 는 여기서부터 PHP라는 선언정도가 되겠습니다.
시작이 있으면 끝이 있는법...
?> 는 PHP의 끝을 나타냅니다.

우선은 성명과 전화번호를 다음과 같은 형식의 문자열로 만들어 $_mailbody 라는 변수에 넣습니다.
첫번째 라인이 그와 같은 작업입니다.

성명 : 입력값
전화번호 : 입력값-입력값-입력값

위에서 입력값에는 실제로 입력한 값들이 들어갑니다.
PHP에서는 문자열을 서로 붙이기 위해서 . 을 사용합니다. 즉 "김"."철수" 는 나중에 확인하면 "김철수"가 됩니다.
그 . 연산자를 사용해서 각 값들을 서로 붙였습니다.
중간 중간에 \n 이라는 문자열이 있는데 이건 여기서 줄을 바꾸란 얘깁니다.

이렇게 만들어진 값을 이제 메일로 보냅니다.
매일로 보낼땐 mail() 함수를 사용합니다.
복잡하게 하려면 한없이 복잡하게 쓸 수 있는 함수인 반면 간단하게 하려면 정말 간단해 질 수 있습니다.
첫번짼 메일을 받을 주소가 위치합니다.
"admin@test.com" 이 그 부분입니다.
그리곤 메일 제목이 위치합니다.
"메일제목" 이 그 부분입니다.
그리고 마지막으로 메일의 본문이 위치합니다.
메일의 본문은 위에서 작성한 $_mailbody 변수를 그대로 씁니다.

이 mail() 함수는 서버에 메일서버가 작동중이어야 사용할 수 있습니다.

이상이 없다면 이렇게 하면 원하는 주소로 메일을 받을 수 있습니다.
그런데... 실제로 쓸만하려면 입력된 값들을 확인하기 위해서 JavaScript도 써야 하구...
입력폼을 조금 더 예쁘게 꾸미려면 HTML Tag들과 CSS 등이 필요합니다.

'왕초보10분 JQUERY' 카테고리의 다른 글

select box 옆에 선택옵션별로 text 나타내기  (0) 2017.07.11
상담신청 입력폼  (0) 2017.06.20
transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22
입력폼

0개의 댓글이 있습니다.

transform matrix

2017.01.18 11:02
transform matrix 

출처

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

: 이미지는 모두 위 페이지를 캡쳐한 것입니다.


- Why Should I Care?

: 다른 transform 함수를 조합해서 사용하는 것 보다 간결하다.

: 픽셀 단위까지 정확히 원하는 형태로 변형할 수 있다.

: object(element)의 변형 정보를 알려주는 javascript 함수, getComputedStyle()은 matrix() 함수를 결과로 반환한다.

: 출처 페이지에서 getComputedStyle(document.getElementById("exampleRotation")) 를 실행한 결과 중 transform에 관한 부분.



- What Does the Markup Look Like?


: 6개의 파라매터를 가지고 있다. firefox 만 마지막 두 파라매터에 "px"를 사용한다.


- Matrix

: CSS3 2D Transform 에서는 3x3 행렬만 사용하며 의미는 아래와 같다.


: 행렬 우 하단 값은 항상 1 이다. matrix 함수의 첫 번째 인자와 같은 것이 아니다.

: matrix 함수의 파라매터로 만들어진 행렬은 object의 각 모서리 좌표(벡터)와 곱해져서 옮겨질 위치가 결정된다.

: 예를 들어 벡터 (2, 3)에 대한 matrix(4, 5, 6, 7, 8, 9) transform은 아래 식으로 계산된다.



- Meaning of Numbers


: 행렬의 곱을 이용해서 변형을 조합할 수 있다. 

: 예를 들어 scale과 translate 를 하는 행렬을 만들려면 

  위 표에서 scale(a)하단 행렬과 translate 하단 행렬을 곱한 행렬을 사용하면된다.


- 기타 참고

http://www.answers.com/topic/transformation-matrix



'왕초보10분 JQUERY' 카테고리의 다른 글

select box 옆에 선택옵션별로 text 나타내기  (0) 2017.07.11
상담신청 입력폼  (0) 2017.06.20
transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22

0개의 댓글이 있습니다.

CSS 강좌 | 그라데이션 만들기 > linear-gradient

2016.10.21 10:05

CSS 강좌 | 그라데이션 만들기 > linear-gradient

linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만들 수 있습니다.

기본 문법은 다음과 같습니다.

linear-gradient( direction, color1, color2, …, color3 );

direction에는 그라데이션 방향을 입력합니다.

  • to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값)
  • to top : 아래에서 위로 그라데이션을 만듭니다.
  • to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다.
  • to right : 왼쪽에서 오른쪽으로 그라데이션을 만듭니다.
  • ndeg : n도의 방향으로 그라데이션을 만듭니다.

색은 여러개 입력할 수 있습니다. 입력한 순서로 설정한 방향으로 그라데이션을 만듭니다.

예를 들어

linear-gradient( to right, yellow, red );

는 왼쪽에서 오른쪽으로 노란색과 빨간색 순서로 그라데이션을 만듭니다.

예제 1

http://book.cmsfactory.net/CSS/V01/lecture/gradient-01.html

방향에 따라 그라데이션이 어떻게 만들어지는지 비교하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Gradient</title>
    <style>
      div {
        width: 100%;
        height: 100px;
        margin-bottom: 10px;
      }
      .jbGrad01 {
        background: linear-gradient( to bottom, yellow, red );
      }
      .jbGrad02 {
        background: linear-gradient( to top, yellow, red );
      }
      .jbGrad03 {
        background: linear-gradient( to right, yellow, red );
      }
      .jbGrad04 {
        background: linear-gradient( to left, yellow, red );
      }
      .jbGrad05 {
        background: linear-gradient( 45deg, yellow, red );
      }
    </style>
  </head>
  <body>
    <div class="jbGrad01">to bottom</div>
    <div class="jbGrad02">to top</div>
    <div class="jbGrad03">to right</div>
    <div class="jbGrad04">to left</div>
    <div class="jbGrad05">45deg</div>
  </body>
</html>

색만 입력했을 때는 색을 균등하게 배분하여 그라데이션을 만듭니다. 색 뒤에 백분율 또는 픽셀 등으로 길이를 입력하면 그 길이까지 해당 색을 사용합니다.

예를 들어

linear-gradient( to right, yellow 50%, red 60%, purple );

은 해당 요소의 왼쪽에서 50%까지는 노란색, 50% 초과 60% 이하에는 빨간색, 나머지는 보라색으로 그라데이션을 만듭니다.

예제 2

http://book.cmsfactory.net/CSS/V01/lecture/gradient-02.html

색 뒤에 길이를 정하여 그라데이션을 만드는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Gradient</title>
    <style>
      div {
        width: 100%;
        height: 100px;
        margin-bottom: 10px;
      }
      .jbGrad01 {
        background: linear-gradient( to right, yellow, red, purple, blue );
      }
      .jbGrad02 {
        background: linear-gradient( to right, yellow 50%, red, purple, blue );
      }
      .jbGrad03 {
        background: linear-gradient( to right, yellow 50%, red 60%, purple, blue );
      }
      .jbGrad04 {
        background: linear-gradient( to right, yellow 50px, red 300px, purple 90%, blue );
      }
    </style>
  </head>
  <body>
    <div class="jbGrad01">to right, yellow, red, purple, blue</div>
    <div class="jbGrad02">to right, yellow 50%, red, purple, blue</div>
    <div class="jbGrad03">to right, yellow 50%, red 60%, purple, blue</div>
    <div class="jbGrad04">to right, yellow 50px, red 300px, purple 90%, blue</div>
  </body>
</html>

repeating-linear-gradient는 그라데이션을 반복합니다.

예제 3

http://book.cmsfactory.net/CSS/V01/lecture/gradient-03.html

그라데이션을 반복하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Gradient</title>
    <style>
      div {
        width: 100%;
        height: 400px;
      }
      .jbGrad01 {
        background: repeating-linear-gradient( yellow, red 10%, purple 20% );
      }
    </style>
  </head>
  <body>
    <div class="jbGrad01"></div>
  </body>
</html>

웹브라우저 호환성

웹브라우저 prefix 없이 linear-gradient를 사용할 수 있는 웹브라우저 버전은 다음과 같습니다.

  • Chrome : 26.0+
  • Firefox : 16.0+
  • Internet Explorer : 10.0+
  • Opera : 12.1+
  • Safari : 6.1+
Category


'왕초보10분 JQUERY' 카테고리의 다른 글

상담신청 입력폼  (0) 2017.06.20
transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22
jquery - for구문  (0) 2016.07.21

0개의 댓글이 있습니다.

패밀리사이트

2016.07.29 20:51
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>하단 패밀리사이트 만들기</title>
<style>
.rel{position:relative}
.center{ width:1000px; margin:0 auto}
.fl{ float:left}
.clear{ clear:both}


footer.fn{ border-top:1px solid #ccc; }
footer.fn  div.bottom{ background:#ccc; padding:20px 0}


</style>
</head>

<body>
<footer class="fn rel ">
<div class="center rel">
    <!--div.fl.rel(>h3.fl.rel{삼양타이틀}+div.rel.txt.fl{삼양컨텐츠}+div.fr.rel.more{more}+div.clear)+div.fl.rel#family(>a[href=#none]{패밀리사이트})+div.clear-->
<div class="fl rel">
<h3 class="fl rel">삼양타이틀</h3>
<div class="rel txt fl">삼양컨텐츠</div>
<div class="fr rel more">more</div>
<div class="clear"></div>
</div>
<div class="fl rel" id="family"><a href="#none">패밀리사이트</a></div>
<div class="clear"></div>
    </div>
<div class="bottom rel"></div>
</footer>
</body>
</html>


'왕초보10분 JQUERY' 카테고리의 다른 글

transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22
jquery - for구문  (0) 2016.07.21
제이쿼리 다운로드 jquery CDN  (0) 2016.07.20

0개의 댓글이 있습니다.

jquery 기본 CSS 선택자

2016.07.22 09:01

http://wickedmagic.tistory.com/trackback/251

01) 기본 CSS 선택자

 -. DOM API부분 중 document.querySelector( ), querySelectorAll( ) 메서드와 같은 기본 CSS 선택자와 필터 등을 이용할 수 있다.

     (jQuery만의 고유한 선택자도 지원)

선택자

설                  명

 *

 -. 모든 엘리먼트를 선택한다.

 E

 -. 태그 이름이 E인 모든 엘리먼트를 선택한다.

 E F

 -. E의 자손이면서 태그 이름이 F인 모든 엘리먼트를 선택한다.

 E > F

 -. E의 바로 아래 자식이면서 태그 이름이 F인 모든 엘리먼트를 선택한다.

 E + F

 -. E의 형제 엘리먼트로 바로 다음에 나오는 모든 엘리먼트 F를 구한다.

 E ~ F

 -. E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F를 구한다.

 E:has(F)

 -. 태그 이름이 F인 자손을 하나 이상 가지는 태그 이름이 E인 모든 엘리먼트를 선택한다.

 E.C

 -. 클래스 이름이 C를 가지는 모든 엘리먼트 E를 선택한다. (E를 생략하면 *.C와 같다.

 E#I

 -. 아이디가 I인 엘리먼트 E를 선택한다. E를 생략하면 *.#I와 같다.

 E[A]

 -. 속성 A를 가지는 모든 엘리먼트 E를 선택한다.

 E[A=V]

 -. 값이 V인 속성 A를 가지는 모든 엘리먼트 E를 선택한다.

 E[A~=V]

 -. 값이 V로 끝나는 속성 A를 가지는 모든 엘리먼트 E를 구한다.

 E[A*=V]

 -. 값에 V를 포함하는 속성 A를 가지는 모든 엘리먼트 E를 선택한다.

 



02) 위치기반 선택자(필터)

 -. 선택자를 이용해 위치를 정해주게 되면 손쉽게 위치를 기반으로 하여 선택할 수 있을 뿐 아니라 모든 엘리먼트를 검색하지 않아도 된다.

    (페이지에 있는 엘리먼트 위치나 다른 엘리먼트와 연관도니 관계를 기반으로 엘리먼트를 선택해야 한다.)

선택자

설                  명

 :first

 -. 페이지에서 처음으로 일치하는 엘리먼트이다.
 -. li a:first는 리스트 아이템의 첫 번째 링크를 반환한다.
 :last

 -. 페이지에서 마지막으로 일치하는엘리먼트이다.

 -. li a:list는 아이템의 마지막 링크를 반환한다.

 :fist-child

 -. 첫 번째 자식 엘리먼트이다.

 -. li:first-child는 각 리스트의 첫 번째 아이템을 반환한다.

 :last-child

 -. 마지막 자식 엘리먼트이다.

 -. li:last-child는 각 리스트의 마지막 아이템을 반환한다.

 :only-child

 -. 형제가 없는 모든 엘리먼트를 반환한다.

 :ntn-child(n)

 -. n번째 자식 엘리먼트이다.

 -. li:nth-child(2)는 각 리스트의 두 번쨰 리스트 아이템을 반환한다.

 :ntn-child(even | odd)

 -. 짝수(even) 또는 홀수(odd) 자식 엘리먼트이다.

 -. li:nth-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환한다.

 :ntn-child(Xn + Y)

 -. 전달된 공식에 따른 n번째 자식 엘리먼트이다.

 -. Y는 0인 경우 생략 가능하다.

 -. li:nth-child(3n)은 3의 배수 번쨰 아이템을 반환한다.

 -. li:nth-child(5n + 1)은 5의 배수 + 1번째 아이템을 반환한다.

 :even / :odd

 -. 페이지 전체의 짝수 / 홀수 번째 아이템을 반환한다.

 :eq(n)  -. n번쨰로 일치하는 엘리먼트를 반환한다.

 :gt(n)

 -. n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트를 반환한다.

 :lt(n)

 -. n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트를 반환한다.

 



03) 정의 필터 선택자

 -. CSS 명세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 할 경우 사용한다.

선택자

설                  명

 :animated

 -. 현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.

 :button

 -. 모든 버튼을 선택한다.

     <input [type = submit]>, <input [type = reset]>, <input [type = button]>, <button>

 :checkbox

 -. 확인란 엘리먼트만 선택한다.

     <input [type = checkbox]>

 :checked

 -. 선택된 확인란이나 라디오 버튼만을 선택한다.(CSS에서 지원)

 :contains(foo)

 -. 텍스트 foo를 포함하는 엘리먼트만 선택한다.

 :disabled  -. 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.
 :enabled

 -. 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.

 :file

 -. 모든 엘리먼트를 선택한다.

     <input [type = file]>

 :header

 -. 헤더 엘리먼트만 선택한다.

     (예를 들어 <h1>부터 </h6>까지의 엘리먼트를 선택한다.

 :hidden  -. 감춰진 엘리먼트만 선택한다.
 :image

 -. 폼 이미지를 선택한다.

     <input [type = image]>

 :input

 -. 폼 엘리먼트만 선택한다.
     <input>, <select>, <textarea>, <button>

 :not(selector)

 -. selector가 아닌 것을 선택한다.

 -. 괄호 안의 조건이 아닌 것을 선택한다.

 :parent

 -. 빈 엘리먼트를 제외하고 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
 :password

 -. 비밀번호 엘리먼트만 선택한다.

     <input [type = password]>

 :radio

 -. 라디오 버튼 엘리먼트만 선택한다.

     <input [type = radio]>

 :reset

 -. 리셋 버튼을 선택한다.
     <input [type = reset]>이나 <button [type = reset]>

 :selected  -. 선택된 엘리먼트만 생각한다.
 :submit  -. 전송 버튼을 선택한다.
    <button [type = submit>이나 <input [type = submit]>
 :text  -. 텍스트 엘리먼트만 선택한다.
    <input [type = text]>
 :visible

 -. 보이는(visible) 엘리먼트만 선택한다.

'왕초보10분 JQUERY' 카테고리의 다른 글

transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22
jquery - for구문  (0) 2016.07.21
제이쿼리 다운로드 jquery CDN  (0) 2016.07.20

0개의 댓글이 있습니다.

1 2

총 2,976,207명이 방문했어요.

오늘 133명 | 어제 187명

Blogger is 세미짱 & Simplify v1.1 made by OPNay