一個初學者的辛酸路程-jQuery

時間 2019-11-12

標籤一個初學者辛酸路程 jquery 欄目職業生涯简体版

原文原文鏈接

前言：

主要概要：css

一、HTML+CSS補充html

二、DOM事件jquery

三、jQuery示例瀏覽器

內容概要：

一、佈局app

代碼以下ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .w{
            width:980px;
            margin:0 auto;
            border:1px solid greenyellow;
        }
    </style>
</head>
<body>
    <div style="background-color: black;color: white;">
        <div class="w">標題</div>
    </div>
    <div>
        <div class="w">內容</div>
    </div>
</body>
</html>

View Code

效果以下：函數

二、clear both的另一種寫法（清除浮動）佈局

常規寫法就是以下所示：字體

<body>
    <div style="background-color: greenyellow;">
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="clear: both;"></div>
    </div>
</body>

　　接着，咱們換另一種寫法網站

注意：有content纔會加標籤，通常都是這麼寫，不能寫display: none

    <style>
        .clearfix:after{
            content: '.';
            display: block;
            clear: both;
            visibility: hidden;
            height:0;
        }
    </style>

全部網站這個都會用到。

之後就寫一個公共的CSS，放在引用便可，after是指在這個標籤內容的後面

<link rel="stylesheet" href="commons.css">

三、頁面佈局，拖動瀏覽器如何讓格式不變

第一種方法：

在外面定義一個div給一個固定寬度，若是縮小他會自動出現滾動條。以下圖

寫法以下：

<div style="width: 800px;">
　　　輸入標籤

</div>

方法2：@media

    <style>
        @media (min-width: 800px){
        .item{
            width:20%;
            float: left;
            }
        }
        @media (max-width: 700px){
        .item{
            width:50%;
            float: left;
            }
        }

    </style>

四、事件綁定

submit ，a標籤，from表單，這些默認有些默認事件的

也能夠自定義一些事件

方式1：點擊出現彈框，肯定，跳轉

<body>
    <a href="http://www.baidu.com" onclick=" func();">走你</a>
    <script>
        function func(){
            alert(123);
             false;
        }
    </script>
</body>

若是我不想讓他跳轉，須要return一個FALSE便可，以下

<body>
    <a href="http://www.baidu.com" onclick="return func();">走你</a>
    <script>
        function func(){
            alert(123);
            return false;
        }
    </script>
</body>

方式2：

<a href="http://www.baidu.com" id="i1">走你</a>
<script>
    document.getElementById('i1').onclick = function () {
        alert(123)
    }
</script>

默認阻止寫法就是，價格return FALSE；

<body>
<a href="http://www.baidu.com" id="i1">走你</a>
<script>
    document.getElementById('i1').onclick = function () {
        alert(123);
        return false;
    }
</script>
</body>

有何做用？

用戶提交數據若是爲空，我就在JS上去阻止提交了。

<form action="http://www.baidu.com">
    <input type="text" id="user" name="user" />
    <input type="submit" value="提交" onclick="return func();">
</form>
<script>
    function func(){
        var v = document.getElementById('user').value;
        if(v.length>0){
            return true;
        }else{
            alert('請輸入內容')
            return false;
        }
    }
</script>

第二種寫法：

    <input type="submit" id="sb" value="提交" />
</form>

<script>
    document.getElementById('sb').onclick = function(){
       var v = document.getElementById('user').value;
        if(v.length>0){
            return true;
        }else{
            alert('請輸入內容')
            return false;
        }
    }
</script>

五、有一個綁定事件，我綁定想獲取裏面的數據。

<body>
    <div id="i1" onclick="fuck();">答覆</div>
    <script>
        function fuck(){
            var v = document.getElementById('i1').innerText;
            alert(v);
        }
    </script>

this，觸發當前目標的對象

<div onclick="fuck(this);">答覆</div>
   <script>
        function fuck(self){
            var v = self.innerHTML;
            alert(v);
        }
    </script>

另一種寫法

<div id="i1">答覆</div>
<script>
        document.getElementById('i1').onclick = function(){
            var v = this.innerHTML;
            alert(v);
        }
</script>

六、點擊獲取時間去掉裏面的關鍵字，拿開又恢復

代碼以下：

<body>
    <input type="text" value="請輸入關鍵字" onfocus="fuckFocus(this);"onblur="fuckBlur(this);" />
    <input type="button" value="提交">
    <script>
        /*
        當標籤獲取焦點
        */
        function fuckFocus(ths){
            var v = ths.value;
            if(v == "請輸入關鍵字"){
                ths.value = "";
            }
        }
         /*
        當標籤失去焦點
        */
        function fuckBlur(ths){
            var v = ths.value;
            if(v.length == 0){
                ths.value = "請輸入關鍵字"
            }
        }

    </script>
</body>

this 表明當前標籤。

若是獲取值，都用.value（表單相關的，好比input系列，select標籤）

除了這些，想獲取標籤中間的值（div span），用innerhtml和innertext。

2者的區別就是innerhtml除了獲取值以外還能獲取裏面的標籤，好比a標籤或者span標籤

以下：

七、同時綁定2個相同的事件

實現效果以下：

點擊同時出現2個事件

代碼以下：

    <div id="i1" onclick="console.log(1);">dfd</div>
    <script>
        document.getElementById('i1').addEventListener('click',function(){
            console.log(2);
        })
    </script>

八、觸發事件順序。由內朝外（事件冒泡）

<body>
    <div style="height: 400px;width: 400px;background-color: red" onclick="alert(1);">
        <div style="height: 300px;width: 300px;background-color: greenyellow" onclick="alert(2);">
            <div style="height: 200px;width: 200px;background-color: black" onclick="alert(3);">
            </div>
        </div>
    </div>
</body>

下面，寫一個捕獲式。經過addEventListener和true來捕獲，事件觸發順序就是由外向裏了。來控制事件順序

    <div id="i1" style="height: 400px;width: 400px;background-color: red">
        <div id="i2" style="height: 300px;width: 300px;background-color: greenyellow" >
            <div id="i3" style="height: 200px;width: 200px;background-color: black" >
            </div>
        </div>
    </div>

    <script>
        document.getElementById('i1').addEventListener('click',function(){alert(1);},true);
        document.getElementById('i2').addEventListener('click',function(){alert(2);},true);
        document.getElementById('i3').addEventListener('click',function(){alert(3);},true);
    </script>

給全局綁定事件

event是當前事件的信息

    <input type="text" onkeydown="func(this,event);" />

    <script>
        function  func(ths,e){
            console.log(ths,e)
        }
    </script>

全局生效，給Window綁定全局事件

    <input type="text" onkeydown="func(this,event);" />

    <script>
        function  func(ths,e){
            console.log(ths,e);
        }
        window.onkeydown = function(e){
            console.log(e);
        }
    </script>

九、經過JS 給任何標籤添加提交表單功能

<form id="f1" action="http://www.baidu.com">
    <input type="submit" value="提交">
    <a onclick = "submitForm();">提交</a>

</form>
<script>
    function submitForm(){
        document.getElementById('f1').submit();
    }
</script>

十、給頁面刷新，經過代碼級別來作

window.location.reload()

獲取當前URL和賦值

window.location.href

window.location.href = "http://cn.bing.com"

十一、出效果圖

jQuery+highchart（專門用來出圖）

上官網拿圖https://www.hcharts.cn/demo/highcharts

代碼以下：

記住，函數式直接從官網找好圖，貼上它的代碼而來，而後再執行函數便可。

官網找的函數以下：

<body>
    <div style="height: 500px;">
        <div id="i1"></div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script src="highchart/highchart/highcharts.js"></script>
    <script>
        function  createChart(){
            $('#i1').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            name: 'Year 2008',
            data: [973, 914, 4054, 732, 34]
        }]
    });
        }
        createChart();
    </script>
</body>

十二、利用jQuery找到並操做

<body>
    <div id="i1">sdfdf</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').text('adidas')
    </script>
</body>

經過class來修改

<body>

    <div class="c1">1</div>
    <div class="c1">2</div>
    <div class="c1">3</div>
    <div class="c1">4</div>
    <script src="jquery-1.12.4.js"></script>
    <script>

        $('.c1').text('666')
    </script>
</body>

2個條件，好比找到class爲c1而後ID爲i1

$('.c1,#i1').text('666')

等於

$('.c1:eq(2)').text('12345')

地址爲：http://jquery.cuishifeng.cn/id.html

能夠在這個裏面去查找一些功能。

1三、點贊實現

用到的知識點以下：

1）追加$('t1').append()在旁邊增長一個標籤

2）定時器 setInterval

3）透明度

4）位置變化 position: relative

5）字體大小和位置變化

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding:50px;
            border:1px solid #dddddd;
        }
        .item{
            position: relative;
            width:30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
</body>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function(){
            AddFavor(this);
        });
        function  AddFavor(self){
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;

            var tag = document.createElement('span');
            $(tag).text('+1');
            $(tag).css('color','green');
            $(tag).css('fontSize',fontSize + "px");
            $(tag).css('position','absolute');
            $(tag).css('right',right + "px");
            $(tag).css('top',top + "px");
            $(tag).css('opacity',opacity);
            $(self).append(tag);

           var obj = setInterval(function(){
                fontSize = fontSize + 5;
                top = top - 5;
                right = right - 5;
                opacity = opacity - 0.1;

                $(tag).css('fontSize',fontSize + "px");
                $(tag).css('right',right + "px");
                $(tag).css('top',top + "px");
                $(tag).css('opacity',opacity);

//               刪除定時器和去除+1的標籤
               if (opacity < 0){
                   clearInterval(obj);
                   $(tag).remove()
               }

            },100);
        }
    </script>
</html>