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

前言：

主要概要：

1、HTML+CSS补充

2、DOM事件

3、jQuery示例

内容概要：

1、布局

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .w{
            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

效果如下：

2、clear both的另外一种写法（清除浮动）

常规写法就是如下所示：

<body>
    <div style="background-color: greenyellow;">
        <div style=" 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style=" 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style=" 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style=" 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style=" 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style=" 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">

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

第一种方法：

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

写法如下：

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

</div>

方法2：@media

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

    </style>

4、事件绑定

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>

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 == 0){
                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(2);
        })
    </script>

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

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

下面，写一个捕获式。通过addEventListener和true来捕获，事件触发顺序就是由外向里了。来控制事件顺序

    <div id="i1" style="height: 400px; 400px;background-color: red">
        <div id="i2" style="height: 300px; 300px;background-color: greenyellow" >
            <div id="i3" style="height: 200px; 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: 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>

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

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

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

效果如下：