一、流氓广告
- 使用document.defaultView.getComputedStyle(div1)去读取div1元素的CSS属性
- 鼠标按下 - mousedown
鼠标移动 - mousemove
鼠标松开 - mouseup
clientX / clientY - 鼠标的横纵坐标evt.clientX
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#adv {
width: 200px;
height: 200px;
color: yellow;
position: fixed;
right: 10px;
top: 10px;
background-color: blue;
}
#adv button {
float: right;
border: none;
outline: none;
color: white;
background-color: gray;
}
</style>
</head>
<body>
<div id="adv">
此广告位招租
<button>关闭</button>
</div>
<script>
+function() {
var advDiv = document.querySelector('#adv');
var button = document.querySelector('#adv button');
var counter = 0;
button.addEventListener('click', function() {
counter += 1;
if (counter < 3) {
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 / clientY - 鼠标的横纵坐标
</script>
</body>
</html>
二、用jQuery重写表格
- jQuery: Write Less Do More
- 加载本地的jQuery文件适合开发和测试时使用:
<script src="js/jquery.min.js"></script>
用cdn服务器来加载jQuery的速度更快，商业项目通过cdn服务器来加速获取jQurey的文件更好:
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
- 写在
$里面的函数,是页面加载完成后自动执行的函数 $(function (){});
-
$根据样式表选择器获取元素,获取到的不是原生的JS对象,而是经过jQuery封装过后的对象(有更多的方法方便操作),绑定事件是on,反绑定是off
- css()读取与修改,一个参数是读取,两个参数是修改
$('#data').css('visibility', 'hidden');
- hide和fideOut是动画效果
$('#data').hide(2000);
- text()修改纯文本,传''修改为空,传参就是给该文本赋值,不传参就是读取
html()可以修改带标签/实体替换符的内容,传参就是给该文本赋值,不传参就是读取
val()可以读取表单内容，传参修改，不传读取
- jQuery支持级联式编程
- 在js中使用{}代表一个对象,JavaScript Object Notation == JSON
- 可以使用传入对象的方法修改多个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#data {
border-collapse: collapse;
}
#data td, #data th {
width: 120px;
height: 40px;
text-align: center;
border: 1px solid black;
}
#buttons {
margin: 10px 0;
}
</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>
<!-- jQuery: Write Less Do More -->
<!-- 加载本地的jQuery文件适合开发和测试时使用 -->
<script src="js/jquery.min.js"></script>
<!-- 用cdn服务器来加载jQuery的速度更快，商业项目通过cdn服务器来加速获取jQurey的文件更好 -->
<!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
<script type="text/javascript">
// 写在$里面的函数,是页面加载完成后自动执行的函数
$(function() {
// 根据样式表选择器获取元素,获取到的不是原生的JS对象,
// 而是经过jQuery封装过后的对象(有更多的方法方便操作)
// 绑定事件是on,反绑定是off
$('#hide').on('click', function(){
// css()读取与修改,一个参数是读取,两个参数是修改
// $('#data').css('visibility', 'hidden');
// hide和fideOut是动画效果
// $('#data').hide(2000);
$('#data').fadeOut(2000);
});
/*删除单元格*/
$('#remove').on('click', function(){
$('#data tr:gt(0):last-child').remove();
});
$('#clear').on('click', function(){
// text()修改纯文本,传''修改为空,传参就是给该文本赋值,不传参就是读取
// $('data tr:gt(0)>td').text('');/
// html()可以修改带标签/实体替换符的内容,传参就是给该文本赋值,不传参就是读取
$('#data tr:gt(0)>td').html('');
});
$('#pretty').on('click', function(){
// jQuery支持级联式编程
// $('#data tr:gt(0):odd')
// .css('background-color', 'lightsteelblue')
// // .text('hello')
// .css('font-size', '20px')
// .css('font-style', 'italic');
// 在js中使用{}代表一个对象,JavaScript Object Notation == JSON
// 可以使用传入对象的方法修改多个属性
$('#data tr:gt(0):odd').css({
'background-color': 'lightsteelblue',
'font-size': '20px',
'font-style': 'italic',
});
$('#data tr:gt(0):even').css('background-color', 'lightgray');
});
});
</script>
</body>
</html>
三、jQuery实现动态列表
-
$函数的第一种用法:$函数的参数是另一个函数
传入的函数是页面加载完成之后要执行的回调函数
$(document).ready(function(){});(老版本的写法)
-
$函数的第二种用法:参数是一个选择器字符串
获取元素并得到与之对应的jQuery对象(伪数组)
-
$函数的第三种用法:参数是一个标签字符串
创建新元素,并得到与之对应的jQuery对象
-
$函数的第四种用法:参数是原生JavaScript对象
将原生JS对象包装成对应的jQuery对象
- jQuery对象是一个伪数组,get(0)可以获得第一个原生JS对象
对jQuery对象使用下标运算或调用get(index)方法会得到原生JS对象
<!-- 查CSS在浏览器中预览效果 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></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">
<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">
</script>
<script type="text/javascript">
function removeItem(evt){
evt.preventDefault();
// $函数的第四种用法:参数是原生JavaScript对象
// 将原生JS对象包装成对应的jQuery对象
$(evt.target).parent().remove();
}
function addItem(){
var fruitName = $('#name').val().trim();
if (fruitName.length > 0) {
$('#fruits').append(
// $函数的第三种用法:参数是一个标签字符串
// 创建新元素,并得到与之对应的jQuery对象
$('<li>').text(fruitName).append(
$('<a>').attr('href', '').text('x').on('click', removeItem)
)
);
}
// jQuery对象是一个伪数组,get(0)可以获得第一个原生JS对象
// 对jQuery对象使用下标运算或调用get(index)方法会得到原生JS对象
$('#name').val('').get(0).focus();
// $('#name').val('')[0].focus();
};
// $函数的第一种用法:$函数的参数是另一个函数
// 传入的函数是页面加载完成之后要执行的回调函数
// $(document).ready(function(){}); // 老版本的写法
$(function (){
// $函数的第二种用法:参数是一个选择器字符串
// 获取元素并得到与之对应的jQuery对象(伪数组)
$('#fruits a').on('click', removeItem);
$('#ok').on('click', addItem);
$('#name').on('keypress', function (evt){
if (evt.which == '13'){
addItem();
}
});
});
</script>
</body>
</html>
四、面向对象的方块拖拽
- 可以利用
this给js或者jQuery对象动态添加属性，this所指的是当前对象
- each可以遍历,参数是回调函数,回调函数的参数是下标,元素
- z-index可以调元素的层数,数值越高越在上面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
position: fixed;
width: 150px;
height: 200px;
}
#one{
left: 50px;
top: 50px;
background-color: red;
}
#two{
left: 100px;
top: 100px;
background-color: blue;
}
#three{
left: 350px;
top: 30px;
background-color: green;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<script src="js/mylib.js">
</script>
<script src="js/jquery.min.js">
</script>
<script type="text/javascript">
// // 记录当前鼠标点击的位置坐标
// var oldX, oldY;
// // 记录div左上角坐标
// var oldLeft, oldTop;
// // 记录鼠标是否按下
// var isMouseDown;
$(function(){
makeDraggable($('#one'));
makeDraggable($('#two'));
makeDraggable($('#three'));
});
var draggables = [];
function makeDraggable(jqElem){
draggables.push(jqElem);
jqElem.on('mousedown', function(evt){
this.isMouseDown = true;
this.oldX = evt.clientX;
this.oldY = evt.clientY;
this.oldLeft = parseInt($(evt.target).css('left'));
this.oldTop = parseInt($(evt.target).css('top'));
// each可以遍历,参数是回调函数,回调函数的参数是下标,元素
// z-index可以调元素的层数,数值越高越在上面
$.each(draggables, function(index, elem) {
elem.css('z-index', '0');
});
$(evt.target).css('z-index', '99');
})
.on('mousemove', function(evt){
if (this.isMouseDown){
var dx = evt.clientX - this.oldX;
var dy = evt.clientY - this.oldY;
$(evt.target).css('left', this.oldLeft + dx + 'px');
$(evt.target).css('top', this.oldTop + dy + 'px');
}
})
.on('mouseup', function(evt){
this.isMouseDown = false;
})
.on('mouseout', function(evt){
this.isMouseDown = false;
});
};
</script>
</body>
</html>
