收藏
批改状态：未批改
老师批语：
本次作业是jQuery选择器的应用，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器-4月3日作业</title>
<style type="text/css">
div .form{
float: left;
font-family: '微软雅黑';
}
div input{
width: 120px;
/*height: 20px;*/
margin-right: 18px;
}
div button{
width: 60px;
height: 22px;
font-weight: bold;
}
table{
width: 75%;
margin: auto;
border-spacing: 0;
text-align: center;
border: 1px solid gray;
box-shadow: 2px 2px 3px gray;
}
tr,th,td{
padding: 10px;
border: 1px solid gray;
}
.th-bg{
background-color: orangered;
color: #fff;
}
.zg{
color: red;
font-weight: bold;
}
.title{
font-weight: bold;
font-style: italic;
font-size: large;
}
.input-style{
background-color: lightgreen;
/*border: 1px solid seagreen;*/
/*border-color: seagreen;*/
}
.button{
background-color: orangered;
color: #fff;
}
</style>
</head>
<body>
<!--要求至少要写出6个常用的选择器函数,发布到博客中-->
<table>
<caption><h2>员工信息表</h2></caption>
<div>
<form>
<div class="form">用户名：<input type="text" name="name"></div>
<div class="form">密码：<input type="password" name="psd"></div>
<div class="form"><button>登陆</button></div>
</form>
</div>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>部门</th>
<th>职务</th>
<th>薪酬</th>
<th>入职时间</th>
</tr>
<tr>
<td>1001</td>
<td>张三丰</td>
<td>男</td>
<td>公司本部</td>
<td>董事长</td>
<td>100000</td>
<td>1997-01-11</td>
</tr>
<tr>
<td>1002</td>
<td>张无忌</td>
<td>男</td>
<td>公司本部</td>
<td>总经理</td>
<td>50000</td>
<td>1997-01-11</td>
</tr>
<tr>
<td>1003</td>
<td>赵敏</td>
<td>女</td>
<td>公司本部</td>
<td>特别助理</td>
<td>30000</td>
<td>1997-01-11</td>
</tr>
<tr>
<td>1032</td>
<td>周芷若</td>
<td>女</td>
<td>行政部</td>
<td>秘书</td>
<td>8000</td>
<td>2001-02-02</td>
</tr>
<tr>
<td>1068</td>
<td>路仁甲</td>
<td>男</td>
<td>后勤部</td>
<td>主管</td>
<td>20000</td>
<td>1997-01-11</td>
</tr>
<tr>
<td>1431</td>
<td>令狐冲</td>
<td>男</td>
<td>设计部</td>
<td>员工</td>
<td>12000</td>
<td>2017-12-21</td>
</tr>
<tr>
<td>2003</td>
<td>任盈盈</td>
<td>女</td>
<td>行政部</td>
<td>前台</td>
<td>3880</td>
<td>2018-01-08</td>
</tr>
<tr>
<td>1683</td>
<td>任我行</td>
<td>男</td>
<td>财务部</td>
<td>主管</td>
<td>20000</td>
<td>2005-04-05</td>
</tr>
<tr>
<td>1431</td>
<td>令狐冲</td>
<td>男</td>
<td>设计部</td>
<td>员工</td>
<td>12000</td>
<td>2017-12-21</td>
</tr>
<tr>
<td>2003</td>
<td>任盈盈</td>
<td>女</td>
<td>行政部</td>
<td>前台</td>
<td>3880</td>
<td>2018-01-08</td>
</tr>
<tr>
<td>1431</td>
<td>令狐冲</td>
<td>男</td>
<td>设计部</td>
<td>员工</td>
<td>12000</td>
<td>2017-12-21</td>
</tr>
<tr>
<td>2003</td>
<td><a>任盈盈</a></td>
<td>女</td>
<td>行政部</td>
<td>前台</td>
<td>3880</td>
<td>2018-01-08</td>
</tr>
</table>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//基础选择器-tag
$('th').addClass('th-bg')
//所有奇数行
$('tr:odd').css('backgroundColor','lightyellow')
//所有偶数行
$('tr:even').css('backgroundColor','lightgreen')
//内容过滤器,选择包含“主管”的添加新样式
$('tr:contains("主管")').addClass('zg')
//选择小于某个序号的元素
$('tr:lt(3)').addClass('title')
//表单选择器
$('input').addClass('input-style')
$('button').addClass('button')
//选择第9行后面所有同级元素
$('tr').eq(9).next().css('color','blue')
</script>点击 "运行实例" 按钮查看在线实例
效果图如下：
小结：
1、通过本次学习与作业练习，初步理解了jQuery几种常用选择器的分类和使用方法；
2、要注意jquery使用eq(i),i从0开始,注意与css中的不一样，css中是以1为开始。
3、表单过滤器中jQuery与CSS写法的区别：css写法,仅选到到所有的input,其它的控件选不上，而jquery,除了可以选择input之外,select,button,textarea也全部可以选上。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
