Maison  >  Article  >  interface Web  >  Quelles sont les fonctions principales de jquery

Quelles sont les fonctions principales de jquery

青灯夜游
青灯夜游original
2021-11-15 16:24:122685parcourir

Les fonctions principales de jquery : 1. jQuery(), principalement utilisé pour obtenir des éléments HTML DOM et les encapsuler dans des objets jQuery ; 2. "jQuery.noConflict()", utilisé pour transférer le contrôle jQuery de la variable "$".

Quelles sont les fonctions principales de jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

jQuery Core Function

Function Description
jQuery() accepte une chaîne contenant un sélecteur CSS utilisé pour faire correspondre une collection d'éléments.
jQuery.noConflict() Exécutez cette fonction pour transférer le contrôle de la variable $ à la première bibliothèque pour l'implémenter.

Description de la fonction

jQuery() :

La fonction jQuery() est la fonction principale de la bibliothèque jQuery, et tout dans jQuery est basé sur cette fonction. Cette fonction est principalement utilisée pour obtenir des éléments HTML DOM et les encapsuler dans des objets jQuery, afin que d'autres propriétés et méthodes fournies par les objets jQuery puissent être utilisées pour opérer sur les éléments DOM.

La fonction jQuery() est très puissante. Elle peut encapsuler intelligemment différents types de paramètres dans des objets jQuery.

Syntaxe

  • jQuery( selector, [ context ])
    Encapsulez l'élément HTML DOM correspondant au sélecteur de chaîne de sélection dans un objet jQuery. Le paramètre facultatif context est utilisé pour spécifier la portée de la recherche des éléments DOM.
  • jQuery( [ obj ])
    Encapsule l'objet obj spécifié dans un objet jQuery. Cet objet peut être un élément DOM (Element), un tableau d'éléments DOM, un objet jQuery (le cloner) ou d'autres objets. Vous pouvez également omettre ce paramètre, renvoyant un objet jQuery vide.

jQuery 1.4 ajoute l'utilisation de l'omission du paramètre obj : sans transmettre aucun paramètre, un objet jQuery vide sera renvoyé

  • jQuery(html, [ownerDocument])
    Dynamique selon la chaîne de balises HTML html Créez un élément DOM temporaire et encapsulez-le en tant qu'objet jQuery. Le paramètre facultatif OwnerDocument est utilisé pour spécifier le document dans lequel l'élément DOM temporaire est créé (s'il existe plusieurs documents, comme une page cadre).

jQuery 1.0 a ajouté cette utilisation.

  • jQuery(html, propriétés)
    Crée dynamiquement des éléments DOM temporaires basés sur la chaîne de balise HTML html et l'objet propriétés contenant ses propriétés, événements et méthodes supplémentaires, et l'encapsule en tant qu'objet jQuery.

jQuery 1.4 a ajouté cette utilisation.

  • jQuery( callback )
    Une fois le document actuel chargé, exécutez le rappel de fonction spécifié. Cette utilisation est l'abréviation de l'utilisation suivante de la fonction ready() : jQuery(document).ready(callback).

jQuery 1.0 a ajouté cette utilisation.

Parameter

Attribute Description
selector String type La chaîne de sélection spécifiée, utilisée pour trouver l'élément DOM correspondant.
context Facultatif/Type d'objet Spécifie la plage de recherche de la chaîne de sélection, qui peut être des éléments DOM, des tableaux d'éléments DOM, des documents ou des objets jQuery. Si ce paramètre est omis, la valeur par défaut est le document actuel.
obj Facultatif/Type d'objet Objet spécifié, utilisé pour encapsuler en tant qu'objet jQuery. Il peut s'agir d'un élément DOM, d'un tableau d'éléments DOM, d'un document, d'un objet jQuery, etc.
html Type d'objet Chaîne de balise HTML spécifiée, telle que "a6f776b766579c28d02706af09482172"、"e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3"、"9a4b06dcac8449df108f039ca54939d094b3e26ee717c64999d7867364b1b4a3" (les balises peuvent également être imbriquées dans des balises, à condition qu'elles soient conformes à la syntaxe HTML).
ownerDocument Type de document Spécifie le document sur lequel l'élément DOM est temporairement créé. La valeur par défaut est le document actuel.
properties Type d'objet L'objet spécifié, utilisé pour spécifier les propriétés, les événements et les méthodes des éléments DOM. Par exemple : {name:"username", "click":function(){}}
callback Function type La fonction spécifiée est utilisée pour s'exécuter immédiatement après le chargement du document DOM.

Valeur de retour

La valeur de retour de la fonction jQuery() est de type jQuery et renvoie un objet jQuery.

Exemple et description :

  • jQuery (sélecteur, [contexte])Exemple de code :
// 选择当前文档中所有的p标签DOM元素
$("p");

// 选择id属性为username的DOM元素
$("#username");

// 选择所有包含test样式的DOM元素,(例如:class="test")
$(".test");

// 选择所有p标签中带test样式的DOM元素
$("p .test");
  • jQuery( [ obj ] Exemple de code :
var dom = document.getElementById("username");
// 将DOM元素封装为jQuery对象
$(dom);

var doms = document.getElementsByName("book_id");
// 将DOM元素数组封装为jQuery对象
$(doms);

// 将body元素封装为jQuery对象
$(document.body);
  • jQuery propriétaire (html, [ Documenter ] )Exemple de code :
// 创建一个空的span标签的临时DOM元素,并将其封装为jQuery对象
// 以下三种方式的效果一致
$(&#39;<span/>&#39;);
$(&#39;<span></span>&#39;);
$(&#39;<span>&#39;); // 但不推荐使用这种方式

// 创建一个p标签,内部包含带有test样式的span标签
$(&#39;<p><span class="test"></span></p>&#39;);

// 创建一个表格
var html = &#39;<table>&#39;;
html += &#39;<tr>&#39;;
html += &#39;<td>单元格1</td>&#39;;
html += &#39;<td>单元格2</td>&#39;;
html += &#39;</tr>&#39;;
html += &#39;<tr>&#39;;
html += &#39;<td>单元格3</td>&#39;;
html += &#39;<td>单元格1</td>&#39;;
html += &#39;</tr>&#39;;
html += &#39;</table>&#39;;
$(html);
  • jQuery(html, propriétés)Exemple de code :
// 创建一个临时的链接jQuery对象
var tempLink = $(&#39;<a/>&#39;, {
    id: &#39;goback&#39;,
    title: &#39;CodePlayer&#39;,
    html: &#39;CodePlayer&#39;, // 表示链接的锚文本,也就是innerHTML的值
    href: &#39;http://www.365mini.com/&#39;,
    click: function(){
        // 统计点击次数       
    }
});
// 追加到body标签内容的末尾
tempLink.appendTo("body");


$(&#39;<input/>&#39;, {
    type: &#39;checkbox&#39;,
    val: &#39;def&#39;, // 表示表单元素的value属性值或textarea的输入内容
    click: function(){
        alert("点击了复选框");
    }
}).appendTo("body");
  • jQuery( rappel)Exemple de code :
$(function(){
    // 本文档页面载入完成后自动执行
    alert("文档加载完毕!");
});

// 这相当于ready()函数如下用法的简写

$(document).ready(function(){
    // 本文档页面载入完成后自动执行
    alert("文档加载完毕!");
});

jQuery.noConflict()

noConflict( ) méthode Transférez le contrôle de la variable $ vers jQuery.

Cette méthode libère le contrôle de jQuery sur la variable $

Cette méthode peut également être utilisée pour spécifier un nouveau nom personnalisé pour la variable jQuery

Conseil : utilisez-la dans d'autres bibliothèques JavaScript. . Cette méthode est utile lorsque $.

Syntaxe : jQuery.noConflict(removeAll)

  • removeAll Valeur booléenne Indique s'il faut autoriser la restauration complète des variables jQuery

Tutoriels vidéo associés : JQuery Tutorial(Vidéo)

.

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