溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

3)js的基礎(chǔ)語法使用以及css定位

發(fā)布時(shí)間：2020-08-07 10:37:05 來源：網(wǎng)絡(luò) 閱讀：7442 作者：tty之星 欄目：web開發(fā)

Css 定位：

background-position: 20px 40px;

 

（1）相對(duì)定位：

      如果僅僅對(duì)當(dāng)前盒子設(shè)置相對(duì)定位，那么他與原來的盒子沒有任何變化

      只有一個(gè)作用：  父相子絕，不適用相對(duì)定位來做壓蓋現(xiàn)象

   不脫標(biāo)、形影分離、老家留坑

（2）絕對(duì)定位：

設(shè)置絕對(duì)定位的盒子，脫離標(biāo)準(zhǔn)流

（3）固定定位

1）：相對(duì)定位：

<!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>

 3)js的基礎(chǔ)語法使用以及css定位

2）絕對(duì)定位：

 3)js的基礎(chǔ)語法使用以及css定位

 

大圖居中現(xiàn)象：

 

 3)js的基礎(chǔ)語法使用以及css定位

絕對(duì)定位盒子居中：

<!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>

 3)js的基礎(chǔ)語法使用以及css定位

鼠標(biāo)懸浮出來的購物車：

<!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>

3)js的基礎(chǔ)語法使用以及css定位 

 

Z-index:

這個(gè)是設(shè)置權(quán)重的類似，父慫子牛逼不管事

 

固定導(dǎo)航欄：

<!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">
導(dǎo)航欄
</div>
<div class="wrapper">
中心內(nèi)容
</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>

 3)js的基礎(chǔ)語法使用以及css定位

三種js的引入方式：

3)js的基礎(chǔ)語法使用以及css定位

3)js的基礎(chǔ)語法使用以及css定位

3)js的基礎(chǔ)語法使用以及css定位

3)js的基礎(chǔ)語法使用以及css定位

 

 

 

也可以寫成：

<!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>

 

3)js的基礎(chǔ)語法使用以及css定位 

全局對(duì)象  window

 

也可以寫成：

<body>
<script type="text/javascript">
    var a = '234';
    console.log(window.a);
</script>
</body>

 

函數(shù)方法：

<!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>

3)js的基礎(chǔ)語法使用以及css定位 

也可以放到最上面：

<script type="text/javascript">
console.log(add(1,24))
function add(x,y) {
    return x+y;
};

</script>

 

函數(shù)對(duì)象：

<script type="text/javascript">
    var add = function (x,y) {
        console.log(x+y)
    }
    add(5,6)
</script>

 

 3)js的基礎(chǔ)語法使用以及css定位

字符串拼接使用var：

 3)js的基礎(chǔ)語法使用以及css定位

3)js的基礎(chǔ)語法使用以及css定位


 3)js的基礎(chǔ)語法使用以及css定位

3)js的基礎(chǔ)語法使用以及css定位

數(shù)字轉(zhuǎn)換字符串：

<!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>

3)js的基礎(chǔ)語法使用以及css定位 

基本數(shù)據(jù)類型：

 

number：

var a = 123;//typeof 檢查當(dāng)前變量是什么數(shù)據(jù)類型

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;//空對(duì)象. object

console.log(c1)

 

Undefined：

 

 

字符串的拼接：

var  firstName  = '曉';

var lastName = '峰峰';

var name = '伊拉克';

var am = '美軍';// 字符串拼接

var str = "2003年3月20日,"+name+"戰(zhàn)爭爆發(fā)，以美軍為主的聯(lián)合部隊(duì)僅用20多天就擊潰了薩達(dá)姆的軍隊(duì)。這是繼十多年前的海灣戰(zhàn)爭后，"+am+"又一次取得的大規(guī)模壓倒性軍事勝利。

"var fullStr = str;

console.log(fullStr)

var fullName = firstName +" "+ lastName;

console.log(fullName)

 

備注：

// 不能對(duì)字符串進(jìn)行+運(yùn)算 只能拼接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))

 

 

數(shù)據(jù)類型的轉(zhuǎn)換：

隱式轉(zhuǎn)換：

 

var n1 = 123;

var n2 = '123';

var n3 = n1+n2;// 隱式轉(zhuǎn)換

console.log(typeof n3);

 

 

強(qiáng)制類型轉(zhuǎn)換：

// 強(qiáng)制類型轉(zhuǎn)換String(),toString()
var n1 = 123
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())

 

 

將字符串類型轉(zhuǎn)換成數(shù)值類型：

var  stringNum = '789.123wadjhkd';
var num2 =  Number(stringNum);
console.log(num2)

// parseInt()可以解析一個(gè)字符串 并且返回一個(gè)整數(shù)
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));

 

 

任何數(shù)據(jù)類型都可以轉(zhuǎn)換為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('很遺憾 下次繼續(xù)努力')

}

 

 

邏輯與&& 、邏輯||

//1.模擬  如果總分 >400 并且數(shù)學(xué)成績 >89分 被清華大學(xué)錄入
//邏輯與&& 兩個(gè)條件都成立的時(shí)候 才成立
var sum = 300;
var math = 100;
if(sum>400 && math>90){
    console.log('清華大學(xué)錄入成功')
}else{
    alert('高考失利')
}

 

 

//1.模擬  如果總分 >400 并且數(shù)學(xué)成績 >89分 被清華大學(xué)錄入
//邏輯與&& 兩個(gè)條件都成立的時(shí)候 才成立
var sum = 300;
var english = 100;
if(sum>500 || english>85){
    alert('被復(fù)旦大學(xué)錄入')
}else{
    alert('高考又失利了')
}

 

 

Switch：遇到匹配的找到break馬上停止

var gameScore = 'better';

switch(gameScore){

//case表示一個(gè)條件 滿足這個(gè)條件就會(huì)走進(jìn)來 遇到break跳出。break終止循環(huán)。如果某個(gè)條件中不寫 break，那么直到該程序遇到下一個(gè)break停止
    case 'good':
    console.log('玩的很好')
    //break表示退出
    break;
    case  'better':
    console.log('玩的老牛逼了')
    break;
    case 'best':
    console.log('恭喜你 吃雞成功')
    break;

    default:
    console.log('很遺憾')

}

 

 

while：循環(huán)：

var i = 1; //初始化循環(huán)變量

while(i<=9){ //判斷循環(huán)條件    console.log(i);

    i = i+1; //更新循環(huán)條件

}

var i = 1; //初始化循環(huán)變量

while(i<=100){ //判斷循環(huán)條件
    if (i%2==0)
    console.log(i);
    i = i+1; //更新循環(huán)條件
}

 

 

 

For循環(huán)：

for(var i = 1;i<=10;i++){

     console.log(i)

 }

 

 

for(var i = 1;i<=100;i++){

    if(i%2==0){

        //是偶數(shù)        console.log(i)

    }

}

 

1--100整數(shù)和

var sum = 0;for(var j = 1;j<=100;j++){

    sum = sum+j

}

console.log(sum)

 

 

雙重for循環(huán)：

<script>
for(var i=1;i<=3;i++){

 　　for(var j=0;j<6;j++){
        document.write('*')
    }

   document.write('<br>')
 }
</script>

 

 

數(shù)組的賦值和添加顏色

var colors = ['red','color','yellow'];
var colors2 = new Array();
var arr = [];
//通過下標(biāo)進(jìn)行一一賦值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'
    console.log(arr)

 3)js的基礎(chǔ)語法使用以及css定位

數(shù)組的合并：

 

var north = ['北京','山東','天津'];
var south = ['東莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity)

3)js的基礎(chǔ)語法使用以及css定位 

 

Join（）將數(shù)組中的元素用指定字符串連接

var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);

3)js的基礎(chǔ)語法使用以及css定位 

 

 將數(shù)組轉(zhuǎn)換成字符串 toString()

var score = [98,78,76,100,0];
//toString() 直接轉(zhuǎn)換為字符串  每個(gè)元素之間使用逗號(hào)隔開

var str = score.toString();
console.log(str);//98,78,76,100,0

 

 3)js的基礎(chǔ)語法使用以及css定位

slice(start,end); 返回?cái)?shù)組的一段，左閉右開

 

var arr = ['張三','李四','王文','趙六'];
var newArr  = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]

 3)js的基礎(chǔ)語法使用以及css定位

 

pop 移除數(shù)組的最后一個(gè)元素

var arr = ['張三','李四','王文','趙六'];
var newArr  = arr.pop();
console.log(newArr);//["張三", "李四"，"王文"]

 

 3)js的基礎(chǔ)語法使用以及css定位

 push() 向數(shù)組最后添加一個(gè)元素

//var arr = ['張三','李四','王文','趙六'];
//var newArr  = arr.push('李曉峰');
//console.log(newArr);//["張三", "李四"，"王文"，"趙六"，"李曉峰"]

 

reverse() 翻轉(zhuǎn)數(shù)組

var names = ['alex','xiaoma','tanhuang','angle'];
//4.反轉(zhuǎn)數(shù)組
names.reverse();
console.log(names);

3)js的基礎(chǔ)語法使用以及css定位 

sort對(duì)數(shù)組排序：

var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names);// ["alex", "angle", "tanhuang", "xiaoma"]

 3)js的基礎(chǔ)語法使用以及css定位

chartAt() 返回指定索引的位置的字符

var str = 'alex';
var charset = str.charAt(2);
console.log(charset);//e

 

concat 返回字符串值，表示兩個(gè)或多個(gè)字符串的拼接

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() 查找字符的下標(biāo)，如果找到返回字符串的下標(biāo)，找不到則返回-1 。跟seach()方法用法一樣

var str = 'alexss33';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1

 

 3)js的基礎(chǔ)語法使用以及css定位

split('a',1) 以字符串a分割字符串，并返回新的數(shù)組。如果第二個(gè)參數(shù)沒寫，表示返回整個(gè)數(shù)組，如果定義了個(gè)數(shù)，則返回?cái)?shù)組的最大長度

 

var  str =  '我的天呢,a是嘛,你在說什么呢?a哈哈哈';
console.log(str.split('a'));//["我的天呢,", "是嘛,你在說什么呢?", "哈哈哈"]

3)js的基礎(chǔ)語法使用以及css定位 

 

 substr(statr,end) 左閉右開：

var  str =  '我的天呢,a是嘛,你在說什么呢?a哈哈哈';
console.log(str.substr(0,6));//我的天呢,a

3)js的基礎(chǔ)語法使用以及css定位 

toLowerCase()轉(zhuǎn)小寫：

var str = 'XIAOMAGE';
console.log(str.toLowerCase());//xiaomage

toUpperCase()轉(zhuǎn)大寫

var str = 'xiaomage';

console.log(str.toUpperCase());

 

 

函數(shù)：

function sum(a,b) {
    console.log(a+b)
}
sum(3,4)
sum("Hello","World");

3)js的基礎(chǔ)語法使用以及css定位 

 

偽數(shù)組 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);         //獲取形參的個(gè)數(shù)
    console.log(arguments.length);  //獲取實(shí)參的個(gè)數(shù)

    console.log("----------------");
}


3)js的基礎(chǔ)語法使用以及css定位 

清空數(shù)組的方式：

var array = [1,2,3,4,5,6];

 array.splice(0);      //方式1：刪除數(shù)組中所有項(xiàng)目
 array.length = 0;     //方式1：length屬性可以賦值，在其它語言中l(wèi)ength是只讀
 array = [];           //方式3：推薦

3)js的基礎(chǔ)語法使用以及css定位 

 

 

一、JavaScript的組成

JavaScript基礎(chǔ)分為三個(gè)部分：

ECMAScript：JavaScript的語法標(biāo)準(zhǔn)。包括變量、表達(dá)式、運(yùn)算符、函數(shù)、if語句、for語句等。

DOM：文檔對(duì)象模型，操作網(wǎng)頁上的元素的API。比如讓盒子移動(dòng)、變色、輪播圖等。

BOM：瀏覽器對(duì)象模型，操作瀏覽器部分功能的API。比如讓瀏覽器自動(dòng)滾動(dòng)。

 

 

代碼書寫步驟如下：（重要）

（1）獲取事件源：document.getElementById(“box”); //類似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];

（2）綁定事件： 事件源box.事件onclick = function(){ 事件驅(qū)動(dòng)程序 };

（3）書寫事件驅(qū)動(dòng)程序：關(guān)于DOM的操作

<body>

<div id="box1"></div>

 

<script type="text/javascript">

    // 1、獲取事件源

    var div = document.getElementById("box1");

    // 2、綁定事件

    div.onclick = function () {

        // 3、書寫事件驅(qū)動(dòng)程序

        alert("我是彈出的內(nèi)容");

    }</script>

 

</body>

 

 

綁定事件的方式

 

方式一：直接綁定匿名函數(shù)

<div id="box1" ></div>

 

<script type="text/javascript">

    var div1 = document.getElementById("box1");

    //綁定事件的第一種方式

    div1.onclick = function () {

        alert("我是彈出的內(nèi)容");

    }</script>

 

方式二：先單獨(dú)定義函數(shù)，再綁定

 <div id="box1" ></div>

 

<script type="text/javascript">

    var div1 = document.getElementById("box1");

    //綁定事件的第二種方式

    div1.onclick = fn;   //注意，這里是fn，不是fn()。fn()指的是返回值。

    //單獨(dú)定義函數(shù)

    function fn() {

        alert("我是彈出的內(nèi)容");

    }</script>

 

方式三：行內(nèi)綁定

<!--行內(nèi)綁定--><div id="box1" onclick="fn()"></div>

<script type="text/javascript">

 

    function fn() {

        alert("我是彈出的內(nèi)容");

    }

</script>

 

 

3、事件驅(qū)動(dòng)程序

我們?cè)谏厦媸悄?/span>alert舉例，不僅如此，我們還可以操作標(biāo)簽的屬性和樣式。舉例如下：

  <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");

    //點(diǎn)擊鼠標(biāo)時(shí)，原本粉色的div變大了，背景變紅了    oDiv.onclick = function () {

        oDiv.style.width = "200px";   //屬性值要寫引號(hào)        oDiv.style.height = "200px";

        oDiv.style.backgroundColor = "red";   //屬性名是backgroundColor，不是background-Color    }</script>

 


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手