Le chemin de Xiaoqiang vers le développement mobile HTML5 (34) – Sélecteurs dans jQuery-tutoriel HTML-php.cn

Le chemin de Xiaoqiang vers le développement mobile HTML5 (34) – Sélecteurs dans jQuery

黄舟

Libérer： 2017-02-04 14:43:20

original

1443 Les gens l'ont consulté

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 chemin de Xiaoqiang vers le développement mobile HTML5 (34) – Sélecteurs dans jQuery 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 Javascript

6. Traversée et modification du DOM HTML

7. AJAX

8. Utilitaires

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

Copier après la connexion

Le CDN de Microsoft

<head>  
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery  
/jquery-1.4.min.js"></script>  
</head>

Copier après la connexion

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.

Il existe deux versions de JQuery qui peuvent être téléchargées : http://jquery.com/download/

1. Version de production : utilisée pour la version réelle. sites Web, a été rationalisé et compressé.

2. Version de développement : utilisée pour les tests et le développement, non compressée et lisible.

5. Méthodes simples et pratiques

La syntaxe jQuery est compilée pour sélectionner des éléments HTML et peut effectuer certaines opérations sur les éléments.

La syntaxe de base est : $(selector).action()

$ : définition du signe dollar jQuery

sélecteur : interroger et rechercher des éléments HTML

action () : Effectuer des opérations sur les éléments

Par exemple : $(this).hide Masquer l'élément HTML actuel

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

Copier après la connexion

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 ----  
  
});

Copier après la connexion

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.

En plus de ce qui précède, vous pouvez également obtenir des objets éléments via d'autres méthodes

1. Sélecteur d'éléments

$("#. test") : élément avec id="test".

$("p") : élément

$(".test") : élément avec class="test".

$("p.intro") : L'élément

$("p#demo") : 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 à #.

$("[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".

3. Sélecteur CSS

Le sélecteur CSS jQuery peut être utilisé pour modifier les propriétés CSS des éléments HTML.

$("p").css("background-color","red");

Copier après la connexion

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(&#39;W3School&#39;)")    包含指定字符串的所有元素    
:empty    $(":empty")    无子（元素）节点的所有元素    
:hidden    $("p:hidden")    所有隐藏的 <p> 元素    
:visible    $("table:visible")    所有可见的表格    
s1,s2,s3    $("th,td,.intro")    所有带有匹配选择的元素    
[attribute]    $("[href]")    所有带有 href 属性的元素    
[attribute=value]    $("[href=&#39;#&#39;]")    所有 href 属性的值等于 "#" 的元素    
[attribute!=value]    $("[href!=&#39;#&#39;]")    所有 href 属性的值不等于 "#" 的元素    
[attribute$=value]    $("[href$=&#39;.jpg&#39;]")    所有 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 元素

Copier après la connexion

Ce qui précède est le chemin de développement mobile HTML5 de Xiaoqiang (34)— —Le contenu du sélecteur dans jQuery Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !