Maison >interface Web >js tutoriel >Comment fonctionne jQuery

Comment fonctionne jQuery

无忌哥哥original: 2018-06-29 10:43:462166parcourir

Obtenez plusieurs éléments à la fois, puis traitez-les en boucle. Ce type d'opération est très courant en js Afin de simplifier ce type d'opération, jQuery est né

Utilisons jQuery pour. réécrivez-le rapidement. Découvrez le sentiment d'aigreur sans précédent apporté par jQuery

Nous devons d'abord importer un jQuery Ici, j'utilise cdn pour importer rapidement la bibliothèque de fonctions jquery et la démontrer

4236a9db8a76cb7ba63fbe7a24055908

2ba5669a0e1e3c733f7530bf49fbb5e42cacc6d41bbb37262a98f745aa00fbf0

2791962500d65e2fba4e6d56e3d7e1db

ad23e7fcbfe581f1b2bd15b5dfef8ebf

$('li:nth-child(4) ~ *').css({'background-color':'orangered','color':'white'} )

2cacc6d41bbb37262a98f745aa00fbf0

//Lors du traitement de plusieurs éléments en même temps, vous constaterez que seul le cinquième arrière-plan change. Pourquoi est-ce ?

/. / Bien que le sélecteur li:nth-child(4)~* sélectionne plusieurs éléments, querySelector() en renverra un, donc seul le premier élément qui remplit les conditions est renvoyé

// document.querySelector ('li :nth-child(4) ~ *').style.backgroundColor = 'lightgreen'

//Comment obtenir tous les éléments qui répondent aux conditions du sélecteur Vous devez utiliser la méthode querySelectorAll()

//Comme ce qui est renvoyé est une collection d'éléments (tableau), nous devons utiliser une boucle pour terminer cette opération

var balls = document.querySelectorAll(&#39;li:nth-child(4) ~ *&#39;)
alert(balls.length)
for (var i=0; i<balls.length; i++) {
balls[i].style.backgroundColor = &#39;lightgreen&#39;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.jQuery的基本工作原理</title>
<style type="text/css">
ul {
margin:30px;
padding:10px;
overflow: hidden;
}
li {
list-style-type: none;
width: 40px;
height: 40px;
margin-left:10px;
background-color: lightskyblue;
text-align: center;
line-height: 40px;
font-size: 1.2em;
font-weight: bolder;
float:left;
border-radius: 50%;
box-shadow: 2px 2px 2px #808080;
}
/*将第一个li背景换成绿色*/
li:first-child {
/*background-color: lightgreen;*/
}
/*再将第4个元素背景换成橙色,前景换成白色*/
li:nth-child(4) {
/*background-color: orangered;*/
/*color: white;*/
}
li:nth-child(4) ~ * {
/*background-color: lightgreen;*/
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>

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!

JavaScript jquery css 循环 JS 选择器 background li http

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

Article précédent：Connaissance introductive de jsArticle suivant：Connaissance introductive de js

Articles Liés

Voir plus