jQueryの基本的な仕組み-jsチュートリアル-php.cn

jQueryの基本的な仕組み

无忌哥哥

リリース： 2018-06-29 10:43:46

オリジナル

2161 人が閲覧しました

複数の要素を一度に取得してループで処理するこの種の操作を簡略化するために、jQuery が誕生しました。 jQuery がもたらすのは、これまでにない酸っぱい気分です

まず、jQuery をインポートする必要があります。ここでは、cdn を使用して jquery 関数ライブラリを簡単にインポートし、それを示します

//複数の要素を同時に処理すると、5 番目の背景のみが変更されることがわかります。これはなぜでしょうか

//セレクター li:nth-child(4)~* は複数の要素を選択しますが、querySelector() は 1 つを返すため、条件を満たす最初の要素のみが返されます

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

//セレクターの条件を満たすすべての要素を取得するには、querySelectorAll()メソッドを使用する必要があります

/ /返されるのは要素のコレクション (配列) であるため、この操作を完了するにはループを使用する必要があります

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>

ログイン後にコピー

以上がjQueryの基本的な仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。