<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的引入以及$(document).read()使用方式</title>
<!--1：引用静态资源库，这里选择使用百度静态资源库-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--2：下载JS文件，放到本地引用-->
<!--<script type="text/javascript" src="/js/jquery.min.js"></script>-->
<script>
// 第二种方法：使用$(document).read()放在被执行代码顶部。
// $(document).ready(function(){
//
// });
// 也可以简写为$(function () {}）
$(function () {
// 定义节点
var tabl = $("ul li")
// 给所有LI标签添加CSS样式
tabl.addClass("item")
// 给第一个LI标签添加CSS样式
tabl.eq(0).addClass("itemActive")
//添加点击事件
tabl.on('click',function () {
$(this).addClass("itemActive")//增加被点击的li元素的样式
.siblings('li')//查找兄弟节点
. removeClass("itemActive")//删除兄弟标签的点击样式
})
})
</script>
</head>
<body>
<!--本案例内容：制作十个彩色小球，实现点击改变小球颜色-->
<style type="text/css">
ul {margin:30px;padding:10px;overflow: hidden;}
.item {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;
}
.itemActive{background-color: #ff6029;color: #fff;}
</style>
<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>
<!--<script>-->
<!--// 第一种方法：放在被执行代码底部。-->
<!--// 定义节点-->
<!--var tabl = $("ul li")-->
<!--// 给所有LI标签添加CSS样式-->
<!--tabl.addClass("item")-->
<!--// 给第一个LI标签添加CSS样式-->
<!--tabl.eq(0).addClass("itemActive")-->
<!--//添加点击事件-->
<!--tabl.on('click',function () {-->
<!--$(this).addClass("itemActive")//增加被点击的li元素的样式-->
<!--.siblings('li')//查找兄弟节点-->
<!--. removeClass("itemActive")//删除兄弟标签的点击样式-->
<!--})-->
<!--</script>-->
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
