JavaScript - jQuery 테스트


JavaScript 프레임워크 라이브러리 테스트 - jQuery

JQuery 참조

JavaScript 라이브러리를 테스트하려면 웹 페이지에서 이를 참조해야 합니다.

라이브러리를 참조하려면 src 속성이 라이브러리의 URL로 설정된 <script> 태그를 사용하세요.

jQuery를 참조

<!DOCTYPE html>
<html>
<head>
< ;script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
< ;/body>
</html>

jQuery 설명

jQuery의 주요 함수는 $() 함수(jQuery 함수)입니다. DOM 개체를 이 함수에 전달하면 jQuery 기능이 추가된 jQuery 개체가 반환됩니다.

jQuery를 사용하면 CSS 선택기를 통해 요소를 선택할 수 있습니다.

JavaScript에서는 창 로드 이벤트를 처리하는 함수를 할당할 수 있습니다.

JavaScript 방식:

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML=" Hello jQuery";
}
onload=myFunction;

동등한 jQuery는 다릅니다:

jQuery 방식:

function myFunction()
{
$("#h01").html("Hello jQuery ") ;
}
$(document).ready(myFunction);

위 코드의 마지막 줄에서는 HTML DOM 문서 객체가 jQuery: $(document)에 전달됩니다.

DOM 개체를 jQuery에 전달하면 jQuery는 HTML DOM 개체에 래핑된 jQuery 개체를 반환합니다.

jQuery 함수는 새로운 jQuery 개체를 반환하며, 그 중 Ready()는 메서드입니다.

함수는 JavaScript의 변수이므로 myFunction을 jQuery의 Ready 메소드에 변수로 전달할 수 있습니다.

lampjQuery는 전달된 DOM 객체와 다른 jQuery 객체를 반환합니다.
lampjQuery 返回 jQuery 对象，与已传递的 DOM 对象不同。
jQuery 对象拥有的属性和方法，与 DOM 对象的不同。
您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。
jQuery 객체는 DOM 객체와 다른 속성과 메서드를 가지고 있습니다. 🎜jQuery 객체에서는 HTML DOM 속성과 메서드를 사용할 수 없습니다.

jQuery 테스트

다음 예를 시도해 보세요.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunction(){
	$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
	
<h1 id="h01"></h1>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

이 예를 다시 시도해 보세요.

Example

<!DOCTYPE html>
<html>
<head>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunction(){
	$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
	
<h1 id="h01"></h1>
	
</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

위의 예에서 볼 수 있듯이 jQuery는 연결(체인 구문)을 허용합니다.

체인 연결은 동일한 개체에 대해 여러 작업을 수행하는 편리한 방법입니다.

자세히 알아보고 싶으신가요? PHP 중국어 웹사이트는 훌륭한 jQuery 튜토리얼을 제공합니다.