Maison > Article > interface Web > Le chemin de Xiaoqiang vers le développement mobile HTML5 (34) – Sélecteurs dans jQuery
Le chemin de Xiaoqiang vers le développement mobile HTML5 (34) – Sélecteurs dans jQuery
- 黄舟original
- 2017-02-04 14:43:201439parcourir
1. Qu'est-ce que jQuery ?
jQuery a été créé par l'Américain John Resig et a attiré de nombreux maîtres JavaScript du monde entier à le rejoindre.
Le fondateur et responsable technique de jQuery, travaille actuellement en tant qu'ingénieur de développement d'outils JavaScript chez Mozilla. Il est l'auteur de livres classiques sur JavaScript tels que « Pro JavaScript Techniques » (c'est-à-dire « Proficient in JavaScript »).
jQuery est un autre excellent framework JavaScript après prototype. Son objectif est : ÉCRIRE MOINS, FAIRE PLUS, écrire moins de code et faire plus de choses.
jQuery est une bibliothèque js légère (seulement 21 Ko après compression), inégalée par les autres bibliothèques js. Elle est compatible avec CSS3 et divers navigateurs.
Adresse de téléchargement : http://jquery.com/download/
jQuery est une bibliothèque javaScript rapide et concise qui permet aux utilisateurs de traiter plus facilement des documents HTML, des événements et d'obtenir des effets d'animation. et fournissez facilement une interaction AJAX pour les sites Web.
jQuery peut séparer le code et le contenu HTML de la page HTML de l'utilisateur. En d'autres termes, il n'est pas nécessaire d'insérer un tas de js dans le HTML pour appeler des commandes. , définissez simplement Just id.
2. Bibliothèques javascript actuellement populaires
jQuery
EXTJS
Prototype
DWR
Dojo
YUI
MooTools
3. La bibliothèque jQuery contient Le fonctionnalités suivantes
1. Sélection d'éléments HTML
2. Opération d'élément HTML
3. Opération CSS
4. >
5. Effets spéciaux et animations Javascript6. Traversée et modification du DOM HTML7. AJAX8. Utilitaires4. Ajouter La bibliothèque jQuery peut ajouter le CDN jQuery de Google ou de Microsoft Le CDN de Google<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>Le CDN de Microsoft
<head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>Remarque : en HTML5, il n'est plus nécessaire d'écrire type="text/javascript", JavaScript est le langage de script par défaut dans HTML5 et dans tous les navigateurs modernes.
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
<span style="white-space:pre"> </span>$(document).ready(function(){
<span style="white-space:pre"> </span>$("button").click(function(){
<span style="white-space:pre"> </span>$(this).hide();
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>});
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html> Les amis qui prêtent attention au code ci-dessus peuvent être déroutés par le code suivant ci-dessus $(document).ready(function(){
--- jQuery functions go here ----
});Ce code sert à empêcher le code jQuery de s'exécuter lorsque le document est complètement chargé, sinon des problèmes pourraient survenir.
$(".test") : élément avec class="test". $("p.intro") : L'élément
avec id="demo".
2. Sélecteur d'attribut jQuery utilise des expressions XPath pour sélectionner des éléments avec des attributs donnés. $("[href]") sélectionne tous les éléments avec l'attribut href. $("[href='#']") sélectionne tous les éléments avec href et une valeur égale à #.$("p").css("background-color","red");6. Tableau de sélection jQuery选择器 实例 选取
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素
:header $(":header") 所有标题元素 <h1> - <h6>
:animated 所有动画元素
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素