day17 jQuery

時間 2019-12-15

標籤 day17 day jquery 欄目 JQuery 简体版

原文原文鏈接

1.html+css補充

- 頁面佈局：前臺佈局；後臺佈局css

- float清除html

第一種清除方法：（簡單粗暴）jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: green;">
        <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>
</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="width: 200px;height: 200px;border: 1px solid red;float: left;">test1</div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;">test1</div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;">test1</div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;">test1</div>

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

第三種方法：清新引入windows

common.css文件： app

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

html文件：dom

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

-響應式佈局的兩種方法：ide

第一種方法：簡單粗暴的直接定寬佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            width:25%;
            float: left;
            
        }
    </style>
</head>
<body>
    <div style="width: 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>

第二種方式：this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media (max-width:800px) {
            .item{
                width: 300px;
                float: left;
            }
        }
         @media (min-width: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;width: 400px;background-color: red" onclick="alert(1)">
        <div style="height: 300px;width: 300px;background-color: #009933" onclick="alert(2)">
            <div style="height: 200px;width: 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;width: 400px;background-color: red">
        <div id="i2" style="height: 300px;width: 300px;background-color: #009933">
            <div id="i3" style="height: 200px;width: 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="width: 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="width: 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;width: 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>

1. day17--JQuery
2. day17--JQuery實例
3. Python Day17(jQuery)
4. day17--JQuery選擇器
5. Python學習-day17 jQuery method and demo
6. day17
7. DAY17
8. python Django day17
9. jt-day17
10. day17 - Web前端概述
更多相關文章...
• jQuery Mobile 安裝 - jQuery Mobile 教程
• jQuery Mobile 過渡 - jQuery Mobile 教程
• Github 簡明教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。