jQuery (1): jQuery 시작
4213 단어 JavaScripthtmljquery
jQuery 가 져 오기: http://jquery.com/ 왼쪽 에서 development 버 전 을 선택 하고 JS 파일 을 다운로드 합 니 다.
첫 번 째 jQuery 프로그램: src 에서 방금 다운로드 한 js 파일 을 참조 하고 $(document) 는 DOM 의 document 를 표시 합 니 다.
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
//ready dom
$(document).ready(function(){
alert("hello world");
});
</script>
</body>
</html>다음 예, 페이지 로 딩 이 완료 되면 두 개의 창 이 차례로 팝 업 됩 니 다.
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello");
});
$(document).ready(function(){
alert("world");
});
</script>
</body>
</html>다음은 전통 적 인 DOM 방식 을 사용 하여 모든 URL 에 이 벤트 를 추가 하고 "hello" 창 을 팝 업 합 니 다.
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
window.onload=function(){
var myLinks = document.getElementsByTagName("a");
for(var i =0;i<myLinks.length;i++){
myLinks[i].onclick=function(){
alert("hello");
}
}
}
</script>
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
<a href="#">test4</a>
</body>
</html>다음은 jQuery 를 사용 하 는 방식 으로 순환 을 간소화 한 것 을 알 수 있다.jQuery 는 기본적으로 배열 을 꺼 냅 니 다.
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
alert("hello");
});
});
</script>
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
<a href="#">test4</a>
</body>
</html>DOM 대상 과 jQuery 대상 의 상호 변환:
DOM 대상 을 jQuery 로 변환
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var pElement = document.getElementsByTagName("p")[0];
// DOM jQuery
var pElementjQuery = $(pElement);
alert("DOM :"+pElement.innerHTML);
alert("jQuery :"+pElementjQuery.html());
});
</script>
</head>
<body>
<p id="clickMe"> </p>
</body>
</html>jQuery 대상 을 DOM 으로 변환 합 니 다. 주의해 야 할 것 은 jQuery 에서 가 져 온 대상 은 모두 배열 형식 이기 때문에 옮 겨 다 닐 필요 가 없습니다.
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//jQuery DOM ：
//
var t = cm[0];
alert(t.innerHTML);
//
var s = cm.get(0);
alert(s.innerHTML);
});
</script>
</head>
<body>
<p id="clickMe"> </p>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
