jQuery_2. 문장구조

oungoo·2020년 9월 24일
0

HTML_CSS_JavaScript

목록 보기
16/21

문장구조

기본구조

$(selector).action();

  • selector : 선택자
  • action() : 선택된 요소가 수행할 작업

js 와 jQuery

// javaScript
var hlist = document.getElementsByTagName("h1")
hlist[0].style.backgroundColor = "yellow";
hlist[0].style.color = "red";


// jQuery
var h = $("h1");
h.css("background-color","yellow");
h.css("color","red");

// 메소드 체이닝 (Method Chaining)
$("h1").css("background-color","yellow").css("color","red");

$(document).ready

  • = onload
  • 문서가 완전히 로드된 후 수행되도록 ready 이벤트 안에 jQuery 메서드 작성
$(document).ready( function(){
	$("h1").css("background","red");
});

// 더 간단히 표기할 수도 있지만 위 방법 권장
$( function(){
  $("h1").css("background","red");
});

선택자

기본선택자

  • 전체 선택자 $("*")
  • 현재 HTML요소 선택자 $(this)
  • 요소선택자(태그선택자) $("h1"), $("p")
    여러개 태그 선택 $("h1, p")
  • class선택자 $(".className")
  • id 선택자 $("#id")

기본선택자 추가사용

  • $("p.intro") : p 요소 중 class가 intro인 것들
  • $("p:first") : p 요소 중 첫번째 요소
  • $("ul li:first") : ul의 자식요소 li중 첫번째 요소
  • $("ul li:first-child") : ul의 자식요소 li중 첫번째 요소들
  • $("[href]") : href 속성이 있는 요소들
  • $("a[target='_blank']") : a 요소중 target 속성값이 '_blank'인 요소들

$( ) 함수

  • jQuery 함수
  • 인수로 다른 함수를 전달하면 문서가 로드될 때 호출될 콜백 함수 등록함
  • window.onload 이벤트와 유사
  • document.ready 이벤트에 대한 이벤트핸들러 함수 지정
  • 로드직후 곧바로 실행

$(선택자,[컨텍스트])

  • 선택자로 작업대상 요소를 검색함
  • 선택된 요소는 jQuery객체에 저장되며 이후 메서드를 호출하여 검색된 요소에 여러가지 조작을 가할수 있음
  • 컨텍스트는 검색의 시작점을 지정
  • 생략하면 문서 전체에서 검색
  • 컨텍스트를 지정하면 그 하위로 검색범위가 제한
$("p",this) => this안의 p라는 의미 
		즉, this는 p의 부모 

$(element)

  • DOM 요소를 인수로 전달하면 이 객체를 감싸는 jQuery 객체 반환
  • jQuery 메서드 사용가능
var elem = document.getElementsByTagName("h1")[0];
  • getElementsByTagName 메서드가 반환하는 것은 DOM객체 배열
  • DOM 객체에 대해 jQuery메서드 호출 불가
  • 이 객체를 $()함수로 전달하여 jQuery객체로 랩핑하면 여러가지 편리한 jQuery메서드 호출가능해짐
$(elem).css("color","red");

$("HTML요소") / $("HTML요소",{properties})

  • 인수로 전달된 HTML 문자열에 새로운 요소를 직접 생성
  • 생성된 요소를 DOM트리의 원하는 부분에 삽입하여 실행중에 문서 만들수 있음
  • properties는 새로 만들어진 요소의 속성, 이벤트 함수 등을 지정
function test(){
	var elem = $("<p>Hello jQuery</p>");
  elem.apendTo("body";
} 

html() / text()

html()

  • body 태그 안의 태그를 포함한 모든 문장
  • 태그가 여러개인 경우, 첫번째 태그만

text()

  • body 태그 안의 모든 문자
  • 모든 태그의 문자
<p>jQuery <strong>easy.</strong></p>
<p>jQuery easy.</p>

$("p").html()
// jQuery <strong>easy.</strong>
$("p").text()
// jQuery easy.jQuery easy.

객체조작

$("p").length

  • p요소의 갯수

반복문

selector 이용

  • $(selector).each(function(param1, param2..){ ... });

object 이용

  • 검색된 요소 갯수 만큼 지정된 함수 호출
  • $.each(object. function(param1, param2 ..){ ... });

0개의 댓글