Comment fonctionne jQuery-js tutoriel-php.cn

Comment fonctionne jQuery

无忌哥哥

Libérer： 2018-06-29 10:43:46

original

2244 Les gens l'ont consulté

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

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

Copier après la connexion

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

Copier après la connexion

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!