JQuery 1일차

박창희·2021년 2월 1일
0

JQuery

목록 보기
1/4

0. JQuery 기초 방법

jquery 를 사용하려면 jquery 홈페이지에 가서 내용을 다운받고 실행한다.

  • 리소스 파일을 다운받아 html 파일에 첨부하는방법
<script src="resources/js/jquery-3.5.1.min.js"></script>

그 외에도 링크로 하는방법이 있음.

1. JQuery 작성법

jquery 는 css 표현식과 Javascript 표현식을 합쳐서 기능을 구현한다.


// 함수를 작성하는 방법
$(function(){
	// 작성
})

// 도큐멘테이션에서 작성되는 방식
$(document).ready(function(){
	//작성
});

2. JQuery 활용법

$ 의 의미는 jQuery 의 의미로 해석해야한다.

jQuery 의 각 태그 접근법

  • element 요소 접근법 : $("p")
  • id 요소의 접근법 : $("#id")
  • class 요소의 접근법 $(".class")
  • attribute 에 대한 접근법 $("a[target=name_val]") → a라는 element 요소에 target 의 값이 name_val인 부분에 대한 접근이다.

jQuery 에서 속성 값에 접근하는 방법

[name] : 해당하는 속성을 가지고있는 노드

[name=value] : 주어진 문자열과 속성이 동일한 노드

[name~=value] : 공백으로 구분된 단어와 속성이 일치하는 노드??

[name*=value] : 주어진 문자열을 포함하고있는 노드

[name$=value] :주어진 문자열로 끝나는 노드

[name!=value] : 주어진 문자열이 속성과 다른 노드

[name^=value] : 주어진 문자열로 시작하는 노드

[name=value][name2=value2] : 다중속성선택자

3. JQuery 각 요소 접근법

1. css 접근법

$("img").css({"width" : "200px","height" : "200px"});
// 해당요소 . css ( { 대괄호를 통해 다중 접근}  )
//{ "속성" : "값" , "속성" : "값"  } 속성과 값을 : 로 구분하고 , 로 
//또 다른 css 속성을 추가할 수 있다.

$(".selcalss").css("opacity","0.5");
// 해당요소 .css( "속성","값").css( "속성","값")
// 반복해서 추가할 수도 있다.

2. attribute 접근법

$("td > img").attr("src","resources/img/img02.png")
// 해당요소.attr("attr속성","값") 의 형식을 취한다.
profile
큰꿈의 개발자

0개의 댓글