[jQuery 배우기] 1、jQuery

2059 단어
회사의 프로젝트에서 스크립트를 자주 보지만 어떤 스크립트인지 몰라요. 코드에서 html의 라벨을 인용할 수 있어요.
최근에 인터넷에서 검색을 하면서 동료에게 물어봤는데 이 코드들이 jQuery라는 것을 알았어요.
그럼 이 jQuery는 뭘까요?
실제로 jQuery는 자바스크립트 프로그래밍을 간소화하는 자바스크립트 라이브러리입니다.
다음은 간단한 jQuery가 작성한 코드입니다.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script>
</head>

<body>
<p>   ,     !</p>
</body>

</html> </span>

다음은 이 코드에 대한 설명입니다.
1. jQuery를 웹 페이지에 추가하면 다른 프로그래밍 언어의 import 가져오기 기능과 유사하여 뒤에서 코드를 인용할 수 있다.
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

2. 모든 jQuery 코드는 하나의 문서 ready 함수에 있어야 합니다.
$(document).ready(function(){

--- jQuery functions go here ----

});

이 코드를 쓰는 이유는 문서가 완전히 불러오기 전에 아래의 jQuery 코드를 실행하는 것을 방지하기 위해서입니다. 이 때 문서가 완전히 불러오기 전에 조작을 하면 오류가 발생할 수 있기 때문입니다.
3. jQuery 작업 코드를 추가합니다.
$("p").click(function(){
$(this).hide();
});

이 코드는 문서의 모든

요소를 눌렀을 때 눌린 요소를 숨기는 것을 말합니다.
주의해야 할 것은 위의 코드를 html 파일로 저장한 후에 브라우저로 열면 위의 코드는 실제 효과가 없다. 왜냐하면 우리의 기계에는 이 jquery가 없기 때문이다.js라는 코드는 자연히 실제 효과가 없을 것이다.
만약 jQuery를 다운로드하고 저장하기를 원하지 않는다면, 이 코드가 실제적인 효과를 낼 수 있도록 CDN (내용 배달 네트워크) 을 통해 인용할 수도 있습니다.구글과 마이크로소프트의 서버에는 모두 jQuery가 저장되어 있다.
Microsoft:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>

구글:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>

좋은 웹페이지 즐겨찾기