'분류 전체보기'에 해당되는 글 80건

jquery select box

카테고리 없음 2013. 3. 5. 10:07

 

jQuery로 선택된 값 읽기

$("#select_box option:selected").val();
$("select[name=selectbox]").val();

jQuery로 선택된 내용 읽기
$("#selectbox option:selected").text();

선택된 위치
var index = $("#test option").index($("#test option:selected")); 



// 셀렉트 박스 옵션에 추가(기존 옵션 뒤쪽으로 추가)

$("#myselect").append("<option value='1'>Apples</option>");
$("#myselect").append("<option value='2'>After Apples</option>");

// 옵션 시작 부분(맨 앞에) 추가
$("#myselect").prepend("<option value='0'>Before Apples</option>");

// 옵션값을 새롭게 정의
$("#myselect").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>");

// 옵션값의 인덱스 번호를 변경
$("#myselect option:eq(1)").replaceWith("<option value='2'>Some apples</option>");
$("#myselect option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");

// 2번 인덱스의 값을 선택된 상태로 변경
$("#myselect option:eq(2)").attr("selected", "selected");

// 텍스트 내용으로 선택된 상태로 변경
$("#myselect").val("Some oranges").attr("selected", "selected");

// 선택된 옵션의 값을 변경
$("#myselect").val("2");

// index번호가 0인것을 제거
$("#myselect option:eq(0)").remove();

// 첫번째 옵션 엘리먼트를 제거
$("#myselect option:first").remove();

// 마지막 옵션 엘리먼트를 제거
$("#myselect option:last").remove();

// 선택된 텍스트 알림으로 보이기
alert($("#myselect option:selected").text());

// 선택된 값 알림으로 보이기
alert($("#myselect option:selected").val());

// 선택된 옵션의 인덱스 번호 보이기
alert($("#myselect option").index($("#myselect option:selected")));

// Alternative way to get the selected item
alert($("#myselect option:selected").prevAll().size());

// 0번 인덱스 다음으로 옵션을 추가
$("#myselect option:eq(0)").after("<option value='4'>Some pears</option>");

// 3번 인덱스 이전에 옵션을 추가
$("#myselect option:eq(3)").before("<option value='5'>Some apricots</option>");

// select 박스의 값이 변경되었을 때 알링으로 값과 텍스트 보이기
$("#myselect").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});

[출처] jquery selectbox(중요)|작성자 미친곰

블로그 이미지

스마트전

,

아스키코드 값 정리

카테고리 없음 2013. 2. 28. 09:52

 

이진법 팔진법 십진법 십육진법 약자 설명 한글설명
000 0000 000 0 00 NUL Null 공백 문자
000 0001 001 1 01 SOH Start of Header 헤더 시작
000 0010 002 2 02 STX Start of Text 본문 시작, 헤더 종료
000 0011 003 3 03 ETX End of Text 본문 종료
000 0100 004 4 04 EOT End of Transmission 전송 종료, 데이터 링크 초기화
000 0101 005 5 05 ENQ Enquiry 응답 요구
000 0110 006 6 06 ACK Acknowledgment 긍정응답
000 0111 007 7 07 BEL Bell 경고음
000 1000 010 8 08 BS Backspace 백스페이스
000 1001 011 9 09 HT Horizontal Tab 수평 탭
000 1010 012 10 0A LF Line feed 개행
000 1011 013 11 0B VT Vertical Tab 수직 탭
000 1100 014 12 0C FF Form feed 다음 페이지
000 1101 015 13 0D CR Carriage return 복귀
000 1110 016 14 0E SO Shift Out 확장문자 시작
000 1111 017 15 0F SI Shift In 확장문자 종료
001 0000 020 16 10 DLE Data Link Escape 전송 제어 확장
001 0001 021 17 11 DC1 Device Control 1 장치 제어 1
001 0010 022 18 12 DC2 Device Control 2 장치 제어 2
001 0011 023 19 13 DC3 Device Control 3 장치 제어 3
001 0100 024 20 14 DC4 Device Control 4 장치 제어 4
001 0101 025 21 15 NAK Negative Acknowledgement 부정응답
001 0110 026 22 16 SYN Synchronous idle 동기
001 0111 027 23 17 ETB End of Transmission Block 전송블록 종료
001 1000 030 24 18 CAN Cancel 무시
001 1001 031 25 19 EM End of Medium 매체 종료
001 1010 032 26 1A SUB Substitute 치환
001 1011 033 27 1B ESC Escape 제어기능 추가
001 1100 034 28 1C FS File Separator 파일경계 할당
001 1101 035 29 1D GS Group Separator 레코드 그룹경계 할당
001 1110 036 30 1E RS Record Separator 레코드 경계 할당
001 1111 037 31 1F US Unit Separator 장치 경계 할당
111 1111 177 127 7F DEL Delete 삭제

 

 

2진법 팔진법 십진법 십육진법 모양
010 0000 040 32 20 ␠
010 0001 041 33 21 !
010 0010 042 34 22 "
010 0011 043 35 23 #
010 0100 044 36 24 $
010 0101 045 37 25 %
010 0110 046 38 26 &
010 0111 047 39 27 '
010 1000 050 40 28 (
010 1001 051 41 29 )
010 1010 052 42 2A *
010 1011 053 43 2B +
010 1100 054 44 2C ,
010 1101 055 45 2D -
010 1110 056 46 2E .
010 1111 057 47 2F /
011 0000 060 48 30 0
011 0001 061 49 31 1
011 0010 062 50 32 2
011 0011 063 51 33 3
011 0100 064 52 34 4
011 0101 065 53 35 5
011 0110 066 54 36 6
011 0111 067 55 37 7
011 1000 070 56 38 8
011 1001 071 57 39 9
011 1010 072 58 3A :
011 1011 073 59 3B ;
011 1100 074 60 3C <
011 1101 075 61 3D =
011 1110 076 62 3E >
011 1111 077 63 3F ?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2진법 팔진법 십진법 십육진법 모양
100 0000 100 64 40 @
100 0001 101 65 41 A
100 0010 102 66 42 B
100 0011 103 67 43 C
100 0100 104 68 44 D
100 0101 105 69 45 E
100 0110 106 70 46 F
100 0111 107 71 47 G
100 1000 110 72 48 H
100 1001 111 73 49 I
100 1010 112 74 4A J
100 1011 113 75 4B K
100 1100 114 76 4C L
100 1101 115 77 4D M
100 1110 116 78 4E N
100 1111 117 79 4F O
101 0000 120 80 50 P
101 0001 121 81 51 Q
101 0010 122 82 52 R
101 0011 123 83 53 S
101 0100 124 84 54 T
101 0101 125 85 55 U
101 0110 126 86 56 V
101 0111 127 87 57 W
101 1000 130 88 58 X
101 1001 131 89 59 Y
101 1010 132 90 5A Z
101 1011 133 91 5B [
101 1100 134 92 5C \
101 1101 135 93 5D ]
101 1110 136 94 5E ^
101 1111 137 95 5F _

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2진법 팔진법 십진법 십육진법 모양
110 0000 140 96 60 `
110 0001 141 97 61 a
110 0010 142 98 62 b
110 0011 143 99 63 c
110 0100 144 100 64 d
110 0101 145 101 65 e
110 0110 146 102 66 f
110 0111 147 103 67 g
110 1000 150 104 68 h
110 1001 151 105 69 i
110 1010 152 106 6A j
110 1011 153 107 6B k
110 1100 154 108 6C l
110 1101 155 109 6D m
110 1110 156 110 6E n
110 1111 157 111 6F o
111 0000 160 112 70 p
111 0001 161 113 71 q
111 0010 162 114 72 r
111 0011 163 115 73 s
111 0100 164 116 74 t
111 0101 165 117 75 u
111 0110 166 118 76 v
111 0111 167 119 77 w
111 1000 170 120 78 x
111 1001 171 121 79 y
111 1010 172 122 7A z
111 1011 173 123 7B {
111 1100 174 124 7C |
111 1101 175 125 7D }
111 1110 176 126 7E ~

 

 

 

 

 

 

 

 

 

 

 

 

 

출처 http://ko.wikipedia.org/wiki/%EC%95%84%EC%8A%A4%ED%82%A4_%EC%BD%94%EB%93%9C

블로그 이미지

스마트전

,

jquery form selector 예제

카테고리 없음 2013. 2. 26. 16:06

jQuery 를 이용하면 여러 객체에 쉽게 접근이 가능한데, 폼 객체의 값들을 읽거나 설정하는데는 약간 헷갈리는 부분이 있습니다. 그건 각 폼 객체들이 약간씩 다른 동작을 하기 때문인데, 단순한 폼 뿐이라면 그냥 ID 를 지정하고 바로 접근하는게 아주 쉽고 빠릅니다.
하지만, 동일한 폼이 여러개 생긴다거나 동적으로 생성되거나 하는 경우 골치아파질 수 있습니다.

다행이도 jQuery 는 이런 접근을 아주 쉽게 도와줍니다. 바로 [ ] 표현식으로 쿼리를 지원하기 때문에 간단한 표현식으로 원하는 결과를 얻을 수 있는데, 폼 객체를 이를 이용해서 셀렉트 하는 방법이 있습니다.

<!-- 예제 HTML -->
<form id="TestForm">
    <input type="text" name="TestText" value="2010" />
    <input type="radio" name="TestRadio" value="1" checked="checked" />
    <input type="radio" name="TestRadio" value="2" />
</form>



여기서 Year 텍스트 필드의 값을 가져오고자 할때 아래와 같이 작성할 수 있습니다.

$("#TestForm > input[name='TestText']").val();


※ 참고로 #TestForm 옆의 > 는 해당 객체의 하위 객체를 의미하지만 적지 않아도 문제가 되진 않습니다. 단지, 공백만으로는 가독성이 떨어지기 때문에 구분을 위해 적었습니다.

INPUT 객체의 name 속성을 기준으로 해당 문자열에 맞는 객체를 가져오는 것이죠.
마찬가지로 라디오 객체의 값을 가져올때는 아래와 같이 작성할 수 있습니다.

$("#TestForm > input:radio[name="TestRadio"]:checked").val();// 결과: 1
$("#TestForm > input[name="TestRadio"]:checked").val();// 결과: 1


위의 두가지 모두 결과는 1 을 얻을 수 있습니다. 바로 [name='TestRadio'] 를 적었기 때문이죠. INPUT 객체의 name 속성이 맞는 객체를 가져오게되고, 그 중에서 현재 체크된 라디오 버튼의 value 를 돌려줍니다. (라디오 버튼은 그룹별로 같은 name 을 지정합니다.)

단지 이것뿐이라면 얼마나 유용할까? 하느 생각이 들 수 있습니다.
이게 다가 아니라 또 다른 기호를 통해 매칭되는 문자열을 찾아서 객체를 가져올 수 있습니다.

<!-- 예제 HTML -->
<form id="TestForm">
    <input type="text" name="TypeA" value="Type A" />
    <input type="text" name="TypeA_Desc_1" value="A1" />
    <input type="text" name="TypeA_Desc_2" value="A2" />
    <input type="text" name="TypeB" value="Type B" />
    <input type="text" name="TypeB_Desc_1" value="B1" />
    <input type="text" name="TypeB_Desc_2" value="B2" />
</form>


이와 같은 폼을 구성해야 할때 여러 폼들을 관리하는게 여간 힘든게 아닙니다.

만약, TypeA 인 항목들을 가져올때 아래와 같이 작성함으로써 쉽게 가져올 수 있습니다.

$("#TestForm > input[name^='TypeA']");


name 속성 중에서 TypeA 로 시작하는 객체들을 돌려주는 쿼리 입니다. name^= 에서 ^ 기호는 "~로 시작하는" 의미의 문자입니다.
반대로 어떤문자로 끝나는 이름이라면 name$= 으로 적으면 됩니다.

$("#TestForm > input[name$='Desc_1']");


이 쿼리는 Desc_1 로 끝나는 객체 2개를 반환합니다.

그러나 시작과 끝만으로는 유용성이 별로 없을지도 모르죠. 어떤 문자가 들어 있는 것을 모두 찾고 싶을때는 name*= 을 사용합니다.

$("#TestForm > input[name*='Desc']");


그럼 name 속성에 Desc 문자가 들어간 4개의 객체가 반환됩니다.
마찬가지로, name!= 으로 해당 문자열이 아닌 객체만 선택할 수 있습니다.

$("#TestForm > input[name!='TypeA']");



게다가 이러한 표현식은 name 속성에만 쓸 수 있는 것이 아니라, 객체의 속성 모두에 사용할 수 있습니다.

$("form[id='TestForm']");


따라서, 이것도 가능하다는 것이죠. (다만 의미가 없을뿐...;)

개발자가 직접 설정한 속성도 모두 적용 가능하기 때문에, 간단한 쿼리로 쉽게 원하는 객체를 찾을 수 있습니다. :)


블로그 이미지

스마트전

,

jquery check box

카테고리 없음 2013. 2. 26. 16:04

 

<body>
     <input type="checkbox" id="mod_gb1" name="mod_gb" value="1" class="border-none" /> 이용 <br />
     <input type="checkbox" id="mod_gb2" name="mod_gb" value="2" class="border-none" />  변경 <br />
     <input type="checkbox" id="mod_gb3" name="mod_gb" value="3" class="border-none" />  해지

     <input type="button" id="btn" />
</body>

1. 특정 체크박스 체크 확인

<script>
      $('#mod_gb2').click(function() {
       var ischecked = $('#mod_gb2').attr('checked');
       
       if(ischecked){
           alert("2번이 체크되었습니다.");
       }else{
           alert("2번이 체크되지 않았습니다.");
       }
      });
</script>


2. 체크 박스 전체

$('input[name=mod_gb]:checkbox').click(function() { // name이 mod_gb인 체크박스 그룹의 아무 박스를 선택하면
       var gb1 = $('#mod_gb1').attr('checked');
       var gb2 = $('#mod_gb2').attr('checked');
       var gb3 = $('#mod_gb3').attr('checked');
       if(gb3 && (gb1 || gb2)){
            alert("ID 해지는 다른 항목과 중복 선택하실 수 없습니다.");
            $('#mod_gb3').attr('checked', false);
       }
});

3. 체크박스 선택 유무 확인

$('#btn').click(function(){
    var cnt = $("input[name=mod_gb]:checkbox:checked").length;
    if(cnt < 1){
         alert('한 개 이상을 선택하셔야 합니다');
    }else{
         alert(cnt+'개가 선택되었습니다');
    }
});

4. 체크박스 숫자 확인

  $('#all').click(function() {
      var checkboxCnt = $("input:checkbox").length; // 체크박스 전체 갯수
      var checkYn = $('#all').attr('checked');
      if(checkYn){
          $('input:checkbox').attr('checked',true);
          $('input:checkbox').attr('disabled',true);
          $('#all').attr('disabled',false);
      }else{
          $('input:checkbox').attr('checked',false);
          $('input:checkbox').attr('disabled',false);
      } 
  }); 

블로그 이미지

스마트전

,

substr

PHP 2012. 12. 31. 12:06

string substr ( string $string , int $start [, int $length ] )


Example #1 Using a negative start
<?php
$rest = substr("abcdef", -1);    // returns "f"
$rest = substr("abcdef", -2);    // returns "ef"
$rest = substr("abcdef", -3, 1); // returns "d"
?>

Example #2 Using a negative length
<?php
$rest = substr("abcdef", 0, -1);  // returns "abcde"
$rest = substr("abcdef", 2, -1);  // returns "cde"
$rest = substr("abcdef", 4, -4);  // returns false
$rest = substr("abcdef", -3, -1); // returns "de"
?>

Example #3 Basic substr() usage
<?php
echo substr('abcdef', 1);     // bcdef
echo substr('abcdef', 1, 3);  // bcd
echo substr('abcdef', 0, 4);  // abcd
echo substr('abcdef', 0, 8);  // abcdef
echo substr('abcdef', -1, 1); // f

// Accessing single characters in a string
// can also be achieved using "square brackets"
$string = 'abcdef';
echo $string[0];                 // a
echo $string[3];                 // d
echo $string[strlen($string)-1]; // f

?>


Example #4 substr() casting behaviour
<?php
class apple {
    public function __toString() {
        return "green";
    }
}

echo "1) ".var_export(substr("pear", 0, 2), true).PHP_EOL;
echo "2) ".var_export(substr(54321, 0, 2), true).PHP_EOL;
echo "3) ".var_export(substr(new apple(), 0, 2), true).PHP_EOL;
echo "4) ".var_export(substr(true, 0, 1), true).PHP_EOL;
echo "5) ".var_export(substr(false, 0, 1), true).PHP_EOL;
echo "6) ".var_export(substr("", 0, 1), true).PHP_EOL;
echo "7) ".var_export(substr(1.2e3, 0, 4), true).PHP_EOL;
?>

The above example will output:
1) 'pe'
2) '54'
3) 'gr'
4) '1'
5) false
6) false
7) '1200'

'PHP' 카테고리의 다른 글

PHP 소켓 통신 TCP/IP  (0) 2012.12.13
PHP 정규 표현식 문법  (0) 2012.07.31
PHP 정규표현식  (0) 2012.07.31
host 파일 수정  (0) 2012.07.31
PHP 내장 함수  (0) 2012.07.27
블로그 이미지

스마트전

,

PHP 소켓 통신 TCP/IP

PHP 2012. 12. 13. 12:07

[PHP] 소켓 통신(전송) PHP 소스 

 

필자가 실제 현장에서 검증하고 구현된 소켓통신 PHP 소스입니다.

 

웹상에 저질 정보들이 너무 난무해서 확실히 되는 소켓통신 '전문전송' 소스 입니다. 물론 서버쪽에서

 

도 소켓을 생성하여 전문을 받고 회신을 해줄 수 있어야 겠죠?

 

TCP 전용으로 작성해 보겠습니다.  실험은 사이트에 "socket.php"로 올려서 예제로 만들어서 해봤습

 

니다. NICE(한국신용평가)사 와 라우터와 전용선으로 1:1 연결해서 했던 방식입니다.

 

<?php
//The Client
error_reporting(E_ALL);

$address = "xxx.xxx.xxx.xxx"; // 접속할 IP //
$port = xxxx; // 접속할 PORT //

$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP); // TCP 통신용 소켓 생성 //
if ($socket === false) {
echo "socket_create() 실패! 이유: " . socket_strerror(socket_last_error()) . "\n";
echo "<br>";
} else {
echo "socket 성공적으로 생성.\n";
echo "<br>";
}

echo "다음 IP '$address' 와 Port '$port' 으로 접속중...";
echo "<BR>";

$result = socket_connect($socket, $address, $port); // 소켓 연결 및 $result에 접속값 지정 //

if ($result === false) {
echo "socket_connect() 실패.\nReason: ($result) " . socket_strerror(socket_last_error($socket)) . "\n";
echo "<br>";
} else {
echo "다음 주소로 연결 성공 : $address.\n";
echo "<br>";
}

$i = "xxxxxxxxxxxxxxxxx"; //보내고자 하는 전문 //

echo "서버로 보내는 전문 : $i|종료|.\n";


socket_write($socket, $i, strlen($i)); // 실제로 소켓으로 보내는 명령어 //

echo "<br>";
$input = socket_read($socket, 1024) or die("Could not read from Socket\n"); // 소켓으로 부터 받은 REQUEST 정보를 $input에 지정 //

echo "<br>";


echo $input; //REQUEST 정보 출력//
socket_close($socket);

?>

 

 

많은 참조가 되었나요? 이것은 예제일 뿐, 실제 약속된 전문을 BIT단위로 잘라서 보낼때는 그에 맞게 $i 값을 자동 지정하게 변형해주자. 

[출처] [PHP] 소켓 통신(전송) PHP 소스|작성자 몬드

 

'PHP' 카테고리의 다른 글

substr  (0) 2012.12.31
PHP 정규 표현식 문법  (0) 2012.07.31
PHP 정규표현식  (0) 2012.07.31
host 파일 수정  (0) 2012.07.31
PHP 내장 함수  (0) 2012.07.27
블로그 이미지

스마트전

,

MySQL IFNULL

MySQL 2012. 12. 3. 18:23

MySQL IFNULL()의 사용



IFNULL은 해당 필드의 값이 NULL을 반환할때 다른 값으로 출력할 수 있도록 하는 함수이다. 


SELECT IFNULL(필드명, "대체할 값") FROM 테이블명; 


물론 하나의 필드의 값 뿐만아니라 , 연속적으로도 활용 할 수 있다. 


다음은 IFNULL을 사용한 예이다. 




위의 데이터는 3개의 필드에서 무작위로 NULL 값이 존재한다. 하지만 3개의 필드중 값이 존재한다면 그 값은 동일한 경우이다. 

만약 keyword 와 3개의 필드의 값중 하나를 출력하려 한다면 IFNULL을 활용하여 다음과 같이 사용할 수 있다. 


$query = "SELECT keyword, IFNULL( common_rep, IFNULL( fur_rep, makeup_rep ) ) as syn_2 FROM syn_color"; 


  출력 결과 



'MySQL' 카테고리의 다른 글

character 한번에 바꾸기  (0) 2019.10.16
달력 숫자 채우기  (0) 2019.10.16
테이블 내 특정 문자열 한꺼번에 바꾸기 - REPLACE  (0) 2012.08.30
MySQL / FullText에서 특정 단어를 빠르게 검색하기  (0) 2012.08.30
SQL 인젝션 공격 방어  (0) 2012.07.31
블로그 이미지

스마트전

,

jQuery 기초 정리

jQuery 2012. 11. 27. 11:20

1.jQuery 기초

  1.1 jQuery() 함수

    $(selector)

    jQuery(selector)

   

    $("p a");

 

  1.2 유틸리티 함수

    $.trim(someString);

    jQuery.trim(someString);

 

  1.3 문서 준비 핸들러

    window.onload = function(){

      $("table tr:nth-child(even)").addClass("even");

    };

 

   $(document).ready(function(){

      $("table tr:nth-child(even)").addClass("even");

   });

 

   $(function(){

      $("table tr:nth-child(even)").addClass("even");

   });

 

  

   자세한 내용은 까페의 문학이님의 게시글을 보시면 됩니다.

   http://cafe.naver.com/javachobostudy/50141

 

  1.4 DOM 엘리먼트 생성하기

     $("<div>안녕!</div>");

 

  1.5 jQuery 확장하기

     $.fn.disable = function(){

       return this.each(function(){

         if(typeof this.disabled != "undefined") this.disabled = true;

       });

     }

 

    $("form#myForm").disable();

 

  1.6 다른 라이브러리들과 함께 jQuery 사용하기

    jQuery.noConflict();

 

 

2.1조작하려는 엘리먼트 선택하기

  2.1.1 기본 CSS 셀렉터 사용하기

  • a - 모든 <a> 엘리먼트와 일치하는 셀렉터
  • #specialID - specialClass를 클래스로 가지는 모든 엘리먼트와 일치하는 셀렉터.
  • .specialClass - specialClass를 클래스로 가지는 모든 엘리먼트와 일치하는 셀렉터.
  • a#specialID.specialClass - 아이디가 specialID이고 specialClass를 클래스로 가지는 <a>엘리먼트
  • p a.specialClass - <p>엘리먼트 내에 선언되고 specialClass를 클래스로 가지는 <a>엘리먼트

   jQuery를 이용해 엘리먼트를 선택하려면 셀렉터를 아래와 같이 $()로 감싸준다.

   $("p a.specialClass"); 

 

  2.1.2 자식 셀렉터, 컨테이너 셀렉터, 어트리뷰트 셀렉터 사용하기

셀렉터

설명

*

모든 엘리먼트와 일치

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와 일치

E[A*=V]

값이 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

  

   $("p > a")

   <p> 엘리먼트의 바로 아래 자식 링크와 일치한다.

 

   $("ul.myList > li > a")

    클래스 myList를 지닌 <ul> 엘리먼트의 바로아래 자식 리스트 엘리먼트를 선택한 다음, 리스트 엘리먼트의 바로 아래 자식

    링크만 선택한다.

 

   $("a[href^=http://]")

    href의 값이 정확히 http://로 시작하는 모든 링크와 일치한다.

  

   form[method] : 특정 어트리뷰트를 가진 엘리먼트와 일치

   input[type=text] : 특정 값과 일치하는 어트리뷰트를 가진 엘리먼트와 일치

  

   $("li:has(a)") <a>엘리먼트를 포함하는 모든 <li> 엘리먼트와 일치한다.

 

 2.1.3 위치로 선택하기

셀렉터

설명

:first

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

:last

페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환한다.

:first-child

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

:last-child

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

:only-child

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

:nth-child(n)

n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두 번째 리스트 아이템을 반환한다.

:nth-child(even|odd)

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

:nth-child(Xn+Y)

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

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

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

:even / :odd

페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수 번째 아이템을 반환한다.

:eq(n)

n번째로 일치하는 엘리먼트.

:gt(n)

n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치

:lt(n)

n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.

 

$("a:first");

페이지에서 첫 번재 <a> 엘리먼트와 일치한다.

 

$("p:odd");  //모든 홀수 번째 문단(<p>) 엘리먼트와 일치한다.

$("p:even"); // 모든 짝수 번째 문단(<p>) 엘리먼트와 일치한다.

 

$("li:last-child");

각 리스트에서 마지막 리스트 아이템과 일치

 

$("table#languages tbody td:first-child");

$("table#languages tbody td:ntn-child(1)"); // 인덱스가 1부터 시작

테이블에서 각 행의 첫 번째 셀과 일치한다.

 

2.1.4 jQuery 정의 셀럭터 사용하기

셀렉터

설명

:animated

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

:button

모든 버튼을 선택한다.

:checkbox

체크박스 엘리먼트만 선택한다.

:checked

선택된 체크박스나 라디오 버튼만을 선택한다.

:contains(foo)

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

:disabled

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

:enabled

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

:file

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

:header

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

:hidden

감춰진 엘리먼트만 선택한다.

:image

폼 이미지를 선택한다.

:input

폼 엘리먼트만 선택한다.(input, select, textarea, button)

:not(filter)

필터의 값을 반대로 변경한다.

:parent

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

:password

패스워드 엘리먼트만 선택한다.

:radio

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

:reset

리셋 버튼을 선택한다.

:selected

선택된 엘리먼트만 선택한다.

:submit

전송 버튼을 선택한다.

:text

텍스트 엘리먼트만 선택한다.

:visible

보이는 엘리먼트만 선택한다.

 

$(":checkbox:checked:enabled");

활성화 되고 선택된 체크박스만 일치한다.

 

$("input:checkbox") // 체크박스만 선택

$("input:not(:checkbox)") //체크박스를 제외하고 모든 <input> 선택

 

*:not()은 필터 셀렉터에는 적용할 수 있지만 찾기 셀레터에는 적용하지 못한다.

$("div p:not(:hidden)"); // O

$("div :not(p:hidden)"); // X

 

2.2 새로운 HTML 생성하기

 $("<div>킴디 짱</div>");

 $("<div>") // $("<div></div>"), $("<div/>")와 동일

 

2.3 확장된 엘리먼트 집합 관리하기

  2.3.1 확장된 집합의 크기 결정하기

size()

설명

확장 집합의 엘리먼트 개수를 반환한다.

매개변수

없음

반환값

엘리먼트 개수

    

   $("#someDiv").html("<h1>페이지에는 총 " + $("a").size() + "개의 링크가 있다.</h1>");

 

  2.3.2 확장 집합에서 엘리먼트 획득하기

get(index) , get()

설명

확장된 집합에서 하나 또는 모든 일치하는 엘리먼트를 가져온다.

매개변수가 명시되지 않았다면 확장 집에서 모든 엘리먼트를 자바스크립트 배열로 반환한다.

매개변수

index (Number)

얻으려는 엘리먼트의 인덱스.

반환값

하나의 DOM 엘리먼트 또는 DOM 엘리먼트 집합

 

  $("img[alt]")[0];

  $("img[alt]").get(0);

 

index(element)

설명

확장 집합에서 전달된 엘리먼트를 찾고, 집합에서 찾은 엘리먼트의 인덱스를 반환한다. 못 찾으면 -1반환

매개변수

element (Element)

순서 번호를 알고자 하는 엘리먼트의 참조

반환값

확장 집합에서 전달된 엘리먼트의 순서 번호

발견되지 않으면 -1 반환

 

  var n1 = $("img").index($("img#findMe")[0]); // ㅉㅉㅉㅉ;;

  var n2 = $("img").index($("img#findMe"));

 

  var element = document.getElementById("findMe");

  var n3 = $("img").index(element );

 

  2.3.3 확장 엘리먼트 집합 재편성하기

add(expression)

설명

expression 매개변수로 명시한 엘리먼트를 확장 집합에 추가한다.

표현식에는 셀렉터, HTML코드, DOM 엘리먼트의 배열이 올 수 있다.

매개변수

element (String|Element|Array)

확장 집합에 추가될 대상을 명시한다.

반환값

확장집합

 

   $("img[alt], img[title]");

   $("img[alt]").add("img[title]");

   alt나 title 어트리뷰트를 가진 모든, <img> 엘리먼트를 반환한다.

  

   $("img[alt]").addClass("thickBorder").add("img[title]").addClass("seeThrough");

   alt 어트리뷰트를 가진 모든 <img> 엘리먼트의 확장 집합을 생성하고, 확장 집합의 각 엘리먼트에

   클래스 thickBorder를 적용한다.

   <img alt="test1" src="test.jpg" class="thickBorder">

   그리고 title 어트리뷰트를 가진 <img> 엘리먼트를 이전 확장집합에 추가하고, 클래스 seeThrough를 적용한다.

   <img alt="test1" src="test1.jpg" class="thickBorder seeThrough">

   <img alt="test2" title="testTitle" src="test2.jpg" class="seeThrough">

  

   $("img[alt]").add("<div>킴디 짱</div>"); //새로운 엘리먼트를 확장 집합에만 추가한다는 점을 주의한다.

  

not(expression)

설명

expression 매개변수의 값에 따라서 일치하는 집합에서 엘리먼트를 제거한다.

매개변수

element (String|Element|Array)

확장 집합에서 제거할 대상을 정의한 jQuery 필터 표현식이나 엘리먼트 참조 또는 엘리먼트 참조 배열

반환값

확장집합

 

  $("img[title]:not([title*=puppy])"); 

  $("img[title]").not("[title *= puppy]"); // 인자값은 엘리먼트 참조와 필터 표현식만 전달 받는다

  확장집합에서 title값이 puppy인 엘리먼트를 제거한다.

  

  $("img[alt]").not($("#findMe3"));

 

  var n = document.getElementById("findMe3");

  $("img[alt]").not(n);

filter(expression)

설명

전달 받은 셀럭터 표현식이나 필터링 함수를 이용해서 확장 집합에서 엘리먼트를 필터링 해낸다.

매개변수

element (String|Function)

확장 집합에서 일치하지 않는 엘리먼트를 모두 제거하고자 jQuery 셀렉터 또는 필터링 조건을 결정하는  함수를 명시한다. 이 함수는 집합에 있는 각 엘리먼트마다 호출된다. 호출된 함수는 해당 시점의 엘리먼트를 함수 콘텍스트인 this로 이용한다. 호출 결과로 false를 반환하는 엘리먼트가 모두 집합에서 제거된다.

반환값

확장집합

  

$("img").addClass("seeThrough").filter("[title*=dog]").addclass("thickBorder");

모든 <img> 엘리먼트에 seeThrough 클래스를 추가하고 title 어트리뷰티 값에 dog 문자열 값을 포함하고 있는

엘리먼트에만 thickBorder클래스를 추가한다.

 

$("div").filter(function (index) { 
                  return index == 1 || $(this).attr("id") == "fourth"; 
                }).addclass("thickBorder");

<div>엘리먼트중 두번째 div이거나 id값이 fourth인 div에만 thickBorder 클래스를 추가한다.

 

 

slice(begin, end)

설명

일치하는 집합에서 연속하는 일부분을 포함하는 새로운 확장 집합을 생성하고 반환한다.

매개변수

begin, end (Number)

반환되는 부분 집합에 포함될 엘리먼트의 위치

반환값

확장집합

 

  $("*").slice(2,3);

  모든 엘리먼트를 선택한 다음 세 번째 엘리먼트를 담은 새로운 집합을 생성한다.

  $("*").slice(4);

  모든 엘리먼트중 처음 네 엘리먼트를 제외한 모든 엘리먼트의 집합을 반환한다.

 

2.3.4 관계를 이용해 확장 집합 얻기 

메소드

설명

children()

확장 엘리먼트의 고유한 자식으로 구성된 확장 집합을 반환한다.

contents()

확장 집합에서 엘리먼트의 콘텐츠로 구성된 확장 집합을 반환한다.

next()

확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환한다.

nextAll()

확장 집합 내의 각 확장 엘리먼트 다음에 나오는 모든 형제로 구성된 확장 집합을 반환한다.

parent()

확장 집합 내에 있는 모든 확장 엘리먼트의 바로 위 부모로 구성된 확장 집합을 반환한다.

parents()

모든 확장 엘리먼트의 조상으로 구성된 확장 집합을 반환한다.

prev()

확장 집합 내의 각 확장 엘리먼트 바로 이전에 나오는 형제로 구성된 확장 집합을 반환한다.

prevAll()

확장 집합 내의 각 확장 엘리먼트 이전에 나오는 모든 형제로 구성된 확장 집합을 반환한다.

siblings()

확장 엘리먼트의 모든 형제를 포함하는 확장 집합을 반환한다.

2.3.5 확장 집합을 이용하는 기타 방법들 

find(selector)

설명

원본의 모든 엘리먼트 중 전달된 셀렉터 표현식과 일치하는 엘리먼트로 구성된 새로운 확장 집합을 반환한다.

매개변수

selector (String)

반환될 집합의 일부가 될 엘리먼트가 일치하는 셀렉터

반환값

새로 생성된 확장집합

 

wrappedSet.find("p cite"); 

변수 wrappedSet에 할당된 확장 집합에서, <p> 엘리먼트에 포함된 모든 <cite>엘리먼트로 구성된 확장 집합을 생성.

 

 $("p").find("span").css('color','red'); 

<p>엘리먼트 하위의 <span>엘리먼트의 글자색을 빨간색으로 설정

 

 $("span", $("p")).css('color','red'); // 더 간결한 방법

 

is(selector)

설명

확장 집합에 전달된 셀렉터 표현식과 일치하는 엘리먼트가 있는지 확인한다.

매개변수

selector (String)

확장 집합 엘리먼트를 평가 할 셀렉터 표현식

반환값

전달된 셀렉터에 하나라도 일치하면 true, 그렇지 않다면 false

 

var hasImage = $("*").is("img");

전체 엘리먼트중 <img>엘리먼트가 존재하면 hasImage 변수에 true를 저장한다. 그렇지 않으면 false

 

 

2.3.6 jQuery 체인 관리하기

end()

설명

jQuery 커맨드 체인에서 사용하며 이전 확장 집합으로 돌아간다.

매개변수

없음

반환값

이전 확장 집합

 

$("img").appendTo("#somewhere").end().addClass("beenCloned");

아이디가 #somewhere인 엘리먼트 하위에 <img> 엘리먼트를 붙이고, <img>엘리먼트에 beenCloned 클래스를 추가한다.

 

andSelf()

설명

커맨드 체인에서 이전 확장 집합 두 개를 하나로 합친다.

매개변수

없음

반환값

합쳐진 확장 집합

 

$("div#aa").find("p").andSelf().css("border", "2px solid red");

id가 aa인 <div>엘리먼트의 확장 집합과 <div>엘리먼트 하위의 <p>엘리먼트의 확장 집합을 합친

확장집합의 border 값을 2px solid red로 설정한다.

 

3.1 엘리먼트 프로퍼티와 어트리뷰트 조작하기

  3.1.1 엘리먼트 프로퍼티 조작하기 

each(iterator)

설명

일치하는 집합을 순회하면서 전달된 반복자 함수를 엘리먼트마다 호출한다.

매개변수

iterator (Function)

일치하는 집합의 엘리먼트마다 호출되는 함수. 집합에 있는 엘리먼트의 0부터 시작하는 인덱스를 매개변수로 받는다. 엘리먼트는 함수의 this 프로퍼티로 이용할 수 있다.

반환값

확장집합

 

    $("img").each(function(n){

        this.alt = "아이디가 " + this.id + "인 image[" + n + "]이다."

    })

   

  3.1.2 어트리뷰트 값 가져오기

attr(name)

설명

일치하는 잡합의 첫 번째 엘리먼트에서 매개변수로 명시된 어트리뷰트의 값을 얻는다.

매개변수

name(String)

값을 가져올 어트리뷰트의 이름

반환값

첫 번째로 일치하는 엘리먼트의 어트리뷰트 값.

없으면 undefined

 

  <img id="myImage" src="test.gif" alt="이미지"/>

  $("#myImage").attr("alt");

 

  3.1.3 어트리뷰트 값 설정하기

attr(name, value)

설명

매개변수에 전달된 값을 이용해 확장 집합의 모든 엘리먼트에 해당 어트리뷰트 이름의 값을 설정한다.

매개변수

name(String) 값을 설정할 어트리뷰트 이름

value(String|Object|Function) 어트리뷰트 값을 명시한다. 값을 반환하는 자바스크립트 표현식이나 함수를 사용할 수 있다. 이 매개변수가 어떻게 처리되는지는 이어지는 논의를 살펴보자.

반환값

확장 집합

 

  $("*").attr("title", function(indext){

    return "나는 " + index + "번 엘리머트이고 내 이름은 " + (this.id? this.id : "unset") + "이다";

  });

  $("input").attr({value : "", title : "값을 입력하세요."});

  3.1.4 어트리뷰트 제거하기

removeAttr(name)

설명

일치하는 모든 엘리먼트에서 명시된 어트리뷰트를 제거한다.

매개변수

name(String) 삭제할 어트리뷰트 이름

반환값

확장 집합

 

어트리뷰트를 제거한다고 해서 자바스크립트 DOM 엘리먼트에서 대응하는 프러퍼티가 제거되는 않음에 주목하자. 단지 값이 변경될 뿐이다. 예를 들어 한 엘리먼트에서 readonly 어트리뷰트를 제거함으로써 readonly 프로퍼티 값이 true에서 false로 전환되지만 이로 인해 엘리먼트에서 프로퍼티가 제거되지는 않는다.

 

3.2 엘리먼트 스타일 변경하기

  3.2.1 클래스 추가하고 제거하기

addClass(name)

설명

매개변수로 전달된 하나 이상 되는 클래스명을 확장 집합의 모든 엘리먼트에 추가한다.

매개변수

name(String)

클래스명을 포함하는 문자열, 여러 클래스명을 추가할 때는 공백으로 구분한다.

반환값

확장 집합

 

removeClass(name)

설명

매개변수로 전달된 하나 이상되는 클래스명을 확장 집합에 있는 모든 엘리먼트에서 제거한다.

매개변수

name(String)

클래스명을 포함하는 문자열, 다수의 클래스명을 제거하는 경우 고액으로 구분한다.

반환값

확장 집합

 

toggleClass(name)

설명

매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고, 존재한다면 제거한다. 이때 각 엘리먼트가 개별로 평가되므로, 클래스명이 추가되는 엘리먼트도 있고 제거되는 엘리먼트도 있다는점에 주목한다.

매개변수

name(String)

토글 대상 클래스명을 포함하는 문자열

반환값

확장 집합

 

   function swap(){

     $("tr").toggleClass("striped");

   }

 

   <table onmouseover="swap();" onmouseout="swap();">

 

  3.2.2 스타일 얻고 설정하기

 

css(name, value)

설명

일치하는 각 엘리먼트에 name 매개변수의 CSS 스타일 프로퍼티를 value 매개변수 값으로 설정한다.

매개변수

name(String) 설정하려는 CSS 프러퍼티 이름

value(String|Number|Function)

프로퍼티 값을 포함하는 문자열, 숫자, 함수.

매개변수로 함수가 전달되면, 확장 집합에 있는 각 엘리먼트는 함수의 반환값을 CSS 프로퍼티 값으로 사용한다. 각 함수 호출에서 this 프로퍼티는 평가할 엘리먼트로 설정된다.

반환값

확장 집합

 

  $("div.expandable").css("width", function(){

     return $(this).width() + 20 + "px";

  });

 

css(properties)

설명

매개변수로 전달된 객체에 키로 명시한 CSS 스타일 프로퍼티를 일치하는 엘리먼트의 해당 값으로 설정한다.

매개변수

properties (Object)

확장 집합에 속한 모든 엘리먼트에 설정할 CSS 프로퍼티를 포함한 객체.

반환값

확장 집합

 

  $("div.expandable").css({color:red, width:20px, height: function(index, value) { 
        return parseFloat(value) * 1.2; 
      } });

css(name)

설명

확장 집합의 첫 번째 엘리먼트에서 name으로 명시한 CSS 프로퍼티의 계산 값을 가져온다.

매개변수

name(String)

반환될 CSS 프로퍼티 이름을 명시한다.

반환값

계산된 스타일 값

 

$("div.expandable").css("color");

 

width(value) / height(value)

설명

일치하는 집합에 속한 모든 엘리먼트의 너비나 높이를 설정한다.

매개변수

value(Number)

설정된 픽셀 값

반환값

확장 집합

 

width() / height()

설명

확장 집합의 첫 번째 엘리먼트의 너비나 높이를 가져온다.

매개변수

없음

반환값

계산된 너비나 높이의 숫자 값

 

   $("div.myElements").width(500);

   $("div.myElements").css("width", "500px");

  

   var value = $("div.myElements").width();

 

  3.2.3 스타일과 관련된 유용한 커맨드

hasClass(name)

설명

일치하는 집합의 엘리먼트에 전달된 클래스 이름이 있는지 확인한다.

매개변수

Name (String)

확인하려는 클래스 이름

반환값

확장 집합의 엘리먼트가 저달된 클래스 이름을 가지면 true, 아니면 false를 반환한다.

 

 

$("p:first").hasClass("surpriseMe");

내부적으론 아래와 같이 구현 되어 있다.

$("p:first").is(".surpriseMe");

 

3.3 엘리먼트 콘텐츠 설정하기

  3.3.1 HTML과 텍스트 콘텐츠 대체하기

html(text)

설명

전달된 HTML 코드를 모든 일치하는 엘리먼트의 콘텐츠로 설정한다.

매개변수

text (String)

엘리먼트 콘텐츠로 설정될 HTML 코드

반환값

확장 집합

 

$("div").html("<span class='red'>Hello <b>Again</b></span>");

그냥 innerHTML인가 보네..

 

text()

설명

확장 엘리먼트의 모든 텍스트 콘텐츠를 결합하여 커맨드의 결과로 반환한다.

매개변수

없음

반환값

결홥된 문자열

 

var text = $("div").text(); 

텍스트 노드만 가져온다.

 

text(content)

설명

모든 확장 엘리먼트의 텍스트 콘텐츠를 전달된 값으로 설정한다. 전달된 텍스트가 “<” 또는 “>”을 포함한다면, 그 문자는 HTML 엔티티로 대체된다. (화면에 그대로 표시한다)

매개변수

Content (String)

확장 엘리먼트에 설정될 콘텐츠

반환값

확장 집합

 

$("div").text("<span class='red'>Hello <b>Again</b></span>"); 

<span class='red'>Hello <b>Again</b></span> 모두 문자열로 화면에 그대로 출력

 

  3.3.2 엘리먼트 복사하기와 이동하기

append(content)

설명

일치하는 모든 엘리먼트의 콘텐츠에 전달된 HTML 코드나 엘리먼트를 덧붙인다.

매개변수

content (String|Element|Object)

확장 집합의 엘리먼트에 추가할 문자열, 엘리먼트, 확장 엘리먼트 집합.

반환값

확장 집합

 

appendTo(target)

설명

확장 집합의 모든 엘리먼트를 target의 끝으로 이동시킨다.

매개변수

target (String|Element)

jQuery 셀렉터나 DOM 엘리먼트. 확장 집합에 있는 각 엘리먼트는 target의 위치에 추가된다. 셀렉터가 두 개 이상 엘리먼트에 일치하면 엘리먼트는 복사되고, 그런 다음 일치하는 각 엘리먼트에 추가된다.

반환값

확장 집합

 

$("p").append("<b>text</b>");

$("p.appendToMe").append($(a.appendMe));

var toAppend = $("a.appendMe")[0];

$("p.appendToMe").append(toAppend);

 

a.apend(b) // a 엘리먼트에 b엘리먼트를 덧붙인다.

a.appendTo(b)  // a 엘리먼트를 b 엘리먼트에 덧붙인다.

 

대상이 하나이면 원본 엘리먼트는 기존 위치에서 삭제되고 덧붙여지도록 지덩된 새로운 부모 엘리먼트의 위치로 이동한다.

대상이 여러개라면 원본 엘리먼트는 그대로 남아 있고 각 대상에 복사본이 추가된다.

 

<div class="inner">Hello</div>
<div class="inner">Goodbye</div>

 

// 원본 엘리먼트를 대상 엘리먼트 앞에 삽입한다.

$('.inner').prepend('<p>Test</p>');

<div class="inner">
    <p>Test</p>
    Hello
</div>
<div class="inner">
    <p>Test</p>
    Goodbye
</div>

 

$('<p>Test</p>').prependTo('.inner');

<div class="inner">
    <p>Test</p>
    Hello
  </div>
<div class="inner">
    <p>Test</p>
    Goodbye
</div>

 

 

// 엘리먼트를 대상의 첫 번째 자식으로 삽입하는 대신에 대상의 바로 앞 형제로 삽입한다.

$('.inner').before('<p>Test</p>');

<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>

 

$('<p>Test</p>').insertBefore('.inner');

<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>

 

 

//엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에 대상의 바로 뒤 형제로 삽입한다.

$('.inner').after('<p>Test</p>');

<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>

 

$('<p>Test</p>').insertAfter('.inner');

<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>

 

 3.3.3 엘리먼트 감싸기

 

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

 

wrap(wrapper)

설명

일치하는 집합의 엘리먼트를 전달된 HTML 태그나 엘리먼트의 복사본으로 감싼다.

매개변수

wrapper (String|Element)

일치하는 집합 내에 있는 각 엘리먼트를 감싸려는 HTML 코드 문자열 또는 래퍼로 제공되는 복사될 엘리먼트

반환값

확장 집합

 

$('.inner').wrap('<div class="new" />');

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

 

wrapAll(wrapper)

설명

일치하는 집합 내에 있는 모든 엘리먼트를 전달된 HTML 태그나 전달된 엘리먼트의 복사본으로 감싼다. 일치하는 집합을 하나의 단위로 취급한다.

매개변수

wrapper (String|Element)

일치하는 집합의 각 엘리먼트를 감싸려는 HTML 코드 문자열 또는 래퍼로 제공되고 복사될 엘리먼트

반환값

확장 집합

 

$('.inner').wrapAll('<div class="new" />');

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div> 

 

wrapInner(wrapper)

설명

일치하는 집합에서 엘리먼트의 텍스트 노드를 포함한 콘텐츠를 전달된 HTML 태그나 엘리먼트의 복사본으로 감싼다.

매개변수

wrapper (String|Element)

일치하는 집합의 각 엘리먼트를 감싸려는 HTML 문자열 또는 래퍼로 제공되는 복사될 엘리먼트

반환값

확장 집합

 

$('.inner').wrapInner('<div class="new" />');

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

  3.3.4 엘리먼트 제거하기

remove()

설명

페이지 DOM에서 확장 집합의 모든 엘리먼트를 삭제한다.

매개변수

없음

반환값

확장 집합

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

 

$('.hello').remove();

$('div').remove('.hello');

 

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

 

empty()

설명

일치하는 집합의 모든 DOM 엘리먼트의 콘텐츠를 제거한다.

매개변수

없음

반환값

확장 집합

 

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

 

$('.hello').empty();

<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

 

$("div#divTest").after("<p>div를 대체한다.</p>").remove(); 

$.fn.replaceWith = function(html){

   return this.after(html).remove();

}

$("div#divTest").replaceWith er("<p>div를 대체한다.</p>"); 

 

  3.3.5 엘리먼트 복사하기

clone(copyHandlers)

설명

확장 집합에 있는 엘리먼트를 복사하여 이를 포함하는 새로운 확장 집합을반환한다. 엘리먼트와 자식 모두 복사된다. copyHandlers 매개변수 옵션에 따라 이벤트 핸들러의 복사 여부가 결정된다.

매개변수

copyHandlers (Boolean)

true이면 이벤트 핸들러를 복사하고, false이거나 생략하면 복사하지 않는다.

반환값

새로 생성된 확장 집합

 

$("img").clone(); // 원본 확장 집합과 복사본 확장 집합 2개 생성후 아무것도 안함.

// 확장집합 복사 후 id가 here인 노드 바로 앞 형제로 삽입 후 원본 확장 집합 숨김

$("img").clone().insertBefore("#here").end().hide();

 

3.4 폼 엘리먼트 값 다루기

val()

설명

일치하는 집합에 있는 첫 번째 엘리먼트의 value 프로퍼티를 반환한다. 다중 선택이 가능한 엘리먼트라면, 반환값은 선택된 값의 배열이다.

매개변수

없음

반환값

가져온 값 혹은 값의 배열

 

$("[name=radioGroup]:checked").val(); // name이 radioGroup인 라디오 버튼들중 선택된 라디오 버튼의 value값을 가져온다.

체크박스와 마친가지로 확장집합의 첫번째 값만 가져오기 때문에 :checked를 안해주면 선택이 되었던 안되어있던 첫번째

라디오 버튼의 value값을 가져온다.

 

val(value)

설명

매개변수로 전달된 값을 일치하는 모든 폼 엘리먼트의 value 프로퍼티로 설정한다.

매개변수

value (String)

확장 집합에 있는 각 폼 엘리먼트의 value 프로퍼티에 설정할 문자열

반환값

확장 집합

 

$("[type=radio]").val("c"); // 셋팅 안됨
$("[type=checkbox]").val("가"); // 셋팅 안됨
$("[type=text]").val("텍스트 박스"); // 셋팅 됨
$("select").val("Multiple"); // 셋팅 됨

 

val(values)

설명

전달된 values 배열의 값과 일치하는 확장 집합에 있는 체크박스, 라디오 버튼을 선택하고 <select> 엘리먼트의 옵션을 선택한다.

매개변수

value (Array)

엘리먼트의 선택 여부를 결정하는 데 사용하는 값의 배열

반환값

확장 집합

 

 

$("[type=radio]").val(["c"]); // 셋팅 됨

$("[type=checkbox]").val(["가"]); // 셋팅 됨
$("[type=text]").val(["텍스트 박스"]); // 셋팅 됨
$("select").val(["Multiple"]); // 셋팅 됨

 

<select>에 배열로 넘기면 멀티 선택이 가능하고 (multiple="multiple" or multiple="true")

text박스에 배열로 넘기면 (["가","나","다"])

가,나,다 <= 요따구로 셋팅된다

[출처] [jQuery] 1주차 (남궁성의 자바(java)초보스터디) |작성자 킴디

.

'jQuery' 카테고리의 다른 글

JQuery 와 Prototype 충돌 방지  (0) 2012.07.09
jquery 유효성 검사  (0) 2012.02.09
jQuery 스크롤 올리기  (0) 2012.02.07
XML HTML로 로드 하기  (0) 2012.01.10
jquery 동적 js 실행  (0) 2012.01.10
블로그 이미지

스마트전

,

공지사항

글 보관함

달력

«   2024/04   »
일 월 화 수 목 금 토
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

티스토리툴바