JavaScript - jQuery 테스트
참조 jQuery
JavaScript 라이브러리를 테스트하려면 웹 페이지에서 이를 참조해야 합니다.
라이브러리를 참조하려면 src 속성이 라이브러리의 URL로 설정된 <script> 태그를 사용하세요.
<!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 사용
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 메소드에 변수로 전달할 수 있습니다.
참고:
jQuery는 전달된 DOM 개체와 다른 jQuery 개체를 반환합니다.
jQuery 객체는 DOM 객체와 다른 속성과 메서드를 가지고 있습니다.
jQuery 객체에서는 HTML DOM 속성과 메서드를 사용할 수 없습니다.
비교 예시:
<!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> vs.
<!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").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>위의 예에서 볼 수 있듯이 jQuery는 체인(체인 구문)을 허용합니다.
체인 연결은 동일한 개체에 대해 여러 작업을 수행하는 편리한 방법입니다.
- 코스 추천
- 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~ 