Css 定位：
background-position: 20px 40px;
（1）相對定位：
如果僅僅對當前盒子設置相對定位，那么他與原來的盒子沒有任何變化
只有一個作用： 父相子絕，不適用相對定位來做壓蓋現象
不脫標、形影分離、老家留坑
（2）絕對定位：
設置絕對定位的盒子，脫離標準流
（3）固定定位
1）：相對定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2）絕對定位：
大圖居中現象：
絕對定位盒子居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
position: relative;
}
.box{
width: 500px;
height: 500px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -250px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
鼠標懸浮出來的購物車：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.cart{
width: 100px;
height: 50px;
background-color: #000;
position: relative;
margin: 100px auto;
}
.cart-info{
position: absolute;
width: 300px;
height: 100px;
background-color: red;
top: 50px;
left: -200px;
display: none;
}
.cart:hover .cart-info{
display: block;
background-color: green;
}
</style>
</head>
<body>
<div class="cart">
<div class="cart-info"></div>
</div>
</body>
</html>
Z-index:
這個是設置權重的類似，父慫子牛逼不管事
固定導航欄：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0px;
margin: 0;
}
body{
padding-top: 80px;
}
.head{
width: 100%;
height: 80px;
background-color: rgba(0,0,0,.5);
position: fixed;
top:0;
left:0;
z-index: 99;
}
.wrapper{
width: 100%;
height: 500px;
background-color: red;
}
.top{
width: 100px;
height: 100px;
background-color: purple;
position: fixed;
bottom: 20px;
right: 20px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body style="height: 2000px">
<div class="head">
導航欄
</div>
<div class="wrapper">
中心內容
</div>
<div class="top">
返回頂部
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.top').click(function () {
$('html,body').animate({
scrollTop:'50px'
},2000);
});
</script>
</body>
</html>
三種js的引入方式：
也可以寫成：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var a = '234';
console.log(a);
</script>
</body>
</html>
全局對象 window
也可以寫成：
<body>
<script type="text/javascript">
var a = '234';
console.log(window.a);
</script>
</body>
函數方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
function add(x,y) {
return x+y;
};
console.log(add(1,24))
</script>
</body>
</html>
也可以放到最上面：
<script type="text/javascript">
console.log(add(1,24))
function add(x,y) {
return x+y;
};
</script>
函數對象：
<script type="text/javascript">
var add = function (x,y) {
console.log(x+y)
}
add(5,6)
</script>
字符串拼接使用var：
數字轉換字符串：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var n1 = 123;
var str1 = String(n1);
console.log( typeof str1)
</script>
</body>
</html>
基本數據類型：
number：
var a = 123;//typeof 檢查當前變量是什么數據類型
console.log(typeof a)//特殊情況var a1 = 5/0;
console.log(typeof e1) //Infinity 無限大. number類型
string：
var str = '123'
console.log(typeof str)
Boolean：布爾
var b1 = false;
console.log(typeof b1)
Null：
var c1 = null;//空對象. object
console.log(c1)
Undefined：
字符串的拼接：
var firstName = '曉';
var lastName = '峰峰';
var name = '伊拉克';
var am = '美軍';// 字符串拼接
var str = "2003年3月20日,"+name+"戰爭爆發，以美軍為主的聯合部隊僅用20多天就擊潰了薩達姆的軍隊。這是繼十多年前的海灣戰爭后，"+am+"又一次取得的大規模壓倒性軍事勝利。
"var fullStr = str;
console.log(fullStr)
var fullName = firstName +" "+ lastName;
console.log(fullName)
備注：
// 不能對字符串進行+運算 只能拼接var a1 = '1';var a2 = '2';
console.log(a1-a2) //12
var b1 = 'one';var b2 = 'two';
// NaN. ==== not a number 是number類型
console.log(typeof(b1*b2))
數據類型的轉換：
隱式轉換：
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;// 隱式轉換
console.log(typeof n3);
強制類型轉換：
// 強制類型轉換String(),toString()
var n1 = 123
var str1 = String(n1);
console.log(typeof str1);
var num = 234;
console.log(num.toString())
將字符串類型轉換成數值類型：
var stringNum = '789.123wadjhkd';
var num2 = Number(stringNum);
console.log(num2)
// parseInt()可以解析一個字符串 并且返回一個整數
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));
任何數據類型都可以轉換為boolean類型：
都是false
var b1 = '123';
var b2 = 0;
var b3 = -123
var b4 = Infinity;
var b5 = NaN;
var b6; //undefined
var b7 = null;
// 非0既真
console.log(Boolean(b5))
console.log(Boolean(b7))
If 、if-else、if-else使用：
var ji = 20;
if(ji >= 20){
console.log('恭喜你，吃雞成功，大吉大利')
}
var ji = 20;
if(ji!=20){
console.log('恭喜你，吃雞成功，大吉大利')
}else{
console.log('很遺憾 下次繼續努力')
}
邏輯與&& 、邏輯||
//1.模擬 如果總分 >400 并且數學成績 >89分 被清華大學錄入
//邏輯與&& 兩個條件都成立的時候 才成立
var sum = 300;
var math = 100;
if(sum>400 && math>90){
console.log('清華大學錄入成功')
}else{
alert('高考失利')
}
//1.模擬 如果總分 >400 并且數學成績 >89分 被清華大學錄入
//邏輯與&& 兩個條件都成立的時候 才成立
var sum = 300;
var english = 100;
if(sum>500 || english>85){
alert('被復旦大學錄入')
}else{
alert('高考又失利了')
}
Switch：遇到匹配的找到break馬上停止
var gameScore = 'better';
switch(gameScore){
//case表示一個條件 滿足這個條件就會走進來 遇到break跳出。break終止循環。如果某個條件中不寫 break，那么直到該程序遇到下一個break停止
case 'good':
console.log('玩的很好')
//break表示退出
break;
case 'better':
console.log('玩的老牛逼了')
break;
case 'best':
console.log('恭喜你 吃雞成功')
break;
default:
console.log('很遺憾')
}
while：循環：
var i = 1; //初始化循環變量
while(i<=9){ //判斷循環條件 console.log(i);
i = i+1; //更新循環條件
}
var i = 1; //初始化循環變量
while(i<=100){ //判斷循環條件
if (i%2==0)
console.log(i);
i = i+1; //更新循環條件
}
For循環：
for(var i = 1;i<=10;i++){
console.log(i)
}
for(var i = 1;i<=100;i++){
if(i%2==0){
//是偶數 console.log(i)
}
}
1--100整數和
var sum = 0;for(var j = 1;j<=100;j++){
sum = sum+j
}
console.log(sum)
雙重for循環：
<script>
for(var i=1;i<=3;i++){
for(var j=0;j<6;j++){
document.write('*')
}
document.write('<br>')
}
</script>
數組的賦值和添加顏色
var colors = ['red','color','yellow'];
var colors2 = new Array();
var arr = [];
//通過下標進行一一賦值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'
console.log(arr)
數組的合并：
var north = ['北京','山東','天津'];
var south = ['東莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity)
Join（）將數組中的元素用指定字符串連接
var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);
將數組轉換成字符串 toString()
var score = [98,78,76,100,0];
//toString() 直接轉換為字符串 每個元素之間使用逗號隔開
var str = score.toString();
console.log(str);//98,78,76,100,0
slice(start,end); 返回數組的一段，左閉右開
var arr = ['張三','李四','王文','趙六'];
var newArr = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]
pop 移除數組的最后一個元素
var arr = ['張三','李四','王文','趙六'];
var newArr = arr.pop();
console.log(newArr);//["張三", "李四"，"王文"]
push() 向數組最后添加一個元素
//var arr = ['張三','李四','王文','趙六'];
//var newArr = arr.push('李曉峰');
//console.log(newArr);//["張三", "李四"，"王文"，"趙六"，"李曉峰"]
reverse() 翻轉數組
var names = ['alex','xiaoma','tanhuang','angle'];
//4.反轉數組
names.reverse();
console.log(names);
sort對數組排序：
var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names);// ["alex", "angle", "tanhuang", "xiaoma"]
chartAt() 返回指定索引的位置的字符
var str = 'alex';
var charset = str.charAt(2);
console.log(charset);//e
concat 返回字符串值，表示兩個或多個字符串的拼接
var str1 = 'al';
var str2 = 'ex';
console.log(str1.concat(str2,str1));//alexal
replace(a,b) 將字符串a替換成字符串b
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755
indexof() 查找字符的下標，如果找到返回字符串的下標，找不到則返回-1 。跟seach()方法用法一樣
var str = 'alexss33';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1
split('a',1) 以字符串a分割字符串，并返回新的數組。如果第二個參數沒寫，表示返回整個數組，如果定義了個數，則返回數組的最大長度
var str = '我的天呢,a是嘛,你在說什么呢?a哈哈哈';
console.log(str.split('a'));//["我的天呢,", "是嘛,你在說什么呢?", "哈哈哈"]
substr(statr,end) 左閉右開：
var str = '我的天呢,a是嘛,你在說什么呢?a哈哈哈';
console.log(str.substr(0,6));//我的天呢,a
toLowerCase()轉小寫：
var str = 'XIAOMAGE';
console.log(str.toLowerCase());//xiaomage
toUpperCase()轉大寫
var str = 'xiaomage';
console.log(str.toUpperCase());
函數：
function sum(a,b) {
console.log(a+b)
}
sum(3,4)
sum("Hello","World");
偽數組 arguments
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b,c) {
console.log(arguments);
console.log(fn.length); //獲取形參的個數
console.log(arguments.length); //獲取實參的個數
console.log("----------------");
}
清空數組的方式：
var array = [1,2,3,4,5,6];
array.splice(0); //方式1：刪除數組中所有項目
array.length = 0; //方式1：length屬性可以賦值，在其它語言中length是只讀
array = []; //方式3：推薦
JavaScript基礎分為三個部分：
ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
DOM：文檔對象模型，操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。
BOM：瀏覽器對象模型，操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。
代碼書寫步驟如下：（重要）
（1）獲取事件源：document.getElementById(“box”); //類似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）綁定事件： 事件源box.事件onclick = function(){ 事件驅動程序 };
（3）書寫事件驅動程序：關于DOM的操作
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、獲取事件源
var div = document.getElementById("box1");
// 2、綁定事件
div.onclick = function () {
// 3、書寫事件驅動程序
alert("我是彈出的內容");
}</script>
</body>
方式一：直接綁定匿名函數
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//綁定事件的第一種方式
div1.onclick = function () {
alert("我是彈出的內容");
}</script>
方式二：先單獨定義函數，再綁定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//綁定事件的第二種方式
div1.onclick = fn; //注意，這里是fn，不是fn()。fn()指的是返回值。
//單獨定義函數
function fn() {
alert("我是彈出的內容");
}</script>
方式三：行內綁定
<!--行內綁定--><div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是彈出的內容");
}
</script>
我們在上面是拿alert舉例，不僅如此，我們還可以操作標簽的屬性和樣式。舉例如下：
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style></head>
<body>
<div id="box" ></div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
//點擊鼠標時，原本粉色的div變大了，背景變紅了 oDiv.onclick = function () {
oDiv.style.width = "200px"; //屬性值要寫引號 oDiv.style.height = "200px";
oDiv.style.backgroundColor = "red"; //屬性名是backgroundColor，不是background-Color }</script>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
