day30-jQuery
2018-11-08 本文已影响0人
xdxh
一、广告窗
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告窗</title>
<style type="text/css">
#adv{
width: 300px;
height: 200px;
background-color: powderblue;
color:#8B4513;
/*固定定位*/
position: fixed;
top: 10px;
right: 10px;
}
#adv button{
width: 50px;
height: 30px;
position: absolute;
right: 0px;
border: none;
outline: none;
background-color: whitesmoke;
}
</style>
</head>
<body>
<div id="adv">
此广告位招租
<button>关闭</button>
</div>
<script type="text/javascript">
var advDiv = document.getElementById('adv');
var button = document.querySelector('#adv button');
var counter = 0;
button.addEventListener('click',function(){
counter += 1;
if(counter < 3){
//document.defaultView.getComputedStyle(元素) -> 读取元素的所有样式
var currentStyle = document.defaultView.getComputedStyle(advDiv);
var newTop = parseInt(currentStyle.top) + 20;
var newRight = parseInt(currentStyle.right) + 20;
advDiv.style.top = newTop + 'px';
advDiv.style.right = newRight + 'px';
}else{
advDiv.style.display = 'none';
}
});
//鼠标按下 - mousedown
//鼠标移动 - mousemove
//鼠标松开 - mouseup
//事件对象 clientX / clienY - 鼠标的横纵坐标
</script>
</body>
</html>
测试结果
1.PNG
二、表格操作
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery运用</title>
<style>
#data {
border-collapse: collapse;
margin: 0 auto;
position: relative;
margin-left: 410px;
margin-top: 50px;
}
#data td, #data th {
width: 120px;
height: 40px;
text-align: center;
border: 1px solid black;
}
#buttons {
position: relative;
margin-left: 480px;
margin-top: 30px;
}
#buttons button{
width: 100px;
height: 40px;
margin-right: 20px;
border: none;
outline: none;
background-color: antiquewhite;
font: 18px/18px arial;
}
</style>
</head>
<body>
<table id="data">
<caption>数据统计表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td><a>Item3</a></td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td><a>Item5</a></td>
</tr>
</table>
<div id="buttons">
<button id="pretty">美化表格</button>
<button id="clear">清除数据</button>
<button id="remove">删单元格</button>
<button id="hide">隐藏表格</button>
</div>
<!-- jQuery:Wtite Less Do More -->
<!-- 加载本地的jQuery文件适合开发和测试时使用 -->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 下面的方式适合商业项目通过CDN服务器来加速获取jQuery的JS文件 -->
<!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
<script type="text/javascript">
$(function() {
$('#pretty').on('click',function(){
$('#data tr:gt(0):odd').css({
'background-color':'#ccc',
'font-size': '20px',
});
$('#data tr:gt(0):even').css('background-color','#abc');
});
$('#clear').on('click',function(){
//text() -> 文本内容 html() -> 带标签的内容
$('#data tr:gt(0)>td').text('');
});
$('#remove').on('click',function(){
$('#data tr:gt(0):last-child').remove();
});
$('#hide').on('click',function(){
//根据样式表选择器获取元素 获取到的不是原生的JS对象
//而是经过jQuery封装过后的对象(有更多的方法方便操作)
$('#data').css('visibility','hidden');
});
});
</script>
</body>
</html>
测试结果
2.PNG
三、添加删除标签
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery运用</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
margin: 20px 50px;
}
#fruits li {
list-style: none;
width: 200px;
height: 50px;
font-size: 20px;
line-height: 50px;
background-color: cadetblue;
color: white;
text-align: center;
margin: 2px 0;
}
#fruits>li>a {
float: right;
text-decoration: none;
color: white;
position: relative;
right: 5px;
}
#fruits~input {
border: none;
outline: none;
font-size: 18px;
}
#fruits~input[type=text] {
border-bottom: 1px solid darkgray;
width: 200px;
height: 50px;
text-align: center;
}
/*~兄弟选择器*/
#fruits~input[type=button] {
width: 80px;
height: 30px;
background-color: coral;
color: white;
vertical-align: bottom;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<ul id="fruits">
<!-- a标签有默认的跳转页面的行为，有两种方法可以阻止它的默认行为
<a href="javascript:void(0);"> -> 去除a标签的默认行为
-->
<li>苹果<a href="">×</a></li>
<li>香蕉<a href="">×</a></li>
<li>火龙果<a href="">×</a></li>
<li>西瓜<a href="">×</a></li>
</ul>
<input id="name" type="text" name="fruit">
<input id="ok" type="button" value="确定">
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function removeItem(evt){
//$函数的第四种用法：参数是原生JavaScript对象
//将原生JS对象包装成对应的jQuery对象
$(evt.target).parent().remove();
evt.preventDefault();
}
//$函数的第一种用法：$函数的参数是另一个函数
//传入的函数是页面加载完成之后要执行的
$(function(){
//$函数的第二种用法：参数是一个选择器字符串
//获取元素并得到与之对应的jQuery对象(伪数组)
$('#fruits a').on('click',removeItem);
$('#ok').on('click',function(){
var friutName = $('#name').val().trim();
if(friutName.length > 0){
$('#fruits').append(
//$函数的第三种用法：参数是一个标签字符串
//创建新元素并得到与之对应的jQuery对象
$('<li>').text(friutName).append(
$('<a>').attr('href','').text('×').on('click',removeItem)
)
);
}
//对jQuery对象使用下标运算或get(index)方法会得到原生JS对象
$('#name').val('').get(0).focus();
});
});
</script>
</body>
</html>
测试结果
3.PNG
四、作业
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 350px;
height: 350px;
background-color: crimson;
position: absolute;
left: 0px;
top: 0px;
}
#div2{
width: 300px;
height: 300px;
background-color: lawngreen;
position: absolute;
left: 0px;
top: 0px;
}
#div3{
width: 250px;
height: 250px;
background-color: cornflowerblue;
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script type="text/javascript">
function mouseDown(evt1){
div = evt1.target;
currentStyle = document.defaultView.getComputedStyle(div);
divWidth = parseInt(currentStyle.width);
divHeight = parseInt(currentStyle.height);
divX = parseInt(currentStyle.left);
divY = parseInt(currentStyle.top);
mouseX = evt1.clientX;
mouseY = evt1.clientY;
div.addEventListener('mousemove',mouseMove);
div.addEventListener('mouseup',mouseUp);
}
function mouseMove(evt2){
currentMouseX = evt2.clientX;
currentMouseY = evt2.clientY;
moveX = currentMouseX - mouseX;
moveY = currentMouseY - mouseY;
if(divX + moveX < 0 && divY + moveY < 0){
div.style.left = '0px';
div.style.top = '0px';
}else if(divX + moveX < 0){
div.style.left = '0px';
div.style.top = divY + moveY + 'px';
}else if(divX + moveX > window.innerWidth - divWidth && divY + moveY < 0){
div.style.left = window.innerWidth - divWidth + 'px';
div.style.top = '0px';
}else if(divX + moveX > window.innerWidth - divWidth){
div.style.left = window.innerWidth - divWidth + 'px';
div.style.top = divY + moveY + 'px';
}else if(divY + moveY < 0){
div.style.left = divX + moveX + 'px';
div.style.top = '0px';
}else{
div.style.left = divX + moveX + 'px';
div.style.top = divY + moveY + 'px';
}
}
function mouseUp(evt3){
div.removeEventListener('mousemove',mouseMove);
}
var div1 = document.getElementById('div1');
div1.addEventListener('mousedown',mouseDown);
var div2 = document.getElementById('div2');
div2.addEventListener('mousedown',mouseDown);
var div3 = document.getElementById('div3');
div3.addEventListener('mousedown',mouseDown);
</script>
</body>
</html>
测试结果
4.PNG
