前言：

主要概要：

1、HTML+CSS补充

2、DOM事件

3、jQuery示例

内容概要：

1、布局

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin:;

        }

        .w{

            width:980px;

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

效果如下：

2、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:;

        }

    </style>

所有网站这个都会用到。

以后就写一个公共的CSS，放在引用即可，after是指在这个标签内容的后面

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

3、页面布局，拖动浏览器如何让格式不变

第一种方法：

在外面定义一个div给一个固定宽度，如果缩小他会自动出现滚动条。如下图

写法如下：

<div style="width: 800px;">
　　　输入标签

</div>

方法2：@media

    <style>

        @media (min-width: 800px){

        .item{

            width:%;

            float: left;

            }

        }

        @media (max-width: 700px){

        .item{

            width:%;

            float: left;

            }

        }

    </style>

4、事件绑定

submit ，a标签，from表单，这些默认有些默认事件的

也可以自定义一些事件

方式1：点击出现弹框，确定，跳转

<body>

    <a href="http://www.baidu.com" onclick=" func();">走你</a>

    <script>

        function func(){

            alert();

             false;

        }

    </script>

</body>

如果我不想让他跳转，需要return一个FALSE即可，如下

<body>

    <a href="http://www.baidu.com" onclick="return func();">走你</a>

    <script>

        function func(){

            alert();

            return false;

        }

    </script>

</body>

方式2：

<a href="http://www.baidu.com" id="i1">走你</a>

<script>

    document.getElementById('i1').onclick = function () {

        alert()

    }

</script>

默认阻止写法就是，价格return FALSE；

<body>

<a href="http://www.baidu.com" id="i1">走你</a>

<script>

    document.getElementById('i1').onclick = function () {

        alert();

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

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

            return true;

        }else{

            alert('请输入内容')

            return false;

        }

    }

</script>

5、有一个绑定事件，我绑定想获取里面的数据。

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

6、点击获取时间去掉里面的关键字，拿开又恢复

代码如下：

<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 == ){

                ths.value = "请输入关键字"

            }

        }

    </script>

</body>

this 代表当前标签。

如果获取值，都用.value（表单相关的，比如input系列，select标签）

除了这些，想获取标签中间的值（div span），用innerhtml和innertext。

2者的区别就是innerhtml除了获取值之外还能获取里面的标签，比如a标签或者span标签

如下：

7、同时绑定2个相同的事件

实现效果如下：

点击同时出现2个事件

代码如下：

    <div id="i1" onclick="console.log(1);">dfd</div>

    <script>

        document.getElementById('i1').addEventListener('click',function(){

            console.log();

        })

    </script>

8、触发事件顺序。由内朝外（事件冒泡）

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

9、通过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>

10、给页面刷新，通过代码级别来做

window.location.reload()

获取当前URL和赋值

window.location.href

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

11、出效果图

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

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

            y: ,

            floating: true,

            borderWidth: ,

            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),

            shadow: true

        },

        credits: {

            enabled: false

        },

        series: [{

            name: 'Year 1800',

            data: [, , , , ]

        }, {

            name: 'Year 1900',

            data: [, , , , ]

        }, {

            name: 'Year 2008',

            data: [, , , , ]

        }]

    });

        }

        createChart();

    </script>

</body>

12、利用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"></div>

    <div class="c1"></div>

    <div class="c1"></div>

    <div class="c1"></div>

    <script src="jquery-1.12.4.js"></script>

    <script>

        $('.c1').text('')

    </script>

</body>

2个条件，比如找到class为c1然后ID为i1

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

等于

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

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

可以在这个里面去查找一些功能。

13、点赞实现

用到的知识点如下：

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 = ;

            var top = ;

            var right = ;

            var opacity = ;

            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 + ;

                top = top - ;

                right = right - ;

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

                   clearInterval(obj);

                   $(tag).remove()

               }

            },);

        }

    </script>

</html>

效果如下：

巴特西

一个初学者的辛酸路程-jQuery

前言：

内容概要：

最新文章

热门文章