欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

首頁

原生代碼之實現輪播圖(左右翻頁,定時翻頁,指定翻頁)

前端達人

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



可以讓所有圖片都float:left,用一個大盒子裝進所有圖片,在用一個小盒子顯示圖片,溢出圖片就hidden,之后以每張圖片的寬度來scrollLeft.

可以給每張圖片一個name/id,用循環遍歷所有圖片

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



在這里,我將用第二種方法,因為它很直觀明了,我要哪張圖片我就調哪張圖片。

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

<!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);
}
之后我們來看重中之重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張圖片存入一個數組
var arr = [oImg1, oImg2, oImg3, oImg4, oImg5];

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

}

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

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

        //點一個數字該數字背景顏色變化其余的不變
        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; 

        //數字隨圖片變化
        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");
    // 數字跟著圖片一起變
    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"
    // 向右移動圖片
    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]; 
            }
        }
    } 
    // 輪到最后一張圖片時返回第一張
    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");
    // 圖片移動時數字也跟著變
    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"
    // 向左移動圖片 

    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];
            }
        }
    }
    // 輪到第一張圖片時返回最后一張
    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部分我寫的很詳細,仔細看的話是可以看懂的,主要分3個重要部分:

用src來調用每張圖片并給每張圖片一個name,這樣方便后面的重復使用
為下方的數字按鈕匹配圖片,點擊1跳到第1張圖片,點擊2跳到第2張圖片…因為我把所有的圖片都存在了一個數組里,所以在匹配的時候要注意數組0位置才是數字1指定的圖片
可以來回翻頁,當到達最后一張圖片時,我再點擊下一張圖片又能返回到第一張圖片了,亦或者當我點擊到第一張圖片時,再上一張圖片又回到第五張圖片了
效果如下:

點擊查看原圖

點擊查看原圖

大家有問題可以在下方評論哦,看到了會及時回復噠!


————————————————
版權聲明:本文為CSDN博主「weixin_43964414」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/weixin_43964414/article/details/104844041

CSS學習筆記(一)——CSS基礎&選擇器合集

前端達人

CSS介紹

整理完了HTML的筆記,接下來就是CSS了。我們可以使用HTML構建穩定的結構基礎,而頁面的風格樣式控制則交給CSS來完成。網頁的樣式包括各種元素的顏色、大小、線形、間距等等,這對于設計或維護一個數據較多的網站來說,工作量是巨大的。好在可以使用CSS來控制這些樣式,這將大大提高網頁設計和維護的效率,并且使網頁的整體風格很容易做到統一。



CSS概述

CSS是英文Cascading Style Sheet的縮寫,中文譯為層疊樣式表,也有人翻譯為級聯樣式表,簡稱樣式表。它是一種用來定義網頁外觀樣式的技術,在網頁中引入CSS規則,可以快捷地對頁面進行布局設計,可以的控制HTML標記對象的寬度、高度、位置、字體、背景等外觀效果。

CSS是一種標識性語言,不僅可以有效的控制網頁的樣式,更重要的是實現了網頁內容與樣式的分離,并允許將CSS規則單獨存放于一個文檔中, CSS文件的擴展名為“css”。



CSS3

CSS3標準早在1995年就開始制訂, 2001年提上W3C研究議程,但是,10年來CSS3可以說是基本上沒有什么很大的變化,一直到2011年6月才發布了全新版本的CSS3,目前,許多瀏覽器都廣泛支持CSS3。

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



CSS的基本用法

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

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

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

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

屬性n:; }

20200313203814532.png

CSS屬性

CSS的屬性按照相關功能進行了分組,包含了字體、文本、背景、列表、動畫等多個分組,這些屬性的具體使用方法和示例將會在后續中提到。



在HTML文檔中使用CSS的方法

根據CSS在HTML文檔中的使用方法和作用范圍不同,CSS樣式表的使用方法分為三大類:行內樣式、內部樣式表和外部樣式表,而外部樣式表又可分為鏈入外部樣式表和導入外部樣式表。本節我們從四個分類來認識在HTML中使用CSS的方法。



行內樣式

內部樣式表

外部樣式表

鏈入外部樣式表

導入外部樣式表

行內樣式

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

嚴格意義上行內樣式是一種不嚴謹的使用方式,它不需要選擇器,這種方式下CSS代碼和HTML代碼混合在一起,因此不推薦使用行內樣式。行內樣式的基本語法如下:

  <標記 style="屬性:值; 屬性:值; …">


內部樣式表

當單個文檔需要特殊的樣式時,應該使用內部樣式表。內部樣式表是將樣式放在頁面的head區里,這樣定義的樣式就應用到本頁面中了,內部樣式表使用style標記進行聲明,是較為常用的一種使用方法。其基本語法如下:

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


style標記定義HTML文檔的樣式信息,規定的是 HTML 元素如何在瀏覽器中呈現,其中type用來指定元素中的內容類型。

鏈入外部樣式表
當為了保證站點的風格統一,或當定義樣式內容較多,且需要多個頁面共享樣式時,可使用外部樣式表。鏈入外部樣式表是把樣式表保存為一個外部樣式表文件,然后在頁面中用link標記鏈接到這個樣式表文件,link標記放在頁面的head區內。其基本語法為:

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

導入外部樣式表
導入外部樣式表是指在HTML文件頭部的style元素里導入一個外部樣式表,導入外部樣式表采用import方式。導入外部樣式表和鏈入樣式表的方法很相似,但導入外部樣式表的樣式實質上相當于存在網頁內部。其基本語法為:
————————————————
版權聲明:本文為CSDN博主「狗狗狗狗狗樂啊」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接: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:用來定義鏈接的文件與HTML之間的關系, rel="stylesheet"是指在頁面中使用這個外部的樣式表。
type屬性用于指定文件類型,“text/css”指文件的類型是樣式表文本。

導入外部樣式表
導入外部樣式表是指在HTML文件頭部的style元素里導入一個外部樣式表,導入外部樣式表采用import方式。導入外部樣式表和鏈入樣式表的方法很相似,但導入外部樣式表的樣式實質上相當于存在網頁內部。其基本語法為:

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

結語

記錄倉促,遺漏之處日后補充,如有錯誤或不足之處,還望指正

————————————————
版權聲明:本文為CSDN博主「狗狗狗狗狗樂啊」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/weixin_44122062/article/details/104848745


Vue移動端項目優化過程

前端達人

文章目錄

前言

一、白屏時間過長分析

二、針對性優化

針對animate.css

針對mint-ui的優化

針對圖片的優化

三、webpack打包優化與分析

webpack-bundle-analyzer打包分析

打包優化

四、優化后線上測試速度提升

五、優化總結

前言

最近在做項目時,測試提出了在App端的H5項目入口加載時間過長,白屏等待過久,需要優化的問題,于是著手開始分析:



項目技術棧:基于Vue全家桶做的一個移動端類似WebApp的項目,使用到的第三方庫有:mint-ui, echarts,momentjs。

項目痛點:白屏時間過長

一、白屏時間過長分析

 通過訪問線上環境,結合Chrome devtool中Network和Performance功能可以具體分析整個白屏的耗時主要在哪一塊兒

Network耗時記錄:

點擊查看原圖

Performance性能面板

點擊查看原圖

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

安裝babel-plugin-component, 若已安裝可忽略
修改 .babelrc (重點在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)
/* 或寫為
 * 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組件庫



針對圖片的優化

圖片小圖通過webpack可以直接轉為base64,而大圖可以通過壓縮或者換格式的方式來優化,這里推薦一個好用的圖片壓縮工具,工具:tinyPNG,如下是圖片轉換前后對比


點擊查看原圖


三、webpack打包優化與分析

在完成了上述優化以后,下面著重關注下webpack打包后生成的文件大小,看還有沒有可以優化的余地。由于項目中已經通過路由按需加載的方式來做了功能拆分,所以通過webpack打包后生成了很多分散的js文件,如下圖:


20200313153537713.png

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

webpack-bundle-analyzer打包分析

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

點擊查看原圖



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

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

運行npm run build,(webpack默認會在打包完成時生成分析圖)



版權聲明:本文為CSDN博主「Sophie_U」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/Sophie_U/article/details/104840167

數據類型的轉化(JavaScript)

前端達人

數據類型的轉化(JavaScript)—自動轉化和強制轉化

這一周,我來分享一下在JavaScript中的數據類型轉化。

首先我們要知道在JavaScript中的數據類型有什么?在這里我就不詳細介紹了,幫你總結好了。

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

在 JavaScript 程序中 , 變量中存儲的數據類型沒有限制,也就是在變量中可以存儲任何符合JavaScript語法規范的數據類型。但是在 JavaScript 程序的執行過程中,往往需要變量中存儲的數值是某種特定的數據類型,別的數據類型不行,此時就需要進行數據類型的轉化。
————————————————
版權聲明:本文為CSDN博主「什什么都繪」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qq_39406353/article/details/104864224上面就是數據類型的五種形式。那么它是如何轉化呢?聽我詳細給你講解。

在 JavaScript 程序中 , 變量中存儲的數據類型沒有限制,也就是在變量中可以存儲任何符合JavaScript語法規范的數據類型。但是在 JavaScript 程序的執行過程中,往往需要變量中存儲的數值是某種特定的數據類型,別的數據類型不行,此時就需要進行數據類型的轉化。
JavaScript中數據類型的轉化,分為自動轉化和強制轉化:
        自動轉化是計算機程序,自動完成的轉化。
        強制轉化是程序員,強行完成的轉化
1.布爾類型的自動轉化:
 在 執行 if 判斷時 ,其他數據類型會自動轉化為布爾類型
         其他類型轉化為布爾類型的原則
   0   ''   undefined   null  NaN  這五種情況轉化為false
          特別提醒 0.0  0.00000  都算是0 
 其他的所有都會轉化為 true
2.字符串的自動轉化:
  執行字符串拼接, +號的兩側,應該都是字符串類型,會將其他數據類型轉化為字符串類型
        轉化原則:
            //基本數據類型 / 簡單數據類型------將數據數值直接轉化為字符串 , 然后執行拼接操作
         布爾值 true  ---> 字符串 'true'
         布爾值 false ---> 字符串 'fasle'
         undefined ---> 字符串 'undefined'
         unll ---> 字符串 'null'
         數值 ---> 將數值解析轉化為'對應的純數字的字符串'
            // 引用數據類型 / 復雜數據類型
         數組 ---> 將 [] 中的內容,轉化為字符串的形式,執行拼接操作
         對象 ---> 任何對象,任何內容,都會轉化為 [object Object] 固定的內容形式,執行拼接操作
         函數 ---> 將所有的程序代碼,轉化為字符串,執行拼接操作
3.數值的自動轉化:
在執行運算時,會觸發數據類型的自動轉化。
 轉化原則:
    布爾類型 : true  --->  1         
               false --->  0
    undefined : 轉化為 NaN 
    null : 轉化為 0
    字符串 : 
        如果整個字符串,是純數字字符串,或者符合科學計數法 ---> 轉化為對應的數值
       如果字符串內有不符合數字規范的內容 ---> 轉化為 NaN 
    數組,對象,函數:
      如果是+加號執行的是字符串拼接效果,按照這些數據類型轉化為字符串的原則來轉化
      如果是其他形式的運算 執行結果都是 NaN
4.布爾類型的強制轉化:
 
  布爾類型的強制轉化就是使用JavaScript中定義好的 方法/函數 Boolean( 數據/變量 )
  Boolean() 這個方法 不會改變 變量中存儲的原始數值
   轉化原則與自動轉化原則相同
     0   ''   undefined  null  NaN --------> false 
     其他數據,都轉化為true
5.字符串類型的強制轉化:
  
 方法1,變量.toString(進制類型)
         將數值強制轉化為字符串,并且可以設定轉化的進制,.toString() 之前,不能直接寫數值,必須是寫成變量的形式
         進制常用的數值是 2 8 16 ,可以設定的范圍是 2 - 36 進制  
 方法2,String( 變量 / 數據 )
         將變量或者數據,轉化為字符串,原則按照自動轉化的原則來執行,不會改變變量中存儲的原始數值
         但是在字符串拼接時,會將其他數據類型自動轉化為字符串
 6.數字類型的強制轉化:
 
方法1 , Number(變量/數值) 
         console.log( Number(true) );   // 1
         console.log( Number(false) );  // 0
         console.log( Number(null) );   // 0
         console.log( Number(undefined) );   // NaN
         console.log( Number('100') );       // 對應的數值
         console.log( Number('100.123') );   // 對應的數值
         console.log( Number('2e4') );       // 對應的數值
         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
 將其他類型強制轉化為數值類型,轉化原則與自動轉化選擇相同

 方法2, parseInt(變量 / 數據)   是獲取變量或者數據的整數部分
         從數據的 左側起 解析獲取 整數內容 
         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')} ) ); 

         數組執行,是獲取 數值部分 也就是 沒有 []的部分
         1,2,3,4,5  整數部分是 1  1之后是逗號 逗號不是整數,之后的部分也就不算整數
         獲取第一個數值的整數部分,如果有就獲取,如果沒有,結果是NaN
         console.log( parseInt( [1,2,3,4,5] ) );        // 結果是 1                      
         console.log( parseInt( [null,2,3,4,5] ) );     // 結果是 NaN 

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

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

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

 方法3 , parseFloat( 變量 / 數值 )
         獲取浮點數部分
         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')} ) );         
        //數值, 整數,浮點數,都會完整獲取
         console.log( parseFloat(100) );            //100
         console.log( parseFloat(100.1234) );       //100.1234
         console.log( parseFloat(1.234567e3) );     //1234.567

         // 關鍵是字符串
         // 從字符串的左側起 解析 符合浮點數的部分
         console.log( parseFloat( '100' ) );         // 與數字的結果相同 
         console.log( parseFloat( '0.0123' ) );      // 與數字的結果相同 

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

jQuery超詳細總結

前端達人

jQuery超詳細總結

文章目錄

jQuery超詳細總結

一 選擇器

特殊選擇器

二 篩選器

用在 jQuery 選擇的元素后面

都是方法,對選擇出來的元素進行二次篩選

三 文本操作

總結

四 元素類名操作

五 元素屬性操作

在 H5 的標準下, 給了一個定義, 當你需要寫自定義屬性的時候,最好寫成 data-xxx="值",當大家看到 data-xxx 的時候, 就知道這是一個自定義屬性

六 元素樣式操作

七 綁定事件

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

    八 節點操作
  7. 創建節點
  8. 插入節點
  9. 刪除節點
  10. 替換節點
  11. 克隆節點

    九 獲取元素尺寸

    尺寸: 元素的占地面積

    三套方法, 四種使用方式

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

    十一 獲取卷去的尺寸(頁面滾動條)

    scrollTop()

    scrollLeft()

    十二 jQuery中的函數

    ready() 事件

    each() 方法

    十三 jQuery中的動畫

    讓元素出現不同的移動, 改變

    標準動畫

    折疊動畫

    漸隱漸顯動畫

    綜合動畫

    停止動畫

    十四 jQuery發送ajax請求

    jQuery 里面幫我們封裝好了幾個方法

    專門用來發送 ajax 請求的

    jQuery 發送一個 GET 請求

    jQuery 發送一個 POST 請求

    jQuery 的 $.ajax 方法

    jQuery 的 ajax 全局鉤子函數

    十五 jQuery 發送一個 jsonp 請求

    十六 jQuery 的多庫并存機制

    十七 jQuery 的插件擴展機制

    十八 jQuery 的拷貝對象問題

    十九 jQuery 的插件

    jQuery 是一個前端庫,也是一個方法庫

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

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

    jQuery 之所以好用,很多人愿意使用,是因為他的幾個優點太強大了

    優質的選擇器和篩選器

    好用的隱式迭代

    強大的鏈式編程

    因為這些東西的出現,很多時候我們要做的事情被 “一行代碼解決”

    接下來我們就來認識一下 jQuery

    一 選擇器

    $()

    css怎么獲取元素這里就怎么寫

    獲取的是一組元素,當里面是id時,這組元素只有一個內容

    特殊選擇器

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

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

    1

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

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

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

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

    二 篩選器

    用在 jQuery 選擇的元素后面

    都是方法,對選擇出來的元素進行二次篩選

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

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

    1

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

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

    next() 篩選出來 元素 的下一個 兄弟元素

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

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

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

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

    1

    prev() 篩選出來 元素 的上一個 兄弟元素

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

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

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

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

    1

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

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

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

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

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

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



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



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

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



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

    find(選擇器)



    篩選 一個元素后代中的 符合選擇器的元素

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

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



    索引位置是指 是該父元素下的第幾個元素 拿到的是 數字

    三 文本操作

    html() 一個讀寫的屬性

    html()不傳遞 參數的時候 就是獲取元素內部的超文本內容

    html(參數)傳遞 參數的時候 就是設置元素內部的超文本內容

    text() 一個讀寫的屬性

    text()不傳遞 參數的時候 就是獲取元素內部的超文本內容

    text(參數)傳遞 參數的時候 就是設置元素內部的超文本內容

    val() 一個讀寫的屬性 操作 input 標簽

    val()不傳遞參數的時候, 就是獲取標簽的 value 值

    val(參數)傳遞一個參數的時候, 就是設置標簽的 value 值

    總結

    獲取

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

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

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

    設置

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

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

    val() 給元素集合內所有元素設置 value 值

    四 元素類名操作

    addClass() 添加類名

    執行這個方法會給元素集合里面所有的元素添加上固定的類名

    如果有就不添加, 不存在這個類名時添加

    removeClass() 移除類名

    執行這個方法刪除 元素集合里面所有元素 的指定類名

    toggleClass()切換類名

    執行這個方法會給元素集合里面的所有元素切換類名

    本身存在這個類名, 刪除類名

    本身不存在這個類名, 添加類名

    hasClass() 判斷有沒有某一個類名

    返回的時一個布爾值, 表示這個類名是否存在

    五 元素屬性操作

    在 H5 的標準下, 給了一個定義, 當你需要寫自定義屬性的時候,最好寫成 data-xxx=“值”,當大家看到 data-xxx 的時候, 就知道這是一個自定義屬性

    attr() 和 removeAttr()



    attr: attribute 屬性

    attr()

    是一個讀寫的方法

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

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

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

    attr 這套方法的注意:

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

    不管你設置的是什么數據類型, 都會給你變成字符串

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

    prop() 和 removeProp()



    prop: property 屬性

    prop()

    一個讀寫的方法

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

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

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

    prop 這套方法的注意:

    非原生屬性, 不會顯示在標簽上, 但是你可以獲取使用

    你存儲的是什么數據類型, 獲取的時候就是什么數據類型

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

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

    data() 和 removeData()



    data: data 數據

    data()

    一個讀寫的方法

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

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

    removeData() 專門用來刪除數據的

    data 這套方法的注意:

    和元素的原生屬性沒有關系, 可以設置 id, 但是和元素的 id 沒關系

    就是在元素身上給你開辟一個地方, 存儲一些數據

    你設置的是什么數據類型, 拿到的就是什么數據類型

    removeData 刪除 data 設置的屬性

    data() 方法也能讀取寫在標簽上的 H5 標準自定義屬性

    三個方法存儲內容

    attr 設置的自定義屬性存儲在標簽身上

    prop 設置的自定義屬性存儲在元素對象里面

    data 設置的自定義屬性存儲在元素對象里面單獨開辟的一個對象

    六 元素樣式操作

    css()

    一個讀寫的屬性

    不同操作需要 傳遞 不同的參數

    css('樣式名稱')

    css('width')

    獲取元素的樣式值, 不管是行內樣式還是非行內樣式都能獲取

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

    css('width', '200px')

    設置元素的樣式值, 元素集合能獲取多少個元素就置多少個元素

    設置的時候, 所有的單位都可以不寫, 默認添加 px為單位

    css(對象)

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

    批量設置 css 樣式

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

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

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

    不同操作 傳遞 不同參數

    on方法的各種參數描述

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

    給元素集合內所有的元素綁定一個事件

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

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

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

        // })



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

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

        // 給所有的 li 標簽設置事件委托, 委托給了 ul

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

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

        // })



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

    給每一個元素綁定一個事件, 復雜數據類型是發事件時候傳遞的參數

     //   每一個 li 點擊的時候, 都能得到中間那個對象

        //   就是事件對象了面

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

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

        //   console.log(e)

        // })

    1

    2

    3

    4

    5

    6

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

    做一個事件委托的形式, 第三個參數位置的數據

    是觸發事件的時候, 可以傳遞進去的數據

    on(對象)

    給一個元素綁定多個事件的方式 不能傳參數

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

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

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

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

        // })


  15. one() 方法是專門用來綁定一個只能執行一次的方法

    傳遞的參數個數和意義 于 on 方法一摸一樣

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

    使用方式

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

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

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

    不通過點擊, 通過代碼把事件觸發了

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

    jQuery 里面唯一一個很特殊的事件函數

    表示一個鼠標懸停動作

    只有一個使用方式

    hover(鼠標移入的時候觸發, 鼠標移出的時候觸發)

     // hover 事件

        //   如果你只傳遞一個函數, 那么移入移出都觸發這一個函數

        $('ul')

          .hover(

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

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

          )


  19. 常用事件

    jQuery 把一些常用事件直接做成了函數



    click()

    mouseover()

    . . . . . .

    直接使用就可以了



    使用 click 舉一個例子



    click(事件處理函數)

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

    參數: 觸發事件的時候傳遞到事件里面的數據

        // 常用事件

        // 給 ul 綁定了一個點擊事件

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

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

        //   console.log(e)

        // })

    1

    2

    3

    4

    5

    6

    八 節點操作
  20. 創建節點

    對應原生 js 里面的 createElement()

    $('html 格式的文本')

    // 創建一個 div 元素

        console.log($('<div>我是一個創建出來的節點</div>'))

    1

    2
  21. 插入節點

    對應原生 js 里面的 appendChild()

    內部插入

    放在頁面元素的子元素位置, 放在末尾

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

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

    放在頁面元素的子元素位置, 放在最前

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

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

    外部插入

    放在頁面元素的下一個兄弟元素位置

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

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

    放在頁面元素的上一個兄弟元素位置

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

    要插入的元素.insertBefore(頁面元素)
  22. 刪除節點

    對應原生 js 里面的 removeChild()

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

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

    沒有刪除某一個子節點的方法,因為 jQuery 的選擇器的強大,直接找到要刪除的節點, remove()
  23. 替換節點

    對應原生 js 里面的 replaceChild()

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

    替換元素.replaceAll(頁面元素)
  24. 克隆節點

    對應原生 js 里面的 cloneNode()

    元素.clone()

    兩個參數的值為 true或false

    第一個參數: 自己的事件是否克隆

    第二個參數: 子節點的事件是否克隆

    如果第一個參數的值為false,那么第二個參數不起作用,沒有意義。

    不管你是否傳遞參數, 都會把所有后代元素都克隆下來

    元素 + 文本內容 + 屬性 + 行內樣式

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

    九 獲取元素尺寸

    尺寸: 元素的占地面積

    width 和 height

    padding

    border

    margin

    三套方法, 四種使用方式

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

    width() 和 height()

    獲取元素的 內容 區域的尺寸

    innerWidth() 和 innerHeight()

    獲取元素的 內容 + padding 區域的尺寸

    outerWidth() 和 outerHeight()

    獲取元素的 內容 + padding + border 區域的尺寸

    outerWidth(true) 和 outerHeight(true)

    獲取元素的 內容 + padding + border + margin 區域的尺寸

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

    offset: 偏移量

    是一個讀寫的屬性

    讀取

    不傳遞參數就是讀取

    讀到的元素相對于頁面的位置關系

    返回值是一個對象 { left: xxx, top: xxx }

    書寫

    傳遞一個對象就是寫入 { left: xxx, top: xxx }

    注意: 絕對寫入

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

    postition: 定位

    只讀的方法

    讀取:

    元素相對于定位父級的位置關系

    得到的也是一個對象 { left: xxx, top: xxx }

    如果你寫的是 right 或者 bottom, 會自動計算成 left 和 top 值給你

    十一 獲取卷去的尺寸(頁面滾動條)

    scrollTop()

    原生 js 里面 document.documentElement.scrollTop

    讀寫的方法

    不傳遞參數的時候就是獲取卷去的高度

    傳遞一個參數就是設置卷去的高度

    scrollLeft()

    原生 js 里面 document.documentElement.scrollLeft

    讀寫的方法

    不傳遞參數的時候就是獲取卷去的寬度

    傳遞一個參數的時候就是設置卷去的寬度

    十二 jQuery中的函數

    ready() 事件

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

    window.onload 會在頁面所有資源加載行

    ready() 會在頁面 html 結構加載完畢后執行

    也叫做 jQuery 的入口函數

    有一個簡寫的形式 $(function () {})

    each() 方法

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

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

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

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

    比較少用到, 因為 jQuery 隱式迭代 自動遍歷

    十三 jQuery中的動畫

    讓元素出現不同的移動, 改變

    transition -> 過渡動畫

    animation -> 幀動畫

    標準動畫

    show() 顯示元素

    語法: show(時間, 運動曲線, 運動結束的函數)

    hide() 隱藏元素

    語法: hide(時間, 運動曲線, 運動結束的函數)

    toggle() 改變元素顯示或隱藏(如果顯示就隱藏,如果隱藏就顯示)

    語法: toggle(時間, 運動曲線, 運動結束的函數)

    三個方法的參數都可以選填,不需要每個都填寫

    折疊動畫

    slideDown() 下滑顯示

    語法: slideDown(時間, 運動曲線, 運動結束的函數)

    slideUp() 上滑隱藏

    語法: slideUp(時間, 運動曲線, 運動結束的函數)

    slideToggle() 切換滑動和隱藏

    語法: slideToggle(時間, 運動曲線, 運動結束的函數)

    漸隱漸顯動畫

    實質是透明的opacity的變化

    fadeIn() 逐漸顯示

    fadeIn(時間, 運動曲線, 運動結束的函數)

    fadeOut() 逐漸消失

    fadeOut(時間, 運動曲線, 運動結束的函數)

    fadeToggle() 切換顯示和消失

    fadeToggle(時間, 運動曲線, 運動結束的函數)

    以上三個方法的參數,均有默認值

    fadeTo() 設置元素透明度變為你指定的數字

    fadeTo(時間, 你指定的透明度, 運動曲線, 運動結束的函數)

    綜合動畫

    animate()

    基本上大部分的 css 樣式都可以動畫

    transform 不行, 顏色不行

    語法: animate({}, 時間, 運動曲線, 運動結束的函數)

    { }里面就寫你要運動的 css 屬性,默認單位為px

    停止動畫

    讓當前的動畫結束

    因為 jQuery 的動畫你一直點擊,就會一直觸發。即使不再點擊讓事件發生,還是會把沒執行完的動畫執行完畢。

    你點擊 10 次, 他就會觸發 10 次, 直到 10 次全都完畢才結束

    stop()

    當這個函數觸發的時候, 就會讓運動立刻停下來

    你運動到哪一個位置了就停止在哪一個位置

    finish()

    當這個函數觸發的時候, 就會讓運動立刻停下來

    不管你運動到了哪一個位置, 瞬間到達運動完成位置

    十四 jQuery發送ajax請求

    jQuery 里面幫我們封裝好了幾個方法

    專門用來發送 ajax 請求的

    $.get() -> 專門用來發送 get 請求的

    $.post() -> 專門用來發送 post 請求的

    $.ajax() ->

    發送什么請求都可以(get, post, put, delete)

    并且還可以發送一個 jsonp 請求

    jQuery 發送一個 GET 請求

    語法: $.get(請求地址, 需要攜帶到后端的參數, 成功的回調函數, 期望后端返回的數據類型)

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

    攜帶參數: 你需要給后端傳遞的參數

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

    也可以是一個對象 { a: 100, b: 200 }

    成功回調: 當請求成功的時候會執行的函數

    期望數據類型: 就是你是不是需要 jQuery 幫你解析響應體

Js閉包

前端達人

所謂閉包就是說,閉包是指有權訪問另外一個函數作用域中的變量的函數.可以理解為(能夠讀取其他函數內部變量的函數)

閉包的三大特點為(既是優點,也是缺點):

1,函數作用域空間不會被銷毀

優點是:空間中的內容,永遠存在

缺點是:占用大量的內存空間

2,可以從外部訪問函數內部的變量

優點是:使用變量數據方便

缺點是:容易泄露數據信息

3,保護私有作用域變量

優點是:確保私有作用域變量一直存在

缺點是:占用內存空間 閉包的最大問題是:有可能造成占用大量的內存空間,降低程序的執行效率,甚至有可能造成數據溢出或者是數據泄露 因為為了保護數據的安全性,特殊情況下,才會使用閉包舉例來說:

// 記數器:



//全局變量  全局變量降低函數的獨立性

1

// var count = 0;

// function add(){

// return count++;

// }

// console.log(add());

// console.log(add());

// console.log(add());



//局部變量  函數執行外  局部變量銷毀

1

// function add(){

// var count = 0;

// return count++;

// }

// console.log(add());

// console.log(add());

// console.log(add());



//plus定義在add的內部,可以訪問add局部變量count

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

//訪問到了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());



//繼續變身

1

// var f = (function (){

// var count = 0;

// return function(){

// return count++;

// }

// }());

//

// console.log(f());

// console.log(f());

// console.log(f());

//JS中,沒有塊作用域,但是在閉包的寫法里,可以體現出來。

function outerFunc(){

var outVar = 10;

var innerF = function (){

var innerVar = 20;//該變量雖然隸屬于outerFunc內部,但是它的作用域范圍只在innerF對應的函數體內,屬于塊級作用域

}

alert(innerVar);

return innerF;

}



閉包的作用:

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



可以讀取函數內部的變量

讓這些變量的值始終保持在內存中。

增加塊級作用域

總結:

1、 閉包是指有權訪問另一個函數作用域中的變量的函數,創建閉包的最常見的方式就是在一個函數內創建另一個函數,通過另一個函數訪問這個函數的局部變量。

2、 閉包的缺點就是常駐內存,會增大內存使用量,使用不當很容易造成內存泄露。

3、不必糾結到底怎樣才算閉包,其實你寫的每一個函數都算作閉包,即使是全局函數,你訪問函數外部的全局變量時,就是閉包的體現。







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

版權聲明:本文為CSDN博主「澈野」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。

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

html+css基礎入門學習教程之HTML 樣式

前端達人

HTML 樣式



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



先來看一個例子,代碼如下:



<head>

    <style type="text/css">

        h1 {color: red}

        p {color: blue}

    </style>

</head>



<body>

    <h1>header 1</h1>

    <p>A paragraph.</p>

</body>

頁面上顯示為:



header 1



A paragraph.



當瀏覽器讀到一個樣式表,它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表:



外部樣式表 link



當樣式需要被應用到很多頁面的時候,外部樣式表將是理想的選擇。使用外部樣式表,你就可以通過更改一個文件來改變整個站點的外觀。



<head>

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

</head>

link : 定義資源引用

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

type : 文件類型

href : 文件地址



內部樣式表



當單個文件需要特別樣式時,就可以使用內部樣式表。你可以在 head 部分通過 <style> 標簽定義內部樣式表。



<head>

<style type="text/css">

    body {background-color: red}

    p {margin-left: 20px}

</style>

</head>

style : 定義樣式定義



新建一個前端學習qun438905713,在群里大多數都是零基礎學習者,大家相互幫助,相互解答,并且還準備很多學習資料,歡迎零基礎的小伙伴來一起交流。



內聯樣式



當特殊的樣式需要應用到個別元素時,就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。



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

This is a paragraph

</p>

優先級說明



(外部樣式)External style sheet < (內部樣式)Internal style sheet < (內聯樣式)In



1.下列方法表示調用外部樣式表的是?



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以上三種都可以

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

版權聲明:本文為CSDN博主「html前端基礎入門教程」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。

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

利用鍵盤控制小方塊的移動

前端達人

原理

  1. 利用鍵盤控制移動,則需要了解onkeydown函數,表示某個按鍵被按下,可以以此綁定一個事件響應函數,當鍵盤被按下時候,觸發此事件,進行移動
  2. keyCode 對于keypress 事件,該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對于 keydown 和 keyup 事件,它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關。 因此我們可以根據keycode返回的字符碼來判斷用戶所按下的鍵,下面就是一個用于測試上下左右按鍵的js代碼,經過我的測試之后,返回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.方塊的移動實際上就是坐標的改變,因此需要offsetLeft 和offsetTop 來獲得當前方塊的坐標,然后將坐標進行一定的更改,就可以實現移動的效果了,下面給出代碼

    window.onload = function() {
                document.onkeydown = function(event) {
                    event = event || window.event;
                    //設置移動速度
                    var speed = 10;
                    //當ctrl和方向按鍵同時按下時,提升移動速度
                    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;
    
                    }
                };
    
            };
    



    這樣就可以簡單實現方塊的移動,但是此時我們會發現一個問題,當我們進行移動的時候,按住按鍵不松手,理論上方塊應該直接平滑的進行移動,但實際上并非如此,第一下它會有一個小的停頓,這實際上是瀏覽器防止誤觸所設置的,因此我們需要對此進行優化
    解決方案

    這里我采用了定時器的做法來解決這個問題,因為控制移動的因素有兩個,一個是控制方向,一個是控制速度,控制方向沒有問題,因此我們需要改變速度
    setInterval(function(){},time);這是一個定時器,我們只需要在time時間內調用一次函數,就可以解決停頓的問題了
    下面附上修改后的完整代碼


    <!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");
                //設置移動速度
                var speed = 10;
                //設置移動的方向
                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;
    
                    //當ctrl和方向按鍵同時按下時,提升移動速度
                    if(event.ctrlKey) {
                        speed = 50;
                    } else {
                        speed = 10;
                    }
                    //使dir等于keycode的值
                    dir = event.keyCode;
    
                    //當鼠標松開時,停止移動         ---如果不寫這一個會造成無法停止移動的效果
                    document.onkeyup = function() {
                        dir = 0;
                    };
    
                };
    
            };
        </script>
    </head>
    
    <body>
        <div id="box01"></div>
    </body>
    

</html>

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

版權聲明:本文為CSDN博主「loving-cat」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。

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



Vuex的一些用法

前端達人

vuex的基礎

1,狀態管理(共享)

緩存數據==>內存, 只要刷新頁面,數據就丟了

訂單,詳情等,,,不適用vuex緩存數據



用于



非父子通信的問題

緩存后端數據,提高用戶體驗

注意:

vuex只能有一個store,

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

模塊寫法

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: {

  }, // "全局"狀態
  mutations:{

  },//唯一修改狀態的地方
  //異步處理
  actions:{
  },
  // 對上面的“全局狀態”進行數據處理, 類似于vue中的計算屬性
  getters:{
  },

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

2,子模塊的寫法

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自動調用時候,傳來值
      return state.cinemaList.slice(0,5)
    }
  }
}

export default module

3,為了防止頁面刷新丟失數據,所以還得找到其他插件來幫忙

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

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


————————————————
版權聲明:本文為CSDN博主「m0_46436313」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/m0_46436313/article/details/104572076

javascript設計模式九:中介者模式

前端達人

中介者對象踐行了最少知識原則,指一個對象盡可能少的了解別的對象,從而盡量減少對象間耦合程度。這樣各個對象只需關注自身實現邏輯,對象間的交互關系交由中介者對象來實現和維護。



需求背景:



手機購買頁面,在購買流程中,可以選擇手機的顏色及輸入購買數量,同時頁面有兩個展示區域,分別向用戶展示剛選擇好的顏色和數量。還有一個按鈕動態顯示下一步的操作,我們需要查詢該顏色手機對應的庫存,如果庫存數量少于這次購買的數量,按鈕將被禁用并顯示庫存不足,反之按鈕可以點擊并顯示放入購物車。

<!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>中介者模式 購買商品</title>
</head>
<body>
    選擇顏色: 
    <select id="colorSelect">
        <option value="">請選擇</option>
        <option value="red">紅色</option>
        <option value="blue">藍色</option>
    </select>

    輸入購買數量:
    <input type="text" id="numberInput">

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

    <button id="nextBtn" disabled>請選擇手機顏色和購買數量</button>

</body>
<script>

// 最初級的寫法
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 = '請選擇手機顏色';
        return;
    }

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

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

    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入購物車';
}

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

    colorInfo.innerHTML = color;

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

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

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

    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入購物車';
}

</script>
</html>

在上個示例中,對象間聯系高度耦合,只是兩個輸入框還好,但如果有多個的話,相互聯系就非常復雜了,此時就要考慮用到中介者模式。

<!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>中介者模式 購買商品</title>
</head>
<body>
    選擇顏色: 
    <select id="colorSelect">
        <option value="">請選擇</option>
        <option value="red">紅色</option>
        <option value="blue">藍色</option>
    </select>

    選擇內存: 
    <select id="memorySelect">
        <option value="">請選擇</option>
        <option value="32G">32G</option>
        <option value="16G">16G</option>
    </select>

    輸入購買數量:
    <input type="text" id="numberInput">

    您選擇了顏色:<div id="colorInfo"></div><br>
    您選擇了內存:<div id="memoryInfo"></div><br>
    您輸入了數量:<div id="numberInfo"></div><br>

    <button id="nextBtn" disabled>請選擇手機顏色、內存和購買數量</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 = '請選擇手機顏色';
                    return;
                }

                if(!memory){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '請選擇手機內存';
                    return;
                }

                if(!number){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '請填寫手機數量';
                    return;
                }

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

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

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

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

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

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

    //以后如果想要再增加選項,如手機CPU之類的,只需在中介者對象里加上相應配置即可。
</script>
</html>
在實際開發中,還是要注意選擇利弊,中介者對象因為包含對象間交互的復雜性,所以維護成本可能也會較高。在實際開發中,最優目的還是要快速完成項目交付,而非過度設計和堆砌模式。有時對象間的耦合也是有必要的,只有當對象間復雜耦合確實已經導致調用與維護難以為繼,才考慮用中介者模式。

————————————————
版權聲明:本文為CSDN博主「一期一會」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qq_34832846/article/details/85989945

日歷

鏈接

個人資料

藍藍設計的小編 http://m.73404.com.cn

存檔

主站蜘蛛池模板: 紧缚捆绑精品一区二区 | 51国产偷自视频区视频小蝌蚪 | 桃色成人网 | 99re8在线精品视频免费播放 | 中文字幕一区二区三区乱码在线 | 狠狠色噜噜狠狠狠狠色综合久 | 亚洲欧美日韩精品在线观看 | 777米奇影院狠狠色 一日本道a高清免费播放 | 97超碰导航| 49vv看片免费 | 北条麻妃99精品久久朝桐光 | 暴力调教一区二区三区 | 久久久精品人妻久久影视 | 新婚若妻侵犯中文字幕 | av福利站| 亚洲日韩精品欧美一区二区一 | 国内最真实的xxxx人伦 | 色多多性虎精品无码av | 91精品国产综合久久久蜜臀粉嫩 | 国产精品久久伊人 | 国内精品国产三级国产在线专 | 久久久久久久香蕉 | 欧美成年黄网站色视频 | 女人18毛片水真多 | 国产肥老妇对白清 | 国产亚洲影院 | 看一级黄色毛片 | 国产农村妇女毛片精品久久 | 欧美一区2区三区4区公司 | 成年人午夜网站 | 欧美自拍区 | 亚洲 丝袜 另类 动漫 二区 | 欧美亚洲精品suv一区 | 国产日韩欧美亚洲精品中字 | 亚洲卡一卡二 | 亚洲欧美中文日韩在线v日本 | 国产成人99 | 免费网站日本a级淫片免费看 | 亚洲精品中字 | 成人午夜亚洲精品无码网站 | 中文免费视频 | 中出在线观看 | 国产在线不卡av | 伊人第四色 | 女人和野鲁性猛交大毛片 | 探花视频在线免费观看 | 久久亚洲精品无码aⅴ大香 人人妻人人玩人人澡人人爽 | 一级欧美一级日韩 | 日韩精品一区二区在线观看 | 一区二区三区视频免费 | 日本国产乱弄免费视频 | 91精品综合久久久久久五月天 | 川上奈美侵犯中文字幕在线 | 少妇人妻偷人精品视蜜桃 | 久久精品国产精品国产一区 | 久久天天躁狠狠躁亚洲综合公司 | 全部免费的毛片在线播放 | 麻豆久久久久久久 | 久久人人爽人人爽人人片av高请 | 国产精品一区在线免费观看 | 日韩在线视频第一页 | 国产精品粉嫩jk国产呦系列 | 91精品国产综合久久久久久久久 | 视频国产一区 | 亚洲精品少妇 | 国产黄色av | 国产又黄又猛 | www日韩在线观看 | 明星双性精跪趴灌满h | 亚洲婷婷一区 | 亚洲aaa| 国产精品传媒在线观看 | 精品国产品香蕉在线 | 国产高潮久久 | 极品少妇xxxx精品少妇小说 | 国产欧美亚洲精品第一区软件 | 国产伦精品一区二区三区照片 | 亚洲精品99久久久久中文字幕 | 都市激情中文字幕 | 妺妺窝人体色www聚色窝 | 色综合色狠狠天天综合色 | 色94色欧美sute亚洲线路二 | 天海翼一区二区三区 | 韩国三级欧美三级国产三级 | 成人手机视频在线观看 | 色天使久久综合网天天 | 中文精品无码中文字幕无码专区 | 日韩精品免费一区二区三区竹菊 | 69视频在线看 | 一区二区三区高清在线观看 | 好吊色国产欧美日韩免费观看 | 日韩大尺度在线观看 | 欧美成人在线网站 | 成年人小视频在线观看 | 久热欧美| 欧美日韩久久精品 | 久久综合久久综合九色 | 就要爱爱tv| 美女乱淫免费视频网站 | 国产精品久久久久久99 | 噼里啪啦在线播放 | 亚洲精品一区二区在线观看 | 尤物视频在线观看免费 | 成人免费视频网址 | 国产午夜精品久久久久免费视 | 欧美啪啪小视频 | 女主和前任各种做高h | 国产精品亚洲а∨天堂免在线 | 日本一区二区在线播放 | 国产女人40精品一区毛片视频 | 一本一道久久综合狠狠老 | 极品少妇被啪到呻吟喷水 | 亚洲天码中字 | 天天射天天干天天操 | 三级精品视频 | 天天做天天爱天天综合网2021 | 国产精品高清一区二区三区 | 香蕉网址 | av小四郎最新地址入口 | 国产精品国色综合久久 | 成人aaa片一区国产精品 | 精品无码一区二区三区 | aav在线 | 精品国产乱码久久久久久绯色 | 91原创视频在线观看 | 日本a级在线播放 | 国产日韩网站 | 亚洲欧美日韩天堂 | 牛牛影视一区二区三区免费看 | 国产免费毛卡片 | 欧美日韩一区二区三 | 台湾150部性三级 | 国产伦精品一区二区三区视频黑人 | 性夜影院午夜看片 | 九九综合久久 | 中文字幕一区二区三区在线播放 | 97视频人人免费看 | 久久久久久久久久久久久久久久久久久 | 国产欧美性成人精品午夜 | 99re在线精品 | 91热久久 | 泽村玲子在线中文字幕 | 日本午夜在线 | 亚洲天堂在线视频播放 | 欧美日韩久久久 | 四虎影成人精品a片 | 极品人妻少妇一区二区三区 | 国产在线视频网 | 手机在线精品视频 | 精品久久久久久久久久久久久久久久久 | 免费成人在线看 | 国产无套免费网站69 | 337p日本欧洲亚洲大胆裸体艺术 | 在线免费视频你懂的 | 国产在线麻豆 | 国严产品自偷自偷在线观看 | 97视频总站| 日本理论片在线 | 青青草免费在线 | 欧美在线视频观看 | 成人a v视频在线观看 | 日韩欧美在线免费 | www日本高清 | 国产免费一区二区三区 | 老司机午夜精品视频 | 丰满白嫩尤物一区二区 | 51国产偷自视频区视频 | 欧美中文字幕在线观看 | 久久一级免费视频 | 国产一区内射最近更新 | 日日躁夜夜躁狠狠躁超爽2001 | 日本激情视频一区二区三区 | 亚洲国产美女精品久久久 | 久草在线视频新时代视频 | 99碰碰| 青青草免费在线视频 | 免费专区丝袜调教视频 | 92国产精品午夜福利免费 | 无码aⅴ精品一区二区三区浪潮 | 97人人模人人爽人人喊网 | 成人精品鲁一区一区二区 | 黑人操亚洲美女 | 精品国产制服丝袜高跟 | 东北老头嫖妓猛对白精彩 | 欧美精品一区二区视频 | 久久国产av影片 | 欧美高h | 尤物yw193无码点击进入 | 中文字幕乱码在线观看 | 亚洲v不卡ww在线 | 成人h动漫精品一区二区器材 | 国产精品99久久精品爆乳 | 成人国产欧美日韩在线视频 | 国产二区三区视频 | 欧美久久一级 | 国产婷婷久久 | 国产精品久久久久久久久鸭 | 天天射日日| 色爱综合区 | 成人在线观看你懂的 | 国产精品亚洲专区无码牛牛 | 五月婷婷在线视频观看 | 国产在线麻豆精品入口 | 国产一级黄色影片 | 久久久久久久久91 | 亚洲国产精品无码久久电影 | 新版天堂资源中文8在线 | 久久精品亚洲精品国产色婷 | 亚洲欧洲精品成人久久曰影片 | 精品午夜福利无人区乱码一区 | 日韩一区二区av | 香蕉一区二区 | 欧美一区1区三区3区公司 | 麻豆精品国产精华精华液好用吗 | 一区二区乱子伦在线播放 | 久久精品在 | 精品国产一区二区三区四区在线看 | av在线免播放器 | 国产美女诱惑 | 少妇无码av无码一区 | 粉嫩av一区二区三区四区在线观看 | 日本黄色aaa | 人人爽人人爽人人爽人人爽 | www啪| 色综合啪啪 | 中文字幕无产乱码 | 久久久国产免费 | 噜噜噜av久久av牛牛 | 在线观看av国产一区二区 | 国产传媒在线播放 | 国产美女毛片 | 国产亚洲精品久久久久久牛牛 | 欧美亚洲综合另类 | 久久久三级视频 | 夜鲁鲁鲁夜夜综合视频 | 国产又粗又猛又爽69xx | 亚洲综合伊人久久大杳蕉 | 欧美成人va | 偷拍中国夫妇高潮视频 | 放荡的少妇2欧美版 | 日韩性在线| 青青操视频在线观看 | 理论片在线观看视频 | 影虎的最新视频 | 日韩毛片一区 | 久操社区 | 国产大学生粉嫩无套流白浆 | 成人激情视频网 | 中文字幕久热精品视频在线 | a天堂中文在线 | 最近中文字幕日本 | 国产成人无码a区在线观看视频app | 国产三级麻豆 | 无码免费一区二区三区免费播放 | 色综亚洲国产vv在线观看 | 一级免费黄色大片 | 竹菊影视欧美日韩一区二区三区四区五区 | 人妖干美女| 国产精品 欧美日韩 | 国产精品99久久久久久久女警 | 巨胸喷奶水视频www免费网站 | 亚洲乱码在线观看 | 国产成人三级一区二区在线观看一 | 国产视频一区二 | wwwyoujizzcom中国版 | 国产黄色免费看 | 成人二三区 | 少妇又色又紧又爽又高潮 | 亚洲精品久久7777777 | 国产成人精品一区二三区 | 久久人| 亚洲热妇无码av在线播放 | 真人第一次毛片 | 亚洲黄色小说图片 | 91精品国产色综合久久 | 久草在线新时代视觉体验 | 三级黄色毛片视频 | 黄色网免费 | 高潮中文字幕 | 97精品伊人久久久大香线蕉 | 中文字幕天天躁日日躁狠狠躁免费 | 国产精品wwwwww | 国产精品av一区 | 欧美精品一区二区免费 | 亚洲+小说+欧美+激情+另类 | 日韩久久免费视频 | 成人一级网站 | 少妇与大狼拘作爱性a | 亚洲人精品午夜 | 欧美日韩1区2区 | 香港三级午夜理伦三级 | 酒店大战丝袜高跟鞋人妻 | 免费黄色网址观看 | 欧美性xxxx图片 | 一级片在线免费视频 | 国产精品成人va在线观看 | 蜜芽tv福利在线视频 | 黄色片欧美 | 精品国产乱码久久久久久蜜柚 | 色婷婷在线观看视频 | 猫咪av成人永久网站在线观看 | 亚洲另类视频 | 亚洲国产精品成人女人久久 | 亚洲国产成人a精品不卡在线 | 久久久久女 | 亚洲人亚洲人成电影网站色 | 国产精品久久久久久av福利软件 | 波多野结衣办公室双飞 | 91们嫩草伦理 | 国产一级二级视频 | 噼里啪啦免费高清看 | 精品女同一区二区三区在线播放 | 男人天堂av在线播放 | 操操操免费视频 | 少妇高潮zzzzzzzyⅹ一 | 日本怡红院视频www色 | 国产欧美精品 | 精品少妇久久 | 亚洲色土 | 欧洲s码亚洲m码精品一区 | 性荡视频播放在线视频 | 国产淫视 | 亚洲精品久久久久久中文传媒 | 日韩女女同性aa女同 | 国产特黄毛片 | 精品人人 | 欧美1314 | 国产色在线观看 | 偷拍中年夫妇激情嗷嗷叫 | 免费观看又色又爽又黄动态 | 欧美精品v | 亚洲自拍偷拍图 | 蜜桔视频成人免费观看 | 国产一区二区麻豆 | 99久久精品国产同性同志 | 成人性视频欧美一区二区三区 | 国变精品美女久久久久av爽 | av在线中文字幕不卡电影网 | 日本最新免费二区三区 | 成人77777| 蜜臀久久99精品久久久久宅男 | 国产在视频线精品视频 | 黄色网址在线免费看 | 国产成人+亚洲欧洲+综合 | 国产午夜一级 | 国产又色又爽又刺激在线观看 | 美丽姑娘免费观看在线观看 | 一本大道av伊人久久综合 | 国产精品1区2区3区在线观看 | 久久少妇网 | 九色porny丨精品自拍 | 大又大又粗又硬又爽少妇毛片 | 天堂av中文字幕 | 国产片av国语在线观看 | 吃奶呻吟打开双腿做受动态图 | 天堂亚洲2017在线观看 | 丰满少妇裸体淫交 | 天天干com | 黄瓜视频在线播放 | 亚洲天堂网址 | 国产在线一二区 | 女人精69xxxⅹxx视频 | 嫩模周妍希视频一区二区 | 妇女伦子伦视频高清在线 | 大胸美女被吃奶爽死视频 | 久久视频这里只精品 | 99精品欧美一区二区三区综合在线 | 天天躁日日躁mmmmxxxx | 人妻中文字幕无码专区 | 国产无遮挡免费观看视频网站 | 欧洲美女x8x8免费视频 | 亚洲欧洲一区二区 | 天堂av在线官网 | 亚洲日韩国产中文其他 | 亚洲的天堂av | 日本少妇又色又爽又高潮看你 | 小毛片 | 邻居少妇2中文字幕hd | 国产特级黄色录像 | 国产第4页| 日韩小视频 | 在线观看黄色的网站 | 91亚洲乱码卡一卡二卡新区豆 | 日韩操操 | 国产国语性生话播放 | 国产尤物在线视频 | 中文字幕第12页 | 日本三级黄在线观看 | 日韩欧美高清在线视频 | 亚洲成av人片在线观看无码 | 日本少妇作爱视频 | 97在线国产 | 粉嫩老牛aⅴ一区二区三区 粉嫩欧美一区二区三区 | 黄在线免费观看 | 午夜国产在线 | 国产成人精品日本亚洲专区 | 三级网址在线观看 | 日韩av免费一区二区 | 国模大尺度自拍 | 国产毛片18片毛一级特黄日韩a | 国产精品女同磨豆腐磨出水了 | 成人一区在线观看 | 久久首页 | 色情一区二区三区免费看 | 欧美日日摸夜夜添夜夜添 | 欧美视频日韩视频 | 亚洲激情午夜 | www成人avcom | 国产激情久久久久 | 欧美激情欲高潮视频在线观看 | 久久www成人_看片免费不卡 | 日本少妇搡bbbb搡bbb | 偷窥自拍亚洲 | 欧美日韩亚洲中文字幕二区 | 欧美激情综合色综合啪啪五月 | 99精品国产兔费观看久久 | 国产精品视频男人的天堂 | 少妇被躁爽到高潮无码久久 | 公妇乱淫太舒服了 | 又色又爽又黄无遮挡的免费视频 | 日韩美女久久 | 男女做爰猛烈叫床爽爽免费网站 | 久久亚洲成人 | 91在线最新| 欧美精品第二页 | 亚洲精品美女久久7777777 | 蜜臀av在线播放 | 黄大色黄女片18第一次 | 国产精品国产精品国产专区不卡 | 一级黄色免费看 | 最新av中文字幕 | 精品久久久久国产免费 | 久久国产一 | 国产精品午夜福利视频234区 | 免费看一区二区三区四区 | 国产视频久久久久久 | 巨大黑人极品videos精品 | 亚洲国产成人a精品不卡在线 | 天天综合网在线 | 国产黑丝在线 | 日韩天堂av | 极品美女销魂一区二区三区 | 安野由美中文一区二区 | 中文字幕一区在线观看视频 | 久久国产一区二区三区 | 日韩免费福利视频 | 天堂а√在线中文在线 | 大陆偷拍av | 麻豆精品一区二正一三区 | 51国偷自产一区二区三区的 | 隣の若妻さん波多野结衣 | 中文一区二区在线观看 | 99在线观看视频 | 99这里有精品视频 | 国产精品高潮呻吟久久av郑州 | 国产精品a成v人在线播放 | 久久精品首页 | 九色视频91 | 日本少妇裸体做爰高潮片 | 亚洲小视频在线播放 | 国产精品 精品国内自产拍 日韩精品一区二区三区中文 | 日韩精品一区在线 | 久久夜色精品国产欧美一区麻豆 | 欧美放荡性医生videos | 中国女人真人一级毛片 | 97视频在线 | 日韩欧美高清在线视频 | av网在线观看| 亚洲国产无套无码av电影 | 亚洲 小说区 图片区 都市 | 亚洲va国产日韩欧美精品色婷婷 | 一本色综合网久久 | 久久草草精品入口av | 少妇一边呻吟一边说使劲视频 | 久久久精品久久久久久 | 久久精品视频3 | av免费观看在线 | 东京久久久 | 久久精品中文字幕有码 | 日本一级二级三级aⅴ网站 日本一级二级三级久久久 日本一级二级视频 | 久久久国产精品x99av | 免费日韩精品 | 久久天天躁狠狠躁夜夜躁2014 | 777天堂麻豆爱综合视频 | 日韩精品免费一区二区夜夜嗨 | 久久国产精品99国产精 | 免费黄色网址在线观看 | 欧美大色 | aaaaa国产欧美一区二区 | 青青草原av | 免费人成在线观看网站品爱网 | 女同 媚药 在线播放 | 国产高清不卡无码视频 | 久热这里有精品 | 成人性生交大片 | 国产成熟人妻换╳╳╳╳ | 国产成人精品日本亚洲999 | 中文字幕一区二区三区第十负 | 国产一区二区三区影院 | 日韩国产欧美一区 | 在线观看av不卡 | 舌吻激情大尺度做爰视频 | 最新国产拍偷乱偷精品 | 国产ts系列 | 播放男人添女人下边视频 | 男人猛躁进女人免费播放 | 国产色在线 | 国产成人亚洲综合色婷婷 | 亚洲精品一区二区久久 | 欧美综合自拍亚洲综合图 | 亚洲xxxx天美 | aⅴ一级片 | 亚洲人成人天堂 | 欧美性天堂 | 日韩欧美在线观看免费 | 一区二区三区中文字幕在线观看 | 亚洲欧美在线综合 | 中文字幕人妻无码专区 | 乱妇乱女熟妇熟女网站 | 精品一区二三区 | 日本熟妇毛茸茸丰满 | 51妺嘿嘿午夜福利 | 少妇高潮疯狂叫床在线91 | 丁香婷婷在线 | 少妇又紧又色又硬又爽 | 国产亚洲欧美精品久久久久久 | 长腿校花无力呻吟娇喘 | 亚洲中文精品久久久久久不卡 | √天堂资源地址中文在线 | а√天堂8资源中文在线 | 一级真人毛片 | 在线免费国产视频 | 青青草原综合久久大伊人精品 | 久久久久久久免费 | 天天干.com | 国产精品伦子伦免费视频 | 2019中文字幕在线视频 | 欧美专区中文字幕 | 在线a视频网站 | 亚洲精品在线观看网站 | 成人一区二区三区在线 | 中文字幕亚洲无线 | 久久激情视频 | 亚洲欧美精品午睡沙发 | 日本乱大交xxxxx | 日本视频高清一区二区三区 | 日本毛片视频 | 无码中文av有码中文a | 午夜性刺激免费看视频 | 亚洲一区二区三区播放 | 一级做a爱片性色毛片 | 成长快手短视频在线观看 | 2区3区在线涩网涩 | 久久婷婷影视 | 乱人伦中文视频在线观看 | 波多野结衣50连登视频 | 精品少妇一区二区30p | 奇米影视第4色 | 老妇女av| 黄网在线免费观看 | 亚洲天堂婷婷 | 免费一区二区无码东京热 | 亚洲区精品 | 亚洲日韩精品一区二区三区 | 97中文字幕在线观看 | 国产亚洲欧美在线专区 | 国产日韩一区二区 | 日韩黄色网络 | 蜜桃成熟时李丽珍在线观看 | 色免费看| 免费看成人 | 精品日韩欧美 | 国产日韩欧美视频 | 中国二级毛片 | 在线观看1区| 成人免费午夜视频69影院 | 欧美性jizz18性欧美 | 中文理论片 | 黄色免费小视频 | 日本黄色成人 | 色啦啦视频| 亚洲一区二区高潮无套美女 | 黄色精品一区二区 | 天天干夜夜做 | 色妞色视频一区二区三区四区 | 成人在线手机版视频 | 快色污| 国产婷婷色一区二区三区 | 性——交——性——乱免费的 | 国模无码大尺度一区二区三区 | 色噜噜一区二区三区 | 成人免费看片又大又黄 | 在线网站免费观看入口 | 国产乱码精品一区二区三 | 免费在线看污视频 | 日本xxxxxxxxx18| 日出水了特别黄的视频 | 在线观看免费福利 | 女人夜夜春高潮爽a∨片传媒 | 亚洲色成人网站www永久 | 中文字幕日韩精品有码视频 | 国产情侣在线播放 | 91瑟瑟| 久久尤物免费一区二区三区 | 老司机亚洲精品影院 | 国产v欧美v日本v精品按摩 | 不卡av中文字幕 | 日韩欧美的一区二区 | 午夜爱爱影院 | 亚洲线精品一区二区三区八戒 | 色综合91| 久久精品亚洲7777影院 | 久久精品爱 | 国产情侣激情在线对白 | 偷拍区另类欧美激情日韩91 | 成人欧美一区二区三区黑人动态图 | 免费无码不卡视频在线观看 | 视频一区二区在线播放 | 美女大量吞精在线观看456 | 国产在线一区二区三区四区 | 日本欧美一区二区 | 久久人人爽人人爽人人片亚洲 | 大香焦久久 | 国产精品免费大片 | 欧美一乱一交一性ed2k | 国产美女在线精品免费观看 | 久草福利在线观看 | 新版天堂资源中文8在线 | 极品少妇hdxx天美hdxx | 18视频在线观看男男 | 高清毛片aaaaaaaaa片 | 亚洲欧美综合色 | 经典三级伦理另类基地 | 亚洲亚洲人成综合网络 | 爽爽影院免费观看视频 | 亚洲国产精品久久久久秋霞不卡 | 中文字幕无码免费久久99 | 久久99亚洲精品久久99果 | 99久无码中文字幕一本久道 | 自拍偷拍亚洲欧洲 | 特黄特色三级在线观看 | 中国69av | 94av视频| 国产精品99久 | 人妻在客厅被c的呻吟 | 日本极品丰满ⅹxxxhd | 国产主播福利 | 97人妻精品一区二区三区 | 岳睡了我中文字幕日本 | 97zyz成人免费视频 | 久久久噜噜噜www成人网 | 国产精品国产三级国产aⅴ 国产精品国产三级国产aⅴ9色 | 原创av| 亚洲色欲色欲www在线丝 | 特级做a爰片毛片免费看 | 中文字幕我不卡在线看 | 久久a久久 | 欧美日韩视频一区二区三区 | 日韩精美视频 | 污视频网址在线观看 | 欧美另类一区 | 99久久人妻无码精品系列 | 国产一级特黄,真人毛片 | 中文无码熟妇人妻av在线 | 国产色视频网免费 | 日日碰狠狠躁久久躁2023 | 国偷自产av一区二区三区小尤奈 | 亚洲.www| 中文字幕在线视频播放 | 爱色成人网 | a天堂中文在线 | 国产日韩欧美二区 | 香蕉色综合 | 大陆明星乱淫(高h)小说 | 97超碰自拍| 国产区av| swag国产精品一区二区 | 亚洲精品久久久久久中文传媒 | a在线免费| 欧洲女女同videos | 好吊色免费视频 | 欧美成人一二三区 | 久久精品免费一区二区三区 | 国产区av | 青娱乐在线视频免费观看 | 亚洲午夜精品久久久久久浪潮 | 中文字幕无码av激情不卡 | 99亚洲天堂 | 亚洲小说另类 | 黑人巨大精品欧美一区二区, | www,av在线| av大片免费观看 | 亚洲最大av网 | 黄色动漫在线免费观看 | 黑人巨大精品欧美一区二区奶水 | 精品亚洲国产成人av | 日本亚洲欧美在线 | 欧美亚洲综合另类色妞网 | 国产精品久久久久久久久久久杏吧 | 亚洲欧美一区二区三区视频 | 亚洲精品久久久日韩美女极品 | 7m视频国产精品 | 久久久久久久久久久久久久久久久久 | 天天摸夜夜添狠狠添婷婷 | 五十路av在线| 久久精品视频在线看 | 男女下面进入的视频 | 精品产国自在拍 | 国模冰莲极品自慰人体 | 无码人妻一区二区三区线 | 手机在线观看日韩av | 国产精品高潮呻吟久久久久久 | 欧美一区二区三区视频在线 | av亚州| 操亚洲美女| 无码一区二区三区在线观看 | 亚洲日韩av一区二区三区中文 | 毛片一级免费 | 久草在线视频在线 | 国产第一页浮力影院入口 | 国产精品激情av久久久青桔 | 亚洲最大av无码国产 | 午夜看片网站 | 精品成人网 | 浓精h攵女乱爱av | 亚洲欧美成人一区二区三区 | 亚洲另类激情综合偷自拍图 | 96av在线视频 | 国产精品综合久久久久久 | 日韩天天干 | av网站有哪些 | 极品粉嫩国产 | 久久综合欧美 | 亚洲最新av在线 | 丝袜视频在线 | 成人黄色在线免费观看 | 91精品婷婷国产综合久久性色 | 国内自拍农村少妇在线观看 | 蜜桃久久精品 | 性色av无码免费一区二区三区 | 激情偷乱人伦小说视频在线 | 亚州a级片 | 我们高清中文字幕mv的更新时间 | 麻豆精品国产传媒mv男同 | 国产奶头好大揉着好爽视频 | 国产片av国语在线观看 | 国产精品高潮露脸在线观看 | 一级做a爰片性色毛片99高清 | 暴力强奷在线播放无码 | 欧美77777 | 免费a在线 | 国产大学生粉嫩无套流白浆 | 中文在线一区 | 亚洲男女在线 | 懂色av一区二区三区免费 | 女人内谢aaaa免费视频 | 中文天堂在线资源 | 91九色porn| 国产乱肥老妇国产一区二 | 国产日本在线观看 | 少妇精品免费视频欧美 | av av在线 | 成人免费毛片免费 | 国产成人精品牛牛影视 | 国产精品视频全国免费观看 | 91丝袜国产在线播放 | 国产hsck在线亚洲 | 希岛爱理aⅴ在线中文字幕 希岛爱理和黑人中文字幕系列 | 寂寞少妇让水电工爽了视频 | 久久国产欧美日韩 | 美女在线免费视频 | 久久精品视频一区二区三区 | 97视频入口 | 久久久精品人妻一区二区三区蜜桃 | 那个网站可以看毛片 | 九九久久精品国产av片国产 | 漂亮瑜伽少妇高潮 | 少妇裸体啪啪激情高潮 | 漂亮人妻洗澡被公强 日日躁 | 羞羞国产一区二区三区四区 | 高潮射精日本韩国在线播放 | 免费久久网站 | 99热久久免费频精品18 | 国产高清在线精品一区不卡 | xxxxxl19成人免费视频 | 国产日韩三级 | 四虎影院色 | 大肉大捧一进一出好爽视频mba | 26uuu国产 | 青青草激情视频 | 亚洲国产成人精品女人久久久 | 伊人欧美在线 | 秋霞自拍 | 久久久久久久久久久久 | 真人与拘做受免费视频一 | 人人爽人人爽人人爽 | 国产视频二区 | 茄子视频国产在线观看 | 亚洲欧洲中文字幕 | 大乳美女a级三级三级 | 国产午夜亚洲精品羞羞网站 | 久久天天躁狠狠躁夜夜avapp | 免费看一区二区三区四区 | jizz亚洲女人高潮大叫 | 国产a级精品毛片 | 一本一本久久a久久精品综合麻豆 | 亚洲精品无码久久久影院相关影片 | 俄罗斯黄色录像 | 91久久精品一区二区三区大 | jazzjazz国产精品麻豆 | 国产清纯白嫩美女正无套播放 | 性开放网站 | 全黄色毛片 | 韩国美女视频黄是免费 | 免费看片在线观看www | 欧美性猛交xxx乱久交 | 亚洲精品乱码久久久久久蜜桃 | 欧美精品99久久久久久人 | 欧美日韩一区二区视频在线观看 | 女同av在线播放 | 中文字幕无码人妻aaa片 | 国产视频日本 | 久久久久久精 | 日本a级c片免费看三区 | 五月天综合视频 | 情趣蕾丝内衣少妇啪啪av | 亚洲色图88 | 国产91精品激烈高潮白浆 | 亚洲麻豆国产自偷在线 | 精品国产欧美 | 亚洲欧洲成人精品香蕉网 | 精品久久久网站 | 亚洲欧洲国产综合 | 人人妻人人澡人人爽欧美一区双 | 国产精品久久久久9999鸭 | 久久久久久久久久久久久久久久久久久久 | 农村黄毛aaaaa免费毛片 | 337p亚洲精品色噜噜噜 | 一级做a免费视频 | 国产成人免费视频精品含羞草妖精 | 好吊色免费视频 | 高h肉辣动漫h在线观看 | 国产精品久久精品国产 | 四虎影视在线 | play在线海量a v视频播放 | 国产成人歌舞艳r舞 | 四川丰满少妇被弄到高潮 | av在线不卡播放 | 日日噜噜夜夜狠狠 | 国产a级片免费看 | 三级成人在线 | 久久午夜羞羞影院免费观看 | 午夜视频在线观看网站 | 亚洲综合专区 | 97在线视频免费 | 国语自产偷拍精品视频偷 | 丰满少妇乱子伦精品看片 | 亚洲天堂视频在线观看 | 国产69精品久久久久久妇女迅雷 | 精品国产露脸精彩对白 | 亚洲va国产日韩欧美精品色婷婷 | 亚洲va欧美va天堂v国产综合 | 欧美日韩a v | 国产高清视频一区 | 国产娇小hdxxxx乱 | 日韩中文字幕在线播放 | 久久肉色丝袜脚交 | 涩涩视频免费在线观看 | 日韩理论片 | 日本丰满大乳hd | 深夜精品 | 韩国美女视频黄是免费 | 韩国久久久久 | 这里只有精品在线播放 | 黄色大片免费观看视频 | 亚洲国产欧美日韩精品一区二区三区 | 免费asmr色诱娇喘呻吟欧美 | 日本一级淫片免费看 | 男女免费视频 | 欧美xxxxxhd| 99久久久久久 | 亚洲综合网国产精品一区 | 午夜激情视频网站 | 99久99| 一本色道久久88综合日韩精品 | 婷婷亚洲综合 | 久久中文一区二区 | 无码国产色欲xxxx视频 | 337p日本大胆噜噜噜鲁 | 水蜜桃亚洲一二三四在线 | 日韩视频精品一区 | 放荡的美妇在线播放 | 亚洲天堂久 | 亚洲视频在线观看免费的欧美视频 | 精品欧美一区二区在线观看 | 亚洲人色婷婷成人网站在线观看 | 国产情侣草莓视频在线 | 亚洲精品久久久久久动漫器材一区 | 欧美在线观看视频 | 国产成人免费片在线观看 | 国产成人在线视频网站 | 伊人av网 | 日本三级全黄三级a | 国色天香网www在线观看 | 丰满岳跪趴高撅肥臀尤物在线观看 | 亚洲综合一| 国产精品岛国久久久久 | 色 综合 欧美 亚洲 国产 | 天天综合色网 | 亚洲天堂影院 | 国产激情一区二区三区成人免费 | 国产精品亚洲成在人线 | 91人人爽久久涩噜噜噜 | 国内精品久久久久久久影视麻豆 | 午夜女色国产在线观看 | 婷婷中文网| 亚洲色偷偷av男人的天堂 | 欧美日韩一级视频 | 一级淫片免费看 | 国产激情精品一区二区三区 | 麻花豆传媒mv在线观看 | 亚洲精品99久久久久久 | 日本人dh亚洲人ⅹxx | 精品女同一区二区三区在线 | 女人被男人躁得好爽免费视频 | 69xxxx在线观看| 国产99久久九九精品无码 | 久久人人爽人人爽人人av东京热 | 97se亚洲综合在线 | 一区二区三区四区不卡 | 国产午夜视频在线观看 | 日本免费高清一本视频 | 久久国产柳州莫菁门 | аⅴ新版在线天堂 | 国产人妻大战黑人第1集 | 一区二区三区四区日韩 | 久久99精品国产 | 东京热一区二区三区无码视频 | 久热欧美| 国产女人精品视频国产灰线 | 精品午夜一区二区三区在线观看 | 亚洲 欧美 综合 在线 精品 | 又湿又紧又大又爽a视频国产 | 91精品久久久久久久蜜月 | 丰满少妇高潮久久三区 | 天天色天天射综合网 | 欧美人妻一区二区三区 | 日本高清免费aaaaa大片视频 | 精品一区在线视频 | 亚洲在线免费观看视频 | 丰满人妻熟妇乱偷人无码 | 国产乱人伦偷精品视频 | 国内毛片毛片毛片毛片毛片 | 国产热a欧美热a在线视频 | 国产日产亚洲系列最新 | 一级免费黄色毛片 | 午夜免费 | 国产做受高潮漫动 | 精品少妇一区二区三区免费观 | 麻豆疯狂做受xxxx高潮视频 | 欧美久久久久久久久久 | 18禁无遮挡羞羞污污污污网站 | 6080私人午夜性爽快影院 | 久久综合伊人77777麻豆最新章节 | 一本色道av立川理惠 | 蜜臀久久精品久久久久久酒店 | 一道本在线视频 | 久久夜靖品2区 | 欧美乱大交xxxxx春色视频 | 国产精品亚洲欧美日韩久久制服诱 | 亚洲美女自拍视频 | 天堂久久久久久久 | 欧美福利一区二区三区 | 亚洲一二区视频 | 51精品国产人成在线观看 | 沦为黑人姓奴的少妇 | 尤物国产 | 免费av观看网站 | 午夜视频免费 | 午夜丁香网| 国产精品欧美一区二区三区 | 美女裸体视频永久免费 | 国产欠欠欠18一区二区 | 国产精品xx | 精品欧美在线 | av综合网男人的天堂 | 欧美成人在线免费观看 | 国产爆乳无码av在线播放 | 国产69精品久久99的软件特点 | 欧美精品久久96人妻无码 | 色综合久久精品亚洲国产 | 国产免费视频传媒 | 大学生三级中国dvd 大学生一级片 | 国产精品高潮呻吟av久久4虎 | 国产日韩欧美不卡在线二区 | 欧洲成人在线观看 | 伊人蕉久中文字幕无码专区 | 日韩av在线看免费观看 | 欧美日韩国产二区 | 色久综合网 | 无码专区亚洲综合另类 | 日韩在线观看视频一区二区 | 国产视频一区三区 | 夫妻啪啪呻吟x一88av | 在线不卡国产 | 亚洲精品国产精华液 | 亚洲人成人无码www 国产亚洲精品久久久久秋霞 | 国产精品二区一区二区aⅴ污介绍 | 大片av | 黄色一级大片免费版 | 亚洲暴爽av天天爽日日碰 | 日本免费网址 | 久久久久人妻一区二区三区 | 综合久久国产九一剧情麻豆 | 视频国产一区 | 久久人人爽人人爽人人片亚洲 | a级一级片| 夜天干天干啦天干天天爽 | 2020毛片 | 国产国产精品人在线观看 | 精品国产品香蕉在线 | 久久机热| 欧美裸体xxxx极品少妇 | 国产在线视频一区二区三区 | 久久三级视频 | 国产又粗又猛又爽又黄的视频9 | 亚州精品视频 | 日韩第一页在线观看 | 在线播放亚洲第一字幕 | 狠狠综合久久久久综合网 | 美日韩av | 国产日韩成人内射视频 | 亚洲一区二区综合 | 2019精品手机国产品在线 | 欧美色就是色 | 一级黄色片在线免费观看 | 精品国产一区二区三区久久久狼 | 福利视频第一页 | 免费做a爰片久久毛片a片 | 久久精品久久久 | 精品国产午夜 | 国产在线视频卡一卡二 | 日韩精品一区二区三区亚洲综合 | 一本一道久久a久久精品综合蜜臀 | 亚洲v欧美v日韩v国产v | 国产精品无码天天爽视频 | 亚洲图片欧美激情 | 欧美一级特黄aa大片 | 成人三级做爰视频在线看 | 亚洲蜜桃精久久久久久久久久久久 | 一性一交一口添一摸视频 | 九色porny丨国产首页注册 | 亚洲日产韩国一二三四区 | 国产午夜福利精品一区二区三区 | 欧美人狂配大交3d怪物一区 | 亚洲男人的天堂在线观看 | 中国av一区 | 国产中文网 | 中文文字幕文字幕高清 | av在线毛片| 一本大道一区二区 | 亚洲欧洲日韩在线 | 精品无码国产av一区二区 | 欧美日韩精品一区二区在线播放 | 久久国内精品 | 99久久这里只有精品 | 亚洲熟妇av一区二区三区漫画 | 日本一区二区三区四区在线观看 | 美女网站在线永久免费观看 | 农村妇女一区二区 | 亚洲一区综合 | 538精品视频在线播放 | 香蕉精品视频在线观看 | 国产绳艺sm入口 | 五月婷婷亚洲 | 日韩av中文字幕在线播放 | 欧美日韩免费做爰大片人 | 一本色综合| 国产精品免费看久久久无码 | 在线国产一区二区 | 一区二区三区日韩 | 欧美色就是色 | 国产视频手机在线播放 | 欧美午夜特黄aaaaaa片 | 男女做那个的全过程 | 欧美黑人一区二区三区 | 91精品综合久久久久m3u8 | 91素人约啪 | 成人丝袜激情一区二区 | 国产中文字幕第一页 | 亚洲精品激情视频 | 少妇的肉体k8经典 | 午夜视频免费看 | 天天操夜夜想 | 成人在线观看你懂的 | 狠狠色噜噜狠狠狠狠色综合网 | 国产乱人乱精一区二视频国产精品 | 亚洲精品一区二区三区樱花 | 亚洲日本在线观看 | 涩涩网站在线观看 | 激情四射av| 97av在线播放 | 精品国产乱码久久久久久1区2区 | 天堂资源最新在线 | 高清乱码男女免费观看 | 99精品视频免费版的特色功能 | 色综合成人 | 免费va人成视频网站全 | 人人妻人人澡人人爽秒播 | 日b影院 | 欧美精品入口 | 欧美日韩久久久精品a片 | 国产色频 | 中文成人在线 | 日本中文在线 | 欧美日韩国产中文 | 99久久婷婷国产综合精品免费 | 亚洲成a人片在线观看无码 97se亚洲精品一区 | 2019自拍偷拍| 国产欧美一区二区三区在线看 | 国产激情啪啪 | 成人艳情一二三区 | 上原亚衣av一区二区三区 | 丝袜高跟av| 97国精产品无人区一码二码 | 亚洲国产成人精品无色码 | 国产无人区码熟妇毛片多 | 亚洲777| 午夜福利视频合集1000 | 最新国产aⅴ精品无码 | 久色国产 | 欧产日产国产精品乱噜噜 | 日本五十熟hd丰满 | 377人体粉嫩噜噜噜 精品久久久久久无码中文野结衣 | 久久九九热 | 久久国产精品影院 | 自拍偷拍视频网 | 超碰人人网 | 精品无码成人片一区二区98 | 日本黄色美女网站 | 日日噜狠狠噜天天噜av | 美女在线一区 | 快射视频在线观看 | 国产精品毛片久久久久久久 | 久久女人天堂 | 亚洲一区成人 | 欧美精品欧美极品欧美激情 | 免费做a爰片77777 | 国产性猛交╳xxx乱大交 | 免费a大片 | 黄色一级生活片 | 中文字幕 亚洲精品 第1页 | 一级在线毛片 | 野花国产精品入口 | 午夜精品久久久久久久99老熟妇 | 国产精品99久久免费观看 | 99久久婷婷国产综合精品 | 中文字幕在线视频观看 | 亚洲精品v日韩精品 | 波多野结衣一区在线 | 九色琪琪久久综合网天天 | 久久久久高清 | 蜜桃综合网 | 国产成人久久77777精品 | 国产精品久久 | 中文字幕一区二区三区又粗 | 91啪在线| 久久免费少妇做爰 | 黑人巨大精品欧美 | 97超碰人人网 | 国产无套精品一区二区三区 | 一区二区免费看 | 天天色综合6 | 亚洲第一极品精品无码 | 在线天堂中文www视软件 | 国产天天综合 | 粉嫩av一区二区三区在线播放 | 亚洲成a人片在线观看中文 精品久久久久久久中文字幕 | 爱弓凉在线视频一区二区 | 久久精品无码一区二区三区 | 三级黄色免费片 | 日韩国产二区 | 夜夜躁狠狠躁日日躁av | 懂色av蜜乳av一二三区 | 国产成人精品久久综合 | mm131美女久久精品美女图片 | 综合在线一区 | 玩丰满熟妇xxxx视频 | yy111111少妇影院免费观看 | 免费人成在线观看视频播放 | 欧美午夜免费 | 好吊色一区二区三区 | 麻豆传传媒久久久爱 | а√天堂中文在线资源8 | 午夜中文字幕 | 精品国产免费一区二区三区 | 久久综合伊人77777麻豆最新章节 | 综合色吧 | 肥熟一91porny丨九色丨 | 日日碰狠狠躁久久躁综合小说 | 亚洲日韩乱码中文无码蜜桃臀 | √新版天堂资源在线资源 | 国产一区二区三区视频在线播放 | 亚洲区小说区 | 97资源共享在线视频 | 疯狂做受xxxx高潮视频免费 | 中文在线字幕免 | 亚洲在线视频免费观看 | 国产精品一区二区三区视频免费 | 日韩一区二区a片免费观看 性色av无码久久一区二区三区 | 综合五月激情二区视频 | 国产一区二区三区四区五区vm | 毛片在线网址 | 国产在线123 | 亚洲第一夜页 | 精品国产污污免费网站入口爱酱 | 色久婷婷 | 日本视频在线播放 | 亚洲va中文字幕无码毛片 | 日本特黄特色aaa大片免费 | 影音先锋中文字幕在线播放 | 成年人拍拍视频 | 成人深夜福利视频 | 亚洲成av人影院在线观看 | 日本六九视频69jzz | 久久精品视频16 | 欧美一区二区激情视频 | 久久久九九 | 日本人做受免费视频 | 麻豆视频在线观看免费网站黄 | 蜜桃香蕉视频 | 免费无码肉片在线观看 | 台湾极品xxx少妇 | 性――交――性――乱视频 | 欧美精品卡一卡二 | 12一15性xxxx粉嫩国产 | 国产乱码精品一区二区三区四川人 | 人禽杂交18禁网站免费 | 久久精精品久久久久噜噜 | 久久精品一区二区三区四区毛片 | 天天综合欧美 | 欧美韩国一区二区 | 国产精品久久久久久三级 | 国产777777线观看视频 | 性福利视频 | 久久久久久久久久久久久国产 | 丝袜理论片在线观看 | 亚洲精品乱码久久久久久金桔影视 | 久久久久久久999 | av桃色| 久久99精品久久久久久9 | 男女做爰猛烈吃奶啪啪喷水网站 | 好吊妞精品视频 | 亚洲精品一区二区三区蜜臀 | 成人免费版欧美州 | 亚洲视频在线视频 | 精品国产亚洲一区二区三区 | 97青青草 | 日本肥老妇色xxxxx日本老妇 | 欧美韩国日本在线 | 麻豆精品一区二区综合av | 亚洲精品蜜桃 | 中产乱码中文在线观看免费软件 | 国产一级大片在线观看 | 日韩中文一区二区 | 亚洲国产一区二区在线 | 欧美少妇性生活 | 大陆av在线| 亚洲国产精品久久久久婷婷老年 | 精品女同一区二区三区 | 日本精品巨爆乳无码大乳巨 | 久久婷婷六月 | 亚洲精品主播一区二区三区 | 天天撸夜夜操 | 真人做人试看60分钟免费 | 清纯粉嫩极品夜夜嗨av | av在线天堂 | 成人久久网站 | 亚洲色欲色欲大片www无码 | 国产精品免费久久久久 | 深爱婷婷| 色欲久久久天天天综合网 | 国产91在线 | 亚洲 | 欧美少妇激情 | 久久亚洲精品中文字幕无码 | 影音先锋男人av鲁色资源网 | 无遮挡啪啪摇乳动态图gif | 亚洲日韩国产精品第一页一区 | いいなり北条麻妃av101 | 国产精品二区一区二区aⅴ污介绍 | 日本不卡免费新一二三区 | 国产精品骚 | 亚洲13一14sexvideos | 狠狠色很很在鲁视频 | 波多野在线视频 | 国产aⅴ爽av久久久久久久 | 91中文字幕永久在线 | 噼里啪啦免费观看 | 成人欧美一区二区三区黑人一 | 秋霞中文字幕 | 国产69精品久久久久孕妇大杂乱 | 天堂在/线资源中文在线 | 欧美性做爰免费观看 | 污视频在线观看免费 | 草草草在线观看 | 香蕉爱爱视频 | 永久免费在线视频 | 日韩欧美一区视频 | a级黄色小视频 | 亚洲hdmi高清线| 亚洲.www | 久久99精品久久久久婷婷 | www.久久久久久久久久 | 亚洲欧美一级久久精品国产特黄 | 国产精品91视频 | 亚洲熟伦熟女新五十路熟妇 | 视频一区三区 | 亚洲精品久久久久久久久 | 亚洲视屏在线观看 | 亚洲网站免费 | 毛片大全在线播放 | 亚洲成人av免费观看 | 亚洲高清在线看 | 99国产免费| 免费视频网站在线观看入口 | 成人欧美一区二区三区1314 | 日本高清免费在线视频 | 色偷偷噜噜噜亚洲男人的天堂 | 免费网站91 | 精品女同一区二区三区在线观看 | 久久精品成人无码观看免费 | 亚洲人成网站999久久久综合 | 韩国黄色av | 日本在线观看www | 香蕉在线网 | 性色av一区二区三区无码 | 免费人妻无码不卡中文字幕18禁 | 亚洲3dmax成人 | 欧美日韩在线看 | 91一区二区 | 草久久av | av我不卡| 亚洲成人黄色在线 | 中文字日产幕码三区的做法大全 | 日韩视频精品 | 成人免费视| 亚洲午夜精品在线 | 2023精品国色卡一卡二 | 国产精品丝袜一区二区 | 国产影视av | 色偷偷av一区二区三区 | 又粗又大内射免费视频小说 | 少妇高潮喷水久久久久久久久久 | av网站免费线看 | 一本一道波多野结衣av中文 | 一级黄色大片在线观看 | 91视频久久久久 | 久久福利影院 | 最新中文字幕久久 | 国产下药迷倒白嫩丰满美女j8 | 亚洲最新中文字幕在线 | 国产人妖在线 | 盗摄中年夫妇啪啪免费观看 | 99一区二区 | 中国性猛交xxxx乱大交3 | 夜夜嗨av一区二区三区网页 | 高清中文字幕在线a片 | a级毛片高清免费视频 | 石榴视频成人在线观看 | 在线天堂中文在线资源网 | 美女嘘嘘嘘aaaaaaaa级 | 国产精品国产三级国产av中文 | 日本视频www色 | 亚洲黄色图片网站 | 国产精品国产自产拍高清av | 亚洲性在线观看 | 欧美在线视频网 | 欧美五月| 免费a在线 | 亚洲va欧美va国产综合剧情 | 十八禁在线观看视频播放免费 | 午夜综合网 | 欧美乱人免费视频观看 | 黄色小视频在线看 | 麻豆一区二区三区蜜桃免费 | 欧美日韩一区二 | 欧美久久国产精品 | 999精欧美一区二区三区黑人 | 国产精品无码av无码 | 99精品国产兔费观看久久 | av网站大全在线 | 高h辣h情趣道具h黄n男一女 | 黄色同人网站 | 日产电影一区二区三区 | 少妇性做爰xxxⅹ性视频 | 日本免费一区二区三区最新 | 中文成人在线 | 污视频在线免费观看 | 国产黄色在线网站 | 久久国产精品无码一区二区三区 | 动漫美女无遮挡免费 | 巨大乳沟h晃动双性总受视频一区 | 亚洲一区二区三区播放 | 国产黑丝在线视频 | 开心春色激情网 | 亚洲日本中文字幕天天更新 | 国产91精 | a级毛片网 | 国产精品人成在线播放新网站 | 国产女人高潮抽搐叫床涩爱小说 | 91亚洲精品一区二区 | 女人精69xxxxxx免费 | 亚洲www永久成人夜色 | 日韩无码专区 | 欧美一级一区二区 | 国产午夜福利在线播放 | 欧美日韩一区二区区别是什么 | 国产在线视频一区二区 | 美女国产毛片a区内射 | 丁香婷婷综合激情 | 亚洲精品入口a级 | 亚洲日本人的毛茸茸 | 999精欧美一区二区三区黑人 | 性中国xxx极品hd| 欧美人与性动交zoz0z | 国产精品一区在线观看你懂的 | 老司机成人永久免费视频 | 美女又黄又免费的视频 | 天堂久久久久久久 | 日本激情吻胸吃奶呻吟视频 | 91久久国语露脸精品国产高跟 | 51永久免费观看国产nbamba | 日韩欧美中文字幕一区二区三区 | 8090yy亚洲精品久久 | 涩涩视频免费看 | 在线免费看av| 波多野结衣电车痴汉 | 午夜黄色av | 色福利网| 国产精品久久久久久白浆 | 亚洲三级视频 | 综合图区亚洲欧美另类图片 | 成人网在线看 | 91看片在线观看 | 九一福利视频 | 天天操天天射天天爱 | 国产无套护士在线观看 | 久久精品国产免费看久久精品 | 女女百合高h喷汁呻吟玩具 女女互揉吃奶揉到高潮视频 | 国产精品99久久久久人中文网介绍 | 日韩黄色a | 一级做a爰片性色毛片精油 一级做a爰片性色毛片视频停止 | 性的免费视频 | 性高湖久久久久久久久 | 青娱乐精品视频 | 男女下面进入的视频免费午夜 | 国产精品一区二区三区四区五区 | 精品一区二区久久久久久久网站 | 日日操中文字幕 | 午夜影院色 | 国产私拍大尺度在线视频 | 亚洲国产成人久久综合电影 | 国产色视频一区二区三区qq号 | 欧美成人一区二区三区片免费 | 亚洲不卡在线视频 | 能看毛片的网站 | 第一区免费在线观看 | 亚洲一级二级三级 | 91亚洲精品一区二区乱码 | 在线观看成年人网站 | 国内精品伊人久久久久网站 | 女女同性女同一区二区三区91 | 精品在线视频一区 | 蜜桃免费在线视频 | 希岛爱理aⅴ在线中文字幕 希岛爱理和黑人中文字幕系列 | 国产在线高潮 | 中文激情网 | 视频国产一区 | 99无码熟妇丰满人妻啪啪 | youjizz.com最新| 尤物视频网站在线观看 | 男人的天堂a在线 | 男女乱淫真视频免费播放 | 日韩在线视频在线 | 国产一级在线 | 狠狠色香婷婷久久亚洲精品 | 欧美疯狂做受xxxx高潮小说 | 久久婷婷五月综合色欧美 | 青青草久久伊人 | av黄色在线播放 | 99re热视频这里只精品 | 国产精品成人免费 | 国产成人麻豆精品午夜福利在线 | 日本三级中国三级99人妇网站 | 少妇高潮喷水在线观看 | 国产做爰全免费的视频黑人 | 日本无遮羞打屁股网站视频 | 四虎4545www精品视频 | 日韩av爽爽爽久久久久久 | 欧美午夜精品久久久久 | 国产成人无码av一区二区在线观看 | 九九九九九热 | 国模少妇一区二区三区 | 欧美婷婷久久五月精品三区 | 黄色特级片| jizz欧美大全 | 国内精品免费午夜又爽又色愉情 | 五月婷婷一区二区三区 | 精品99视频 | 国产欧美69久久久久久9龙 | 亚洲欧美成人综合 | 国产精品区一区二区三含羞草 | 国产农村一国产农村无码毛片 | 日本久久丰满的少妇三区 | 久久香蕉精品视频 | 成年免费视频黄网站在线观看 | 青青草无码精品伊人久久 | 伦理一级片 | 国产拍拍拍拍拍拍拍拍拍拍拍拍拍 | 国产精品久久久区三区天天噜 | 熟妇人妻va精品中文字幕 | 中文字幕乱码中文乱码51精品 | 亚洲成人播放 | 新中文字幕 | 日韩av毛片在线观看 | 97超碰人人模人人人爽人人爱 | 97久久精品人人做人人爽 | 啄木系列成人av在线播放 | 成人vr视频专区 | 亚洲国产精品精华液999 | 国产传媒专区 | 国产精品美女久久久久久 | 99在线观看精品 | av网址观看 | 人人爽人人爽少妇免费 | 欧美日韩二三区 | 爽爽影院在线免费观看 | 国产黄色一级 | 又色又爽又大免费区欧美 | 国产精品久久久久久久第一福利 | 福利一区三区 | 国产做爰xxxⅹ高潮69 | 中文在线最新版天堂8 | 国内少妇偷人精品视频 | 少妇毛片一区二区三区 | 波多野结衣在线视频网站 | 青青青在线免费 | 亚洲麻豆91传媒 | 欧美午夜片欧美片在线观看 | 国产日产欧产精品精品app | 亚洲伊人成无码综合网 | 少妇bbbb做爰 | 亚洲黄色在线观看视频 | 永久黄网站色视频免费观看w | 成人做爰黄 | jizz欧美| 人人爽人人爽人人片av免费 | 偷窥自拍欧美色图 | 国产精品丝袜久久久久久高清 | 亚洲 日本 欧美 中文幕 | 亚洲v国产v欧美v久久久久久 | 久久精品人人爽人人爽 | 神马国产 | 爱情岛论坛亚洲品质有限公司18 | 成人做爰www看视频软件 | 国产成人无码一区二区在线观看 | 另类激情视频 | 亚州av在线 | 足疗店女技师按摩毛片 | 九九激情视频 | 欧美天堂在线 | 东京道一本热中文字幕 | 国产性色av | 国产精品高潮呻吟久久av免费动漫 | 久久精品99北条麻妃 | 国产91丝袜在线播放 | 午夜视频91 | 国产亚洲精品久久久久久久 | 国产欧美另类久久久精品图片 | 国产亚洲成av人在线观看导航 | 欧美日韩生活片 | 台湾佬久久 | 欧美黑人一级爽快片淫片高清 | 黑人狂躁日本妞hd | 中文字幕麻豆 | 男人的天堂日本 | 欧洲熟妇色xxxx欧美老妇软件 | 久久久久国产一区二区三区 | 涩涩屋污 | 久久性精品 | 国产伦精品一区二区三 | 东方欧美色图 | 免费的黄色大片 | 国产黄色自拍视频 | 国产中年夫妇高潮精品视频 |