zoukankan html css js c++ java

day17 jQuery

1.html+css补充

- 页面布局：前台布局；后台布局

- float清除

第一种清除方法：（简单粗暴）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: green;">
        <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>
</html>

第二种方法：文艺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{
            content: '......';
            display: block;
            clear: both;
            visibility: hidden;
            height:0;
            /*display: none;*/
        }
    </style>
</head>
<body>
    <div class="clearfix" style="background-color: #009933">
        <div style=" 200px;height: 200px;border: 1px solid red;float: left;">test1</div>
        <div style=" 200px;height: 200px;border: 1px solid red;float: left;">test1</div>
        <div style=" 200px;height: 200px;border: 1px solid red;float: left;">test1</div>
        <div style=" 200px;height: 200px;border: 1px solid red;float: left;">test1</div>

    </div>
</body>
</html>

第三种方法：清新引入

common.css文件：

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

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <div style="background-color: #009933" class="clearfix">
        <div style="height: 200px; 200px;border: 1px solid red;float: left;"></div>
        <div style="height: 200px; 200px;border: 1px solid red;float: left;"></div>
        <div style="height: 200px; 200px;border: 1px solid red;float: left;"></div>
        <div style="height: 200px; 200px;border: 1px solid red;float: left;"></div>
    </div>
</body>
</html>

-响应式布局的两种方法：

第一种方法：简单粗暴的直接定宽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            width:25%;
            float: left;
            
        }
    </style>
</head>
<body>
    <div style=" 800px">
        <div class="item">
            <label>用户名:</label>
            <input type="text"/>
        </div>
        <div class="item">
            <label>用户名:</label>
            <input type="text"/>
        </div>
        <div class="item">
            <label>用户名:</label>
            <input type="text"/>
        </div>
        <div class="item">
            <label>用户名:</label>
            <input type="text"/>
        </div>
        <div class="item">
            <label>用户名:</label>
            <input type="text"/>
        </div>
        <div class="item">
            <label>用户名:</label>
            <input type="text"/>
        </div>
        <div class="item">
            <label>用户名:</label>
            <input type="text"/>
        </div>
    </div>
</body>
</html>

第二种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media (max-800px) {
            .item{
                width: 300px;
                float: left;
            }
        }
         @media (min-700px) {
            .item{
                width: 300px;
                float: left;
            }
        }
    </style>
</head>
<body>
    <div class="item">
        <label>用户名：</label>
        <input type="text">
    </div>
    <div class="item">
        <label>用户名：</label>
        <input type="text">
    </div>
    <div class="item">
        <label>用户名：</label>
        <input type="text">
    </div>
    <div class="item">
        <label>用户名：</label>
        <input type="text">
    </div>
    <div class="item">
        <label>用户名：</label>
        <input type="text">
    </div>
    <div class="item">
        <label>用户名：</label>
        <input type="text">
    </div>
    <div class="item">
        <label>用户名：</label>
        <input type="text">
    </div>
    <div class="item">
        <label>用户名：</label>
        <input type="text">
    </div>
    <div class="item">
        <label>用户名：</label>
        <input type="text">
    </div>
</body>
</html>

2.dom事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <a href="http://www.caifupad.com" onclick="return func()">萌萌哒</a>
     <script>
         function func(){
             alert('萌萌哒')
             return false
         }
     </script>

</body>
</html>

用户提交实例（空字符不提交后台）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" id="user" name="user">
        <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>
</html>

第二种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <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>
</body>
</html>

如何绑定事件，如何阻止绑定事件都有两种方法如上述所示；

this介绍：表示当前触发事件的标签

一个标签可以绑定多个不同的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--第一种方式-->
    <!--<div id="i1" onclick="func(this)">sss</div>-->
    <!--<script>-->
        <!--function func(ths){-->
            <!--var v = ths.innerHTML-->
            <!--alert(v)-->
        <!--}-->
    <!--</script>-->
    <!--第二种方式-->
    <div id="i1">sss</div>
    <script>
        document.getElementById('i1').onclick = function(){
//            var v = document.getElementById('i1').innerHTML
            var v=this.innerHTML
            alert(v)
        }
    </script>
</body>
</html>

实例：获取焦点和失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" value="请输入关键字" onfocus="func(this);" onblur="bfunc(this);"/>
    <input type="button" value="提交">
    <script>
        <!--获取焦点-->
        function func(ths){
            var v = ths.value;
            if(v == "请输入关键字"){
                ths.value  = ""
            }
        }
//        失去焦点
        function bfunc(ths){
            var b = ths.innerText
            if(b.length == 0){
                ths.value = "请输入关键字"
            }
        }
    </script>
</body>
</html>

.value：表单信息的获取

innerText：只获取文本信息

innerHtml：获取到标签和文本信息

同一个标签绑定相同的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <div id='i1' onclick="console.log(1)">jjj</div>
     <script>
         document.getElementById('i1').addEventListener('click',function(){
             console.log(2)
         })
     </script>

</body>
</html>

事件冒泡：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 400px; 400px;background-color: red" onclick="alert(1)">
        <div style="height: 300px; 300px;background-color: #009933" onclick="alert(2)">
            <div style="height: 200px; 200px;background-color: #3300cc" onclick="alert(3)"></div>
        </div>
    </div>
</body>
</html>

事件捕获：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id='i1' style="height: 400px; 400px;background-color: red">
        <div id="i2" style="height: 300px; 300px;background-color: #009933">
            <div id="i3" style="height: 200px; 200px;background-color: #3300cc"></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>
</body>
</html>

windows事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" onkeydown="func(this,event);">

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

任何标签通过js提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="f1" action="http://www.baidu.com">
        <input type="submit" value="提交">
        <a onclick="submitForm();">提交</a>
    </form>
    <script>
        function submitForm(){
            document.getElementById('f1').submmit()
        }
    </script>
</body>
</html>

js补充：

刷新页面： window.location.reload

获取页面：window.location.href

页面赋值跳转：window.location.href = “http://www.baidu.com”

3.jQuery

highchart+jQuery画图：

jQuery的功能：

- 查找

      -选择器

        $(‘#i1’): 查找id=i1的标签

        $(‘.i1’):查找class=i1的标签

        $(‘div’)：查找所有的div标签

        $(‘*’)：查找所搜的标签

        $(‘#i1 .c1 div’)：先找id=i1的标签，然后在其子子孙孙中继续查找

        - 属性选择器

        $(‘input[type=”text”]’) ----> $(‘:text’)

      - 筛选器：

         $(‘#i1’).parent()

         $(‘#i1’).children()

         $(‘#i1’).next()

         $(‘#i1’).prev()

         $(‘#i1’).siblings()

         $(‘#i1’).find(‘.c1’)

       筛选器还支持链式编程：

          $(‘#i1’).next().prev().find(‘c1’).parent()   #实例

- 操作

        addClass()

        removeClass()

        val():针对input或者textarea的查找和设置值

        text()：针对文本获取和设置值

        html():针对文本获取和设置值

        attr()：对属性设置新值

        prop()：设置属性值checkbox的勾选

窗口切换的小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menus{
            height: 48px;
            background-color: lightgrey;
            line-height: 48px;
        }
        .menus a{
            display: inline-block;
            border:1px solid #3A3A4F;
            padding: 0 10px;
            margin-top: -4px;
        }
        .menus a.active{
            border-top:4px solid cadetblue;
        }
    </style>
</head>
<body>
    <div style=" 500px;border: 1px solid lightgrey;min-height: 500px">
        <div class="menus">
            <a class="active" target="i1">菜单一</a>
            <a target="i2">菜单二</a>
            <a target="i3">菜单三</a>
        </div>
        <div class="contents">
            <div nid="i1" class="content">内容一</div>
            <div nid="i2" class="content hide">内容二</div>
            <div nid="i3" class="content hide">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //为所有的a标签绑定时间
        $('.menus a').click(function(){
            //this是DOM的事件
            $(this).addClass('active').siblings().removeClass('active')
            var v = $(this).attr('target')   //获取i1 i2 i3
            var t = 'div[nid="' + v +'"]'   //div[nid=i1]
            $('.contents').find(t).removeClass('hide').siblings().addClass('hide')
        })
    </script>
</body>
</html>

全选，反选实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="checkAll()">全选</a>
    <a onclick="cancelAll()">取消</a>
    <a onclick="reverseAll()">反选</a>
    <table border="1px">
                <tr>
                    <td><input type="checkbox"></td>
                    <td target="id">1</td>
                    <td target="host">c1.com</td>
                    <td target="port">80</td>
                    <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td>
                    <td>查看更多</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td target="id">1</td>
                    <td target="host">c1.com</td>
                    <td target="port">80</td>
                    <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td>
                    <td>查看更多</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td target="id">2</td>
                    <td target="host">c2.com</td>
                    <td target="port">80</td>
                    <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td>
                    <td>查看更多</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td target="id">3</td>
                    <td target="host">c3.com</td>
                    <td target="port">80</td>
                    <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td>
                    <td>查看更多</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td target="id">4</td>
                    <td target="host">c4.com</td>
                    <td target="port">80</td>
                    <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td>
                    <td>查看更多</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td target="id">5</td>
                    <td target="host">c5.com</td>
                    <td target="port">80</td>
                    <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td>
                    <td>查看更多</td>
                </tr>
            </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll(){
            $('table :checkbox').prop('checked',true)
        }
        function cancelAll(){
            $('table :checkbox').prop('checked',false)
        }
        function reverseAll(){
           $('table :checkbox').each(function(){
               if($(this).prop('checked')){
                   $(this).prop('checked',false)
               }else{
                    $(this).prop('checked',true)
               }
           })
        }
    </script>
</body>
</html>

开关灯小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <a onclick="light()">开关灯</a>
    <div id='i2'style=" 400px; height: 400px; background-color:black">ddsdsads</div>
</body>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function light(){
             $('#i2').toggleClass('hide')
        }
    </script>
</html>

css参数：

$(‘#i1’).css(‘color’,’red’)

位置参数：

$(‘.i1’).position()：获取位置信息

$(‘#i1’).offset():相对定位

$(window).scrollTop(0)：返回顶部

返回顶部小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
    </style>
</head>
<body>
<div style="height: 900px;">fff</div>
<div id="i1">dadsak</div>
<div onclick="goTop()" style="height:50px; 50px;position: fixed; right: 10px;bottom: 10px;">返回顶部</div>
<script src="jquery-1.12.4.js"></script>
<script>
    function goTop(){
        $(window).scrollTop(0)
    }
</script>
</body>
</html>

文档操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="inp"/><a onclick="addValue()">添加</a>
    <ul id="ul">
        <li>内容一</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function addValue(){
           var v = $('#inp').val();
            var tag = document.createElement('li');
            tag.innerHTML = v;
            $('#ul').append(tag);  //同级追加
//            $('ul')prepend(tag);   //往上添加
//            $('ul').after(tag);    //往后添加
            $(tag).empty()         //晴空标签的内容
            $(tag).remove()       //移除标签
        }
    </script>
</body>
</html>

点赞实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            height: 80px;
            line-height: 80px;
            border:1px solid red;
        }
        .item .zan{
            position: relative;
        }
        .item .zan .i{
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="zan">
            <span>赞</span>
        </div>
    </div >
     <div class="item">
        <div class="zan">
            <span>赞</span>
        </div>
    </div>
     <div class="item">
        <div class="zan">
            <span>赞</span>
        </div>
    </div>
     <div class="item">
        <div class="zan">
            <span>赞</span>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item span').click(function(){
            var fontSize = 12;
            var top = -1;
            var left = 20;
            var opacity = 1;
            var tag = document.createElement('i');
            tag.innerHTML = "+1";
            $(this).after(tag)
           var obj = setInterval(function(){
                //创建定时器
                fontSize += 10;
                top -= 5;
                left += 5;
                opacity -= 0.2;
                tag.style.fontSize = fontSize + 'px';
                tag.style.top = top + 'px';
                tag.style.left = left + 'px';
                tag.style.opacity = opacity;
                if(opacity < 0){
                    //关闭定时器
                    clearInterval(obj)
                }
            },90)
        })
    </script>
</body>
</html>

查看全文

相关阅读:
为WCF增加UDP绑定（实践篇）
WCF服务编程-基础
 Entity Framework 数据库先行、模型先行、代码先行
 C# FTP上传下载（支持断点续传）
使用WCF上传文件
 MySQL · BUG分析 · Rename table 死锁分析
 MySQL · 物理备份 · Percona XtraBackup 备份原理
 MySQL · 答疑解惑 · MySQL 锁问题最佳实践
 MySQL · 特性分析 · MDL 实现分析
 MySQL · 引擎特性 · InnoDB 事务子系统介绍

原文地址：https://www.cnblogs.com/wanghui1991/p/6479818.html