기초 jQuery 정리

기초 jQuery 정리

(추가적인 API는 http://docs.jquery.com/Main_Page에서 참조)

 

Attributes

data( name ) – 메모리상에 name에 대한 data 조회

data( name, value ) – 메모리상에 data생성(name에 대한 value)

removeData( name ) – 메모리상에서 data 삭제

$("div").data("test", { first: 16, last: "pizza!" });

$("span:first").text($("div").data("test").first);

$("span:last").text($("div").data("test").last);

 

 

 

Selectors

 

Basics:

#id – 개체의 id가 #뒤에 있는 id 인 것 찾기(Array반환)

$("#myDiv").css("border","3px solid red");

Element – 태그던 속성이던 Name이 Element 이름인 것 찾기(Array반환)

$(“Div”) => Div 태그 찾기

 

.Class, .Class.Class – 스타일의 class명이 .뒤에 있는 class명인 것 찾기(Array반환)

$(".myClass.myOtherClass").css("border","3px solid red");

*-모든 Element 찾기

$("*").css("border","3px solid red");

Selector1,Select2,SelectN – N개의 Element 이름으로 찾기

$("div,span,p.myClass").css("border","3px solid red");

Hierarchy:

ancestor descendant – 해당 부모의 자식들만 찾기(Array반환)

$("form input").css("border", "2px dotted blue");

ð  폼 태그 밑에 있는 input 찾아서 스타일 적용

 

parent > child – parent 바로 밑 자식 Element 찾기(Array반환)

$("#main > *").css("border", "3px double red");

ð  Id가 main Element 바로 아래에 있는 자식 Element 모두 찾기(Array반환)

 

prev + next – 이전 Element 와 다음 Element 가 매치되는 next Element 모두 찾기(Array반환)

$("label + input").css("color", "blue").val("Labeled!")

ð  Label 뒤에 있는 input Element 만을 찾아서 스타일 적용하고 value값에 Labeled! 할당

 

prev ~ siblings – prev Element 찾아서 그 자식에 있는 silblings 형제 Element 모두 찾기(Array반환)

$("#prev ~ div").css("border", "3px groove blue");

ð  Id가 prev인 Element의 자식 개체중 div형제들만 모두 찾아 스타일 적용

 

Basic Filters:

 

:first - :앞에 있는 Element 중 첫번째 Element 찾기(:last는 마지막)

$("tr:first").css("font-style", "italic");

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

ð  Tr Element 중 첫번째 tr Element 에 스타일 적용

 

:not(selector)  - select 속성이 false나 not checked 등의 Element 찾기

$("input:not(:checked) + span").css("background-color", "yellow");

$("input").attr("disabled", "disabled");

ð  Input Element중 not checked 인 개체 다음에 있는 span에 스타일 적용, input Element 모두 속성을 disabled 해라.

 

:even , :odd – 각 짝수,홀수 Element 찾기

$("tr:even").css("background-color", "#bbbbff");

$("tr:odd").css("background-color", "#bbbbff");

ð  Tr 중에 짝수 tr,홀수 tr에 스타일 적용

 

:eq(index)  - Element 중 해당 index에 있는 개체 찾기

$("td:eq(2)").css("color", "red");

ð  모든 Td중에 3번째 있는 td에 스타일 적용

 

:gt(index) – index 보다 큰(greater) 한 Element 모두 찾기

$("td:gt(4)").css("text-decoration", "line-through");

ð  Td중 5번째 이후(보다 큰) td Element에 스타일 적용

:lt(index) - index 보다 작은(litter) 한 Element 모두 찾기

$("td:lt(4)").css("color", "red");

ð  Td중 5번째 이전(보다 작은) td Element에 스타일 적용

 

:header – h 태그(<h1>,<h2>…)만 모두 찾기

$(":header").css({ background:'#CCC', color:'blue' });

:animated  - 해당 animated한 Element 찾기

$(document).ready(function(){

    $("#run").click(function(){

      $("div:animated").toggleClass("colored");

    });

    function animateIt() {

      $("#mover").slideToggle("slow", animateIt);

    }

    animateIt();

});

ð    ready되었을 때 animateIt() 함수가 호출되어 id가 mover인 개체에 animate 시키고 id가 run인 Element가 클릭 되면 현재 div중 animated된 mover 개체 찾아서 toggle시킴.

 

Content Filters:

:contains(text) – 해당 개체 중 text 포함된 Element 모두 찾기

$("div:contains('John')").css("text-decoration", "underline");

:empty – 해당 개체 중 비워있는 Element 모두 찾기

$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');

ð  td중 td태그안이 비워 있는 개체(td)를 모두 찾아서 “Was empty!” 텍스트 입력하고 스타일 적용

 

 

 

 

:has(selector) – 해당 개체중에 selector가 있는 Element 모두 찾기

$("div:has(p)").addClass("test");

ð  div Element중 p태그가 있는 Element 찾아서 class 추가

 

:parent – 해당 개체가 부모인 것 즉 자식 Element 를 가지는 개체를 모두 찾기

$("td:parent").fadeTo(1500, 0.3);

ð  td중 자식 Element가 있는 즉 td가 부모인 것 찾아서 fade 효가 주기(1500=속도,0.3=투명도)

 

 

Visibility Filters:

 

:hidden – hidden 속성(display:none)이나 hidden 컨트롤 모두 찾기(form,내용없는 span,div모두 포함됨)

// in some browsers :hidden includes head, title, script, etc... so limit to body

    $("span:first").text("Found " + $(":hidden", document.body).length +

                         " hidden elements total.");

    $("div:hidden").show(3000);

    $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

 

ð  span 중 첫번째에 body 밑에 모든 hidden Element 개수 표시, div중 hidden속성으로 된 개체 나타내기, 마지막 span에 input 개체중 hidden 인 Element 개수 표시

 

:visible – hidden과 반대로 보이는 Element 모두 찾기

$("div:visible").click(function () {

      $(this).css("background", "yellow");

    });

    $("button").click(function () {

      $("div:hidden").show("fast");

    });

 

Attribute Filters:

[attribute] - attribute이름의 속성값이 있는 개체만 찾기

$("div[id]").one("click", function(){

      var idString = $(this).text() + " = " + $(this).attr("id");

      $(this).text(idString);

    });

ð  div중 “id” 속성이 있는 개체만 해당하고 one(한번만) click 이벤트 적용

 

[attribute=value] – 속성값이 value인 개체 찾기

[attribute!=value] – 속성값이 value가 아닌 개체 찾기

$("input[name='newsletter']").next().text(" is newsletter");

ð  input 개체 중 name 속성이 ‘newsletter’인 개체를 찾아서 다음 개체(next())에 “is newsletter”이라는 텍스트 입력

 

[attribute^=value]  - attribute 값이 value값으로 시작하는 개체 찾기

[attribute$=value] - attribute 값이 value값으로 끝나는 개체 찾기

[attribute*=value] - attribute 값에 value값이 포함되어 있는 개체 찾기

$("input[name^='news']").val("news here!");

ð  input 개체 중 name속성이 ‘news’로 시작되는 개체에 “news here!” value값 할당

$("input[id][name$='man']").val("only this one");

ð  inpu 개체 중 “id”속성이 있고 name속성값이 ‘man’으로 끝나는 개체에 값 할당.

 

Child Filters:

:nth-child(index/even/odd/equation)  - 해당 개체의 자식개체 중 해당 index번째 개체,짝수번째 개체,홀수번째 개체,등식(예:2n 2의 배수인 개체만)에 부합하는 개체 찾기

:first-child – 해당 개체의 자식 개체 중 첫번째 개체 찾기

:last-child - 해당 개체의 자식 개체 중 마지막 개체 찾기

:only-child – 해당 개체의 자식 개체가 오직 1개만 있는 개체 찾기

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

ð  ul 자식개체 중 2번째 개체인 것 모두 찾아 해당 HTML 추가

 

 

Forms:

각 개체(type)들 찾기

:input Returns: Array<Element(s)>

Matches all input, textarea, select and button elements.

:text Returns: Array<Element(s)>

Matches all elements of type text.

:password Returns: Array<Element(s)>

Matches all input elements of type password.

:radio Returns: Array<Element(s)>

Matches all input elements of type radio.

:checkbox Returns: Array<Element(s)>

Matches all input elements of type checkbox.

:submit Returns: Array<Element(s)>

Matches all input elements of type submit.

:image Returns: Array<Element(s)>

Matches all input elements of type image.

:reset Returns: Array<Element(s)>

Matches all input elements of type reset.

:button Returns: Array<Element(s)>

Matches all button elements and input elements of type button.

:file Returns: Array<Element(s)>

Matches all input elements of type file.

var allInputs = $(":input");

    var formChildren = $("form > *");

    $("#messages").text("Found " + allInputs.length + " inputs and the form has " +

                             formChildren.length + " children.");

                              

          // so it won't submit

    $("form").submit(function () { return false; });

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Form Filters:

 

속성이 enabled,disabled,checked,seleced 인 개체만 찾기

:enabled Returns: Array<Element(s)>

Matches all elements that are enabled.

:disabled Returns: Array<Element(s)>

Matches all elements that are disabled.

:checked Returns: Array<Element(s)>

Matches all elements that are checked.

:selected Returns: Array<Element(s)>

 

function countChecked() {

      var n = $("input:checked").length;

      $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");

    }

    countChecked();

    $(":checkbox").click(countChecked);

 

 

Attributes

 

Attr:

 

attr( name ) - name이라는 속성값 찾기

removeAttr( name ) – 해당 속성이름에 해당하는 속성제거

 

var title = $("em").attr("title");

    $("div").text(title);

ð  em 개체에 있는 title 속성값을 div개체에 입력

 

attr( properties ) – 여러 속성을 한번에 할당 할 수 있는 것 같음

$("img").attr({

          src: "/images/hat.gif",

          title: "jQuery",

          alt: "jQuery Logo"

        });

    $("div").text($("img").attr("alt"));

ð  img 개체 모두 찾아 한번에 속성(attr)으로 src:,title:,alt 여러 개 지정.

 

attr( key, value ) – 해당 개체에 속성이름에 대한 값 할당하여 개체에 속성 변경

$("button:gt(1)").attr("disabled","disabled");

attr( key, fn ) – 해당 개체에 속성이름에 대해 함수를 통해 연산(계산)된 값 할당 및 찾기

$("div").attr("id", function (arr) {

          return "div-id" + arr;

        })

        .each(function () {

          $("span", this).html("(ID = '<b>" + this.id + "</b>')");

        });

ð  function에서 arr을 어떻게 받는지는 모르겠지만 div에 대한 배열 index값을 받는 것 같음. 그래서 동적으로 ID값을 생성할 수 있음, div 개체 각각(each)을 돌면서 this(div) 자식 개체인 span 개체 찾아서 html(innerHTML)을 함, $("span", this)는 this내로 범위 한정하는 것임.

 

Class:

addClass( class ) Returns: jQuery

Adds the specified class(es) to each of the set of matched elements. (해당 개체에 클래스 추가)

hasClass( class ) Returns: Boolean

Returns true if the specified class is present on at least one of the set of matched elements. (해당 클래스명을 가지는지의 여부)

removeClass( class ) Returns: jQuery

Removes all or the specified class(es) from the set of matched elements. (해당 개체에 클래스 제거)

toggleClass( class ) Returns: jQuery

Adds the specified class if it is not present, removes the specified class if it is present. (해당 개체에 class로 변경(toggle)시킴 다시 이벤트 발생시 제거)

toggleClass( class, switch ) Returns: jQuery

 

 

HTML: Text:

html( ) – innerHTML 처럼 해당 개체의 HTML 조회.

text( ) – innerTEXT 처럼 해당 개체의 TEXT 조회.

$("p").click(function () {

      var htmlStr = $(this).html();

      $(this).text(htmlStr);

    });

 

ð  p 개체(태그) 클릭하면 p(this)의 innerHTML을 조회하여 p(this)에 text(innerText)로 쓰기

 

html( val ) – innerHTML 할당처럼 해당개체 자식으로 HTML 쓰기

text( val ) - innerTEXT 할당처럼 해당개체 자식으로 Text 쓰기

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

ð  div 자식개체로 해당 HTML 쓰기

 

Value:

val( ) – input 개체의 value 값 조회

val( val ) – input 개체에 value값 할당

$("button").click(function () {

      var text = $(this).text();

      $("input").val(text);

    });

 

ð  button 클릭 시 button의 text를 input의 value로 쓰기

 

$("#single").val("Single2");

$("#multiple").val(["Multiple2", "Multiple3"]);

$("input").val(["check1","check2", "radio1" ]);

 

ð  Select(dropdownlist,ListView),checkbox,radio에 value(선택값) 지정