Maison >interface Web >js tutoriel >Analyse d'expérience des méthodes pour démarrer avec Jquery

Analyse d'expérience des méthodes pour démarrer avec Jquery

黄舟original: 2017-07-31 11:04:201286parcourir

Comprenez d'abord la différence entre jquery et js. Le code est concis, la sémantique est facile à comprendre, l'apprentissage est rapide et la documentation est riche. jQuery est un script léger et son code est très petit. La dernière version du package JavaScript ne fait qu'environ 20 Ko. jQuery prend en charge CSS1-CSS3, ainsi que xPath de base. jQuery est multi-navigateur et les navigateurs qu'il prend en charge incluent IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+. Il est facile d'étendre jQuery avec d'autres fonctionnalités. Il peut séparer complètement le code JS et le code HTML, ce qui facilite le codage, la maintenance et la modification.

Il existe de nombreuses façons d'ajouter jQuery à une page Web. Vous pouvez utiliser les méthodes suivantes :

Télécharger la bibliothèque jQuery depuis jquery.com

Charger jQuery depuis CDN, par exemple en chargeant jQuery depuis Google

Analyse dexpérience des méthodes pour démarrer avec Jquery

Cours d'apprentissage recommandésTutoriel d'introduction à Jquery

Utilisation de 1.jQuery

Télécharger jQuery

Il existe deux versions de jQuery disponibles en téléchargement :

Version de production - utilisée dans les sites Web réels et a été rationalisée et compressée .

Version de développement - pour les tests et le développement (code non compressé et lisible)

Les deux versions ci-dessus peuvent être téléchargées depuis jquery.com.

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

Lien du cours : http://www.php.cn/code/3688.html

2. La syntaxe de jquery : la syntaxe est la clé pour appliquer jquery à l'avenir.

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

Lien du cours : http://www.php.cn/code/3692.html

3.sélecteur jQuery ; sélecteur d'élément, sélecteur #id, sélecteur .class, 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>

Lien du cours : http://www.php.cn/code/3695.html

4.Événements 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>

Lien du cours : http://www.php.cn/code/3704.html

Effets 5.jQuery ; masquer et afficher, fondu entrant et sortant, animation, arrêt de l'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>

Lien du cours：http://www.php.cn/course/113.html Chapitre 2 jQuery Effet

6.jQuery traversée, ancêtres, descendants, compatriotes, filtrage Attendre

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

Lien du cours : http://www.php.cn/course/113.html Chapitre 4 jQuery Traversal

7. Doit apprendre le Manuel jQuery.

L'apprentissage JQuery est un processus d'application et d'innovation continue. La chose la plus importante est la persévérance.

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：Partage d'expérience pour démarrer avec JavaScriptArticle suivant：Partage d'expérience pour démarrer avec JavaScript

Articles Liés

Voir plus