예를 들어 이런 포커스 주기를 원하는 HTML 태그가 있습니다.
<input type="radio" name="agree1" value="radio" > <span>동의합니다.</span>해당 태그를 구분할 수 있는 값은 여러 방식이 있지만
우선
class , name , id 값이 있습니다.
JQuery 사용 법은
jQuery는 JavaScript 기반의 오픈 소스 라이브러리로, HTML 문서의 구조를 조작하고 상호 작용할 수 있는 강력한 기능을 제공합니다. jQuery를 사용하면 간단하고 효과적으로 DOM 요소를 선택하고 조작할 수 있으며, AJAX를 통해 서버와 통신하는 등 다양한 작업을 수행할 수 있습니다.
jQuery를 사용하기 위해서는 먼저 해당 라이브러리를 HTML 문서에 포함시켜야 합니다. jQuery를 다운로드하여 로컬에 저장하거나, CDN(Content Delivery Network)을 통해 온라인에서 불러올 수 있습니다. 아래는 jQuery를 CDN을 통해 불러오는 예시입니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 이곳에 jQuery 코드를 작성하거나 불러온 스크립트 파일을 추가할 수 있습니다. -->
</body>
</html>이렇게 사용 할 수 있습니다.
$(document).ready(function() {
// 문서가 준비되면 실행될 코드
// ID가 "myElement"인 요소를 선택하고 텍스트를 변경합니다.
$("#myElement").text("Hello, jQuery!");
// 클래스가 "myClass"인 요소를 선택하고 배경색을 변경합니다.
$(".myClass").css("background-color", "blue");
// 태그 이름이 "a"인 모든 링크 요소에 대해 클릭 이벤트를 추가합니다.
$("a").click(function() {
alert("링크가 클릭되었습니다.");
});
});위의 코드에서 $는 jQuery의 기본적인 선택자 함수입니다. $(document)은 문서 객체를 선택하고, $("#myElement")는 ID가 "myElement"인 요소를 선택합니다. 이후에 .text()와 .css() 함수를 사용하여 텍스트와 스타일을 변경합니다
다시 돌아와서
해당 요소를 선택하여
해당 요서에 애니메이션을 주면 됩니다.
$(document).ready(function() {
var startElement = $('#start_point'); // 포커스를 주고 싶은 요소를 선택합니다.
$('html, body').animate({
scrollTop: startElement.offset().top // 요소의 상단 위치로 스크롤을 이동시킵니다.
}, 1000); // 1000ms(1초) 동안 스크롤 애니메이션을 실행합니다.
});위의 코드는 문서가 로드된 후 #start_point ID를 가진 요소를 선택하고, animate() 함수를 사용하여 스크롤 애니메이션을 실행합니다. scrollTop 속성을 사용하여 스크롤을 이동시키는데, offset().top을 사용하여 선택한 요소의 상단 위치로 스크롤을 이동시킵니다. 애니메이션의 속도를 조절하기 위해 1000ms(1초) 동안 애니메이션을 실행하도록 설정했습니다.
이렇게 하면 해당 요소로 스크롤이 부드럽게 이동하여 사용자의 시선을 집중시킬 수 있습니다.
'Web Dev > Javascript' 카테고리의 다른 글
| Javascript - Radio input 태그- 필수 항목 미 선택 시 false 반환 코드 (0) | 2023.07.27 |
|---|---|
| Javascript 배열 변수에 공백 값이 자꾸 들어가는 경우 filter() 메서드 (0) | 2023.06.21 |
| Javascript 첨부파일 용량 제한하는 방법 쉽습니다 feat JQuery (0) | 2023.06.21 |
| Javascript 문법 - 구조분해할당(Destructing) (0) | 2023.05.24 |
| Javascript : table 태그 name ,id 값으로 행과 열 구분하여 checkbox 체크 가능 범위 조절하는 함수 (0) | 2023.05.17 |
| JavaScript 자바스크립트의 관대함 this, argument (0) | 2023.03.23 |
