Experience analysis of methods for getting started with Jquery-JS Tutorial-php.cn

Experience analysis of methods for getting started with Jquery

黄舟

Release： 2017-07-31 11:04:20

Original

1265 people have browsed it

First understand the difference between jquery and js. The code is concise, the semantics are easy to understand, the learning is fast, and the documentation is rich. jQuery is a lightweight script, and its code is very small. The latest version of the JavaScript package is only about 20K. jQuery supports CSS1-CSS3, as well as basic xPath. jQuery is cross-browser, and the browsers it supports include IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+. It is easy to extend other functions for jQuery. It can completely separate JS code and HTML code, making it easier to code, maintain and modify.

There are many ways to add jQuery to a web page. You can use the following methods:

Download jQuery library from jquery.com

Load jQuery from CDN, such as loading jQuery from Google

Experience analysis of methods for getting started with Jquery

Recommended learning coursesJquery introductory tutorial

1.jQuery usage

Download jQuery

There are two versions of jQuery available for download:

Production version - used in actual websites and has been Streamline and compress.

Development version - for testing and development (uncompressed, readable code)

Both versions above can be downloaded from jquery.com.

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

Copy after login

Course link:http://www.php.cn/code/3688.html

##2.jquery Syntax: Syntax is the key to applying jquery in the future.

<!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>

Copy after login

Course link:

http://www.php.cn/code/3692.html

3.jQuery selector; element selector, #id selector, .class selector, etc.

 <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>

Copy after login

Course link:

http://www.php.cn/code/3695.html

4.jQuery event

<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>

Copy after login

Course link:

http://www.php.cn/code/3704.html

5.jQuery effects; hide and show, fade in and out, animation, stop animation, etc.

<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>

Copy after login

Course link:

http:// www.php.cn/course/113.html Chapter 2 jQuery Effect

6.jQuery traversal; traversal, ancestors, descendants, compatriots, filtering, etc.

<!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>

Copy after login

Course link: http://www.php.cn/course/113.html Chapter 4 jQuery Traversal

7. Must learn

jQueryManual.

The learning of jquery is a process of continuous application and innovation. The most important thing is persistence.

The above is the detailed content of Experience analysis of methods for getting started with Jquery. For more information, please follow other related articles on the PHP Chinese website!