본문 바로가기
매일코딩/자바스크립트 개념

[자바스크립트 기초]제이쿼리 4

by 인생여희 2017. 3. 5.
반응형

폼 요소 선택하기

셀렉터

설명

:button

button type 특성값이 button인 요소들을 리턴

:checkbox

type 특성이 checkboxinput 요소들을 리턴

:checked

체크박스 및 라디오 버튼들중 체크된 요소들 리턴

:disabled

비활성화된 모든 요소 리턴

:enabled

활성화된 모든 요소 리턴

:focus

현재 포커스를 가진 요소 리턴

:file

모든 파일 입력 요소들을 리턴한다.

:image

모든 이미지 요소들을 리턴한다.

:input

모든 button, input select textarea 요소들을 리턴한다.

:password

모든 비밀번호 입력 요소들을 가져온다.

:radio

모든 라디오 입력 요소들을 가져온다.

:reset

모든 리셋 버튼 요소들을 가져온다.

:selected

선택된 모든 요소들을 가져온다.

:submit

button type 특성 값이 submit인 요소들을 가져온다.

:text

type 특성 값이 text 이거나 특성값이 존재하지 않는 모든 input 요소들을 가져 온다.

 

폼요소와 이벤트

 

메서드

설명

.val()

input,select textarea 요소에 주로 사용된다. 객체 집합내 첫 번째 요소의 값을 가져오거나 모든 요소들의 값을 수정할 때 사용된다.

.filter()

두 번째 셀렉터를 이용하여 제이쿼리 객체집합을 필터링 한다.

:is()

폼 요소가 선택 혹은 체크되어 있는지 확인 할 때 주로 사용한다.

$.isNumeric()

값이 숫자 값으로 표현될 수 있는지를 불리언 값으로 리턴한다.

.on()

모든 이벤트를 처리할 때 사용한다.

blur

요소가 포커스를 잃을 때 발생한다.

change

입력 요소의 값이 변경 되었을 때 발생한다.

focus

요소가 포커스를 얻을 때 발생한다.

select

select 요소의 옵션 아이템이 변경되었을 때 발생한다.

submit

폼데이터를 전송할 때 발생한다.

 

 

 예)

 .html

  <body>

    <div id="page">

      <h1 id="header">List</h1>

      <h2>Buy groceries</h2>

      <ul>

        <li id="one" class="hot"><em>fresh</em> figs</li>

        <li id="two" class="hot">pine nuts</li>

        <li id="three" class="hot">honey</li>

        <li id="four">balsamic vinegar</li>

      </ul>

      <div id="newItemButton"><button href="#" id="showForm">new item</button></div>

      <form id="newItemForm">

        <input type="text" id="itemDescription" placeholder="Add description..." />

        <input type="submit" id="addButton" value="add" />

      </form>

    </div>

 

 

 .js

$(function() {


  var $newItemButton = $('#newItemButton');

  var $newItemForm = $('#newItemForm');

  var $textInput = $('input:text');


  $newItemButton.show();

  $newItemForm.hide();


  $('#showForm').on('click', function(){

    $newItemButton.hide();

    $newItemForm.show();

  });


  $newItemForm.on('submit', function(e){

    e.preventDefault();

    var newText = $textInput.val();

    $('li:last').after('<li>' + newText + '</li>');

    $newItemForm.hide();

    $newItemButton.show();

    $textInput.val('');

  });


});

 

 

 

 

 

 

 

 

 

반응형

댓글