tr에 value를 주고 클릭시 this.val()했는데 값이 안넘어옴...

그래서 찾아보니

델리게이트   on메서드를 써야 했다... 

$(function(){
    $(".table .side-link").on('click',function(e){
        e.preventDefault();
        var id = $(this).attr('value');
        alert(id);
    });
});

'jquery' 카테고리의 다른 글

jQuery 선택자  (0) 2018.10.14
제이쿼리 소개  (0) 2018.10.14
jquery Json date read  (0) 2018.10.14
jquery selector 선택자  (0) 2018.10.14

제이쿼리 선택자

  • element Selector

    • $(document).ready(function(){
          $("button").click(function(){
              $("p").hide();
          });
      });

  • #id Selector

    • $(document).ready(function(){
          $("button").click(function(){
              $("#test").hide();
          });
      });

  • .class Selector

    • $(document).ready(function(){
          $("button").click(function(){
              $(".test").hide();
          });
      });

    • More jQuery Selectors

    • $("*")  Selects all elements    
      $(this) Selects the current HTML element    
      $("p.intro")    Selects all <p> elements with class="intro" 
      $("p:first")    Selects the first <p> element   
      $("ul li:first")    Selects the first <li> element of the first <ul>    
      $("ul li:first-child")  Selects the first <li> element of every <ul>    
      $("[href]") Selects all elements with an href attribute 
      $("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"    
      $("a[target!='_blank']")    Selects all <a> elements with a target attribute value NOT equal to "_blank"    
      $(":button")    Selects all <button> elements and <input> elements of type="button" 
      $("tr:even")    Selects all even <tr> elements  
      $("tr:odd") Selects all odd <tr> elements


'jquery' 카테고리의 다른 글

<tr>에서 get value() 벨류값 가져오기  (0) 2019.05.22
제이쿼리 소개  (0) 2018.10.14
jquery Json date read  (0) 2018.10.14
jquery selector 선택자  (0) 2018.10.14

jQuery 소개

jQuery는 가볍고, 적게쓰고, 더 많은 것을 할수있는 자바스크립트 라이브러리 입니다.

제이쿼리의 목적은 웹사이트를 좀더 쉽게 만드는 것입니다.

제이쿼리를 적용하는 가장쉬운 방법은 CDN을 추가하는 것입니다.

  • 구글에서 제공하는 CDN

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

  • ms제공 CDN

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>

jQeury 예제

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>
​
<p>여기를누르면 사라져요.</p>
<p>눌러보세요!</p>
<p>눌러보세요!</p>
​
</body>
</html>


'jquery' 카테고리의 다른 글

<tr>에서 get value() 벨류값 가져오기  (0) 2019.05.22
jQuery 선택자  (0) 2018.10.14
jquery Json date read  (0) 2018.10.14
jquery selector 선택자  (0) 2018.10.14

jquery에서 json 데이터 읽기

each를 이용한 json data 읽기

jQuery.each( collection, callback(indexInArray, valueOfElement) )
​
or
​
$.each( collection, callback(indexInArray, valueOfElement) )
​

collection : array or object

callback = function

indexInArray : array 나 object 의 key

valueOfElement : array 나 object의 value

json 데이타를 jQuery에서 읽어오는 예제

<!doctype html>
​
<html lang="en">
​
<head>
    <meta charset="utf-8">
    <title>json 데이타를 jQuery에서 읽어오는 예제</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
​
<body>
    <script>
        var obj = {
            one: 1,
            two: 2,
            three: 3,
            four: 4,
            five: 5
        };
​
        $.each(obj, function(key, value) {
            alert('key:' + key + ', value:' + value);
        });
​
        //여러개의 데이타가 있을경우
        var obj2 = [{
            name: "홍길동",
            age: "20"
        }, {
            name: "이순신",
            age: "30"
        }];
​
        $.each(obj2, function(key, value) {
            alert('key:' + key + ', name:' + value.name + ',age:' + value.age);
        });
​
    </script>
​
</body>
​
</html>
​


'jquery' 카테고리의 다른 글

<tr>에서 get value() 벨류값 가져오기  (0) 2019.05.22
jQuery 선택자  (0) 2018.10.14
제이쿼리 소개  (0) 2018.10.14
jquery selector 선택자  (0) 2018.10.14

노드찾기

      • - 태그 이름으로 노드 찾기 : $("태그이름"), $("선택자")

      • - 클래스 이름으로 노드 찾기 : $(".클래스이름")

      • - ID로 노드 찾기 : $("선택자")

      • - 속성으로 노드 찾기 : $("[속성이름=값]")

      • - 찾은 요소 개수 구하기 : .size() , .length

      • - 찾은 요소 n번째 접근하기 : .eq(index) , .each(function(index){});

      • - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

      • - 찾은 요소에서 특정 자식요소만 찾기 : .find("선택자")


자식 노드 찾기

      • 전체 자식 노드 찾기

          • -- 텍스트 노드 포함 전체 자식 노드 찾기 : $("선택자").contents()

          • -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

    • n번째 자식 노드 접근

        • -- $("선택자").children().eq(N)

        • -- $("선택자").children(":eq(N)")

    • 첫번째 자식 노드 접근

        • -- $("선택자").children().first()

        • -- $("선택자").children(":first")

        • -- $("선택자").children().eq(0)

        • -- $("선택자").children(":eq(0)")

    • 마지막 자식 노드 접근

        • -- $("선택자").children().last()

        • -- $("선택자").children(":last")


부모 노드 찾기

      • - 바로 위의 부모 : $("선택자").parent()

      • - 모든 부모 찾기

            • -- $("선택자").parents() 모든 부모

      • - 모든 부모 중 선택자에 해당하는 부모 찾기

            • -- $("선택자").parents("선택자")


형제 노드 찾기

    • - 이전 형제 노드 찾기

        • -- $("선택자").prev()

        • -- $("선택자").prevAll("선택자");

    • - 다음 형제 노드 찾기

        • -- $("선택자").next()

        • -- $("선택자").nextAll("선택자");


노드 생성,추가,이동,삭제

    • 생성

        • $("노드")

        • $("선택자").html("<노드>...")

        • $("노드").clone()

    • 추가

        • $기준노드.append($추가노드)

        • $추가노드.appendTo($기준노드)

        • $기준노드.prepend($추가노드)

        • $추가노드.prependTo($기준노드)

        • $추가노드.insertBefore($기준노드)

        • $기준노드.before($추가노드)

        • $추가노드.insertAfter($기준노드)

        • $기준노드.after($추가노드)

    • 삭제

        • $("선택자").remove()

    • 이동

        • $기준노드.append($이동노드)

        • $이동노드.appendTo($기준노드)

        • $이동노드.insertBefore($기준노드)

        • $기준노드.before($이동노드)

        • $이동노드.insertAfter($기준노드)

        • $기준노드.after($이동노드)


텍스트 노드 다루기

    • 텍스트 노드 생성 : $("텍스트")

    • 텍스트 노드 추가 : $기준노드.append("텍스트")

    • 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")


기본 CSS 셀렉터 사용하기

    • a - 모든 링크(<a>) 엘리먼트와 일치하는 셀렉터.

    • #exID - exID를 아이디로 가지는 엘리먼트와 일치하는 셀렉터.

    • .exClass - exClass를 클래스로 가지는 엘리먼트와 일치하는 셀렉터.

    • a#exID.exClass - 아이디가 exID 이고, 클래스가 exClass인 링크와 일치하는 셀렉터.

    • p a.exClass - <p> 엘리먼트 내에 클래스가 exClass인 모든 링크와 일치하는 셀렉터.

    • 아래 코드와 같이 쓰임

    • $("p a.exClass")

    • 자식 셀렉터(child selector) : 부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분

    • 예제) ul.myList > li > a

    • 설명) myList 클래스를 지닌 <ul> 엘리먼트의 바로 아래 자식 리스트 앨리먼트인 <li>에서

    • 바로 아래 자식 링크만 선택한다.

    • [ 어트리뷰트 셀렉터 ]

    • a[href^=http://] - href의 값이 http://로 시작하는 모든 링크를 의미. 캐럿문자(^)는 값의 시작 부분이 일치하는지를 뜻함

    • form[method] - 명시적으로 method 어트리뷰트를 가지는 <form> 엘리먼트

    • input[type=text] - type이 text인 모든 input 엘리먼트

    • div[title^=my] - title 어트리뷰트의 값이 my로 시작하는 모든 <div> 엘리먼트

    • a[href$=.pdf] - PDF 파일을 참조하는 모든 링크

    • a[href*=jquery.com] - jQuery 사이트를 참조하는 모든 <a> 엘리먼트. *는 어트리뷰트의 값이 임의의 문자열을 포함하는 엘리먼트를 찾아오라는 셀렉터.

    • li:has(a) - <a> 엘리먼트를 포함하는 모든 <li> 엘리먼트

    • li a - <li>엘리먼트 바로 아래 자식의 모든 <a> 엘리먼트

기본 CSS 셀렉터

    • 모든 엘리먼트와 일치

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


위치 셀렉터

    • a:first - 페이지에서 첫 번째 <a> 엘리먼트

    • p:odd - 모든 홀수 번째 문단 <p> 엘리먼트

    • p:even - 모든 짝수 번째 문단 <p> 엘리먼트

    • li:last-child - 부모 엘리먼트의 마지막 자식 엘리먼트

    • :first - 페이지에서 처음으로 일치하는 엘리먼트

    • :last - 페이지에서 마지막으로 일치하는 엘리먼트

    • :first-child - 첫 번째 자식 엘리먼트

    • :last-child - 마지막 자식 엘리먼트

    • :only-child - 형제가 없는 모든 엘리먼트를 반환한다

    • :nth-child(n) - n번째 자식 엘리먼트

    • :nth-child(even:odd) - 짝수 또는 홀수 자식 엘리먼트

    • :nth-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번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.

    • n번째 자식 셀렉터는 CSS와 호환성을 유지하려고 인덱스를 1부터 시작.

    • jQuery 정의 셀렉터는 범용 프로그래밍 규약에 따라 인덱스를 0부터 시작.


정의 셀렉터

    • :animated - 현재 애니메이션이 적용되고 있는 엘리먼트를 선택

    • :button - 모든 버튼을 선택 ( input[type=submit], input[type=reset], input[type=button], button )

    • :checkbox - 체크박스 엘리먼트만 선택

    • :checked - 선택된 체크박스나 라디오 버튼만 선택 (CSS에서 지원)

    • :contains(foo) - 텍스트 foo를 포함하는 엘리먼트만 선택

    • :disabled - 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택 (CSS에서 지원)

    • :enabled - 인터페이스에서 활성화 상태인 모든 엘리먼트를 선택 (CSS에서 지원)

    • :file - 모든 파일 엘리먼트를 선택 ( input[type=file] )

    • :header - 헤더 엘리먼트만 선택 <h1>부터 <h6>까지 선택

    • :hidden - 감춰진 엘리먼트만 선택

    • :image - 폼 이미지를 선택 ( input[type=image] )

    • :input - 폼 엘리먼트만 선택 ( input, select, textarea, button )

    • :not(filter) - 필터의 값을 반대로 변경 ( 1.3 버전에서는 변경됨 )

    • :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 - 보이는 엘리먼트만 선택

    • :checkbox:checked:enabled - 활성화되고 선택된 체크박스만 선택

    • :not 필터

    • - 필터 결과가 반대로 나오게 함.

    • - CSS 필터에서 지원

    • - jQuery 정의 셀렉터에서도 동작

    • - 필터 셀렉터에는 적용할 수 있지만 찾기 셀렉터에는 적용하지 못한다.

    • - 모두 콜론 문자(:)나 대괄호 문자([)로 시작.

    • input:not(:checkbox) - 체크박스가 아닌 <input> 엘리먼트 선택

    • 필터 셀렉터 - 기준을 추가해서 일치하는 엘리먼트의 집합을 줄여나간다.

    • 찾기 셀렉터 - 이미 선택된 엘리먼트와 맺은 관계를 통해 다른 엘리먼트를 찾는다. [ 자손 셀렉터(공백문자), 자식 셀렉터(>), 형제 셀렉터(+) ]가 있다.


'jquery' 카테고리의 다른 글

<tr>에서 get value() 벨류값 가져오기  (0) 2019.05.22
jQuery 선택자  (0) 2018.10.14
제이쿼리 소개  (0) 2018.10.14
jquery Json date read  (0) 2018.10.14

+ Recent posts

티스토리툴바