首页 >web前端 >js教程 >jQuery的基本工作原理

jQuery的基本工作原理

无忌哥哥原创: 2018-06-29 10:43:462178浏览

一次性获取多个元素,然后循环进行处理,这样的操作在js中非常普遍,为了简化这类操作,jQuery横空出世,

下面我们用jQuery来快速改写一下,体验一下jQuery带来了的,前所未有的酸爽感觉

首先我们要导入一个jQuery,这里我先用cdn快速导入jquery函数库,演示一下

1a67d3de217be829f33d9a9d8b64556a

ef14912243d197cc91dd9370ab784b082cacc6d41bbb37262a98f745aa00fbf0

117410bf07ac14a2e77287e8e68a14f0

5cd6e472395e766622bc5d31b556eb7a

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

2cacc6d41bbb37262a98f745aa00fbf0

//同时处理多个元素,你会发现只有第5个背景发生变化,这是为什么呢?

//尽管选择器li:nth-child(4)~*选择了多个元素,但是querySelector()中会返回一个,所以只返回了符合条件的第一个元素

// 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中文网其他相关文章！

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

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：js的入门知识下一篇：如何解决vue项目打包后打开页面空白的问题

查看更多