Home > Article > Web Front-end > jQuery learning path

jQuery learning path

巴扎黑Original: 2017-07-31 17:19:35851browse

jQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code library (or JavaScript framework) after Prototype. The purpose is to write less code and achieve more functions.

jQuery is much simpler than JavaScript, but it also requires a certain method to learn, so I will summarize and share my learning journey.

First of all, we need to understand the differences and connections between JavaScript and jQuery, as well as the similarities and differences.

Then we need to learn the syntax of jQuery.

<html>
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function(){
 $("button").click(function(){
 $("p").hide();
 });
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

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

Selector, key knowledge points

<html>
<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(){
 $(".test").hide();
 });
});
</script>
</head>
<body>
<h2 class="test">你马上就看不见我了</h2>
<p class="test">你就要看不见我了</p>
<p>为什么还能看见我</p>
<button>点我</button>
</body>
</html>

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

jQuery effect

<html>
<head>
<meta charset="utf-8"> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("p").click(function(){
 $(this).hide();
 });
});
</script>
</head>
<body>
<p>点我我就不见了！</p>
<p>我们三个都是的！</p>
<p>他们说的是真的！</p>
</body>
</html>

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

jQuery effect

<html>
<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(){
 $("div").animate({
 left:&#39;250px&#39;,
 height:&#39;+=150px&#39;,
 width:&#39;+=150px&#39;
 });
 });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

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

ajax

<html>
<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(){
$.post("/try/ajax/demo_test_post.php",{
name:"php中文网",
url:"http://www.php.cn"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>

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

The above is the detailed content of jQuery learning path. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript事件Next article：JavaScript如何按概率实现随机生成事件？

See more

jQuery learning path

Related articles