jQuery를 사용하면 Ajax 기반 애플리케이션을 매우 간단하고 빠르게 생성할 수 있습니다.
jQuery는 원래 John Resig가 2006년 초에 만들었습니다. jQuery 프로젝트는 현재 분산된 개발자 그룹에 의해 오픈 소스 프로젝트로 유지 관리되고 있습니다.
jQuery를 사용하면 많은 시간과 노력을 절약할 수 있습니다. 따라서 이 사이트를 즐겨찾기에 추가하고 계속 읽으십시오.
jQuery로 더 많은 일을 할 수 있습니다.
목록은 여기서 끝나지 않습니다. jQuery로 할 수 있는 다른 많은 멋진 일들이 있습니다.
jQuery 사용을 선택해야 하는 몇 가지 이점이 있습니다.
시작하려면 먼저 jQuery 사본을 다운로드한 다음 프로젝트에 포함시키겠습니다. 두 가지 버전의 jQuery를 다운로드할 수 있습니다. 급히 e 압축되지 않음 .
압축되지 않은 파일은 개발 또는 디버깅에 더 적합합니다. 반면 축소 및 압축된 파일은 대역폭을 절약하고 더 작은 파일 크기로 인해 성능을 향상시키기 때문에 프로덕션에 권장됩니다.
여기에서 jQuery를 다운로드할 수 있습니다. https://jquery.com/download/
jQuery 파일을 다운로드하면 확장자가 js인 것을 볼 수 있습니다. 즉, JavaScript 파일입니다. 사실 JQuery는 JavaScript 라이브러리에 불과하므로 HTML 문서에 jQuery 파일을 포함할 수 있습니다. 일반 JavaScript 파일을 포함하는 것과 같습니다.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>항상 사용자 지정 스크립트 앞에 jQuery 파일을 포함해야 합니다. 그렇지 않으면 jQuery 코드가 액세스를 시도할 때 jQuery API를 사용할 수 없습니다.
알다시피 이전 예에서 속성을 건너뛰었습니다. type="text/javascript" 태그 안에 . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 및 모든 최신 브라우저에서 완료되었습니다.
또는 파일 다운로드를 원하지 않는 경우 무료로 사용할 수 있는 CDN(Content Delivery Network) 링크를 통해 문서에 jQuery를 포함할 수 있습니다.
CDN은 전 세계 여러 서버에서 jQuery를 호스팅하고 사용자가 파일을 요청하면 가장 가까운 서버에서 제공되기 때문에 로드 시간을 줄여 성능상의 이점을 제공할 수 있습니다.
이것은 또한 웹 페이지 방문자가 다른 사이트를 방문하는 동안 동일한 CDN에서 jQuery 사본을 이미 다운로드한 경우 브라우저 캐시에 이미 있기 때문에 다시 다운로드할 필요가 없다는 이점이 있습니다.
이 경우 다음과 같이 작성해야 합니다.
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jquery 프로젝트에서 제공하는 CDN 외에도 다음을 통해 jQuery를 포함할 수 있습니다. 구글 e Microsoft cdn.
jQuery 라이브러리의 목표와 이를 문서에 포함하는 방법을 살펴보았으므로 이제 jQuery를 실제로 적용할 때입니다.
이제 헤더 텍스트 색상을 사전 색상에서 변경하여 간단한 jQuery 작업을 수행해 보겠습니다.defi검정에서 녹색으로 마감되었습니다.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>코드에서 헤더, 즉 요소의 색상을 변경하여 간단한 jQuery 작업을 수행했습니다. 문서 준비 이벤트로 알려진 문서가 준비되었을 때 jQuery 요소의 선택기와 css() 메서드를 사용합니다.
jQuery 문은 일반적으로 달러 기호( $) 그리고 세미콜론( ;).
jQuery에서 달러 기호( $)는 jQuery의 별칭일 뿐입니다. 가장 간단한 jQuery 문을 보여주는 다음 샘플 코드를 고려하십시오.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>이 예는 단순히 "경고 메시지를 표시합니다.Hello I'm a JQuery sign” 사용자에게. 몇 가지 기능을 살펴보겠습니다.
<script>: jQuery는 JavaScript 라이브러리일 뿐이며 jQuery 코드는 요소 내부에 배치할 수 있습니다. <script>, 또는 외부 JavaScript 파일에 넣을 수 있습니다.$(document).ready(handler); 준비 이벤트로 알려져 있습니다. 어디야 handler 문서가 준비되는 즉시, 즉 DOM 계층 구조가 완전히 구축되면 실행될 메서드에 전달되는 함수입니다.jQuery 메서드 ready() 일반적으로 익명 함수와 함께 사용됩니다. 따라서 위의 예는 다음과 같은 속기 표기법으로도 작성할 수 있습니다.
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>함수 내에서 jQuery 문을 작성하여 다음과 같은 기본 구문에 따라 작업을 수행할 수 있습니다.
$(selector).action();비둘기, $(selector) 기본적으로 DOM 트리에서 HTML 요소를 선택하여 조작할 수 있고 action() CSS 속성 값 변경 또는 요소 콘텐츠 설정 등과 같은 일부 작업을 선택한 요소에 적용합니다.
이제 단락 텍스트를 설정하는 다른 예를 살펴보겠습니다.
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>jQuery 예제는 선택기를 참조합니다. p, 이것은 모든 단락을 선택한 다음 메서드를 선택합니다. text() 단락의 텍스트 내용을 "Hello World!".
이전 예제의 단락 텍스트는 문서가 준비되면 자동으로 교체됩니다. 그러나 jQuery 코드를 실행하기 전에 단락의 텍스트를 대체하기 위해 작업을 수행하려는 경우 수행하는 방법을 살펴보겠습니다.
마지막 예를 살펴보겠습니다.
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>이 예에서 단락 텍스트는 "버튼에서 클릭 이벤트가 발생할 때만 교체됩니다.Replace Text", 이는 단순히 사용자가 이 버튼을 클릭할 때를 의미합니다.
ID 선택기를 사용하여 페이지에서 고유 ID가 있는 단일 항목을 선택할 수 있습니다.
예를 들어 다음 jQuery 코드는 ID 특성이 있는 요소를 선택하고 강조 표시합니다. id="markid", 문서가 준비되면.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>클래스 선택기는 특정 클래스의 요소를 선택하는 데 사용할 수 있습니다.
예를 들어 다음 jQuery 코드는 class 속성이 있는 요소를 선택하고 강조 표시합니다. class="markclass", 문서가 준비되면.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>항목 선택기는 항목 이름으로 항목을 선택하는 데 사용할 수 있습니다.
예를 들어 다음 jQuery 코드는 모든 단락, 즉 요소를 선택하고 강조 표시합니다. "<p>" 문서가 준비되면.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>속성 선택기를 사용하여 링크 속성과 같은 HTML 속성 중 하나를 기반으로 요소를 선택할 수 있습니다. target또는 입력의 속성 type등
예를 들어 다음 jQuery 코드는 요소와 같은 모든 텍스트 입력을 선택하고 강조 표시합니다. "<input>" 와 type="text", 문서가 준비되면.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>또한 CSS 선택기를 결합하여 선택을 더욱 정확하게 만들 수 있습니다.
예를 들어 클래스 선택기를 요소 선택기와 결합하여 문서에서 특정 유형 및 클래스가 있는 요소를 찾을 수 있습니다.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>셀렉터 외에도 definiti, jQuery는 페이지에서 요소를 선택하는 기능을 더욱 향상시키기 위해 자체 사용자 정의 선택기를 제공합니다.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>이벤트는 종종 링크 또는 버튼 클릭, 입력 상자 또는 텍스트 영역에 텍스트 입력, 선택 상자에서 선택, 키보드의 키 누르기, 마우스 포인터 이동과 같은 웹 페이지와의 사용자 상호 작용에 의해 트리거됩니다. , 등. 경우에 따라 브라우저 자체에서 페이지 로드 및 다운로드 이벤트와 같은 이벤트를 트리거할 수 있습니다.
jQuery는 대부분의 기본 브라우저 이벤트에 대한 이벤트 메서드를 제공하여 기본 이벤트 처리 메커니즘을 개선합니다. 이러한 메서드 중 일부는 다음과 같습니다. ready(), click(), keypress(), focus(), blur(), change()등
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>일반적으로 이벤트는 네 가지 주요 그룹으로 분류할 수 있습니다.
마우스 이벤트는 사용자가 항목을 클릭하거나 마우스 포인터를 움직일 때 트리거됩니다.
다음은 마우스 이벤트를 처리하기 위해 일반적으로 사용되는 jQuery 메서드입니다.
click()방법 click() 이벤트 "에 대해 선택한 요소에 이벤트 처리기 함수를 연결합니다.click". 연결된 기능은 사용자가 해당 항목을 클릭할 때 실행됩니다. 다음 예제에서는 요소를 숨깁니다. <p> 클릭하면 페이지에서.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()방법 dblclick() 이벤트 "에 대해 선택한 요소에 이벤트 처리기 함수를 연결합니다.dblclick". 연결된 함수는 사용자가 해당 항목을 두 번 클릭하면 실행됩니다. 다음 예제에서는 요소를 숨깁니다. <p> 두 번 클릭할 때.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()방법 hover() 마우스 포인터가 요소 안팎으로 이동할 때 실행되는 하나 또는 두 개의 이벤트 처리기 함수를 선택한 요소에 연결합니다. 첫 번째 함수는 사용자가 항목 위에 마우스 포인터를 놓으면 실행되고 두 번째 함수는 사용자가 해당 항목에서 마우스 포인터를 제거할 때 실행됩니다.
다음 예에서는 항목을 강조 표시합니다. <p> 커서를 그 위에 놓으면 커서를 제거하면 강조 표시가 제거됩니다.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()방법 mouseenter() 마우스가 요소에 들어갈 때 실행되는 선택된 요소에 이벤트 핸들러 함수를 첨부합니다. 다음 예제에서는 요소에 클래스 강조 표시를 추가합니다. <p> 커서를 위에 놓으면.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()방법 mouseleave() 마우스가 항목을 떠날 때 실행되는 선택된 항목에 이벤트 처리기 기능을 연결합니다. 다음 예제는 요소에서 클래스 강조 표시를 제거합니다. <p> 커서를 제거할 때.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>사용자가 키보드의 키를 누르거나 놓으면 키보드 이벤트가 발생합니다. 키보드 이벤트를 처리하기 위해 일반적으로 사용되는 몇 가지 jQuery 메서드를 살펴보겠습니다.
keypress()방법 keypress() 브라우저가 사용자로부터 키보드 입력을 받을 때 실행되는 선택된 요소(일반적으로 양식 컨트롤)에 이벤트 처리 기능을 연결합니다. 다음 예제는 이벤트가 트리거될 때 메시지를 표시합니다. keypress 키보드의 키를 누를 때 트리거되는 횟수입니다.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keypress 이벤트는 shift, Esc, Backspace 또는 Delete와 같은 수정자 키와 인쇄되지 않는 키, 화살표 키 등을 제외하고는 keydown 이벤트와 유사합니다. keydown 이벤트는 발생하지만 keypress 이벤트는 발생하지 않습니다.
keydown()방법 keydown() 사용자가 키보드의 키를 처음 누를 때 실행되는 선택된 항목(일반적으로 양식 컨트롤)에 이벤트 처리 기능을 연결합니다. 다음 예제는 이벤트가 트리거될 때 메시지를 표시합니다. keydown 키보드의 키를 누를 때 트리거되는 횟수입니다.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()방법 keyup() 사용자가 키보드에서 키를 놓을 때 실행되는 선택된 요소(일반적으로 양식 컨트롤)에 이벤트 처리 기능을 연결합니다. 다음 예제는 이벤트가 트리거될 때 메시지를 표시합니다. keyup 키보드의 키를 눌렀다가 놓을 때 트리거되는 횟수입니다.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>폼 컨트롤이 포커스를 받거나 잃을 때 또는 사용자가 텍스트 입력에 텍스트를 입력하거나 선택 상자에서 옵션을 선택하는 등 폼 컨트롤 값을 변경할 때 폼 이벤트가 발생합니다. 다음은 양식 이벤트를 처리하기 위해 일반적으로 사용되는 jQuery 메서드입니다.
change()방법 change() 이벤트 핸들러 함수를 요소에 연결 <input> 값이 변경되면 실행됩니다. 다음 예제는 드롭다운 선택 상자에서 옵션을 선택할 때 경고 메시지를 표시합니다.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>클릭 상자, 확인란 및 라디오 버튼의 경우 사용자가 마우스를 선택하면 이벤트가 즉시 발생하지만 텍스트 입력 및 텍스트 영역의 경우 요소가 포커스를 잃은 후에 이벤트가 발생합니다.
focus()방법 focus() 포커스를 받을 때 실행되는 선택된 요소(일반적으로 컨트롤 및 양식 바인딩)에 이벤트 핸들러 함수를 연결합니다. 다음 예제는 텍스트 입력이 포커스를 받을 때 메시지를 표시합니다.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()방법 blur() 다음과 같은 요소를 형성하기 위해 이벤트 처리기 함수를 첨부합니다. <input>, <textarea>, <select> 포커스를 잃으면 실행됩니다. 다음 예제는 텍스트 입력이 포커스를 잃을 때 메시지를 표시합니다.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()방법 submit() 이벤트 핸들러 함수를 요소에 연결 <form> 사용자가 양식을 제출하려고 할 때 실행됩니다. 다음 예제는 양식 제출을 시도할 때 입력한 값을 기반으로 메시지를 표시합니다.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>이벤트는 DOM(Document Object Model) 페이지가 준비되었거나 사용자가 브라우저 창의 크기를 조정하거나 스크롤하는 경우에도 발생합니다. 다음은 이러한 유형의 이벤트를 처리하기 위해 일반적으로 사용되는 jQuery 메서드입니다.
ready()방법 ready() DOM이 완전히 로드되었을 때 실행할 함수를 지정합니다.
다음 예제는 DOM 계층 구조가 완전히 구축되고 조작할 준비가 되는 즉시 단락 텍스트를 대체합니다.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()방법 resize() 브라우저 창의 크기가 변경될 때 실행되는 창 요소에 이벤트 처리기 함수를 연결합니다.
다음 예제는 브라우저 창의 모서리를 드래그하여 크기를 조정하려고 할 때 브라우저 창의 현재 너비와 높이를 보여줍니다.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()방법 scroll() 이벤트 처리기 함수를 창이나 iframe 항목의 스크롤 위치가 변경될 때마다 실행되는 스크롤 가능한 항목.
다음 예제는 브라우저 창을 스크롤할 때 메시지를 표시합니다.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
색칠을 통해 소근육 운동 능력을 키우면 아이들이 글쓰기와 같은 보다 복잡한 기술을 준비할 수 있습니다. 색칠하다…
지난 월요일, Financial Times는 OpenAI와의 계약을 발표했습니다. FT는 세계적 수준의 저널리즘에 라이선스를 부여합니다…
수백만 명의 사람들이 스트리밍 서비스 비용을 지불하고 월간 구독료를 지불합니다. 당신은…