午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

首頁(yè)

原生代碼之實(shí)現(xiàn)輪播圖(左右翻頁(yè),定時(shí)翻頁(yè),指定翻頁(yè))

前端達(dá)人

首先在寫(xiě)代碼之前我們需要理清如何穿插圖片呢?



可以讓所有圖片都float:left,用一個(gè)大盒子裝進(jìn)所有圖片,在用一個(gè)小盒子顯示圖片,溢出圖片就hidden,之后以每張圖片的寬度來(lái)scrollLeft.

可以給每張圖片一個(gè)name/id,用循環(huán)遍歷所有圖片

可以用float:left,但是除了我要顯示的圖片外,其他圖片都hidden,之后每當(dāng)我需要某張圖片時(shí),我就把它制定到某位置



在這里,我將用第二種方法,因?yàn)樗苤庇^明了,我要哪張圖片我就調(diào)哪張圖片。

HTML部分:在div里面我裝了一張圖片,name:0, 這是為了在剛打開(kāi)的時(shí)候,我們的頁(yè)面是有東西的而不是一片空白。其他部分都好理解,不理解的可在下方評(píng)論。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>輪播圖</title>
        <link rel="stylesheet" href="輪播圖.css" />
        <script src="輪播圖.js">
        </script>
    </head>

    <body>
        <header>
            <div id="oImg">
                <!-- 輪流播放圖片 -->
                <img id="insert" src="img/輪1.jpg" name="0"/>
            </div>
            <!-- 左右切換圖片 -->
            <p id="left" οnclick="goBack()"></p>
            <p id="right" οnclick="goForward()"></p>

            <ul id="nav">
                <!-- 指定某張圖片 -->
                <li id="1" οnclick="move(this)">1</li>
                <li id="2" οnclick="move(this)">2</li>
                <li id="3" οnclick="move(this)">3</li>
                <li id="4" οnclick="move(this)">4</li>
                <li id="5" οnclick="move(this)">5</li>
            </ul>
        </header>

    </body>

</html>

CSS:
* {
    margin: 0 auto;
    padding: 0 auto;
}

header {
    width: 100%;
    height: 680px;
    position: relative;

}

img {
    width: 100%;
    height: 680px; 
}   

#nav { 
    position: absolute;
    bottom: 5px;
    left: 30%;
}

#nav li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #ccc;
    font-size: 24px;
    border-radius: 9px;
    color: darkslategrey;
    font-family: 'Times New Roman', Times, serif;
    margin: 0 25px;
    float: left;
    cursor: pointer;
    list-style: none;
}

#nav li:hover {
    background: peru;
}

#left {
    width: 25px;
    height: 24px;
    left: 0;
    top: 50%;
    cursor: pointer;
    position: absolute;
    background: url(img/fx1.png);
}

#right {
    width: 25px;
    height: 24px;
    right: 0;
    top: 50%;
    cursor: pointer;
    position: absolute;
    background: url(img/fx2.png);
}
之后我們來(lái)看重中之重JS部分
JavaScript:
// 五張圖片的url
var oImg1 = "img/輪1.jpg";
var oImg2 = "img/輪2.jpg";
var oImg3 = "img/輪3.jpg";
var oImg4 = "img/輪4.jpg";
var oImg5 = "img/輪5.jpg";
// 把5張圖片存入一個(gè)數(shù)組
var arr = [oImg1, oImg2, oImg3, oImg4, oImg5];

window.onload = function() {
    //剛加載時(shí)第一張圖片1號(hào)背景顏色
    document.getElementById("1").style.background = "peru";  
    run()

}

//輪播
function run() { 
    timer = setInterval(function() {
        //隨機(jī)點(diǎn)數(shù)字時(shí)能接著變化 
        var pic = document.getElementById("insert").name;
        var shade = document.getElementById("insert");  

        //如果為最后一張圖片則重新循環(huán)
        if (pic == 4) {
            pic = -1;
        }

        //點(diǎn)一個(gè)數(shù)字該數(shù)字背景顏色變化其余的不變
        var aLi = document.getElementsByTagName("li");
        for (var j = 0; j < aLi.length; j++) {
            aLi[j].style.backgroundColor = "#CCCCCC";
        } 

        var i = parseInt(pic);   

        document.getElementById("insert").src = arr[i + 1]; 

        document.getElementById("insert").name = i + 1; 

        //數(shù)字隨圖片變化
        switch (i) {
            case 0:
                var temp = '2';
                break;
            case 1:
                var temp = '3';
                break;
            case 2:
                var temp = '4';
                break;
            case 3:
                var temp = '5';
                break;
            case -1:
                var temp = '1';
                break;
        }
        document.getElementById(temp).style.background = "peru"   

    }, 5000)
}

//右箭頭 
function goForward() {
    var temp = document.getElementById("insert").name;
    var oBox = document.getElementById("insert"); 
    var aLi = document.getElementsByTagName("li");
    // 數(shù)字跟著圖片一起變
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    switch (temp) {
        case "0":
            var n = '2';
            break;
        case "1":
            var n = '3';
            break;
        case "2":
            var n = '4';
            break;
        case "3":
            var n = '5';
            break;
        case "4":
            var n = '1';
            break;
    }

    document.getElementById(n).style.background = "peru"
    // 向右移動(dòng)圖片
    for (var j = 0; j < arr.length; j++) {
        if (j < 4) {
            if (temp == j) {
                oBox.src = arr[j + 1]; 
            }
        } else {
            if (temp == 4) {
                oBox.src = arr[0]; 
            }
        }
    } 
    // 輪到最后一張圖片時(shí)返回第一張
    if (temp < 4) {
        oBox.name = parseInt(temp) + 1;
    } else {
        oBox.name = 0;
    }
}

//左箭頭
function goBack() {
    var temp = document.getElementById("insert").name;
    var oBox = document.getElementById("insert")
    var aLi = document.getElementsByTagName("li");
    // 圖片移動(dòng)時(shí)數(shù)字也跟著變
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    switch (temp) {
        case "0":
            var n = '5';
            break;
        case "1":
            var n = '1';
            break;
        case "2":
            var n = '2';
            break;
        case "3":
            var n = '3';
            break;
        case "4":
            var n = '4';
            break;
    }

    document.getElementById(n).style.background = "peru"
    // 向左移動(dòng)圖片 

    for (var j = 0; j < arr.length; j++) {
        if (j > 0) {
            if (temp == j) {
                oBox.src = arr[j - 1];
            }
        } else {
            if (temp == 0) {
                oBox.src = arr[4];
            }
        }
    }
    // 輪到第一張圖片時(shí)返回最后一張
    if (temp > 0) {
        oBox.name = parseInt(temp) - 1;
    } else {
        oBox.name = 4;
    }
}

//指定圖片
function move(num) { 
    var oBox = document.getElementById("insert");
    var temp = document.getElementById("insert").name;
    var aLi = document.getElementsByTagName("li");
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    document.getElementById(num.innerHTML).style.background = "peru"

    switch (num.innerHTML) {
        case "1":
            oBox.src = arr[0];
            oBox.name = 0;
            break;
        case "2":
            oBox.src = arr[1];
            oBox.name = 1;
            break;
        case "3":
            oBox.src = arr[2];
            oBox.name = 2;
            break;
        case "4":
            oBox.src = arr[3];
            oBox.name = 3;
            break;
        case "5":
            oBox.src = arr[4];
            oBox.name = 4;
            break;
    }
}
JavaScript部分我寫(xiě)的很詳細(xì),仔細(xì)看的話是可以看懂的,主要分3個(gè)重要部分:

用src來(lái)調(diào)用每張圖片并給每張圖片一個(gè)name,這樣方便后面的重復(fù)使用
為下方的數(shù)字按鈕匹配圖片,點(diǎn)擊1跳到第1張圖片,點(diǎn)擊2跳到第2張圖片…因?yàn)槲野阉械膱D片都存在了一個(gè)數(shù)組里,所以在匹配的時(shí)候要注意數(shù)組0位置才是數(shù)字1指定的圖片
可以來(lái)回翻頁(yè),當(dāng)?shù)竭_(dá)最后一張圖片時(shí),我再點(diǎn)擊下一張圖片又能返回到第一張圖片了,亦或者當(dāng)我點(diǎn)擊到第一張圖片時(shí),再上一張圖片又回到第五張圖片了
效果如下:

點(diǎn)擊查看原圖

點(diǎn)擊查看原圖

大家有問(wèn)題可以在下方評(píng)論哦,看到了會(huì)及時(shí)回復(fù)噠!


————————————————
版權(quán)聲明:本文為CSDN博主「weixin_43964414」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/weixin_43964414/article/details/104844041

CSS學(xué)習(xí)筆記(一)——CSS基礎(chǔ)&選擇器合集

前端達(dá)人

CSS介紹

整理完了HTML的筆記,接下來(lái)就是CSS了。我們可以使用HTML構(gòu)建穩(wěn)定的結(jié)構(gòu)基礎(chǔ),而頁(yè)面的風(fēng)格樣式控制則交給CSS來(lái)完成。網(wǎng)頁(yè)的樣式包括各種元素的顏色、大小、線形、間距等等,這對(duì)于設(shè)計(jì)或維護(hù)一個(gè)數(shù)據(jù)較多的網(wǎng)站來(lái)說(shuō),工作量是巨大的。好在可以使用CSS來(lái)控制這些樣式,這將大大提高網(wǎng)頁(yè)設(shè)計(jì)和維護(hù)的效率,并且使網(wǎng)頁(yè)的整體風(fēng)格很容易做到統(tǒng)一。



CSS概述

CSS是英文Cascading Style Sheet的縮寫(xiě),中文譯為層疊樣式表,也有人翻譯為級(jí)聯(lián)樣式表,簡(jiǎn)稱樣式表。它是一種用來(lái)定義網(wǎng)頁(yè)外觀樣式的技術(shù),在網(wǎng)頁(yè)中引入CSS規(guī)則,可以快捷地對(duì)頁(yè)面進(jìn)行布局設(shè)計(jì),可以的控制HTML標(biāo)記對(duì)象的寬度、高度、位置、字體、背景等外觀效果。

CSS是一種標(biāo)識(shí)性語(yǔ)言,不僅可以有效的控制網(wǎng)頁(yè)的樣式,更重要的是實(shí)現(xiàn)了網(wǎng)頁(yè)內(nèi)容與樣式的分離,并允許將CSS規(guī)則單獨(dú)存放于一個(gè)文檔中, CSS文件的擴(kuò)展名為“css”。



CSS3

CSS3標(biāo)準(zhǔn)早在1995年就開(kāi)始制訂, 2001年提上W3C研究議程,但是,10年來(lái)CSS3可以說(shuō)是基本上沒(méi)有什么很大的變化,一直到2011年6月才發(fā)布了全新版本的CSS3,目前,許多瀏覽器都廣泛支持CSS3。

CSS3是CSS技術(shù)的一個(gè)升級(jí)版本,CSS3語(yǔ)言將CSS劃分為更小的模塊,在朝著模塊化的方向發(fā)展。以前的版本是一個(gè)比較龐大而且比較復(fù)雜模塊,所以,把它分解成為一個(gè)個(gè)小的簡(jiǎn)單的模塊,同時(shí)也加入了更多新的模塊。在CSS3中有字體、顏色、布局、背景、定位、邊框、多列、動(dòng)畫(huà)、用戶界面等等多個(gè)模塊。



CSS的基本用法

CSS的使用規(guī)則由兩部分組成:選擇器和一條或多條聲明。其基本基本語(yǔ)法如下:

 選擇器{ 屬性1:; 屬性2:; …
            屬性n:; }

CSS的使用規(guī)則由兩部分組成:選擇器和一條或多條聲明。其基本基本語(yǔ)法如下:

 選擇器{ 屬性1:; 屬性2:; 

屬性n:; }

20200313203814532.png

CSS屬性

CSS的屬性按照相關(guān)功能進(jìn)行了分組,包含了字體、文本、背景、列表、動(dòng)畫(huà)等多個(gè)分組,這些屬性的具體使用方法和示例將會(huì)在后續(xù)中提到。



在HTML文檔中使用CSS的方法

根據(jù)CSS在HTML文檔中的使用方法和作用范圍不同,CSS樣式表的使用方法分為三大類:行內(nèi)樣式、內(nèi)部樣式表和外部樣式表,而外部樣式表又可分為鏈入外部樣式表和導(dǎo)入外部樣式表。本節(jié)我們從四個(gè)分類來(lái)認(rèn)識(shí)在HTML中使用CSS的方法。



行內(nèi)樣式

內(nèi)部樣式表

外部樣式表

鏈入外部樣式表

導(dǎo)入外部樣式表

行內(nèi)樣式

行內(nèi)樣式(inline style),也叫內(nèi)聯(lián)樣式,它是CSS四種使用方法中最為直接的一種,它的實(shí)現(xiàn)借用HTML元素的全局屬性style,把CSS代碼直接寫(xiě)入其中即可。

嚴(yán)格意義上行內(nèi)樣式是一種不嚴(yán)謹(jǐn)?shù)氖褂梅绞剑恍枰x擇器,這種方式下CSS代碼和HTML代碼混合在一起,因此不推薦使用行內(nèi)樣式。行內(nèi)樣式的基本語(yǔ)法如下:

  <標(biāo)記 style="屬性:值; 屬性:值; …">


內(nèi)部樣式表

當(dāng)單個(gè)文檔需要特殊的樣式時(shí),應(yīng)該使用內(nèi)部樣式表。內(nèi)部樣式表是將樣式放在頁(yè)面的head區(qū)里,這樣定義的樣式就應(yīng)用到本頁(yè)面中了,內(nèi)部樣式表使用style標(biāo)記進(jìn)行聲明,是較為常用的一種使用方法。其基本語(yǔ)法如下:

<head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            選擇器1{屬性:值;…}
            選擇器2{屬性:值;…}
            ……
            選擇器n{屬性:值;…}
        </style>
    </head>


style標(biāo)記定義HTML文檔的樣式信息,規(guī)定的是 HTML 元素如何在瀏覽器中呈現(xiàn),其中type用來(lái)指定元素中的內(nèi)容類型。

鏈入外部樣式表
當(dāng)為了保證站點(diǎn)的風(fēng)格統(tǒng)一,或當(dāng)定義樣式內(nèi)容較多,且需要多個(gè)頁(yè)面共享樣式時(shí),可使用外部樣式表。鏈入外部樣式表是把樣式表保存為一個(gè)外部樣式表文件,然后在頁(yè)面中用link標(biāo)記鏈接到這個(gè)樣式表文件,link標(biāo)記放在頁(yè)面的head區(qū)內(nèi)。其基本語(yǔ)法為:

<head>
        <meta charset="utf-8" />
        <title></title>
        <link href="樣式表路徑" rel="stylesheet" type="text/css" />
    </head>
其中:
href:指出樣式表存放的路徑。
rel:用來(lái)定義鏈接的文件與HTML之間的關(guān)系, rel="stylesheet"是指在頁(yè)面中使用這個(gè)外部的樣式表。
type屬性用于指定文件類型,“text/css”指文件的類型是樣式表文本。

導(dǎo)入外部樣式表
導(dǎo)入外部樣式表是指在HTML文件頭部的style元素里導(dǎo)入一個(gè)外部樣式表,導(dǎo)入外部樣式表采用import方式。導(dǎo)入外部樣式表和鏈入樣式表的方法很相似,但導(dǎo)入外部樣式表的樣式實(shí)質(zhì)上相當(dāng)于存在網(wǎng)頁(yè)內(nèi)部。其基本語(yǔ)法為:
————————————————
版權(quán)聲明:本文為CSDN博主「狗狗狗狗狗樂(lè)啊」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/weixin_44122062/article/details/104848745

<head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            @import url("樣式表路徑");
        </style>
    </head>
其中:
href:指出樣式表存放的路徑。
rel:用來(lái)定義鏈接的文件與HTML之間的關(guān)系, rel="stylesheet"是指在頁(yè)面中使用這個(gè)外部的樣式表。
type屬性用于指定文件類型,“text/css”指文件的類型是樣式表文本。

導(dǎo)入外部樣式表
導(dǎo)入外部樣式表是指在HTML文件頭部的style元素里導(dǎo)入一個(gè)外部樣式表,導(dǎo)入外部樣式表采用import方式。導(dǎo)入外部樣式表和鏈入樣式表的方法很相似,但導(dǎo)入外部樣式表的樣式實(shí)質(zhì)上相當(dāng)于存在網(wǎng)頁(yè)內(nèi)部。其基本語(yǔ)法為:

  <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            @import url("樣式表路徑");
        </style>
    </head>

結(jié)語(yǔ)

記錄倉(cāng)促,遺漏之處日后補(bǔ)充,如有錯(cuò)誤或不足之處,還望指正

————————————————
版權(quán)聲明:本文為CSDN博主「狗狗狗狗狗樂(lè)啊」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/weixin_44122062/article/details/104848745


Vue移動(dòng)端項(xiàng)目?jī)?yōu)化過(guò)程

前端達(dá)人

文章目錄

前言

一、白屏?xí)r間過(guò)長(zhǎng)分析

二、針對(duì)性優(yōu)化

針對(duì)animate.css

針對(duì)mint-ui的優(yōu)化

針對(duì)圖片的優(yōu)化

三、webpack打包優(yōu)化與分析

webpack-bundle-analyzer打包分析

打包優(yōu)化

四、優(yōu)化后線上測(cè)試速度提升

五、優(yōu)化總結(jié)

前言

最近在做項(xiàng)目時(shí),測(cè)試提出了在App端的H5項(xiàng)目入口加載時(shí)間過(guò)長(zhǎng),白屏等待過(guò)久,需要優(yōu)化的問(wèn)題,于是著手開(kāi)始分析:



項(xiàng)目技術(shù)棧:基于Vue全家桶做的一個(gè)移動(dòng)端類似WebApp的項(xiàng)目,使用到的第三方庫(kù)有:mint-ui, echarts,momentjs。

項(xiàng)目痛點(diǎn):白屏?xí)r間過(guò)長(zhǎng)

一、白屏?xí)r間過(guò)長(zhǎng)分析

 通過(guò)訪問(wèn)線上環(huán)境,結(jié)合Chrome devtool中Network和Performance功能可以具體分析整個(gè)白屏的耗時(shí)主要在哪一塊兒

Network耗時(shí)記錄:

點(diǎn)擊查看原圖

Performance性能面板

點(diǎn)擊查看原圖

通過(guò)上面兩張圖分析,從瀏覽器發(fā)起請(qǐng)求到解析HTML完成這一過(guò)程中:
animate.css, mini-ui.css的請(qǐng)求耗時(shí)最長(zhǎng)。
圖片過(guò)大耗時(shí)。
二、針對(duì)性優(yōu)化
針對(duì)animate.css
animate.css由于使用的是第三方CDN(國(guó)外服務(wù)器)所有請(qǐng)求時(shí)間相對(duì)較長(zhǎng),所以如果必須要用animate.css那么可以下載下來(lái)作為本地資源,也可以使用國(guó)內(nèi)CDN,或者不用animate.css,而是針對(duì)使用到的幾個(gè)CSS動(dòng)畫(huà),直接自己造輪子
針對(duì)mint-ui的優(yōu)化
由于mint-ui在原項(xiàng)目中使用的是全局引用的方式,這才導(dǎo)致打包資源過(guò)大,css單獨(dú)請(qǐng)求耗時(shí)過(guò)長(zhǎng)的問(wèn)題,所以主要解決方案是按需引入mint-ui,借助 babel-plugin-component,我們可以只引入需要的組件,以達(dá)到減小項(xiàng)目體積的目的。

安裝babel-plugin-component, 若已安裝可忽略
修改 .babelrc (重點(diǎn)在plugins中):


{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime",["component", [
      {
          "libraryName": "mint-ui",
          "style": true
      }
  ]]],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}


在main.js中引用使用到的插件


import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import 'mint-ui/lib/style.min.css'  // 引用CSS
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或?qū)憺? * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
  el: '#app',
  components: { App }
})


在使用的組件中改為按需引用組件


import Vue from 'vue'
 var Popup = Vue.component('mt-popup')
 var Swipe = Vue.component('mt-swipe')
 var SwipeItem = Vue.component('mt-swipe-item')
 export default {
    name:'my-component',
    components:{
     Popup,
     Swipe,
     SwipeItem
    }
}

此按需引入方案也同樣適用于其他第三方UI組件庫(kù)



針對(duì)圖片的優(yōu)化

圖片小圖通過(guò)webpack可以直接轉(zhuǎn)為base64,而大圖可以通過(guò)壓縮或者換格式的方式來(lái)優(yōu)化,這里推薦一個(gè)好用的圖片壓縮工具,工具:tinyPNG,如下是圖片轉(zhuǎn)換前后對(duì)比


點(diǎn)擊查看原圖


三、webpack打包優(yōu)化與分析

在完成了上述優(yōu)化以后,下面著重關(guān)注下webpack打包后生成的文件大小,看還有沒(méi)有可以優(yōu)化的余地。由于項(xiàng)目中已經(jīng)通過(guò)路由按需加載的方式來(lái)做了功能拆分,所以通過(guò)webpack打包后生成了很多分散的js文件,如下圖:


20200313153537713.png

通過(guò)上圖分析可以知道打包后有幾個(gè)文件相對(duì)較大,vendor.js都知道是第三方庫(kù)文件打包形成,之前通過(guò)mint-ui按需加載會(huì)有一定的變化,后面記錄。這里著重看另兩個(gè)帶hash的js文件,這里并看不出來(lái)它為什么這么大,所以這里需要用到webpack打包分析工具來(lái)做進(jìn)一步的打包文件分析:webpack-bundle-analyzer

webpack-bundle-analyzer打包分析

它的作用如下圖,即在打包后生成打包文件大小分析圖,方便我們更加直觀的看到文件大小和引用情況

點(diǎn)擊查看原圖



  • 這里先介紹下webpack-bundle-analyzer的簡(jiǎn)單使用
  1. 安裝
npm intall -D webpack-bundle-analyzer
  1. 修改webpack.pro.conf.js. (這里由于只是用于生產(chǎn)打包分析且是通過(guò)vue-cli生成的項(xiàng)目框架)
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
    // ...
    plugins:[
        new BundleAnalyzerPlugin()
    ]
}

運(yùn)行npm run build,(webpack默認(rèn)會(huì)在打包完成時(shí)生成分析圖)



版權(quán)聲明:本文為CSDN博主「Sophie_U」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/Sophie_U/article/details/104840167

數(shù)據(jù)類型的轉(zhuǎn)化(JavaScript)

前端達(dá)人

數(shù)據(jù)類型的轉(zhuǎn)化(JavaScript)—自動(dòng)轉(zhuǎn)化和強(qiáng)制轉(zhuǎn)化

這一周,我來(lái)分享一下在JavaScript中的數(shù)據(jù)類型轉(zhuǎn)化。

首先我們要知道在JavaScript中的數(shù)據(jù)類型有什么?在這里我就不詳細(xì)介紹了,幫你總結(jié)好了。

1.布爾類型-----Boolean---isNaN()
    用來(lái)判斷一個(gè)變量是否為非數(shù)字的類型,是數(shù)字返回false,不是數(shù)字返回true。
 2.數(shù)值類型-----Number
    存儲(chǔ)時(shí),是按照二進(jìn)制數(shù)值存儲(chǔ),輸出時(shí),默認(rèn)都是按照十進(jìn)制數(shù)值輸出。
    在JavaScript中二進(jìn)制前加0b/0B,八進(jìn)制前面加0 ,十六進(jìn)制前面加0x。
    如果需要按照原始進(jìn)制數(shù)值輸出,用格式為:
            變量名稱.toString(進(jìn)制) ;
    注意的是:S必須大寫(xiě),將數(shù)值轉(zhuǎn)化為字符串形式輸出
    如:console.log( a.toString(2) );將a轉(zhuǎn)換成2進(jìn)制的形式輸出。
 3.字符串類型-----String
    JavaScript可以用單引號(hào)嵌套雙引號(hào), 或者用雙引號(hào)嵌套單引號(hào)(外雙內(nèi)單,外單內(nèi)雙)
    字符串是由若干字符組成的,這些字符的數(shù)量就是字符串的長(zhǎng)度。
    通過(guò)字符串的length屬性可以獲取整個(gè)字符串的長(zhǎng)度。
        例子:var str = 'my name is xiaoming';
                  console.log(str.length);
          輸出的結(jié)果是19。可以知道空格也代表一個(gè)字符。
 4.undefined
    表示沒(méi)有數(shù)值-----應(yīng)該有數(shù)值,但是現(xiàn)在沒(méi)有數(shù)值
 5.null
    表示數(shù)值為空-----表示有數(shù)值,但是數(shù)值是“空”
上面就是數(shù)據(jù)類型的五種形式。那么它是如何轉(zhuǎn)化呢?聽(tīng)我詳細(xì)給你講解。

在 JavaScript 程序中 , 變量中存儲(chǔ)的數(shù)據(jù)類型沒(méi)有限制,也就是在變量中可以存儲(chǔ)任何符合JavaScript語(yǔ)法規(guī)范的數(shù)據(jù)類型。但是在 JavaScript 程序的執(zhí)行過(guò)程中,往往需要變量中存儲(chǔ)的數(shù)值是某種特定的數(shù)據(jù)類型,別的數(shù)據(jù)類型不行,此時(shí)就需要進(jìn)行數(shù)據(jù)類型的轉(zhuǎn)化。
————————————————
版權(quán)聲明:本文為CSDN博主「什什么都繪」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qq_39406353/article/details/104864224上面就是數(shù)據(jù)類型的五種形式。那么它是如何轉(zhuǎn)化呢?聽(tīng)我詳細(xì)給你講解。

在 JavaScript 程序中 , 變量中存儲(chǔ)的數(shù)據(jù)類型沒(méi)有限制,也就是在變量中可以存儲(chǔ)任何符合JavaScript語(yǔ)法規(guī)范的數(shù)據(jù)類型。但是在 JavaScript 程序的執(zhí)行過(guò)程中,往往需要變量中存儲(chǔ)的數(shù)值是某種特定的數(shù)據(jù)類型,別的數(shù)據(jù)類型不行,此時(shí)就需要進(jìn)行數(shù)據(jù)類型的轉(zhuǎn)化。
JavaScript中數(shù)據(jù)類型的轉(zhuǎn)化,分為自動(dòng)轉(zhuǎn)化和強(qiáng)制轉(zhuǎn)化:
        自動(dòng)轉(zhuǎn)化是計(jì)算機(jī)程序,自動(dòng)完成的轉(zhuǎn)化。
        強(qiáng)制轉(zhuǎn)化是程序員,強(qiáng)行完成的轉(zhuǎn)化
1.布爾類型的自動(dòng)轉(zhuǎn)化:
 在 執(zhí)行 if 判斷時(shí) ,其他數(shù)據(jù)類型會(huì)自動(dòng)轉(zhuǎn)化為布爾類型
         其他類型轉(zhuǎn)化為布爾類型的原則
   0   ''   undefined   null  NaN  這五種情況轉(zhuǎn)化為false
          特別提醒 0.0  0.00000  都算是0 
 其他的所有都會(huì)轉(zhuǎn)化為 true
2.字符串的自動(dòng)轉(zhuǎn)化:
  執(zhí)行字符串拼接, +號(hào)的兩側(cè),應(yīng)該都是字符串類型,會(huì)將其他數(shù)據(jù)類型轉(zhuǎn)化為字符串類型
        轉(zhuǎn)化原則:
            //基本數(shù)據(jù)類型 / 簡(jiǎn)單數(shù)據(jù)類型------將數(shù)據(jù)數(shù)值直接轉(zhuǎn)化為字符串 , 然后執(zhí)行拼接操作
         布爾值 true  ---> 字符串 'true'
         布爾值 false ---> 字符串 'fasle'
         undefined ---> 字符串 'undefined'
         unll ---> 字符串 'null'
         數(shù)值 ---> 將數(shù)值解析轉(zhuǎn)化為'對(duì)應(yīng)的純數(shù)字的字符串'
            // 引用數(shù)據(jù)類型 / 復(fù)雜數(shù)據(jù)類型
         數(shù)組 ---> 將 [] 中的內(nèi)容,轉(zhuǎn)化為字符串的形式,執(zhí)行拼接操作
         對(duì)象 ---> 任何對(duì)象,任何內(nèi)容,都會(huì)轉(zhuǎn)化為 [object Object] 固定的內(nèi)容形式,執(zhí)行拼接操作
         函數(shù) ---> 將所有的程序代碼,轉(zhuǎn)化為字符串,執(zhí)行拼接操作
3.數(shù)值的自動(dòng)轉(zhuǎn)化:
在執(zhí)行運(yùn)算時(shí),會(huì)觸發(fā)數(shù)據(jù)類型的自動(dòng)轉(zhuǎn)化。
 轉(zhuǎn)化原則:
    布爾類型 : true  --->  1         
               false --->  0
    undefined : 轉(zhuǎn)化為 NaN 
    null : 轉(zhuǎn)化為 0
    字符串 : 
        如果整個(gè)字符串,是純數(shù)字字符串,或者符合科學(xué)計(jì)數(shù)法 ---> 轉(zhuǎn)化為對(duì)應(yīng)的數(shù)值
       如果字符串內(nèi)有不符合數(shù)字規(guī)范的內(nèi)容 ---> 轉(zhuǎn)化為 NaN 
    數(shù)組,對(duì)象,函數(shù):
      如果是+加號(hào)執(zhí)行的是字符串拼接效果,按照這些數(shù)據(jù)類型轉(zhuǎn)化為字符串的原則來(lái)轉(zhuǎn)化
      如果是其他形式的運(yùn)算 執(zhí)行結(jié)果都是 NaN
4.布爾類型的強(qiáng)制轉(zhuǎn)化:
 
  布爾類型的強(qiáng)制轉(zhuǎn)化就是使用JavaScript中定義好的 方法/函數(shù) Boolean( 數(shù)據(jù)/變量 )
  Boolean() 這個(gè)方法 不會(huì)改變 變量中存儲(chǔ)的原始數(shù)值
   轉(zhuǎn)化原則與自動(dòng)轉(zhuǎn)化原則相同
     0   ''   undefined  null  NaN --------> false 
     其他數(shù)據(jù),都轉(zhuǎn)化為true
5.字符串類型的強(qiáng)制轉(zhuǎn)化:
  
 方法1,變量.toString(進(jìn)制類型)
         將數(shù)值強(qiáng)制轉(zhuǎn)化為字符串,并且可以設(shè)定轉(zhuǎn)化的進(jìn)制,.toString() 之前,不能直接寫(xiě)數(shù)值,必須是寫(xiě)成變量的形式
         進(jìn)制常用的數(shù)值是 2 8 16 ,可以設(shè)定的范圍是 2 - 36 進(jìn)制  
 方法2,String( 變量 / 數(shù)據(jù) )
         將變量或者數(shù)據(jù),轉(zhuǎn)化為字符串,原則按照自動(dòng)轉(zhuǎn)化的原則來(lái)執(zhí)行,不會(huì)改變變量中存儲(chǔ)的原始數(shù)值
         但是在字符串拼接時(shí),會(huì)將其他數(shù)據(jù)類型自動(dòng)轉(zhuǎn)化為字符串
 6.數(shù)字類型的強(qiáng)制轉(zhuǎn)化:
 
方法1 , Number(變量/數(shù)值) 
         console.log( Number(true) );   // 1
         console.log( Number(false) );  // 0
         console.log( Number(null) );   // 0
         console.log( Number(undefined) );   // NaN
         console.log( Number('100') );       // 對(duì)應(yīng)的數(shù)值
         console.log( Number('100.123') );   // 對(duì)應(yīng)的數(shù)值
         console.log( Number('2e4') );       // 對(duì)應(yīng)的數(shù)值
         console.log( Number('123abc') );    // NaN
         console.log( Number( [1,2,3,4,5] ) );                           // NaN
         console.log( Number( {name:'zhangsan'} ) );                     // NaN
         console.log( Number( function fun(){console.log('abc')} ) );    // NaN
 將其他類型強(qiáng)制轉(zhuǎn)化為數(shù)值類型,轉(zhuǎn)化原則與自動(dòng)轉(zhuǎn)化選擇相同

 方法2, parseInt(變量 / 數(shù)據(jù))   是獲取變量或者數(shù)據(jù)的整數(shù)部分
         從數(shù)據(jù)的 左側(cè)起 解析獲取 整數(shù)內(nèi)容 
         console.log( parseInt(true) );                 // 都是 NaN            
         console.log( parseInt(false) );                                   
         console.log( parseInt(null) );                                    
         console.log( parseInt(undefined) );                               
         console.log( parseInt( {name:'zhangsan'} ) );                     
         console.log( parseInt( function fun(){console.log('abc')} ) ); 

         數(shù)組執(zhí)行,是獲取 數(shù)值部分 也就是 沒(méi)有 []的部分
         1,2,3,4,5  整數(shù)部分是 1  1之后是逗號(hào) 逗號(hào)不是整數(shù),之后的部分也就不算整數(shù)
         獲取第一個(gè)數(shù)值的整數(shù)部分,如果有就獲取,如果沒(méi)有,結(jié)果是NaN
         console.log( parseInt( [1,2,3,4,5] ) );        // 結(jié)果是 1                      
         console.log( parseInt( [null,2,3,4,5] ) );     // 結(jié)果是 NaN 

         如果是整數(shù)就直接獲取,如果是浮點(diǎn)數(shù),或者科學(xué)計(jì)數(shù)法,就獲取整數(shù)部分
         console.log( parseInt( 100 ) );          // 整數(shù)是直接獲取
         console.log( parseInt( 0.0123 ) );       // 浮點(diǎn)數(shù)是獲取整數(shù)部分
         console.log( parseInt( 3.123456e3 ) );   // 科學(xué)計(jì)數(shù)法是解析之后,獲取整數(shù)部分

         字符串不同了
         如果是純數(shù)字的字符串
         console.log( parseInt( '100' ) );         // 與數(shù)字的結(jié)果相同 
         console.log( parseInt( '0.0123' ) );      // 與數(shù)字的結(jié)果相同 

         console.log( parseInt( '3.123456e3' ) );   //3
         console.log( parseInt( '3abc' ) );   //3
         console.log( parseInt( '3.123' ) );   //3

 方法3 , parseFloat( 變量 / 數(shù)值 )
         獲取浮點(diǎn)數(shù)部分
         console.log( parseFloat(true) );           // 都是 NaN            
         console.log( parseFloat(false) );                                   
         console.log( parseFloat(null) );                                    
         console.log( parseFloat(undefined) );                               
         console.log( parseFloat( {name:'zhangsan'} ) );                     
         console.log( parseFloat( function fun(){console.log('abc')} ) );         
        //數(shù)值, 整數(shù),浮點(diǎn)數(shù),都會(huì)完整獲取
         console.log( parseFloat(100) );            //100
         console.log( parseFloat(100.1234) );       //100.1234
         console.log( parseFloat(1.234567e3) );     //1234.567

         // 關(guān)鍵是字符串
         // 從字符串的左側(cè)起 解析 符合浮點(diǎn)數(shù)的部分
         console.log( parseFloat( '100' ) );         // 與數(shù)字的結(jié)果相同 
         console.log( parseFloat( '0.0123' ) );      // 與數(shù)字的結(jié)果相同 

         console.log( parseFloat( '3.123456e3' ) );  // 科學(xué)技術(shù)法會(huì)解析
         console.log( parseFloat( '3.1223abc' ) );        
         console.log( parseFloat( '3.123' ) );  
好了,這就是在JavaScript中數(shù)據(jù)類型的轉(zhuǎn)化,希望可以幫助到你。
————————————————
版權(quán)聲明:本文為CSDN博主「什什么都繪」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qq_39406353/article/details/104864224

jQuery超詳細(xì)總結(jié)

前端達(dá)人

jQuery超詳細(xì)總結(jié)

文章目錄

jQuery超詳細(xì)總結(jié)

一 選擇器

特殊選擇器

二 篩選器

用在 jQuery 選擇的元素后面

都是方法,對(duì)選擇出來(lái)的元素進(jìn)行二次篩選

三 文本操作

總結(jié)

四 元素類名操作

五 元素屬性操作

在 H5 的標(biāo)準(zhǔn)下, 給了一個(gè)定義, 當(dāng)你需要寫(xiě)自定義屬性的時(shí)候,最好寫(xiě)成 data-xxx="值",當(dāng)大家看到 data-xxx 的時(shí)候, 就知道這是一個(gè)自定義屬性

六 元素樣式操作

七 綁定事件

  1. on()方法是專門用來(lái)綁定事件
  2. one() 方法是專門用來(lái)綁定一個(gè)只能執(zhí)行一次的方法
  3. off() 方法是專門用來(lái)解綁一個(gè)元素的事件的
  4. trigger() 方法是專門用來(lái)觸發(fā)事件的方法
  5. hover()
  6. 常用事件

    八 節(jié)點(diǎn)操作
  7. 創(chuàng)建節(jié)點(diǎn)
  8. 插入節(jié)點(diǎn)
  9. 刪除節(jié)點(diǎn)
  10. 替換節(jié)點(diǎn)
  11. 克隆節(jié)點(diǎn)

    九 獲取元素尺寸

    尺寸: 元素的占地面積

    三套方法, 四種使用方式

    十 獲取元素位置
  12. offset()
  13. position()

    十一 獲取卷去的尺寸(頁(yè)面滾動(dòng)條)

    scrollTop()

    scrollLeft()

    十二 jQuery中的函數(shù)

    ready() 事件

    each() 方法

    十三 jQuery中的動(dòng)畫(huà)

    讓元素出現(xiàn)不同的移動(dòng), 改變

    標(biāo)準(zhǔn)動(dòng)畫(huà)

    折疊動(dòng)畫(huà)

    漸隱漸顯動(dòng)畫(huà)

    綜合動(dòng)畫(huà)

    停止動(dòng)畫(huà)

    十四 jQuery發(fā)送ajax請(qǐng)求

    jQuery 里面幫我們封裝好了幾個(gè)方法

    專門用來(lái)發(fā)送 ajax 請(qǐng)求的

    jQuery 發(fā)送一個(gè) GET 請(qǐng)求

    jQuery 發(fā)送一個(gè) POST 請(qǐng)求

    jQuery 的 $.ajax 方法

    jQuery 的 ajax 全局鉤子函數(shù)

    十五 jQuery 發(fā)送一個(gè) jsonp 請(qǐng)求

    十六 jQuery 的多庫(kù)并存機(jī)制

    十七 jQuery 的插件擴(kuò)展機(jī)制

    十八 jQuery 的拷貝對(duì)象問(wèn)題

    十九 jQuery 的插件

    jQuery 是一個(gè)前端庫(kù),也是一個(gè)方法庫(kù)

    他里面封裝著一些列的方法供我們使用

    我們常用的一些方法它里面都有,我們可以直接拿來(lái)使用就行了

    jQuery 之所以好用,很多人愿意使用,是因?yàn)樗膸讉€(gè)優(yōu)點(diǎn)太強(qiáng)大了

    優(yōu)質(zhì)的選擇器和篩選器

    好用的隱式迭代

    強(qiáng)大的鏈?zhǔn)骄幊?br />
    因?yàn)檫@些東西的出現(xiàn),很多時(shí)候我們要做的事情被 “一行代碼解決”

    接下來(lái)我們就來(lái)認(rèn)識(shí)一下 jQuery

    一 選擇器

    $()

    css怎么獲取元素這里就怎么寫(xiě)

    獲取的是一組元素,當(dāng)里面是id時(shí),這組元素只有一個(gè)內(nèi)容

    特殊選擇器

    :first $('li:first') 獲取元素集合里的 第一個(gè)元素

    //  console.log($('li:first'))

    1

    :last $('li:last') 獲取元素集合里的 最后一個(gè)元素

    :eq() $('li:eq()')獲取元素集合里 索引為n 的那個(gè)元素,索引從0開(kāi)始

    :odd $('li:odd') 獲取所有索引為 奇數(shù) 的元素

    :even $('li:even') 獲取所有索引為 偶數(shù) 的元素

    二 篩選器

    用在 jQuery 選擇的元素后面

    都是方法,對(duì)選擇出來(lái)的元素進(jìn)行二次篩選

    first() 篩選 元素集合里面的 第一個(gè)元素

    //  console.log($('li').first())

    1

    last() 篩選 元素集合里面的 最后一個(gè)元素

    eq(n) 篩選元素集合里 索引為n 的那個(gè)元素

    next() 篩選出來(lái) 元素 的下一個(gè) 兄弟元素

    nextAll() 篩選出 元素后面的 所有 兄弟元素

    nextAll(選擇器) 篩選出元素后面的 所有兄弟元素 中符合選擇器的元素

    nextUntil(選擇器) 篩選出 元素后面的所有兄弟元素 直到 選中的元素為止 不包含選中的元素

    //  console.log($('span').nextUntil('.a10'))

    1

    prev() 篩選出來(lái) 元素 的上一個(gè) 兄弟元素

    prevAll() 篩選出 元素上面的 所有 兄弟元素 (元素集合中的元素 從上一個(gè)兄弟元素開(kāi)始排序)

    prevAll(選擇器) 篩選出 元素上面的 所有兄弟元素 中符合選擇器的元素

    prevUntil(選擇器) 篩選出 元素上面的所有兄弟元素 直到 選中的元素為止 不包含選中的元素

    //  console.log($('span').prevUntil('.a10'))

    1

    parent() 篩選出元素的 父元素

    parents()篩選出元素的 所有祖先元素 直到html元素

    parents(選擇器)拿到 所有祖先元素中的符合選擇器的元素

    parentsUntil(選擇器)篩選出元素的 所有的祖先元素 直到某一個(gè)元素 不包含該元素

    //  console.log($('span').parents('body'))

    // console.log($('span').parentsUntil('html'))



    children() 篩選出元素的 所有子級(jí)元素



    children(選擇器) 篩選出元素 所有子級(jí)元素中的 符合選擇器的元素

    siblings() 篩選出所有的兄弟元素 不包含 自己



    siblings(選擇器) 篩選出所有的兄弟元素中的 符合選擇器的元素

    find(選擇器)



    篩選 一個(gè)元素后代中的 符合選擇器的元素

    在一個(gè)元素集合的每一個(gè)元素中 查找后代元素 符合選擇器的元素

    index() 獲取元素的索引位置



    索引位置是指 是該父元素下的第幾個(gè)元素 拿到的是 數(shù)字

    三 文本操作

    html() 一個(gè)讀寫(xiě)的屬性

    html()不傳遞 參數(shù)的時(shí)候 就是獲取元素內(nèi)部的超文本內(nèi)容

    html(參數(shù))傳遞 參數(shù)的時(shí)候 就是設(shè)置元素內(nèi)部的超文本內(nèi)容

    text() 一個(gè)讀寫(xiě)的屬性

    text()不傳遞 參數(shù)的時(shí)候 就是獲取元素內(nèi)部的超文本內(nèi)容

    text(參數(shù))傳遞 參數(shù)的時(shí)候 就是設(shè)置元素內(nèi)部的超文本內(nèi)容

    val() 一個(gè)讀寫(xiě)的屬性 操作 input 標(biāo)簽

    val()不傳遞參數(shù)的時(shí)候, 就是獲取標(biāo)簽的 value 值

    val(參數(shù))傳遞一個(gè)參數(shù)的時(shí)候, 就是設(shè)置標(biāo)簽的 value 值

    總結(jié)

    獲取

    html() 只能獲取第一個(gè)元素的超文本內(nèi)容

    text() 能獲取元素集合內(nèi)所有元素的文本內(nèi)容合

    val() 只能獲取第一個(gè)元素的 value 值

    設(shè)置

    html() 給元素集合內(nèi)所有元素設(shè)置超文本內(nèi)容

    text() 給元素集合內(nèi)所有元素設(shè)置文本內(nèi)容

    val() 給元素集合內(nèi)所有元素設(shè)置 value 值

    四 元素類名操作

    addClass() 添加類名

    執(zhí)行這個(gè)方法會(huì)給元素集合里面所有的元素添加上固定的類名

    如果有就不添加, 不存在這個(gè)類名時(shí)添加

    removeClass() 移除類名

    執(zhí)行這個(gè)方法刪除 元素集合里面所有元素 的指定類名

    toggleClass()切換類名

    執(zhí)行這個(gè)方法會(huì)給元素集合里面的所有元素切換類名

    本身存在這個(gè)類名, 刪除類名

    本身不存在這個(gè)類名, 添加類名

    hasClass() 判斷有沒(méi)有某一個(gè)類名

    返回的時(shí)一個(gè)布爾值, 表示這個(gè)類名是否存在

    五 元素屬性操作

    在 H5 的標(biāo)準(zhǔn)下, 給了一個(gè)定義, 當(dāng)你需要寫(xiě)自定義屬性的時(shí)候,最好寫(xiě)成 data-xxx=“值”,當(dāng)大家看到 data-xxx 的時(shí)候, 就知道這是一個(gè)自定義屬性

    attr() 和 removeAttr()



    attr: attribute 屬性

    attr()

    是一個(gè)讀寫(xiě)的方法

    attr(要讀取的屬性名): 傳遞一個(gè)參數(shù)的時(shí)候是讀取

    attr(屬性名, 屬性值): 傳遞兩個(gè)參數(shù)的時(shí)候是設(shè)置

    removeAttr() 專門用來(lái)移除屬性的

    attr 這套方法的注意:

    所有的屬性都會(huì)顯示在標(biāo)簽上(原生屬性和自定義屬性)

    不管你設(shè)置的是什么數(shù)據(jù)類型, 都會(huì)給你變成字符串

    removeAttr 刪除 attr 設(shè)置的屬性, 有多少刪除多少(針對(duì)自定義屬性)

    prop() 和 removeProp()



    prop: property 屬性

    prop()

    一個(gè)讀寫(xiě)的方法

    prop(要讀取的屬性名): 傳遞一個(gè)參數(shù)的時(shí)候是讀取

    prop(屬性名, 屬性值): 傳遞兩個(gè)參數(shù)的時(shí)候是設(shè)置

    removeProp()專門用來(lái)移除屬性的

    prop 這套方法的注意:

    非原生屬性, 不會(huì)顯示在標(biāo)簽上, 但是你可以獲取使用

    你存儲(chǔ)的是什么數(shù)據(jù)類型, 獲取的時(shí)候就是什么數(shù)據(jù)類型

    removeProp 刪除 prop 設(shè)置的屬性, 有多少刪除多少(針對(duì)自定義屬性)

    removeProp() 不能刪除原生屬性 id class style 等等

    data() 和 removeData()



    data: data 數(shù)據(jù)

    data()

    一個(gè)讀寫(xiě)的方法

    data(要讀取的屬性名): 傳遞一個(gè)參數(shù)的時(shí)候是讀取

    data(屬性名, 屬性值): 傳遞兩個(gè)參數(shù)的時(shí)候是設(shè)置

    removeData() 專門用來(lái)刪除數(shù)據(jù)的

    data 這套方法的注意:

    和元素的原生屬性沒(méi)有關(guān)系, 可以設(shè)置 id, 但是和元素的 id 沒(méi)關(guān)系

    就是在元素身上給你開(kāi)辟一個(gè)地方, 存儲(chǔ)一些數(shù)據(jù)

    你設(shè)置的是什么數(shù)據(jù)類型, 拿到的就是什么數(shù)據(jù)類型

    removeData 刪除 data 設(shè)置的屬性

    data() 方法也能讀取寫(xiě)在標(biāo)簽上的 H5 標(biāo)準(zhǔn)自定義屬性

    三個(gè)方法存儲(chǔ)內(nèi)容

    attr 設(shè)置的自定義屬性存儲(chǔ)在標(biāo)簽身上

    prop 設(shè)置的自定義屬性存儲(chǔ)在元素對(duì)象里面

    data 設(shè)置的自定義屬性存儲(chǔ)在元素對(duì)象里面單獨(dú)開(kāi)辟的一個(gè)對(duì)象

    六 元素樣式操作

    css()

    一個(gè)讀寫(xiě)的屬性

    不同操作需要 傳遞 不同的參數(shù)

    css('樣式名稱')

    css('width')

    獲取元素的樣式值, 不管是行內(nèi)樣式還是非行內(nèi)樣式都能獲取

    css('樣式名稱', '樣式的值')

    css('width', '200px')

    設(shè)置元素的樣式值, 元素集合能獲取多少個(gè)元素就置多少個(gè)元素

    設(shè)置的時(shí)候, 所有的單位都可以不寫(xiě), 默認(rèn)添加 px為單位

    css(對(duì)象)

    css({ width: 100, 不寫(xiě)單位默認(rèn)是 px height: '200px', opacity: 0.5 })

    批量設(shè)置 css 樣式

    給元素集合里面的所有元素, 批量設(shè)置樣式

    七 綁定事件
  14. on()方法是專門用來(lái)綁定事件

    jQuery 里面通用的事件綁定方式

    不同操作 傳遞 不同參數(shù)

    on方法的各種參數(shù)描述

    on('事件類型', 事件處理函數(shù))

    給元素集合內(nèi)所有的元素綁定一個(gè)事件

    // 給 $('li') 獲取到的所有元素綁定一個(gè)點(diǎn)擊事件

        // $('li').on('click', function () {

        //   console.log('我被點(diǎn)擊了')

        // })



    on('事件類型', '事件委托', 事件處理函數(shù))

    把 事件委托 位置的元素的事件 委托給了前面元素合

        // 給所有的 li 標(biāo)簽設(shè)置事件委托, 委托給了 ul

        // $('ul').on('click', 'li', function () {

        //   console.log('我被點(diǎn)擊了, 事件委托')

        // })



    on('事件類型', 復(fù)雜數(shù)據(jù)類型, 事件處理函數(shù))

    給每一個(gè)元素綁定一個(gè)事件, 復(fù)雜數(shù)據(jù)類型是發(fā)事件時(shí)候傳遞的參數(shù)

     //   每一個(gè) li 點(diǎn)擊的時(shí)候, 都能得到中間那個(gè)對(duì)象

        //   就是事件對(duì)象了面

        // $('li').on('click', { name: 'Jack', age: 18 }, function (e) {

        //   console.log('我被點(diǎn)擊了, li')

        //   console.log(e)

        // })

    1

    2

    3

    4

    5

    6

    on('事件類型', '事件委托', 任意數(shù)據(jù)類型, 件處函數(shù))

    做一個(gè)事件委托的形式, 第三個(gè)參數(shù)位置的數(shù)據(jù)

    是觸發(fā)事件的時(shí)候, 可以傳遞進(jìn)去的數(shù)據(jù)

    on(對(duì)象)

    給一個(gè)元素綁定多個(gè)事件的方式 不能傳參數(shù)

     // $('ul').on({

        //   click: function () { console.log('點(diǎn)擊事件') },

        //   mouseover: function () { console.log('移入事件') },

        //   mouseout: function () { console.log('移出事件') }

        // })


  15. one() 方法是專門用來(lái)綁定一個(gè)只能執(zhí)行一次的方法

    傳遞的參數(shù)個(gè)數(shù)和意義 于 on 方法一摸一樣

    綁定上的事件只能執(zhí)行一次
  16. off() 方法是專門用來(lái)解綁一個(gè)元素的事件的

    使用方式

    off('事件類型') : 給該事件類型的所有事件處理函數(shù)解綁

    off('事件類型', 事件處理函數(shù)) : 解綁指定事件處理函數(shù)

    注意:on 和 one 綁定的事件它都能移除
  17. trigger() 方法是專門用來(lái)觸發(fā)事件的方法

    不通過(guò)點(diǎn)擊, 通過(guò)代碼把事件觸發(fā)了

    trigger('事件類型') : 把該元素的事件給觸發(fā)了
  18. hover()

    jQuery 里面唯一一個(gè)很特殊的事件函數(shù)

    表示一個(gè)鼠標(biāo)懸停動(dòng)作

    只有一個(gè)使用方式

    hover(鼠標(biāo)移入的時(shí)候觸發(fā), 鼠標(biāo)移出的時(shí)候觸發(fā))

     // hover 事件

        //   如果你只傳遞一個(gè)函數(shù), 那么移入移出都觸發(fā)這一個(gè)函數(shù)

        $('ul')

          .hover(

            function () { console.log('鼠標(biāo)移入') },

            function () { console.log('鼠標(biāo)移出') }

          )


  19. 常用事件

    jQuery 把一些常用事件直接做成了函數(shù)



    click()

    mouseover()

    . . . . . .

    直接使用就可以了



    使用 click 舉一個(gè)例子



    click(事件處理函數(shù))

    click(參數(shù), 事件處理函數(shù))

    參數(shù): 觸發(fā)事件的時(shí)候傳遞到事件里面的數(shù)據(jù)

        // 常用事件

        // 給 ul 綁定了一個(gè)點(diǎn)擊事件

        // $('ul').click([1, 2, 3, 4, true], function (e) {

        //   console.log('你好 世界')

        //   console.log(e)

        // })

    1

    2

    3

    4

    5

    6

    八 節(jié)點(diǎn)操作
  20. 創(chuàng)建節(jié)點(diǎn)

    對(duì)應(yīng)原生 js 里面的 createElement()

    $('html 格式的文本')

    // 創(chuàng)建一個(gè) div 元素

        console.log($('<div>我是一個(gè)創(chuàng)建出來(lái)的節(jié)點(diǎn)</div>'))

    1

    2
  21. 插入節(jié)點(diǎn)

    對(duì)應(yīng)原生 js 里面的 appendChild()

    內(nèi)部插入

    放在頁(yè)面元素的子元素位置, 放在末尾

    頁(yè)面元素.append(要插入的元素)

    要插入的元素.appendTo(頁(yè)面元素)

    放在頁(yè)面元素的子元素位置, 放在最前

    頁(yè)面元素.prepend(要插入的元素)

    要插入的元素.prependTo(頁(yè)面元素)

    外部插入

    放在頁(yè)面元素的下一個(gè)兄弟元素位置

    頁(yè)面元素.after(要插入的元素)

    要插入的元素.insertAfter(頁(yè)面元素)

    放在頁(yè)面元素的上一個(gè)兄弟元素位置

    頁(yè)面元素.before(要插入的元素)

    要插入的元素.insertBefore(頁(yè)面元素)
  22. 刪除節(jié)點(diǎn)

    對(duì)應(yīng)原生 js 里面的 removeChild()

    頁(yè)面元素.empty() -> 把自己變成空標(biāo)簽,將所有子元素移除

    頁(yè)面元素.remove() -> 把自己移除

    沒(méi)有刪除某一個(gè)子節(jié)點(diǎn)的方法,因?yàn)?jQuery 的選擇器的強(qiáng)大,直接找到要?jiǎng)h除的節(jié)點(diǎn), remove()
  23. 替換節(jié)點(diǎn)

    對(duì)應(yīng)原生 js 里面的 replaceChild()

    頁(yè)面元素.replaceWith(替換元素)

    替換元素.replaceAll(頁(yè)面元素)
  24. 克隆節(jié)點(diǎn)

    對(duì)應(yīng)原生 js 里面的 cloneNode()

    元素.clone()

    兩個(gè)參數(shù)的值為 true或false

    第一個(gè)參數(shù): 自己的事件是否克隆

    第二個(gè)參數(shù): 子節(jié)點(diǎn)的事件是否克隆

    如果第一個(gè)參數(shù)的值為false,那么第二個(gè)參數(shù)不起作用,沒(méi)有意義。

    不管你是否傳遞參數(shù), 都會(huì)把所有后代元素都克隆下來(lái)

    元素 + 文本內(nèi)容 + 屬性 + 行內(nèi)樣式

    參數(shù)只決定是否克隆元素身上的事件

    九 獲取元素尺寸

    尺寸: 元素的占地面積

    width 和 height

    padding

    border

    margin

    三套方法, 四種使用方式

    這些方法都是不考慮盒模型的狀態(tài)(不管是什么型, 都是固定區(qū)域)

    width() 和 height()

    獲取元素的 內(nèi)容 區(qū)域的尺寸

    innerWidth() 和 innerHeight()

    獲取元素的 內(nèi)容 + padding 區(qū)域的尺寸

    outerWidth() 和 outerHeight()

    獲取元素的 內(nèi)容 + padding + border 區(qū)域的尺寸

    outerWidth(true) 和 outerHeight(true)

    獲取元素的 內(nèi)容 + padding + border + margin 區(qū)域的尺寸

    十 獲取元素位置
  25. offset()

    offset: 偏移量

    是一個(gè)讀寫(xiě)的屬性

    讀取

    不傳遞參數(shù)就是讀取

    讀到的元素相對(duì)于頁(yè)面的位置關(guān)系

    返回值是一個(gè)對(duì)象 { left: xxx, top: xxx }

    書(shū)寫(xiě)

    傳遞一個(gè)對(duì)象就是寫(xiě)入 { left: xxx, top: xxx }

    注意: 絕對(duì)寫(xiě)入

    不管你本身和頁(yè)面的尺寸是什么樣,寫(xiě)多少就是多少
  26. position()

    postition: 定位

    只讀的方法

    讀取:

    元素相對(duì)于定位父級(jí)的位置關(guān)系

    得到的也是一個(gè)對(duì)象 { left: xxx, top: xxx }

    如果你寫(xiě)的是 right 或者 bottom, 會(huì)自動(dòng)計(jì)算成 left 和 top 值給你

    十一 獲取卷去的尺寸(頁(yè)面滾動(dòng)條)

    scrollTop()

    原生 js 里面 document.documentElement.scrollTop

    讀寫(xiě)的方法

    不傳遞參數(shù)的時(shí)候就是獲取卷去的高度

    傳遞一個(gè)參數(shù)就是設(shè)置卷去的高度

    scrollLeft()

    原生 js 里面 document.documentElement.scrollLeft

    讀寫(xiě)的方法

    不傳遞參數(shù)的時(shí)候就是獲取卷去的寬度

    傳遞一個(gè)參數(shù)的時(shí)候就是設(shè)置卷去的寬度

    十二 jQuery中的函數(shù)

    ready() 事件

    類似于 window.onload 事件,但是有所不同

    window.onload 會(huì)在頁(yè)面所有資源加載行

    ready() 會(huì)在頁(yè)面 html 結(jié)構(gòu)加載完畢后執(zhí)行

    也叫做 jQuery 的入口函數(shù)

    有一個(gè)簡(jiǎn)寫(xiě)的形式 $(function () {})

    each() 方法

    類似于 forEach(), 遍歷數(shù)組的

    jQuery 的元素集合, 是一個(gè) jQuery 數(shù)組, 不是一個(gè)數(shù)組, 不能使用 forEach()

    forEach語(yǔ)法: forEach(function (item, index) {})

    each語(yǔ)法:each(function (index, item) {})

    比較少用到, 因?yàn)?jQuery 隱式迭代 自動(dòng)遍歷

    十三 jQuery中的動(dòng)畫(huà)

    讓元素出現(xiàn)不同的移動(dòng), 改變

    transition -> 過(guò)渡動(dòng)畫(huà)

    animation -> 幀動(dòng)畫(huà)

    標(biāo)準(zhǔn)動(dòng)畫(huà)

    show() 顯示元素

    語(yǔ)法: show(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))

    hide() 隱藏元素

    語(yǔ)法: hide(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))

    toggle() 改變?cè)仫@示或隱藏(如果顯示就隱藏,如果隱藏就顯示)

    語(yǔ)法: toggle(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))

    三個(gè)方法的參數(shù)都可以選填,不需要每個(gè)都填寫(xiě)

    折疊動(dòng)畫(huà)

    slideDown() 下滑顯示

    語(yǔ)法: slideDown(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))

    slideUp() 上滑隱藏

    語(yǔ)法: slideUp(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))

    slideToggle() 切換滑動(dòng)和隱藏

    語(yǔ)法: slideToggle(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))

    漸隱漸顯動(dòng)畫(huà)

    實(shí)質(zhì)是透明的opacity的變化

    fadeIn() 逐漸顯示

    fadeIn(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))

    fadeOut() 逐漸消失

    fadeOut(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))

    fadeToggle() 切換顯示和消失

    fadeToggle(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))

    以上三個(gè)方法的參數(shù),均有默認(rèn)值

    fadeTo() 設(shè)置元素透明度變?yōu)槟阒付ǖ臄?shù)字

    fadeTo(時(shí)間, 你指定的透明度, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))

    綜合動(dòng)畫(huà)

    animate()

    基本上大部分的 css 樣式都可以動(dòng)畫(huà)

    transform 不行, 顏色不行

    語(yǔ)法: animate({}, 時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))

    { }里面就寫(xiě)你要運(yùn)動(dòng)的 css 屬性,默認(rèn)單位為px

    停止動(dòng)畫(huà)

    讓當(dāng)前的動(dòng)畫(huà)結(jié)束

    因?yàn)?jQuery 的動(dòng)畫(huà)你一直點(diǎn)擊,就會(huì)一直觸發(fā)。即使不再點(diǎn)擊讓事件發(fā)生,還是會(huì)把沒(méi)執(zhí)行完的動(dòng)畫(huà)執(zhí)行完畢。

    你點(diǎn)擊 10 次, 他就會(huì)觸發(fā) 10 次, 直到 10 次全都完畢才結(jié)束

    stop()

    當(dāng)這個(gè)函數(shù)觸發(fā)的時(shí)候, 就會(huì)讓運(yùn)動(dòng)立刻停下來(lái)

    你運(yùn)動(dòng)到哪一個(gè)位置了就停止在哪一個(gè)位置

    finish()

    當(dāng)這個(gè)函數(shù)觸發(fā)的時(shí)候, 就會(huì)讓運(yùn)動(dòng)立刻停下來(lái)

    不管你運(yùn)動(dòng)到了哪一個(gè)位置, 瞬間到達(dá)運(yùn)動(dòng)完成位置

    十四 jQuery發(fā)送ajax請(qǐng)求

    jQuery 里面幫我們封裝好了幾個(gè)方法

    專門用來(lái)發(fā)送 ajax 請(qǐng)求的

    $.get() -> 專門用來(lái)發(fā)送 get 請(qǐng)求的

    $.post() -> 專門用來(lái)發(fā)送 post 請(qǐng)求的

    $.ajax() ->

    發(fā)送什么請(qǐng)求都可以(get, post, put, delete)

    并且還可以發(fā)送一個(gè) jsonp 請(qǐng)求

    jQuery 發(fā)送一個(gè) GET 請(qǐng)求

    語(yǔ)法: $.get(請(qǐng)求地址, 需要攜帶到后端的參數(shù), 成功的回調(diào)函數(shù), 期望后端返回的數(shù)據(jù)類型)

    請(qǐng)求地址: 你要請(qǐng)求的后端接口地址(必填)

    攜帶參數(shù): 你需要給后端傳遞的參數(shù)

    可以是一個(gè)固定格式的字符串 ‘key=value&key=value’

    也可以是一個(gè)對(duì)象 { a: 100, b: 200 }

    成功回調(diào): 當(dāng)請(qǐng)求成功的時(shí)候會(huì)執(zhí)行的函數(shù)

    期望數(shù)據(jù)類型: 就是你是不是需要 jQuery 幫你解析響應(yīng)體

Js閉包

前端達(dá)人

所謂閉包就是說(shuō),閉包是指有權(quán)訪問(wèn)另外一個(gè)函數(shù)作用域中的變量的函數(shù).可以理解為(能夠讀取其他函數(shù)內(nèi)部變量的函數(shù))

閉包的三大特點(diǎn)為(既是優(yōu)點(diǎn),也是缺點(diǎn)):

1,函數(shù)作用域空間不會(huì)被銷毀

優(yōu)點(diǎn)是:空間中的內(nèi)容,永遠(yuǎn)存在

缺點(diǎn)是:占用大量的內(nèi)存空間

2,可以從外部訪問(wèn)函數(shù)內(nèi)部的變量

優(yōu)點(diǎn)是:使用變量數(shù)據(jù)方便

缺點(diǎn)是:容易泄露數(shù)據(jù)信息

3,保護(hù)私有作用域變量

優(yōu)點(diǎn)是:確保私有作用域變量一直存在

缺點(diǎn)是:占用內(nèi)存空間 閉包的最大問(wèn)題是:有可能造成占用大量的內(nèi)存空間,降低程序的執(zhí)行效率,甚至有可能造成數(shù)據(jù)溢出或者是數(shù)據(jù)泄露 因?yàn)闉榱吮Wo(hù)數(shù)據(jù)的安全性,特殊情況下,才會(huì)使用閉包舉例來(lái)說(shuō):

// 記數(shù)器:



//全局變量  全局變量降低函數(shù)的獨(dú)立性

1

// var count = 0;

// function add(){

// return count++;

// }

// console.log(add());

// console.log(add());

// console.log(add());



//局部變量  函數(shù)執(zhí)行外  局部變量銷毀

1

// function add(){

// var count = 0;

// return count++;

// }

// console.log(add());

// console.log(add());

// console.log(add());



//plus定義在add的內(nèi)部,可以訪問(wèn)add局部變量count

//f為一個(gè)全局變量,通過(guò)賦值后,成為add的返回值,也就是plus方法

//訪問(wèn)到了add中的局部變量count

//所以count雖然是局部變量,但不允許被銷毀,plus就是閉包

1

2

3

4

// function add(){

// var count = 0;

// function plus(){

// return count++;

// }

// return plus;

// }

//

// var f = add();

//

// console.log(f());

// console.log(f());

// console.log(f());



//變身

1

// function add(){

// var count = 0;

// return function(){

// return count++;

// }

// }

//

// var f = add();

//

// console.log(f());

// console.log(f());

// console.log(f());



//繼續(xù)變身

1

// var f = (function (){

// var count = 0;

// return function(){

// return count++;

// }

// }());

//

// console.log(f());

// console.log(f());

// console.log(f());

//JS中,沒(méi)有塊作用域,但是在閉包的寫(xiě)法里,可以體現(xiàn)出來(lái)。

function outerFunc(){

var outVar = 10;

var innerF = function (){

var innerVar = 20;//該變量雖然隸屬于outerFunc內(nèi)部,但是它的作用域范圍只在innerF對(duì)應(yīng)的函數(shù)體內(nèi),屬于塊級(jí)作用域

}

alert(innerVar);

return innerF;

}



閉包的作用:

正常函數(shù)執(zhí)行完畢后,里面聲明的變量被垃圾回收處理掉,但是閉包可以讓作用域里的 變量,在函數(shù)執(zhí)行完之后依舊保持沒(méi)有被垃圾回收處理掉



可以讀取函數(shù)內(nèi)部的變量

讓這些變量的值始終保持在內(nèi)存中。

增加塊級(jí)作用域

總結(jié):

1、 閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù),創(chuàng)建閉包的最常見(jiàn)的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù),通過(guò)另一個(gè)函數(shù)訪問(wèn)這個(gè)函數(shù)的局部變量。

2、 閉包的缺點(diǎn)就是常駐內(nèi)存,會(huì)增大內(nèi)存使用量,使用不當(dāng)很容易造成內(nèi)存泄露。

3、不必糾結(jié)到底怎樣才算閉包,其實(shí)你寫(xiě)的每一個(gè)函數(shù)都算作閉包,即使是全局函數(shù),你訪問(wèn)函數(shù)外部的全局變量時(shí),就是閉包的體現(xiàn)。







————————————————

版權(quán)聲明:本文為CSDN博主「澈野」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接:https://blog.csdn.net/fie_ld/article/details/104595753

html+css基礎(chǔ)入門學(xué)習(xí)教程之HTML 樣式

前端達(dá)人

HTML 樣式



通過(guò)使用 HTML4.0,所有格式化代碼均可移出 HTML 文檔,然后移入一個(gè)獨(dú)立的樣式表。



先來(lái)看一個(gè)例子,代碼如下:



<head>

    <style type="text/css">

        h1 {color: red}

        p {color: blue}

    </style>

</head>



<body>

    <h1>header 1</h1>

    <p>A paragraph.</p>

</body>

頁(yè)面上顯示為:



header 1



A paragraph.



當(dāng)瀏覽器讀到一個(gè)樣式表,它就會(huì)按照這個(gè)樣式表來(lái)對(duì)文檔進(jìn)行格式化。有以下三種方式來(lái)插入樣式表:



外部樣式表 link



當(dāng)樣式需要被應(yīng)用到很多頁(yè)面的時(shí)候,外部樣式表將是理想的選擇。使用外部樣式表,你就可以通過(guò)更改一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀。



<head>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

link : 定義資源引用

rel : 告訴瀏覽器引用的是一個(gè)樣式表文件

type : 文件類型

href : 文件地址



內(nèi)部樣式表



當(dāng)單個(gè)文件需要特別樣式時(shí),就可以使用內(nèi)部樣式表。你可以在 head 部分通過(guò) <style> 標(biāo)簽定義內(nèi)部樣式表。



<head>

<style type="text/css">

    body {background-color: red}

    p {margin-left: 20px}

</style>

</head>

style : 定義樣式定義



新建一個(gè)前端學(xué)習(xí)qun438905713,在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者,大家相互幫助,相互解答,并且還準(zhǔn)備很多學(xué)習(xí)資料,歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。



內(nèi)聯(lián)樣式



當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí),就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實(shí)例顯示出如何改變段落的顏色和左外邊距。



<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

優(yōu)先級(jí)說(shuō)明



(外部樣式)External style sheet < (內(nèi)部樣式)Internal style sheet < (內(nèi)聯(lián)樣式)In



1.下列方法表示調(diào)用外部樣式表的是?



A<style type="text/css">h1 {color: red }</style>



B<link rel="stylesheet" type="text/css" href="css/style.css">



C<p style="color: red; margin-left: 20px">style</p>



2.下面三種方法可以起到改變文檔樣式的是?



A<style type="text/css">h1 {color: red }</style>



B<link rel="stylesheet" type="text/css" href="css/style.css">



C<p style="color: red; margin-left: 20px"></p>



D以上三種都可以

————————————————

版權(quán)聲明:本文為CSDN博主「html前端基礎(chǔ)入門教程」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接:https://blog.csdn.net/htkms87/article/details/104600003

利用鍵盤控制小方塊的移動(dòng)

前端達(dá)人

原理

  1. 利用鍵盤控制移動(dòng),則需要了解onkeydown函數(shù),表示某個(gè)按鍵被按下,可以以此綁定一個(gè)事件響應(yīng)函數(shù),當(dāng)鍵盤被按下時(shí)候,觸發(fā)此事件,進(jìn)行移動(dòng)
  2. keyCode 對(duì)于keypress 事件,該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對(duì)于 keydown 和 keyup 事件,它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關(guān)。 因此我們可以根據(jù)keycode返回的字符碼來(lái)判斷用戶所按下的鍵,下面就是一個(gè)用于測(cè)試上下左右按鍵的js代碼,經(jīng)過(guò)我的測(cè)試之后,返回37 38 39 40;

    window.onload = function(){
                var box = document.getElementById("box");
                document.onkeydown = function(event){
                    event = event || window.event;
                    console.log(event.keyCode);
                }           
            };
    3



    3.方塊的移動(dòng)實(shí)際上就是坐標(biāo)的改變,因此需要offsetLeft 和offsetTop 來(lái)獲得當(dāng)前方塊的坐標(biāo),然后將坐標(biāo)進(jìn)行一定的更改,就可以實(shí)現(xiàn)移動(dòng)的效果了,下面給出代碼

    window.onload = function() {
                document.onkeydown = function(event) {
                    event = event || window.event;
                    //設(shè)置移動(dòng)速度
                    var speed = 10;
                    //當(dāng)ctrl和方向按鍵同時(shí)按下時(shí),提升移動(dòng)速度
                    if(event.ctrlKey) {
                        speed = 50;
                    }
                    //獲取div
                    var box01 = document.getElementById("box01");
                    switch(event.keyCode) {
                        /*keyCode返回按下按鍵的編碼
                         * 37 向左
                         * 38向上
                         * 39向右
                         * 40向下
                         */
                        case 37:
                            box01.style.left = box01.offsetLeft - speed + "px";
                            break;
                        case 39:
                            box01.style.left = box01.offsetLeft + speed + "px";
                            break;
                        case 38:
                            box01.style.top = box01.offsetTop - speed + "px";
                            break;
                        case 40:
                            box01.style.top = box01.offsetTop + speed + "px";
                            break;
    
                    }
                };
    
            };
    



    這樣就可以簡(jiǎn)單實(shí)現(xiàn)方塊的移動(dòng),但是此時(shí)我們會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題,當(dāng)我們進(jìn)行移動(dòng)的時(shí)候,按住按鍵不松手,理論上方塊應(yīng)該直接平滑的進(jìn)行移動(dòng),但實(shí)際上并非如此,第一下它會(huì)有一個(gè)小的停頓,這實(shí)際上是瀏覽器防止誤觸所設(shè)置的,因此我們需要對(duì)此進(jìn)行優(yōu)化
    解決方案

    這里我采用了定時(shí)器的做法來(lái)解決這個(gè)問(wèn)題,因?yàn)榭刂埔苿?dòng)的因素有兩個(gè),一個(gè)是控制方向,一個(gè)是控制速度,控制方向沒(méi)有問(wèn)題,因此我們需要改變速度
    setInterval(function(){},time);這是一個(gè)定時(shí)器,我們只需要在time時(shí)間內(nèi)調(diào)用一次函數(shù),就可以解決停頓的問(wèn)題了
    下面附上修改后的完整代碼


    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box01 {
                width: 100px;
                height: 100px;
                background-color: #008000;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
    
                //獲取div
                var box01 = document.getElementById("box01");
                //設(shè)置移動(dòng)速度
                var speed = 10;
                //設(shè)置移動(dòng)的方向
                var dir = 0;
    
                setInterval(function() {
                    switch(dir) {
                        /*keyCode返回按下按鍵的編碼
                         * 37 向左
                         * 38向上
                         * 39向右
                         * 40向下
                         */
                        case 37:
                            box01.style.left = box01.offsetLeft - speed + "px";
                            break;
                        case 39:
                            box01.style.left = box01.offsetLeft + speed + "px";
                            break;
                        case 38:
                            box01.style.top = box01.offsetTop - speed + "px";
                            break;
                        case 40:
                            box01.style.top = box01.offsetTop + speed + "px";
                            break;
    
                    }
    
                }, 50)
    
                document.onkeydown = function(event) {
                    event = event || window.event;
    
                    //當(dāng)ctrl和方向按鍵同時(shí)按下時(shí),提升移動(dòng)速度
                    if(event.ctrlKey) {
                        speed = 50;
                    } else {
                        speed = 10;
                    }
                    //使dir等于keycode的值
                    dir = event.keyCode;
    
                    //當(dāng)鼠標(biāo)松開(kāi)時(shí),停止移動(dòng)         ---如果不寫(xiě)這一個(gè)會(huì)造成無(wú)法停止移動(dòng)的效果
                    document.onkeyup = function() {
                        dir = 0;
                    };
    
                };
    
            };
        </script>
    </head>
    
    <body>
        <div id="box01"></div>
    </body>
    

</html>

————————————————

版權(quán)聲明:本文為CSDN博主「loving-cat」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接:https://blog.csdn.net/weixin_42878211/article/details/104558443



Vuex的一些用法

前端達(dá)人

vuex的基礎(chǔ)

1,狀態(tài)管理(共享)

緩存數(shù)據(jù)==>內(nèi)存, 只要刷新頁(yè)面,數(shù)據(jù)就丟了

訂單,詳情等,,,不適用vuex緩存數(shù)據(jù)



用于



非父子通信的問(wèn)題

緩存后端數(shù)據(jù),提高用戶體驗(yàn)

注意:

vuex只能有一個(gè)store,

為了防止多人修改,我們切割成子store, 再合并成唯一一個(gè)大的store對(duì)象

模塊寫(xiě)法

import Vue from 'vue'
import Vuex from 'vuex'
import cinema from './module/cinemaModule'
import tabbar from './module/tabbarshowModule'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {

  }, // "全局"狀態(tài)
  mutations:{

  },//唯一修改狀態(tài)的地方
  //異步處理
  actions:{
  },
  // 對(duì)上面的“全局狀態(tài)”進(jìn)行數(shù)據(jù)處理, 類似于vue中的計(jì)算屬性
  getters:{
  },

  modules:{
    cinema,
    tabbar
  }
})
export default store

2,子模塊的寫(xiě)法

const module = {
  namespaced:true, //命名空間
  state :{
    cinemaList:[]
  },
  actions:{
    store.commit("setCinemaList",res.data.data.cinemas) //支持傳參
  },
  mutations:{
    setCinemaList(state,data){
      console.log("setCinemaList",data)
      state.cinemaList = data
    }
  },
  getters:{
    topDataList(state){
      //state形參s, vuex自動(dòng)調(diào)用時(shí)候,傳來(lái)值
      return state.cinemaList.slice(0,5)
    }
  }
}

export default module

3,為了防止頁(yè)面刷新丟失數(shù)據(jù),所以還得找到其他插件來(lái)幫忙

import createPersistedState from "vuex-persistedstate"; //在index.js頁(yè)面加入這個(gè)插件

// 加入下面的代碼
const store = new Vuex.Store({
  plugins: [createPersistedState({
    reducer(val){
      return {
        user: val.user
      }
    }
  })]


————————————————
版權(quán)聲明:本文為CSDN博主「m0_46436313」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/m0_46436313/article/details/104572076

javascript設(shè)計(jì)模式九:中介者模式

前端達(dá)人

中介者對(duì)象踐行了最少知識(shí)原則,指一個(gè)對(duì)象盡可能少的了解別的對(duì)象,從而盡量減少對(duì)象間耦合程度。這樣各個(gè)對(duì)象只需關(guān)注自身實(shí)現(xiàn)邏輯,對(duì)象間的交互關(guān)系交由中介者對(duì)象來(lái)實(shí)現(xiàn)和維護(hù)。



需求背景:



手機(jī)購(gòu)買頁(yè)面,在購(gòu)買流程中,可以選擇手機(jī)的顏色及輸入購(gòu)買數(shù)量,同時(shí)頁(yè)面有兩個(gè)展示區(qū)域,分別向用戶展示剛選擇好的顏色和數(shù)量。還有一個(gè)按鈕動(dòng)態(tài)顯示下一步的操作,我們需要查詢?cè)擃伾謾C(jī)對(duì)應(yīng)的庫(kù)存,如果庫(kù)存數(shù)量少于這次購(gòu)買的數(shù)量,按鈕將被禁用并顯示庫(kù)存不足,反之按鈕可以點(diǎn)擊并顯示放入購(gòu)物車。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中介者模式 購(gòu)買商品</title>
</head>
<body>
    選擇顏色: 
    <select id="colorSelect">
        <option value="">請(qǐng)選擇</option>
        <option value="red">紅色</option>
        <option value="blue">藍(lán)色</option>
    </select>

    輸入購(gòu)買數(shù)量:
    <input type="text" id="numberInput">

    您選擇了顏色:<div id="colorInfo"></div><br>
    您輸入了數(shù)量:<div id="numberInfo"></div><br>

    <button id="nextBtn" disabled>請(qǐng)選擇手機(jī)顏色和購(gòu)買數(shù)量</button>

</body>
<script>

// 最初級(jí)的寫(xiě)法
var colorSelect = document.getElementById('colorSelect'),
    numberInput = document.getElementById('numberInput'),
    colorInfo = document.getElementById('colorInfo'),
    numberInfo = document.getElementById('numberInfo'),
    nextBtn = document.getElementById('nextBtn');

var goods = {
    'red': 3,
    'blue': 6
}

colorSelect.onchange = function(){
    var color = this.value,
        number = numberInput.value,
        stock = goods[color]

    colorInfo.innerHTML = color;

    if(!color){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '請(qǐng)選擇手機(jī)顏色';
        return;
    }

    if( ( (number-0) | 0 ) !== number-0 ){      //用戶輸入的購(gòu)買數(shù)量是否為正整數(shù)
        nextBtn.disabled = true;
        nextBtn.innerHTML = '請(qǐng)輸入正確的購(gòu)買數(shù)量';
        return;
    }

    if(number > stock){     //當(dāng)前選擇數(shù)量大于庫(kù)存量
        nextBtn.disabled = true;
        nextBtn.innerHTML = '庫(kù)存不足';
        return;
    }

    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入購(gòu)物車';
}

numberInput.oninput = function(){
    var color = colorSelect.value,
        number = this.value,
        stock = goods[color]

    colorInfo.innerHTML = color;

    if(!color){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '請(qǐng)選擇手機(jī)顏色';
        return;
    }

    if( ( (number-0) | 0 ) !== number-0 ){      //用戶輸入的購(gòu)買數(shù)量是否為正整數(shù)
        nextBtn.disabled = true;
        nextBtn.innerHTML = '請(qǐng)輸入正確的購(gòu)買數(shù)量';
        return;
    }

    if(number > stock){     //當(dāng)前選擇數(shù)量大于庫(kù)存量
        nextBtn.disabled = true;
        nextBtn.innerHTML = '庫(kù)存不足';
        return;
    }

    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入購(gòu)物車';
}

</script>
</html>

在上個(gè)示例中,對(duì)象間聯(lián)系高度耦合,只是兩個(gè)輸入框還好,但如果有多個(gè)的話,相互聯(lián)系就非常復(fù)雜了,此時(shí)就要考慮用到中介者模式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中介者模式 購(gòu)買商品</title>
</head>
<body>
    選擇顏色: 
    <select id="colorSelect">
        <option value="">請(qǐng)選擇</option>
        <option value="red">紅色</option>
        <option value="blue">藍(lán)色</option>
    </select>

    選擇內(nèi)存: 
    <select id="memorySelect">
        <option value="">請(qǐng)選擇</option>
        <option value="32G">32G</option>
        <option value="16G">16G</option>
    </select>

    輸入購(gòu)買數(shù)量:
    <input type="text" id="numberInput">

    您選擇了顏色:<div id="colorInfo"></div><br>
    您選擇了內(nèi)存:<div id="memoryInfo"></div><br>
    您輸入了數(shù)量:<div id="numberInfo"></div><br>

    <button id="nextBtn" disabled>請(qǐng)選擇手機(jī)顏色、內(nèi)存和購(gòu)買數(shù)量</button>
</body>
<script>
    var goods = {
        'red|32G': 3,
        'red|16G': 0,
        'blue|32G': 1,
        'blue|16G': 6
    }

    //引入中介者
    var mediator = (function(){
        var colorSelect = document.getElementById('colorSelect'),
            memorySelect = document.getElementById('memorySelect'),
            numberInput = document.getElementById('numberInput'),
            colorInfo = document.getElementById('colorInfo'),
            memoryInfo = document.getElementById('memoryInfo'),
            numberInfo = document.getElementById('numberInfo'),
            nextBtn = document.getElementById('nextBtn');

        return {
            changed: function(obj){
                var color = colorSelect.value,
                    memory = memorySelect.value,
                    number = numberInput.value,
                    stock = goods[color + '|' + memory];

                if(obj == colorSelect){      //如果改變的是選擇顏色下拉框
                    colorInfo.innerHTML = color;
                }else if(obj == memorySelect){
                    memoryInfo.innerHTML = memory;
                }else if(obj == numberInput){
                    numberInfo.innerHTML = number;
                }

                if(!color){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '請(qǐng)選擇手機(jī)顏色';
                    return;
                }

                if(!memory){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '請(qǐng)選擇手機(jī)內(nèi)存';
                    return;
                }

                if(!number){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '請(qǐng)?zhí)顚?xiě)手機(jī)數(shù)量';
                    return;
                }

                if( ( (number-0) | 0 ) !== number-0 ){      //用戶輸入的購(gòu)買數(shù)量是否為正整數(shù)
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '請(qǐng)輸入正確的購(gòu)買數(shù)量';
                    return;
                }

                if(number > stock){     //當(dāng)前選擇數(shù)量大于庫(kù)存量
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '庫(kù)存不足';
                    return;
                }

                nextBtn.disabled = false;
                nextBtn.innerHTML = '放入購(gòu)物車';
            }
        }
    })()

    colorSelect.onchange = function(){
        mediator.changed(this)
    }

    memorySelect.onchange = function(){
        mediator.changed(this)
    }

    numberInput.oninput = function(){
        mediator.changed(this)
    }

    //以后如果想要再增加選項(xiàng),如手機(jī)CPU之類的,只需在中介者對(duì)象里加上相應(yīng)配置即可。
</script>
</html>
在實(shí)際開(kāi)發(fā)中,還是要注意選擇利弊,中介者對(duì)象因?yàn)榘瑢?duì)象間交互的復(fù)雜性,所以維護(hù)成本可能也會(huì)較高。在實(shí)際開(kāi)發(fā)中,最優(yōu)目的還是要快速完成項(xiàng)目交付,而非過(guò)度設(shè)計(jì)和堆砌模式。有時(shí)對(duì)象間的耦合也是有必要的,只有當(dāng)對(duì)象間復(fù)雜耦合確實(shí)已經(jīng)導(dǎo)致調(diào)用與維護(hù)難以為繼,才考慮用中介者模式。

————————————————
版權(quán)聲明:本文為CSDN博主「一期一會(huì)」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qq_34832846/article/details/85989945

日歷

鏈接

個(gè)人資料

存檔

主站蜘蛛池模板: 国产精品一线天 | 国产成人亚洲欧洲在线 | 国产在线啪 | 国产女主播在线一区二区 | 一级片黄色毛片 | 99视频精品全部免费 在线 | 激情小说图片视频 | www.欧美色图| 色91av| 成人男女啪啪免费观软件 | 国产精品亚洲一区二区在线观看 | 日韩色道| 东北少妇露脸无套对白 | 一本一道久久a久久综合蜜桃 | 小镇姑娘1979版 | 精品视频在线播放 | 日批国产| 免费av播放| 99精品无人区乱码1区2区3区 | 精品久久久久久亚洲精品 | 在线观看少妇 | 欧美在线观看视频一区 | 深夜福利啪啪片 | 99热在线观看 | 美女131爽爽爽做爰视频 | 欧美亚洲色图视频 | 久久午夜免费观看 | 国内精品久久久久久久久久久 | 777777777少妇流水视频 | 亚洲另类激情综合偷自拍图 | 黄色大片在线播放 | 91gao| 亚洲另类春色校园小说 | 欧美三根一起进三p | 国产精品嫩草55av | 67194成人| 婷婷色影院 | 日韩毛片基地 | 日韩资源在线 | 人禽l交视频在线播放 视频 | 国产黄色免费视频 | 日韩一欧美内射在线观看 | 久久99精品久久久久 | 国产a三级久久精品 | 国产小呦泬泬99精品 | 欧美三日本三级少妇三级99观看视频 | 日韩欧美中文字幕一区二区三区 | 色哟哟视频在线 | 亚洲欧美激情另类 | 国产偷国产偷av亚洲清高 | 春日野结衣av | 超碰在线免费 | 亚洲一线二线在线观看 | 日韩精品免费在线 | 99国产精品久久久久 | 97人人超碰国产精品最新 | 成人网在线看 | 国产又爽又黄的激情精品视频 | 欧美在线播放 | 国产成人免费av | 亚洲天堂网站在线 | 91丨九色丨高潮 | 国产精品美女久久久久av爽李琼 | 免费国产黄网站在线观看 | 亚洲精品在线视频观看 | 国产亚洲婷婷香蕉久久精品 | 伊人春色在线 | 国产精品特级毛片一区二区三区 | 亚洲va一区二区 | 久久久久久国产精品免费免费 | 在线中文字幕乱码英文字幕正常 | 亚洲精品黄 | 亚洲欧美日韩在线播放 | 国产乱子伦精品免费无码专区 | 精品毛片一区二区三区 | 草草久久久无码国产专区 | 亚洲毛片一区二区 | 欧美自拍嘿咻内射在线观看 | 蜜臀av性久久久久av蜜臀妖精 | 国产香蕉9 | 在线观看免费日韩av | 色香av| 国产手机av在线 | 女十八毛片aaaaaaa片 | 亚洲日韩欧美综合 | 成熟少妇一区二区三区 | 麻豆视频免费入口 | 天天爽夜夜爽精品视频婷婷 | 天天躁日日躁狠狠的躁天龙影院 | 久久波多野 | 欧美成人另类 | 国产精品久久久久久欧美2021 | 亚洲经典三级 | 日韩欧美aaaa羞羞影院 | 蜜臀久久99静品久久久久久 | 欧美亚色| 国产第一网站 | 日韩精品久久久久久久电影蜜臀 | 国内精品伊人久久久久7777 | 日本乱偷人妻中文字幕在线 | av男人在线 | 日韩成人福利视频 | 久久成人激情 | 国内精品久久久久久久日韩 | 最新国产中文字幕 | 日本伊人色综合网 | 草草影院精品一区二区三区 | 毛片在线免费观看视频 | 婷婷成人丁香五月综合激情 | 秋霞午夜鲁丝一区二区老狼 | 久精品国产欧美亚洲色aⅴ大片 | 免费国产乱理伦片在线观看 | 男女午夜激情视频 | 国产精品推荐 | 久热99| 久久精品国产精品 | 全部av―极品视觉盛宴 | 狠狠干天天 | 国产一区二区三区四 | 欧洲亚洲自拍 | 欧美日韩亚洲高清 | 丰满爆乳无码一区二区三区 | 永久免费d站视频 | 久久久啊啊啊 | 中文字幕二区三区 | 国产精选第一页 | 中文字幕在线播放一区二区 | 又黄又爽又色又刺激的视频 | 蜜桃视频韩日免费播放 | 天天干免费视频 | 色一情一狱一爱一乱 | 免费的黄色毛片 | 大奶子在线| 全黄久久久久a级全毛片 | 伊人久久大香线蕉成人综合网 | 免费成人激情视频 | 国产ts丝袜人妖系列视频 | 天堂网www在线资源 少妇被多人c夜夜爽爽 | 欧美一级特黄视频 | 国产免费无码一区二区三区 | 亚洲精品一区二区久久 | 亚洲啊v | 亚洲色图婷婷 | 国产精品精华液网站 | 日韩欧美猛交xxxxx无码 | 三级在线看中文字幕完整版 | 国产视频第二页 | 国产一区二区在线影院 | 久久99精品久久久久久园产越南 | 日韩在观看线 | 少妇尝试黑人粗吊受不了 | 国产精品夫妇激情 | 国精产品99永久一区一区 | 男女拔萝卜免费观看 | 欧美大成色www永久网站婷 | 亚洲成av人片不卡无码 | 久久亚洲伊人 | 一亚洲乱亚洲乱妇23p | 欧美色妞网 | 成人亚洲综合 | 免费观看黄色网址 | 亚洲中文字幕无码av在线 | 国产精品一在线观看 | 欧美精品91 | 亚洲中文字幕在线第六区 | 国产精品无套 | 肉色欧美久久久久久久免费看 | 国内自拍欧美 | 亚洲二区在线视频 | 在线免费观看福利 | 午夜精品久久ed2kmp4 | 亚洲va国产日韩欧美精品色婷婷 | 一本色道久久综合亚洲精品酒店 | 日韩在线永久免费播放 | 免费一级片 | 蜜桃无码av一区二区 | 国产精品久久久久久无毒偷食禁果 | 又大又粗又爽的少妇免费视频 | 一区二区三区回区在观看免费视频 | 少妇特黄v一区二区三区图片 | 少妇饥渴偷公乱h姚蕊 | 99久久精品国产同性同志 | 午夜男人av | 日韩精品视频免费专区在线播放 | 国产国一国二wwwwww | 亚洲精品欧美二区三区中文字幕 | 日韩美女乱淫免费看视频大黄 | 国产精品嫩草影院入口日本一区二 | 黄色软件网站入口 | 日韩成人在线免费观看 | 少妇做爰免费视频网站裸体艺术 | 国产精品jk白丝蜜臀av小说 | 国产极品一区 | 激情五月中文字幕 | 欧美色综合天天久久综合精品 | 日本一卡精品视频免费 | 成人妇女免费播放久久久 | 亚洲最大成人网色 | 国产成人午夜精华液 | 欧美日韩一二三 | 欧美国产成人精品 | 黑人粗一硬一长一进一爽一a级 | av伦理在线 | 国产又大又长又粗 | 中文在线最新版天堂 | 天天噜噜噜噜噜噜 | 黑人巨大跨种族video | 3p在线播放 | 欧美激情国产在线 | 亚洲欧美在线看 | 国产精品无码无卡无需播放器 | 午夜高清 | 四色永久访问网站 | 无码人妻精品一二三区免费 | 内射中出日韩无国产剧情 | 国产精品2区 | 白白色2012年最新视频 | 野战的情欲hd三级 | 最新黄网| 成年人国产 | 亚洲色成人网站www永久四虎 | 美女初尝巨物嗷嗷叫自拍视频 | 大伊人狠狠躁夜夜躁av一区 | 亚洲九九视频 | 久久夜靖品2区 | 精品一区二区三区免费看 | 免费无码肉片在线观看 | 黄色一级视频片 | 欧美片一区二区 | av免费观 | 中日躁夜夜躁 | 国产乱子伦精品免费无码专区 | 午夜剧场91 | 无尺码精品产品网站 | 久插视频 | 在线观看免费日韩av | 一级看片免费视频囗交 | 国产精品入口a级 | 夜夜夜夜猛噜噜噜噜噜婷婷 | 又大又粗弄得我出好多水 | 国产69久久精品成人看 | 免费一级淫片aaa片毛片a级 | 欧美粗大猛烈 | 国产精品亚洲精品一区二区三区 | 中文成人在线 | 风间由美一区二区av101 | 欧美一级做性受免费大片免费 | 日韩资源网 | 可以免费看的av | 欧美不卡 | 不卡的毛片 | 欧美老妇与禽交 | 日日噜噜噜夜夜爽爽狠狠视频 | 搞逼综合网 | 日本丶国产丶欧美色综合 | 伊人婷婷色 | 中出少妇| 久久久精品视频网站 | 国产乱淫精品一区二区三区毛片 | 美女看片| 国产熟妇与子伦hd | 三上悠亚人妻中文字幕在线 | 深夜男女福利18免费软件 | 久久久精品国产99久久精品麻追 | 亚洲在线成人 | 国产揄拍国内精品对白 | 一本大道加勒比免费视频 | 欧美成人h版 | www国产成人免费观看视频,深夜成人网 | 欧美aⅴ| 久久久天天 | www.久操| 亚洲精品久久久久久 | 亚洲一区二区在线看 | 久久久网站 | 草久久久 | 日本丶国产丶欧美色综合 | 欧美一区二区三区久久久 | 131mm极品尤物美女无胸罩 | 亚洲欧洲无码av电影在线观看 | 午夜剧场免费在线观看 | 成人在线视频网址 | 中文字幕人妻互换av久久 | 国产福利片在线观看 | 久久久久久91 | 欧美成人性生活片 | 在线观看免费视频黄 | 99热这里只有精品在线观看 | 一区二区三区精彩视频 | 日产牛牛在线 | 亚洲熟女综合一区二区三区 | 真实乱偷全部视频 | 天天色成人网 | 男女做www免费高清视频网站 | 亚洲爆乳无码精品aaa片蜜桃 | 精品久久人人爽天天玩人人妻 | 成人三级a做爰视频哪里看 成人三级k8经典网 成人三级黄色 | 亚洲免费av一区 | 欧美日韩亚洲精品瑜伽裤 | 婷婷综合久久中文字幕蜜桃三电影 | 五月天亚洲综合 | 91dizhi永久地址最新 | 日韩人妻精品一区二区三区视频 | 性做久久久久久久免费看 | aa免费视频 | 国产精品免费视频一区二区三区 | 亚洲精品一区二区久 | 香蕉二区 | 久久调教视频 | 色小说在线| 拔擦8x成人一区二区三区 | 欧美视频在线观看,亚洲欧 欧美视频在线观看视频 | 69久久夜色精品国产69乱青草 | 一本色道久久88综合亚洲精品ⅰ | 久久久无码一区二区三区 | 成人妖精视频yjsp地址 | 少妇做爰免费视频网站图片 | 特黄 做受又硬又粗又大视频 | 欧美一级淫片aaaaaaa喷水 | 欧美在线视频二区 | 一区二区小说 | 久久久中日ab精品综合 | 久久婷婷国产色一区二区三区 | 狂野欧美性猛交免费视频 | 亚洲色欲在线播放一区二区三区 | 精品欧美一区二区三区免费观看 | 亚洲性一区二区 | 99国产精品视频免费观看一公开 | 放荡艳妇的疯狂呻吟中文视频 | 中文字幕高清免费日韩视频在线 | 日韩伦理在线视频 | 好爽又高潮了毛片免费下载 | 美一女一无一伦一性一交 | 潮喷无码正在播放 | 欧美黑人性暴力猛交喷水 | 4438x成人网最大色成网站 | 精品国产欧美一区二区三区不卡 | 欧美一区综合 | 天天爱夜夜爽 | 91精彩视频在线观看 | 曰批女人视频在线观看 | 亚洲无在线观看 | 国产亚洲一卡2卡3卡4卡网站 | 人妻教师痴汉电车波多野结衣 | 欧美 国产 亚洲 卡通 综合 | 99国产精品人妻噜啊噜 | 成人欧美一区二区三区黑人一 | 亚洲国产精品综合 | 蜜桃av一区二区三区 | 所有明星裸露影片合集在线播放 | jizz免费看 | 亚洲精品网站在线观看你懂的 | 97久久人人超碰超碰窝窝 | 欧美三级午夜理伦三级 | 人妻人人做人碰人人添 | 精品少妇一区 | 综合一区在线 | 日韩av影院在线观看 | 日日干天天操 | 日本免费在线 | 久国久产久精永久网页 | 女性女同性aⅴ免费观女性恋 | 国产成人精品123区免费视频 | 婷婷四房综合激情五月 | 揉捏奶头高潮呻吟视频 | 免费无码黄网站在线观看 | 男人疯狂高潮呻吟视频 | 天海翼精品久久中文字幕 | 亚洲精品无码一区二区 | 国产一级片免费看 | 1000部免费毛片在线播放 | www.av在线视频 | 啪啪免费网站 | 一二三四观看视频社区在线 | 色偷偷一区二区无码视频 | 韩国成人在线 | 大陆熟妇丰满多毛xxxⅹ | 九色网战 | 国产农村妇女毛片精品久久 | 五月婷婷狠狠爱 | 美女黄免费| 亚洲另类无码专区首页 | 国产又黄又猛的视频 | 免费入口在线观看 | 久久91精品国产91久久跳 | 黄色视屏网站 | 男女啪动最猛动态图 | 女人脱了内裤趴开腿让男躁 | 丝袜美腿av在线 | 国产色视频一区二区三区 | 国内自拍视频在线播放 | 国产黄色www | 久久99青青精品免费观看 | 国产做爰视频免费播放 | 日韩在线观看视频一区二区 | 国产超碰人人做人人爱 | 久久久免费视频观看 | a级大片在线观看 | 国产又黄又大又粗视频 | 一道本不卡视频 | 免费在线观看成人av | 成人ay| 精品国产一区二区三区噜噜噜 | 成人羞羞国产免费软件 | 日韩经典午夜福利发布 | 色阁av| 最爽free性欧美人妖 | 秋霞一级视频 | hd国产人妖ts另类视频 | 国产真实乱人偷精品 | 99久久免费国产精精品 | 成人区人妻精品一熟女 | 91精品国产91久久久久 | 国产在线综合网 | 五月天六月婷婷 | 久久视频这里有久久精品视频11 | 牛av在线| 欧美日韩水蜜桃 | 欧美v亚洲v日韩v最新在线 | 人妻精品久久无码专区精东影业 | 午夜午夜精品一区二区三区文 | 精品一卡二卡三卡 | 久久成人av | 中文字幕av日韩精品一区二区 | 成人羞羞在线观看网站 | 日日摸夜夜添夜夜躁好吊 | 国产欧美日韩综合 | 欧美成人三级精品 | 国产午夜久久 | 在线精品亚洲一区二区 | 国产精品一区一区三区 | 日韩成人在线网站 | 狠狠色噜噜狠狠色综合久 | 日日骚影院 | 人摸人人人澡人人超碰97 | 日韩久久高清 | 久久久久99精品成人片牛牛影视 | 午夜精品射精入后重之免费观看 | 玩弄放荡人妻一区二区三区 | 精品国产免费一区二区三区 | 牛牛精品一区二区 | 九九热精品视频在线 | 国产欧美一区二区白浆黑人 | 女人毛片a毛片久久人人 | 亚洲天堂成人 | 久久久免费看片 | 国产 浪潮av性色四虎 | 久久疯狂做爰流白浆xxxⅹ | 91五月婷蜜桃综合 | 国产精品香蕉500g | 日韩精品无码视频一区二区蜜桃 | 成人午夜网 | 欧美人与拘性视交免费看 | 午夜视频一区 | 亚洲情趣 | 99国内精品久久久久久久软件 | 二区在线播放 | 国产黄色一区二区三区 | 亚洲精品自拍偷拍 | 国产又爽又猛又粗的视频a片 | 精精国产xxxx视频在线 | 免费成人黄色 | 久久久午夜视频 | 久久免费在线视频 | 日本香蕉网 | 国产一级片久久 | √最新版天堂资源在线 | 中国老熟妇自拍hd发布 | 免费看av在线 | 少妇性饥渴无码a区免费 | 国产极品探花一区二区三区 | 日韩欧美在线不卡 | 亚洲v欧美v日韩v国产v | 国产精品初高中害羞小美女文 | 色综合久| 日本欧美大码aⅴ在线播放 中文人妻无码一区二区三区在线 | 男女啪啪做爰高潮免费网站 | 久久久久se | 69视频免费观看 | 啪啪在线视频 | 国产成人精品网 | 日韩一级免费片 | 最新天堂资源在线 | 一本一道久久a久久综合精品 | 4438xx亚洲最大五色丁香一 | 91社区福利| 91麻豆精产国品一二区灌醉 | 懂色av懂色aⅴ精彩av | 国产精品色婷婷久久99精品 | 99久久国产宗和精品1上映 | 麻豆传媒网站在线观看 | 国产91区 | 国产区在线 | 亚洲天堂一区二区三区 | 国精产品一区二区 | 无码人妻精品一区二区三区99不卡 | 久久久成人精品 | 久热国产精品视频一区二区三区 | 亚洲免费人成 | 久久久久久久极品内射 | 国产女无套免费网在线观看 | 亚洲国产第一 | 日本视频网站在线观看 | 国产黄色在线观看 | 在线播放免费播放av片 | 国产三级国产精品国产普男人 | 中文字幕一区二区三区免费视频 | www国产成人免费观看视频 | 四虎在线免费播放 | 又大又粗又爽免费视频a片 日本丰满熟妇videossex8k | 一本色道久久综合狠狠躁邻居 | 美女隐私免费观看视频 | 久热国产精品视频 | 中文字幕永久免费视频 | 成年男女免费视频网站 | 在线成人一区二区 | 免费观看黄色av | 欧美1级片 | 女人下边被添全过视频 | 久久草在线视频 | 羽月希奶水一区二区三区 | 热久久这里只有精品 | 九色精品在线 | av色国产色拍 | 欧美在线综合 | 伊人久久一区 | 国产精品久久久毛片 | 意大利做爰露性器50部 | 岛国av片在线观看 | 最新国产精品久久精品 | 日本www免费| 青草青在线视频在线观看 | 亚洲一区二区三区四区五区六区 | 亚洲 欧美日韩 综合 国产 | 国产后进极品圆润翘臀在后面玩 | 日韩视频一区在线观看 | 伊人五月综合 | 国产一级做a爰片久久毛片99 | 国产午夜精品免费一区二区三区视频 | 97夜夜澡人人双人人人喊 | 中文字幕精品国产 | 久久99国产精一区二区三区 | 久热超碰| 国产一级片中文字幕 | 婷婷久久综合九色综合 | 91九色视频在线 | 久久久久中文字幕亚洲精品 | 最新日韩精品中文字幕 | 国产乱子夫妻xx黑人xyx真爽 | 日韩免费av在线 | 污网站免费观看 | www国产99| 91精品国产综合久久久久久蜜臀 | 国产精品18久久久久久首页狼 | 91蜜桃臀久久一区二区 | 日本视频在线免费观看 | 凹凸日日摸日日碰夜夜爽孕妇 | 色爽黄| 俺去俺来也www色官网 | 久久久噜噜噜www成人网 | www亚洲一区二区三区 | 国产91在线播放 | 免费毛片一区二区三区亚女同 | 亚洲欧美v国产蜜芽tv | 国自产拍偷拍精品啪啪模特 | 无码专区一va亚洲v专区在线 | 国产精品成人免费视频网站 | 国产精品欧美激情在线 | 爱情岛论坛首页永久入口 | 国产又粗又硬又猛的免费视频 | 中文字幕乱码中文乱码51精品 | 久久在线视频 | 日本精品毛片一区视频播 | 69性影院 | 国产中文在线观看 | 天天插伊人 | 成人午夜一区二区 | 日韩精品一区二区三区中文字幕 | 可以免费看的av | 免费看三级黄色片 | 国产超碰自拍 | 免费观看又污又黄的网站 | 欧美不卡| 精品国产亚洲一区二区三区 | 欧美乱欲视频 | 久久品道一品道久久精品 | 男人用嘴添女人私密视频 | 日韩av地址| 国产午夜在线播放 | 激情视频国产 | 午夜免费 | 午夜视频免费看 | av影院在线 | 教师夫妇交换刺激做爰小说 | 鲁一鲁av2019在线 | 国产亚洲精久久久久久无码 | 一级二级av | 日本aaaa级毛片在线看 | 丁香社区五月天 | 亚洲熟妇无码八av在线播放 | 狠狠色狠狠色综合久久一 | 久在线播放 | 亚洲成人网络 | 日韩乱码在线 | 欧美日韩精品人妻狠狠躁免费视频 | 中文字幕无码不卡一区二区三区 | 中国黄色三级 | 国产精品丝袜久久久久久消防器材 | 中文字幕乱码在线观看 | 欧美日韩三级在线 | 亚洲热妇无码av在线播放 | 亚洲 美腿 欧美 偷拍 | 亚洲欧美日韩成人高清在线一区 | 精品国产免费第一区二区三区 | 两人做人爱费视频午夜 |