jQuery-Lernpfad-js-Tutorial-php.cn

jQuery-Lernpfad

巴扎黑

Freigeben： 2017-07-31 17:19:35

Original

821 Leute haben es durchsucht

jQuery ist ein schnelles und prägnantes JavaScript-Framework. Es ist nach Prototype eine weitere hervorragende JavaScript-Codebibliothek (oder JavaScript-Framework). Der Zweck besteht darin, weniger Code zu schreiben und mehr Funktionen zu erreichen.

jQuery ist viel einfacher als JavaScript, erfordert aber auch eine bestimmte Methode zum Lernen, daher werde ich meine Lernreise zusammenfassen und teilen.

Zunächst müssen wir die Unterschiede und Zusammenhänge zwischen JavaScript und jQuery sowie die Gemeinsamkeiten und Unterschiede verstehen.

Der nächste Schritt besteht darin, die Syntax von jQuery zu lernen.

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

Nach dem Login kopieren

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

Selektor, wichtige Wissenspunkte

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

Nach dem Login kopieren

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

jQuery-Effekt

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

Nach dem Login kopieren

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

jQuery-Effekt

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonjQuery-Lernpfad. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!