JQuery: 제이쿼리 사용법 이것저것 (select opiton, 체크박스, DOM, 위아래이동, 이벤트 부여, 배열 순회, 자식-부모 요소, AJAX, XML 파싱, 이벤트 한번만 실행 one)

select ~ option의 선택된 값 읽기

$("select option:selected").val() // 또는 .text()

체크박스 체크되어있는지 알아내기

$("#specific-checkbox).is(":checked")

JQuery 전용 포맷 DOM을 일반용으로 변경

$("#element-id").get(0)

여러개의 같은 요소로 이루어진 리스트에서 한 칸 아래/위(다음/이전)으로 이동

$(".each-div.active").next().after($(".each-div.active"))
$(".each-div.active").prev().before($(".each-div.active"))

해당 요소에 부여된 이벤트 트리거

$("#element-id").on("click", function(){...}) // 이벤트 부여
$("#element-id").trigger("click") // 해당 요소를 클릭했을 때의 이벤트 강제 발생

체크박스 체크 상태 변경

$("input[type='checkbox'").prop("checked", true) // true: 체크됨, false: 체크 해제

JQuery 에서 배열로 된 여러 요소 순회하기 (each)

$(".div-several-list").each(function(index, obj){
  // index: 0부터 1 씩 증가
  // obj: 각 배열의 객체(또는 값)
})

특정 요소의 자식 요소들 반환

$(".div-wrapper").children()

특정 요소의 상위 요소들 중 조건과 제일 가까운 요소 찾기

<div>
  <ul data-state="idle">
    <li>
      <span><input type="text" id="start-element"></span>
    </li>
   </ul>
</div>

var target = $("#start-element").closest("ul") // 상위에서 가까운 요소 찾기
target.data("state") // 결과: idle

instanceof, typeof

var object = new mech.Robot()

object instanceof mech.Robot // true
object instanceof mech.Spaceship // false

var exStr = "AAAA"

typeof exStr // "String"
typeof thisIsUndefinedObject == "undefined" // true

자바스크립트용 XML Document를 스트링화하기

var exportedStr = new XMLSerializer().serializeToString(xmlDoc)

클래스 다루기

$("#elementId").hasClass("클래스이름") // 요소의 클래스 목록에 해당 클래스가 있는지
$("#elementId").addClass("클래스이름") // 클래스 목록에 클래스 더하기
$("#elementId").removeClass("클래스이름") // 클래스 목록에 클래스 지우기

동적으로 부여된 이벤트에서 중복 실행되는것을 방지

$("#element-id").off("click").on("click", function(){...})

동적으로 생성된 요소에 이벤트 실행되도록 하기

$(document).on("click", "[요소 선택자]", function(){...})

간편 AJAX (GET/POST)

$.get("url주소", {파라미터(옵션)}, function(response){... // 콜백함수 })
$.post("url주소", {파라미터(옵션)}, function(response){... // 콜백함수 })

스트링으로 된 xml을 자바스크립트용으로 파싱

$.parseXML(string)

요소들 중에서 특정 요소만 제외하고 선택 (not)

$("div.each").not("#each-but-special")

name 으로 묶인 라디오 버튼 그룹에서 선택된 값 읽기

$("input[name='radiobox']:checked").val()

이벤트를 한 번만 실행하기 (one)

$("button").one("click", function(){...})

배열 각 원소의 객체 내부를 변경하여 새로운 배열 생성 (map)

var nuArray = $.map(arrayName, function(obj, index){
  obj.id = index
  return obj
})

객체의 키 삭제 (delete)

delete obj.specificKey