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는 체인(체인 구문)을 허용합니다.

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

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#runoob").attr("href")); }); }); </script> </head> <body> <p><a href="http://www.php.cn" id="runoob">php.cn</a></p> <button>显示 href 属性的值</button> </body> </html>

제출하다 코드 재설정

자동운전