ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryの基本的な仕組み
jQueryの基本的な仕組み
- 无忌哥哥オリジナル
- 2018-06-29 10:43:462159ブラウズ
複数の要素を一度に取得してループで処理するこの種の操作を簡略化するために、jQuery が誕生しました。 jQuery がもたらすのは、これまでにない酸っぱい気分です
まず、jQuery をインポートする必要があります。ここでは、cdn を使用して jquery 関数ライブラリを簡単にインポートし、それを示します
e83f3388faab79a19a353a8bd7ce89662cacc6d41bbb37262a98f745aa00fbf0
145e8b3fcb70672fbec934d6b2816c80
4ec11beb6c39d0703d1751d203c17053
$('li:nth-child(4) ~ *').css( {'background -color':'orangered','color':'white'})
2cacc6d41bbb37262a98f745aa00fbf0
//複数の要素を同時に処理すると、5 番目の背景のみが変更されることがわかります。これはなぜでしょうか
//セレクター li:nth-child(4)~* は複数の要素を選択しますが、querySelector() は 1 つを返すため、条件を満たす最初の要素のみが返されます
// document.querySelector ('li:nth-child(4) ~ *').style.backgroundColor = 'lightgreen'
//セレクターの条件を満たすすべての要素を取得するには、querySelectorAll()メソッドを使用する必要があります
/ /返されるのは要素のコレクション (配列) であるため、この操作を完了するにはループを使用する必要があります
var balls = document.querySelectorAll('li:nth-child(4) ~ *')
alert(balls.length)
for (var i=0; i<balls.length; i++) {
balls[i].style.backgroundColor = 'lightgreen'
}<!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 サイトの他の関連記事を参照してください。