Jquery를 시작하는 방법에 대한 경험 분석-JS 튜토리얼-php.cn

Jquery를 시작하는 방법에 대한 경험 분석

黄舟

풀어 주다： 2017-07-31 11:04:20

원래의

1285명이 탐색했습니다.

먼저 jquery와 js의 차이점을 이해하세요. 코드가 간결하고, 의미가 이해하기 쉽고, 학습이 빠르고, 문서가 풍부합니다. jQuery는 경량 스크립트이며 해당 코드는 JavaScript 패키지의 최신 버전이 약 20K에 불과합니다. jQuery는 기본 xPath뿐만 아니라 CSS1-CSS3도 지원합니다. jQuery는 크로스 브라우저이며 지원하는 브라우저에는 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+가 포함됩니다. jQuery의 다른 기능을 확장하는 것은 쉽습니다. JS 코드와 HTML 코드를 완전히 분리할 수 있어 코딩, 유지 관리 및 수정이 더 쉬워집니다.

웹 페이지에 jQuery를 추가하는 방법에는 여러 가지가 있습니다. 다음 방법을 사용할 수 있습니다.

jquery.com에서 jQuery 라이브러리 다운로드

Google에서 jQuery 로드와 같은 CDN에서 jQuery 로드

Jquery를 시작하는 방법에 대한 경험 분석

추천 학습 과정Jquery 입문 튜토리얼

jQuery 다운로드

두 가지 버전의 jQuery를 다운로드할 수 있습니다.

프로덕션 버전 - 실제 웹 사이트에서 사용되며 간소화되고 압축되었습니다.

개발 버전 - 테스트 및 개발용(비압축, 판독 가능한 코드)

위의 두 버전 모두 jquery.com에서 다운로드할 수 있습니다.

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

로그인 후 복사

강의 링크: http://www.php.cn/code/3688.html

2. jquery 구문은 앞으로 jquery를 적용하는 데 핵심입니다.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>表格</title>
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
 <script>
// window.onload=function(){
// alert(1)
// };
// window.onload=function(){
// alert(2)
// };
// $(document).ready(function(){
// alert(1)
// });
// $(document).ready(function(){
// alert(2)
// })
 </script>
</head>
<body>
<div id="box">jQuery语法</div>

</body>
</html>

로그인 후 복사

코스 링크: http://www.php.cn/code/3692.html

3.j쿼리 선택기, 요소 선택기, #id 선택기, .class 선택 장치 등 .

 <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(){
 $("#test").hide();
 });
 });
 </script>
</head>

<body>
<h2>标题</h2>
<p>段落</p>
<p id="test">#id选择器，点击我会隐藏</p>
<button>点我</button>
</body>

로그인 후 복사

강의 링크:http://www.php.cn/code/3695.html

4.jQuery 이벤트

<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(){
 $("#p1").mouseenter(function(){
 alert("您的鼠标移到了 id=p1 的元素上!");
 });
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>

로그인 후 복사

강의 링크 : http://www.php.cn/code/3704.html

5.j효과 숨기기 및 표시, 페이드 인 및 아웃, 애니메이션, 애니메이션 중지 등

<head>
 <meta charset="utf-8">
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("button").click(function(){
 $("p").toggle();
 });
 });
 </script>
</head>
<body>

<button>隐藏/显示</button>
<p>真正的失败不是你没有做成事，而是你甘心于失败。</p>
<p>一切都会好起来的，即使不是在今天，总有一天会的。</p>
</body>

로그인 후 복사

과정 링크: http://www.php.cn/course/113.html 2장 jQuery 효과

6.jQuery 순회, 조상, 자손, 동포, 필터링 등

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <style>
 .ancestors *
 {
 display: block;
 border: 2px solid lightgrey;
 color: lightgrey;
 padding: 5px;
 margin: 15px;
 }
 </style>
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("span").parent().css({"color":"red","border":"2px solid red"});
 });
 </script>
</head>
<body>

<div class="ancestors">
 <div style="width:300px;">div (曾祖父元素)
 <ul>ul (祖父元素)
 <li>li (父元素)
 <span>span</span>
 </li>
 </ul>
 </div>

 <div style="width:300px;">div (祖父元素)
 <p>p (父元素)
 <span>span</span>
 </p>
 </div>
</div>

</body>
</html>

로그인 후 복사

강좌 링크: http://www.php.cn/course/113.html 4장 jQuery 탐색

7. jQuery 매뉴얼을 배워야 합니다.

JQuery 학습은 지속적인 적용과 혁신의 과정입니다. 가장 중요한 것은 끈기입니다.

위 내용은 Jquery를 시작하는 방법에 대한 경험 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!