본문 바로가기

웹 구축/HTML&CSS&JS

【 JS 초급 】Jquery 선택자 및 메소드 1

Jquery에서 HTML 태그 영역을 제어하거나 인자를 받기 위해

선택자를 사용할 수 있다.

 

$("선택자명") 으로 작동되며 Jquery 이하의 메서드들을 사용하여 문서를 제어할 수 있다.

 

선택자의 취급방법은 CSS와 같은데

 

id 선택자 :  #id명

class 선택자 : .클래스명

태그 선택자 : 태그명

 

예를들어, 자바스크립트에서는 

 

document.getElementById("pass") 혹은

document.getElementClass("pass")

 

로 선택하였지만, Jquery에서는

 

$('#pass') 혹은 $('.pass') 와 같이 간단하게 정의 할 수 있다.

 

아래는 Jquery에서 사용되는 메서드들이다.

$().메서드명()

 

lenght : 개수를 구한다.

get(i) : dom 객체에 접근한다.

find("선택자") : 특정 개체만을 선택한다.

remove() : 대상 개체를 제거한다.

html() : 태그를 포함하여 범위의 문서전부를 읽는다.

text() : 태그를 포함하지 않은 범위의 텍스트만 전부 읽는다.

html("수정할 태그 포함 문자") : 해당 범위의 문서를 수정한다. (안에 태그를 넣어 태그 추가 가능, 혹은 ""로 빈스트링으로 넣어 태그 자체를 비울 수도 있음.)

 

text("수정할 텍스트") : 해당 범위에 보여지는 텍스트를 수정한다.

 

 

css("스타일 속성명") : 스타일 값을 구한다.

css("스타일 속성명", 값) : 스타일을 변경한다.

addClass("클래스명") : 클래스를 추가한다.

removeClass("클래스명"): 클래스를 제거한다.

 

attr("속성명") : 속성값을 구한다

data("data-속성명")

 

attr("속성명","값") : 속성값을 설정한다. 

data("data-속성명","값") : 

 

val() : value를 구한다.

val("값") : value를 수정한다.

 

'웹 구축 > HTML&CSS&JS' 카테고리의 다른 글

【 JS 초급 】 함수 선언식과 표현식  (0) 2022.05.22
【 JS 초급 】호이스팅 ( Hoisting )  (0) 2022.05.22
패턴  (0) 2021.02.04
【 JS 초급 】AJAX(Asynchronous JavaScript and XML)  (0) 2021.02.03
CSS 4  (0) 2021.01.25