Syntaxe jQuery :
La syntaxe jQuery est compilée pour la sélection d'éléments HTML et peut effectuer certaines opérations sur les éléments. C'est le point clé. Les débutants doivent savoir à quoi servent les choses que vous apprenez.
La syntaxe de base est : $(selector).action(). Tout jQuery tourne autour de cela, en sélectionnant des éléments sur la page puis en effectuant certaines opérations sur les éléments.
Exemple
$(this).hide() - masquer l'élément actuel
Fonction Document prêt :
sert à empêcher l'exécution du code jQuery avant que le document ne soit complètement chargé (prêt). En raison de la convention de jQuery, tout le code JavaScript est mieux placé ici.
$(document).ready(function(){
});Sélecteurs d'éléments jQuery et sélecteurs d'attributs : Ils vous permettent de sélectionner des éléments HTML par nom de balise, nom d'attribut ou contenu. Correspond à la première moitié de $(selector).action().
sélecteur d'élément jQuery :
$("p") sélectionne l'élément
$("p.intro") sélectionne tous les éléments
avec class="intro".
$("p#demo") sélectionne tous les éléments
avec id="demo".
sélecteur d'attribut jQuery :
$("[href]") Sélectionnez tout avec l'attribut href de l'élément.
$("[href='#']") sélectionne tous les éléments avec une valeur href égale à "#".
$("[href!='#']") sélectionne tous les éléments dont la valeur href n'est pas égale à "#".
$("[href$='.jpg']") sélectionne tous les éléments dont la valeur href se termine par ".jpg".
sélecteur CSS jQuery :
$("p").css("background-color","red");
Pour le manuel de référence complet du sélecteur jquery : http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
Les gestionnaires d'événements font référence à des méthodes appelées lorsque certains événements se produisent en HTML.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>| Event 函数 | 绑定函数至 |
|---|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
完整的jQuery事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
约定：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
jQuery 效果：对应$(selector).action()的后半部分。
隐藏、显示、切换，滑动，淡入淡出，以及动画
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
这是一个段落。
这是另一个段落。
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$(selector).toggle(speed,callback);
这是一个段落。
这是另一个段落。
jQuery 淡入淡出方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() fadeTo() 方法允许渐变的最终结果为给定的不透明度（值介于 0 与 1 之间，0为透明，1为不透明）。
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()
jQuery animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
Vous pouvez utiliser la méthode animate() pour manipuler toutes les propriétés CSS. Une chose importante à retenir : lorsque vous utilisez animate(), vous devez utiliser la notation Camel pour écrire tous les noms de propriété, par exemple, You. doit utiliser paddingLeft au lieu de padding-left, marginRight au lieu de margin-right, et ainsi de suite.
Il déplace l'élément
vers la gauche jusqu'à ce que l'attribut gauche soit égal à 250 pixels :
< !DOCTYPE html>
Cliquez ici pour faire glisser le panneau vers le bas< /p> ;
Bonjour tout le monde !
La fonction de rappel est exécutée une fois l'animation en cours terminée à 100 %.
$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("Le paragraphe est maintenant masqué" );
});
Animation complète : http://www.w3school.com.cn/jquery/jquery_ref_effects.asp
jQuery dispose de méthodes puissantes pour manipuler les éléments et attributs HTML.
Opérations DOM jQuery :
DOM = Document Object Model, "Le modèle objet de document du W3C est une interface indépendante de la plate-forme et du langage qui permet aux programmes et aux scripts d'accéder et de mettre à jour dynamiquement les documents. Contenu , structure et style. "
Obtenez la valeur en dom :
Trois A. Méthode jQuery simple et pratique pour la manipulation du DOM :
text() - Définit ou renvoie le contenu texte de l'élément sélectionné
html () - Définit ou renvoie le contenu de l'élément sélectionné (y compris les balises HTML)
val() - Définit ou renvoie la valeur du champ du formulaire
$("# btn1 ").click(function(){
alert("Texte : " + $("#test").text());
});
$("#btn2"). cliquez sur (function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Valeur : " + $("#test").val());
});
$("button").click(function(){
alert($("#w3s").attr("href"));
});
Définir la valeur DOM :
$("#btn1").click(function(){
$("#test1") .text("Bonjour tout le monde!");
});
$("#btn2").click(function(){
$("#test2").html("
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
La fonction de rappel de text(), html() et val(), la fonction de rappel a deux paramètres : l'élément sélectionné L'index de l'élément actuel dans la liste et la valeur d'origine (ancienne). Ensuite, le contenu de retour de la fonction return est utilisé comme nouvelle valeur.
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Ancien texte : " + origText + " Nouveau texte : Bonjour tout le monde !
(index : " + i + ")";
});
});
$("#btn2").click (function(){
$("#test2").html(function(i,origText){
return "Ancien html : " + origText + " Nouveau html : Bonjour world!< /b>
(index : " + i + ")";
});
});
$("bouton").click(function() {
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
}) ;
Ajouter une nouvelle valeur au DOM :
append() - Insérer du contenu à la fin de l'élément sélectionné
prepend() - Insérer du contenu au début de l'élément sélectionné element
after() - Insérer du contenu après l'élément sélectionné
before() - Insérer du contenu avant l'élément sélectionné
$("p").append("Du texte ajouté.");
$("p").prepend("Certains texte ajouté.");
$("img").after("Un peu de texte après");
$("img").before(" Un peu de texte avant");
Supprimer des éléments dans le DOM :
Si vous devez supprimer des éléments et du contenu, vous pouvez généralement utiliser les deux méthodes jQuery suivantes :
remove() - supprime l'élément sélectionné ( et son élément enfants)
empty() - supprime les éléments enfants de l'élément sélectionné
$("#p1").remove( );
$("#p1").empty();
La méthode jQuery remove() accepte également un paramètre, vous permettant de supprimer l’élément à filtrer.
Ce paramètre peut être n'importe quelle syntaxe de sélecteur jQuery.
Ceci est un paragraphe dans le p.
Ceci est un autre paragraphe dans le p.
Ceci est un autre paragraphe de la classe p.
addClass() - Ajouter une ou plusieurs classes à l'élément sélectionné
toggleClass() - effectue une opération de changement de classe d'ajout/suppression sur l'élément sélectionné
css( ) - Définir ou renvoyer les attributs de style
Ceci est un paragraphe de la p.
d'un autre paragraphe.C'est aussi un paragraphe.
(numéro d'index 1) :
Je suis Donald Duck (index 0).
Donald Duck (index 1).
Mon meilleur ami est Mickey Mouse (index 3).