day15_雷神_前端03
# 前端 day03
內容回顧
javascript:
1.ECMAScript5.0 es6(阮一峯) es7 es8
(1)聲明變量 var let
(2)內置函數 Date Math.random()
(3)if else switch while do-while for
(4)
var a = 5;
//先賦值
var a = a++;
//var x = ++a;
2.DOM
Document Object Model
(1)獲取DOM對象
getElementById()
getElementsByTagName()
getElementsByClassName()
(2)onclick 點擊
onmouseover 鼠標懸浮
onmouseout 鼠標移出
onmouseenter 鼠標進入
onmouseleave 鼠標離開
(3)
1、值得操做 <div class='box'></div> too liang
oDiv.innerText = 'too liang'; 僅僅的設置文本
oDiv.innerHTML = '<h2>too liang</h2>'; 文本和標籤一塊兒渲染
oInput.value = 'alex'; 僅僅是對錶單控件 有效
2、標籤屬性操做：
設置類名： oDiv.className += ' active'; 追加類名
設置id：oDiv.id = 'box'
title
img中的src設置
a中的href
input id name placeholde.... value
3、樣式操做
oDiv.style.(css中全部的樣式屬性)
注意：若是margin-left 使用js的時候marginLeft
DOM的三步走：
1.事件對象
2.事件
3.事件驅動
註釋法排錯
DOM的增刪改建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1.DOM元素加載 二、圖片資源
//1.等待DOM和圖片資源加載完成以後才調用次方法
//2.事件覆蓋現象
//程序入口函數
window.onload = function () {
// alert(1);
//
// var a = 10;
// alert(a);
function $(idName) {
return document.getElementById(idName);
}
// var oBtn = document.getElementById('btn');
// var oDiv = document.getElementById('box');
$('btn').onclick = function () {
//1.DOM的建立
var oP = document.createElement('p');
//2.DOM的追加 父.appendChild(子)
$('box').appendChild(oP);
//3.DOM的修改
oP.innerText = 'alex';
oP.id = 'p1';
var oA = document.createElement('abc');
oA.innerText = '321';
$('box').insertBefore(oA,oP)
}
$('del').onclick = function () {
//4.DOM刪除
$('box').removeChild($('p1'));
}
};
</script>
</head>
<body>
<button id="btn">追加</button>
<button id="del">刪除</button>
<div id="box">
<!--p-->
</div>
</body>
</html>
JS中的BOM
Browser Object Modeljavascript
window對象時BOM的頂層對象css
alert方法實際上是window.alert，點能夠不寫html
window.location能夠簡寫成location。location至關於瀏覽器地址欄，能夠將url解析成獨立的片斷。前端
href：跳轉 hash 返回url中#後面的內容，包含# host 主機名，包括端口 hostname 主機名 pathname url中的路徑部分 protocol 協議 通常是http、https search 查詢字符串
舉例1：java
<body>
<div>smyhvae</div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com"; //點擊div時，跳轉到指定連接
// window.open("http://www.baidu.com","_blank"); //方式二
}
</script>
</body>
JS中的定時器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<a href="http://www.baidu.com" target="_blank">百度</a>
<button id="btn">跳轉</button>
<script>
var oDiv = document.getElementById('box');
var num = 0;
setInterval(function () {
// num+=3;
console.log(num);
oDiv.style.marginLeft = num+'px';
},30);
//用定時器 先清定時器 再開定時器
/*
//定時器 一次性定時器 js單線程
//1.回調函數 2.時間 毫秒1000毫秒=1秒
//不等待 解決數據阻塞
var timer = setTimeout(function () {
console.log('走動了');
},1000);
console.log('dddd');
console.log(2);
//history模塊 hash模式
///xxxx/index
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
//需求：打開百度
// console.log(location);
// location.href = 'http://www.baidu.com';
// open('http://www.baidu.com','_self');
// open('http://www.baidu.com','_blank')
//全局刷新 刷新整個頁面
window.location.reload();
// clearTimeout(timer);
}
*/
</script>
</body>
</html>
JS的面向對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var arr = [1,2,3];
// var arr = new Array()
// js es5中沒有class的概念
// class Dog
// self.name = name
// def eat()
// Dog()
function Dog(name,age){
this.name = name;
this.age = age;
}
//就是Dog的父類
Dog.prototype.eat = function () {
console.log(this.name);
}
// 沒對象 new一個
var d1 = new Dog('太量',20);
console.log(d1);
d1.eat();
console.log(Dog.prototype );
console.log(d1.__proto__);
console.log(Dog.prototype === d1.__proto__ );
</script>
</body>
</html>
JQuery入門
F12 裏的network裏的那些name，都是至關於每個請求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box">alex</div>
<!--jquery的核心思想 write less do more 寫的少 作的多-->
<!--1.引包 前端 一個js文件就是一個模塊-->
<script src="jquery-3.3.1.js"></script>
<script>
//1.入口函數
console.log($(document));
// console.log(jQuery);
//當文檔加載時候 調用此方法
// $(document).ready(function () {
//
//
//
//
// });
$(function () {
//jquery轉js
console.dir($('.box')[0])
$('.box').click(function () {
// $('.box').css('background-color','green');
// $('.box').css({
// 'width':500,
// 'backgroundColor':'green'
// });
//this指的是js對象
console.log(this)
// js轉換jquery對象
$(this).css('background-color','green');
})
});
</script>
</body>
</html>
jQuery的基本選擇器
$(this).text() text括號裏不傳值表示查看值，傳了值表示設置值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"><p>alex</p></div>
<div class="box">tailiang</div>
<input type="text">
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
// var oBoxs = document.getElementsByClassName('box');
// console.log(oBoxs);
var arr = [1,2];
console.log(arr);
//類選擇器 相似數組 數組的索引 長度length 可是原型的方法不同： 僞數組
console.log( $('.box'));
// $('.box').push('4');
// console.log( $('.box'));
//jquery 內部遍歷 對jsdom對象添加點擊事件
$('.box').click(function () {
//對值得操做
// alert(this.innerText);
// alert($(this).text());
// alert($(this).html());
$(this).text('nvshen');
});
//設置 獲取
// $('input').val('123');
});
</script>
</body>
</html>
高級選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul class="lists">
<li>
alex
</li>
<li>
alex2
</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//鏈式編程 返回的是jQuery對象
$('ul li').css({
'color':'red'
}).click(function(){
console.log($(this).text().trim())
})
});
</script>
</body>
</html>
基本過濾選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>alex1</li>
<li>alex2</li>
<li>alex3</li>
<li>alex4</li>
<li>alex5</li>
<li>alex6</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//基本過濾選擇器
$('ul li:eq(0)').css('color','green');
$('ul li:gt(1)').css('color','red');
$('ul li:first').css('color','yellow');
});
</script>
</body>
</html>
篩選的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>
alex1
<a href="#">alex1</a>
</li>
<li>alex2</li>
<li class="item3">alex3</li>
<li>alex4</li>
<li>alex5</li>
<li>alex6</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//篩選方法
// $('ul').find('.item3').css('color','red');
//獲取的親兒子
$('ul').children().css('color','green');
//獲取的親爹
$('ul').parent().css('background','yellow');
$('ul li').eq(2).css('color','red');
});
</script>
</body>
</html>
siblings選項卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
width: 300px;
list-style: none;
background-color: purple;
overflow: hidden;
margin: 100px auto;
}
ul li {
float: left;
width: 75px;
height: 80px;
line-height: 80px;
text-align: center;
color: #fff;
}
li span.active{
color: red;
}
</style>
</head>
<body>
<ul>
<li>
<span>熱門</span>
</li>
<li><span>洗衣機</span></li>
<li><span>洗衣機</span></li>
<li><span>冰箱</span></li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('ul li span').eq(0).addClass('active');
$('ul li').click(function () {
//siblings 除了它本身以外的兄弟元素
// $(this).children().addClass('active').parent().siblings('li').children().removeClass('active');
$(this).find('span').addClass('active').parent().siblings('li').children().removeClass('active');
})
});
</script>
</body>
</html>
選項卡完整版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
width: 300px;
list-style: none;
background-color: purple;
overflow: hidden;
}
ul li {
float: left;
width: 75px;
height: 80px;
line-height: 80px;
text-align: center;
color: #fff;
}
li.active{
color: red;
}
.content{
width: 300px;
height: 300px;
/*background-color: red;*/
}
.content div{
width: 100%;
height: 100%;
color: #000;
line-height: 300px;
font-size: 100px;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li class="active">
a
</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<div class="content">
<div>1</div>
<div style="display: none">2</div>
<div style="display: none;">3</div>
<div style="display: none;">4</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('ul li').click(function () {
console.log( $(this).index());
var i = $(this).index()
//修改 小導航 選項切換
$(this).addClass('active').siblings('li').removeClass('active');
//修改對應的內容 選項切換
$('.content div').eq(i).css('display','block').siblings('div').css('display','none');
});
});
</script>
</body>
</html>
對類的操做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box" class="box"></div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#box').addClass('active tt uu ii');
$('#box').removeClass('active tt');
})
</script>
</body>
</html>
標籤屬性、對象屬性的操做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="" alt="">
<a href=""></a>
<input type="radio" name = 'sex' checked = 'addadadad' id="nan">男
<input type="radio" name = 'sex' id="nv">女
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//設置單個屬性
// $('img').attr('src','./timg.jpg');
//設置多個屬性
$('img').attr({
id:'img1',
src:'./timg.jpg',
// 除了class屬性 其它的屬性均可以設置
title:'啊 美女'
});
//獲取
console.log( $('img').attr('title'));
//刪除標籤屬性
$('img').removeAttr('id title');
//標籤屬性
console.log($('#nan').attr('checked'));
//獲取jsDOM對象的屬性 用在單選按鈕上多
console.dir($('#nan')[0])
console.log($('#nan').prop('checked'));
console.log($('#nv').prop('checked'));
});
</script>
</body>
</html>
動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button>動畫</button>
<div class="box"></div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
var isShow = true;
$('button').click(function () {
// $('.box').hide(3000);
// $('.box').show(3000,function () {
// $(this).text('alex');
// });
/*
if (isShow){
$('.box').show(3000,function () {
$(this).text('alex');
isShow = false;
});
}else{
$('.box').hide(3000,function () {
$(this).text('');
isShow = true;
});
}
*/
//使用jquery的動畫 先中止 動畫 在 開動畫
// $('.box').stop().toggle(500);
//捲簾門動畫
// $('.box').slideDown(500);
// $('.box').stop().slideToggle(500);
//淡入 顯示
// $('.box').fadeIn(2000);
// $('.box').stop().fadeToggle(2000);
})
});
</script>
</body>
</html>
自定義動畫
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script src="jquery.color.js"></script>
<script>
$(function () {
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"backgroundColor": '#ff6700'
};
//自定義動畫
$("div").animate(json, 1000, function () {
$("div").animate(json2, 3000, function () {
alert("動畫執行完畢！");
});
});
})
})
</script>
</head>
<body>
<button>自定義動畫</button>
<div></div>
</body>
</html>
單雙擊問題解決
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 300px;
color: red;
font-size: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="head">
<div class="container">
<button class="box">按鈕</button>
</div>
</div>
<script src="jquery.js"></script>
<script>
var time = null;
$('.box').click(function () {
// 取消上次延時未執行的方法
clearTimeout(time);
//執行延時
time = setTimeout(function(){
//do function在此處寫單擊事件要執行的代碼
console.log('單機')
},300);
});
$('.box').dblclick(function () {
// 取消上次延時未執行的方法
clearTimeout(time);
//雙擊事件的執行代碼
console.log('雙擊')
});
</script>
</body>
</html>
ajax 練習
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>天氣預報</title>
<style>
* {
margin: 0;
padding: 0;
}
.head {
width: 200px;
height: 100px;
background-color: dimgrey;
color: red;
text-align: center;
line-height: 100px;
cursor: pointer;
font-size: 40px;
}
.ret {
width: 500px;
height: 250px;
background-color: pink;
display: none;
overflow: hidden;
}
.ret .tian {
width: 150px;
height: 100%;
float: left;
font-size: large;
color: #0e90d2;
margin-right: 10px;
position: relative;
}
.tian .date {
position: absolute;
top:-15px;
width: 100%;
height: 50px;
left:-10px;
}
.tian .img {
position: absolute;
top: 55px;
left: 15px;
}
.tian .tmp {
position: absolute;
top: 115px;
left: 20px;
}
.tian .cond {
position: absolute;
top: 146px;
left: 50px;
}
.tian .wind {
position: absolute;
top: 178px;
left: 42px;
}
</style>
</head>
<body>
<div class="head">查詢天氣
<div class="ret">
<div id="jintian" class="tian"></div>
<div id="mingtian" class="tian"></div>
<div id="houtian" class="tian"></div>
</div>
</div>
<script src="./jquery.js"></script>
<script>
$(function () {
var timer = null;
$('.head').mouseenter(function () {
$.ajax({
url:"https://free-api.heweather.com/s6/weather/forecast?location=北京&key=5aa044253c234fec8696a4cc2e3430fd",
type: "get",
success:function (data) {
console.log(data)
var jintian = data.HeWeather6[0].daily_forecast[0];
var mingtian = data.HeWeather6[0].daily_forecast[1];
var houtian = data.HeWeather6[0].daily_forecast[2];
console.log(jintian,mingtian,houtian);
$('#jintian').empty();
$('#jintian').append(`<span id="date">${jintian.date}</span>`);
$('#jintian').append(`<img src="./tupian/${jintian.cond_code_d}.png" alt="出不來了">`);
$('#jintian').append(`<span id="tmp">${jintian.tmp_min} ~ ${jintian.tmp_max} ℃</span>`);
$('#jintian').append(`<span id="cond">${jintian.cond_txt_d}</span>`);
$('#jintian').append(`<span id="wind">${jintian.wind_dir}</span>`);
$('#jintian #date').addClass('date');
$('#jintian img').addClass('img');
$('#jintian #tmp').addClass('tmp');
$('#jintian #cond').addClass('cond');
$('#jintian #wind').addClass('wind');
// 明天的
$('#mingtian').empty();
$('#mingtian').append(`<span id="date">${mingtian.date}</span>`);
$('#mingtian').append(`<img src="./tupian/${mingtian.cond_code_d}.png" alt="出不來了">`);
$('#mingtian').append(`<span id="tmp">${mingtian.tmp_min} ~ ${mingtian.tmp_max} ℃</span>`);
$('#mingtian').append(`<span id="cond">${mingtian.cond_txt_d}</span>`);
$('#mingtian').append(`<span id="wind">${mingtian.wind_dir}</span>`);
$('#mingtian #date').addClass('date');
$('#mingtian img').addClass('img');
$('#mingtian #tmp').addClass('tmp');
$('#mingtian #cond').addClass('cond');
$('#mingtian #wind').addClass('wind');
// 後天的
$('#houtian').empty();
$('#houtian').append(`<span id="date">${houtian.date}</span>`);
$('#houtian').append(`<img src="./tupian/${houtian.cond_code_d}.png" alt="出不來了">`);
$('#houtian').append(`<span id="tmp">${houtian.tmp_min} ~ ${houtian.tmp_max} ℃</span>`);
$('#houtian').append(`<span id="cond">${houtian.cond_txt_d}</span>`);
$('#houtian').append(`<span id="wind">${houtian.wind_dir}</span>`);
$('#houtian #date').addClass('date');
$('#houtian img').addClass('img');
$('#houtian #tmp').addClass('tmp');
$('#houtian #cond').addClass('cond');
$('#houtian #wind').addClass('wind');
},
error:function (err) {
alert(err);
}
});
clearTimeout(timer);
timer = setTimeout(function () {
$('.ret').css('display','block');
},100);
});
$('.head').mouseleave(function () {
$('.ret').css('display','none');
})
});
</script>
相關文章
- 1. 03.前端之JS
- 2. 前端學習03
- 3. 前端100道面試題——2017-03-03
- 4. 前端大神
- 5. 小白學前端03
- 6. 2017-10-03 前端日報
- 7. 雷神FFmpeg
- 8. Brackets - 前端神器
- 9. 前端神器-----CodePen
- 10. 前端神器Emmet
- 更多相關文章...
- • WSDL 端口 - WSDL 教程
- • XSLT - 在客戶端 - XSLT 教程
- • Docker容器實戰(一) - 封神Server端技術
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 03.前端之JS
- 2. 前端學習03
- 3. 前端100道面試題——2017-03-03
- 4. 前端大神
- 5. 小白學前端03
- 6. 2017-10-03 前端日報
- 7. 雷神FFmpeg
- 8. Brackets - 前端神器
- 9. 前端神器-----CodePen
- 10. 前端神器Emmet