前言:学习总结,主要用于自我复习
1. 使用JQ完成首页的定时⼴告弹出
1.1 相关知识点JQuery
1.1 JQuery介绍
JQuery是一个快速、简洁的JavaScript框架.它封装JavaScript的常用功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互.
1.2 JQuery的使用
JQuery它是⼀个库(框架),要想使用它,必须先引入对应JS文件。
1.2.3 JQuery的引入
<script src="jquery.js文件地址" type="text/javascript" charset="utf-8"></script>
1.2.4 JQuery和JavaScript的转换
获取元素
- JS:document.getElementById();
- JQ:$("#id");
<script>
function JSWrite(){
//document.getElementById("span1").innerHTML="美美哒!";
var spanEle = document.getElementById("span1");
$(spanEle).html("Hello!");
}
$(function(){
$("#btn1").click(function(){
//JQ对象转换成DOM对象的第⼀种⽅式
//$("#span1")[0].innerHTML="World!";
//JQ对象转换成DOM对象的第⼆种⽅式
$("#span1").get(0).innerHTML="World!";
});
});
</script> <body>
<input type="button" value="JS写入" onclick="JSWrite()"/>
<input type="button" value="JQ写入" id="btn1"/><br /><br />
<span id="span1">sssss</span>
</body>
1.2.5 选择器
- id选择器:
$
(“#id名称”); - 元素选择器:
$
(“元素名称”); - 类选择器:
$
(“.类名”);
1.3 代码实现
slideDown():滑入
fadeOut():淡出
<html>
<head>
<meta charset="utf-8">
<title>div+css完成首页</title>
<style type="text/css">
#header {
height: 51px;
}
#header div {
height: 100%;
width: 33%;
float: left;
}
·
·
·
</style>
<script src="../JQuery/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
setTimeout("showAd()",3000);
})
function showAd(){
$("#ad").slideDown();
setTimeout("hideAd()",3000);
}
function hideAd(){
$("#ad").fadeOut();
}
</script>
</head>
<body>
<img src="./img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="ad" style="display: none;" width="100%">
·
·
·
</body>
</html>
实现效果
首页打开3秒后广告滑出,再经过3秒淡出.
2. 使用JQ完成表格的隔行换色
2.2 相关知识点
- $(“tbody tr:even”):选中表中的偶数行,0行开始
- $(“tbody tr:odd”):选中奇数行
- addClass():添加类
2.3 代码实现
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成表格隔行换色</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="../JQuery/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function (){
$("tbody tr:even").addClass("even");
$("tbody tr:odd").addClass("odd");
})
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
·
·
·
</tbody>
</table>
</body>
</html>
实现效果
3. 使用JQ实现全选全不选
3.1 相关知识点
属性操作
- attr():获取/设置元素的属性
- removeAttr():删除属性
- prop():获取/设置元素的属性
- removeProp():删除属性
attr和prop区别?
- 如果操作的是元素的固有属性,则建议使用prop
- 如果操作的是元素自定义的属性,则建议使用attr
3.2 代码实现
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成复选框的全选和全不选</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="../JQuery/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#select").click(function(){
var checked=$("#select").prop("checked");
$("input[type='checkbox']").prop("checked",checked);
})
})
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" id="select"></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
·
·
·
</tbody>
</table>
</body>
</html>
实现效果
点击标题勾选框,全部勾选或不选