Utilisez jQuery pour implémenter la recherche frontale
Cette fois, je vais vous apporter les précautions pour utiliser jQuery pour implémenter la recherche sur le front-end et pour utiliser jQuery pour implémenter la recherche sur le front-end. Voici des cas pratiques, jetons un coup d'œil.
code html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>工程轻量化与可靠性技术实验室</title> </head> <body> <p class="content-right"> <input type="text"><input type="submit" value="搜索"> <h3>应用流体学</h3> <ul id="content_news_list"> <li><span>2015-7-8</span><a href="">这里是文章的标题1</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题2</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题3</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题4</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题5</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题4</a></li> </ul> </p> </body>
Code jQuery :
<script type="text/javascript">
$(function(){
$("input[type=text]").change(function () {
var searchText = $(this).val();//获取输入的搜索内容
var $searchLi = "";//预备对象，用于存储匹配出的li
if (searchText != "") {
//获取所有匹配的li
$searchLi = $("#content_news_list").find('a:contains('+ searchText +')').parent();
//将内容清空
$("#content_news_list").html("");
}
//将获取的元素追加到列表中
$("#content_news_list").html($searchLi).clone();
//判断搜索内容是否有效，若无效，输出not find
if ($searchLi.length <= 0) {
$("#content_news_list").html("<li>not find</li>")
}
})
$("input[type=submit]").click(function () {
$("searchText").change();
})
})
</script>Récupérez les éléments de la liste par mot-clé et ajoutez-les à ul.
Parmi eux, $(':contains(text)') obtient l'élément contenant le caractère spécifié. La chaîne peut être du texte directement contenu dans l'élément, ou contenu dans un élément enfant.
Dans ce procédé, une fonction de récupération simple est implémentée en déterminant si l'élément obtenu contient les caractères recherchés.
Cependant, il y a des problèmes de compatibilité, il n'est pas compatible avec IE et le contenu ne peut pas être écrit dans la liste lors de l'obtention de l'élément parent().
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
jquery lit les données json et les utilise en html
Comment configurer le webpack avec jquery
Comment jQuery EasyUI exploite les onglets du panneau d'onglets
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
La table WPS ne trouve pas les données que vous recherchez, veuillez vérifier l'emplacement de l'option de recherche
Mar 19, 2024 pm 10:13 PM
À l'ère dominée par l'intelligence, les logiciels de bureautique sont également devenus populaires et les formulaires Wps sont adoptés par la majorité des employés de bureau en raison de leur flexibilité. Au travail, nous devons non seulement apprendre à créer des formulaires simples et à saisir du texte, mais également à maîtriser des compétences plus opérationnelles afin d'accomplir les tâches du travail réel. Les rapports contenant des données et l'utilisation de formulaires sont plus pratiques, clairs et précis. La leçon que nous vous apportons aujourd'hui est la suivante : la table WPS ne trouve pas les données que vous recherchez. Pourquoi veuillez vérifier l'emplacement de l'option de recherche ? 1. Sélectionnez d'abord le tableau Excel et double-cliquez pour l'ouvrir. Ensuite dans cette interface, sélectionnez toutes les cellules. 2. Ensuite, dans cette interface, cliquez sur l'option « Modifier » dans « Fichier » dans la barre d'outils supérieure. 3. Deuxièmement, dans cette interface, cliquez sur «
Comment rechercher des magasins sur mobile Taobao Comment rechercher des noms de magasins
Mar 13, 2024 am 11:00 AM
Le logiciel de l'application mobile Taobao propose de nombreux bons produits. Vous pouvez les acheter à tout moment et n'importe où, et tout est authentique. Il n'y a aucune opération compliquée, ce qui vous permet de faire des achats plus pratiques. Vous pouvez rechercher et acheter librement à votre guise. Les sections de produits des différentes catégories sont toutes ouvertes. Ajoutez votre adresse de livraison personnelle et votre numéro de contact pour permettre à l'entreprise de messagerie de vous contacter, et vérifiez les dernières tendances logistiques en temps réel. les utilisateurs l'utilisent pour la première fois. Si vous ne savez pas comment rechercher des produits, il vous suffit bien sûr de saisir des mots-clés dans la barre de recherche pour trouver tous les résultats des produits. Vous ne pouvez pas arrêter d'acheter librement. L'éditeur fournira des méthodes en ligne détaillées permettant aux utilisateurs mobiles de Taobao de rechercher des noms de magasins. 1. Ouvrez d'abord l'application Taobao sur votre téléphone mobile,
Comment utiliser la méthode de requête PUT dans jQuery ?
Feb 28, 2024 pm 03:12 PM
Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u
Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page
Feb 28, 2024 pm 09:06 PM
Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : <
Qu'est-ce que la touche de raccourci de recherche Excel ?
Mar 20, 2024 am 10:52 AM
Vous voulez savoir ce qu’est la touche de raccourci de recherche Excel ? La réponse est simple, utilisez simplement [Ctrl+F] pour effectuer une recherche rapide. Nous utilisons souvent Excel pour enregistrer de nombreuses données et noms différents. Si nous devons les modifier, il nous sera difficile de rechercher car il y a trop de données et la recherche sera assez difficile. En fait, nous pouvons utiliser un raccourci de recherche rapide pour trouver les données que nous devons modifier ! Alors, quelle est la touche de raccourci de recherche dans Excel ? Aujourd'hui, je vais vous apprendre à utiliser les touches de recherche de raccourci dans les tableaux Excel pour vous faire gagner du temps et des efforts dans votre travail. Ici, j'utilise cette version de Microsoft Office Excel 2010 pour la démonstration. Les étudiants qui en ont besoin peuvent le faire.
Comment rechercher les ressources d'autres personnes sur Alibaba Cloud Disk
Mar 30, 2024 am 10:31 AM
Alibaba Cloud Disk, cet outil de stockage populaire, nous aide non seulement à gérer efficacement les ressources personnelles, mais fournit également de nombreuses fonctions pratiques. De nombreux utilisateurs peuvent ne pas être en mesure de trouver les ressources du disque cloud lors de la recherche, ils souhaitent donc rechercher toutes les ressources sur l'ensemble du disque. Ci-dessous, l'éditeur de ce site répondra à cette question en détail et partagera la méthode de recherche spécifique des utilisateurs. voulez savoir, venez suivre cet article pour en savoir plus ! Comment rechercher les ressources d'autres personnes dans Alibaba Cloud Disk 1. Tout d'abord, recherchez le chemin spécifique du fichier de ressources dans le répertoire des dossiers d'Alibaba Cloud Disk pour trouver le dossier correspondant. 2. Utilisez ensuite la fonction de recherche de fichiers et saisissez les mots-clés que vous souhaitez rechercher pour trouver le contenu du fichier correspondant. 3. Ensuite, nous partageons le lien avec d'autres pour localiser et télécharger directement
Utilisez jQuery pour modifier le contenu textuel de toutes les balises
Feb 28, 2024 pm 05:42 PM
Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :
Comprendre le rôle et les scénarios d'application de eq dans jQuery
Feb 28, 2024 pm 01:15 PM
jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer la manipulation DOM et la gestion des événements dans les pages Web. Dans jQuery, la méthode eq() est utilisée pour sélectionner des éléments à une position d'index spécifiée. Les scénarios d'utilisation et d'application spécifiques sont les suivants. Dans jQuery, la méthode eq() sélectionne l'élément à une position d'index spécifiée. Les positions d'index commencent à compter à partir de 0, c'est-à-dire que l'index du premier élément est 0, l'index du deuxième élément est 1, et ainsi de suite. La syntaxe de la méthode eq() est la suivante : $("s
