一芹务、廣告窗
代碼
<!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>關(guān)閉</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';
}
});
//鼠標(biāo)按下 - mousedown
//鼠標(biāo)移動(dòng) - mousemove
//鼠標(biāo)松開 - mouseup
//事件對(duì)象 clientX / clienY - 鼠標(biāo)的橫縱坐標(biāo)
</script>
</body>
</html>
測(cè)試結(jié)果
1.PNG
二证杭、表格操作
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery運(yùn)用</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>數(shù)據(jù)統(tǒng)計(jì)表</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">清除數(shù)據(jù)</button>
<button id="remove">刪單元格</button>
<button id="hide">隱藏表格</button>
</div>
<!-- jQuery:Wtite Less Do More -->
<!-- 加載本地的jQuery文件適合開發(fā)和測(cè)試時(shí)使用 -->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 下面的方式適合商業(yè)項(xiàng)目通過CDN服務(wù)器來加速獲取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() -> 文本內(nèi)容 html() -> 帶標(biāo)簽的內(nèi)容
$('#data tr:gt(0)>td').text('');
});
$('#remove').on('click',function(){
$('#data tr:gt(0):last-child').remove();
});
$('#hide').on('click',function(){
//根據(jù)樣式表選擇器獲取元素 獲取到的不是原生的JS對(duì)象
//而是經(jīng)過jQuery封裝過后的對(duì)象(有更多的方法方便操作)
$('#data').css('visibility','hidden');
});
});
</script>
</body>
</html>
測(cè)試結(jié)果
2.PNG
三腋妙、添加刪除標(biāo)簽
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery運(yùn)用</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標(biāo)簽有默認(rèn)的跳轉(zhuǎn)頁(yè)面的行為，有兩種方法可以阻止它的默認(rèn)行為
<a href="javascript:void(0);"> -> 去除a標(biāo)簽的默認(rèn)行為
-->
<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){
//$函數(shù)的第四種用法：參數(shù)是原生JavaScript對(duì)象
//將原生JS對(duì)象包裝成對(duì)應(yīng)的jQuery對(duì)象
$(evt.target).parent().remove();
evt.preventDefault();
}
//$函數(shù)的第一種用法：$函數(shù)的參數(shù)是另一個(gè)函數(shù)
//傳入的函數(shù)是頁(yè)面加載完成之后要執(zhí)行的
$(function(){
//$函數(shù)的第二種用法：參數(shù)是一個(gè)選擇器字符串
//獲取元素并得到與之對(duì)應(yīng)的jQuery對(duì)象(偽數(shù)組)
$('#fruits a').on('click',removeItem);
$('#ok').on('click',function(){
var friutName = $('#name').val().trim();
if(friutName.length > 0){
$('#fruits').append(
//$函數(shù)的第三種用法：參數(shù)是一個(gè)標(biāo)簽字符串
//創(chuàng)建新元素并得到與之對(duì)應(yīng)的jQuery對(duì)象
$('<li>').text(friutName).append(
$('<a>').attr('href','').text('×').on('click',removeItem)
)
);
}
//對(duì)jQuery對(duì)象使用下標(biāo)運(yùn)算或get(index)方法會(huì)得到原生JS對(duì)象
$('#name').val('').get(0).focus();
});
});
</script>
</body>
</html>
測(cè)試結(jié)果
3.PNG
四幕庐、作業(yè)
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作業(yè)</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>
測(cè)試結(jié)果
4.PNG
