jQuery가 기본적으로 작동하는 방식
- 无忌哥哥원래의
- 2018-06-29 10:43:462185검색
여러 요소를 한 번에 가져와 루프에서 처리합니다. 이러한 작업은 js에서 매우 일반적입니다. 이러한 작업을 단순화하기 위해 jQuery가 탄생했습니다.
jQuery를 사용하여 빠르게 다시 작성해 보겠습니다. jQuery는 전례 없는 신랄한 느낌을 선사합니다
먼저 jQuery를 가져와야 합니다. 여기서는 cdn을 사용하여 jquery 함수 라이브러리를 빠르게 가져와 시연합니다
ee2c7f1f7611848aaa02129de33612e52cacc6d41bbb37262a98f745aa00fbf0
900fa7a7671ba767ace22aa1cb875589
4ec11beb6c39d0703d1751d203c17053
$('li:nth-child(4) ~ *').css( {'Background -color':'orangered','color':'white'})
2cacc6d41bbb37262a98f745aa00fbf0
//여러 요소를 동시에 처리할 때 다섯 번째 배경만 변경되는 것을 볼 수 있습니다. 왜 그럴까요?
//선택자 li:nth-child(4)~*는 여러 요소를 선택하지만 querySelector()는 하나를 반환하므로 조건에 맞는 첫 번째 요소만 반환됩니다
// 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!