jQuery1

삼전·2023년 5월 30일
0

jQuery

목록 보기
1/15

🚀jQuery 다운로드 바로가기

위 4개 중 하나를 선택해서 script 태그 src속성 값에 복사!
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"

eclipse 유용한 Tip, html파일에는 기본 값으로 jQuery를 설치

Wondow- Preferences - Web - HTML Files - Editor - Templates - HTML5 -Edit


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<input type="text" id="txt"/>
	<h1 class="c1">jQuery에서 클래스 선택자 사용하기</h1>
	<h2 class="i1">jQuery에서 아이디 선택자 사용하기</h2>
	<h1>jQuery에서 html속성 사용하기</h1>
	<img src="../img/swisda.jpg"/>
	<script>
	$(function(){
			//jquery code
			//css() : 스타일 시트 적용 및 값 얻어오기
			//태그 선택자:$("#txt"), 아이디 선택자, 클래스 선택자, 후손, 
			//후손: $('h1 h2'), 자손:$('h1>h2')
		$("h1").css('background-color', 'yellow').css('color','red');
		//**속성의 값을 얻어 올 때** console.log($('h1').css('color')) 
		//attr 사용하기: 속성 값 설정
		 $("img").attr('src', '../img/natural04.png');
		console.log($('img').attr('src'))
		//속성 중에 속성명은 있고 속성값이 없는 속성, checked, selected, readonly, disabled... 
		$('#txt').prop('readonly', true)
		
	})
</script>
</body>
</html>
profile
풀스택eDot

0개의 댓글