recherche

Maison >interface Web >js tutoriel >Parcours d'apprentissage jQuery

Parcours d'apprentissage jQuery

巴扎黑
巴扎黑original
2017-07-31 17:19:35852parcourir

jQuery est un framework JavaScript rapide et concis. C'est une autre excellente bibliothèque de code JavaScript (ou framework JavaScript) après Prototype. Le but est d’écrire moins de code et de réaliser plus de fonctions.

jQuery est beaucoup plus simple que JavaScript, mais il nécessite également une certaine méthode pour apprendre, je vais donc résumer et partager mon parcours d'apprentissage.

Tout d'abord, nous devons comprendre les différences et les connexions entre JavaScript et jQuery, ainsi que les similitudes et les différences.

La prochaine étape consiste à apprendre la syntaxe de 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

Sélecteur, points de connaissances clés

<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

Effet jQuery

<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

Effet jQuery

<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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JavaScript事件Article suivant：JavaScript如何按概率实现随机生成事件？

Articles Liés

Voir plus