python day16

時間  2019-11-10
標籤 python day16 day 欄目 Python 简体版
原文   原文鏈接 
http://www.cnblogs.com/wupeiqi/articles/5433893.html


JavaScirpt
    正則，字符串三個方法

DOM
    查找：
        直接查找
        間接查找
        --getElementById
        --getElementsByTagName
    操做：
        值
            innerText
            innerHtml
            value
        class：
            className
            classList.add
            classList.remove
        樣式：
            <input type='text' style="color:red;font-size:40px;"/>
            tag = .....
            tag.style.color = 'red';
            tag.style.fontSize = '40px';
        屬性：
            <input id='i1' name='n1' alex='sb' type='text' style="color:red;font-size:40px;"/>
            setAttribute
            getAttribute
            removeAttribute
            
            ===>
                tabObj.checked = true
            ===>jQuery: 操做數據，prop(checked,true)
        
        標籤：
            建立標籤：
                字符串
                對象
            將標籤添加到HTML中
                字符串形式的標籤：
                    p1.insertAdjacentHTML('beforeEnd',tag);
                對象形式的標籤：
                    p1.insertAdjacentElement('afterBegin',document.createElement('p'))
                    xxx.insertBefore(tag,xxx[1])
        點贊：
            建立標籤，定時器（大小，位置，透明度）
            一、this，當前觸發事件的標籤
            2、createElement
            3、appendChild
            4、setInterval建立定時器
               clearInterval刪除定時器
            5、removeChild刪除子標籤
        
        定時器
            setTimeOut,clearTimeout
            setInterval,clearInter
        
        事件：
            一、this，當前觸發事件的標籤
            二、全局事件綁定   window.onKeyDown = function(){}
            3、event，包含事件相關內容
            4、默認事件
                    自定義優先：a,form
                      默認優先：checkbox
jQuery
    模塊，Dom和JavaScript，
        1.12..  --> ...
        2.x     --> IE9
    
    查找：
        選擇器
            id選擇器
            標籤選擇器
            類選擇器
            組合
            層級 #i1 .c1
            
            $('input:eq(1),#i1 .item')
            
        篩選器
            $('#i1').find('.item')
            $('#i1').eq(1)
        
    操做：
        CSS
        屬性
            $('#i1').html() # 獲取html內容
            $('#i1').html("<span>123</span>") # 設置html內容
            
            text()
            
            val()
            
        文本操做
    事件：
        - 優化
        1、如何使用jQuery綁定
        2、當文檔加載完畢後，自動執行
            $(function(){
                ...
            });
        3、延遲綁定
        四、return false;

    擴展：
        JavaScirpt
            正則，字符串三個方法
        $.login
        Form表單驗證（）
    Ajax：
        偷偷發請求
        
    -- jQuery循環
    
    
    


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--綁定事件，獲取焦點onfocus(鼠標點擊),失去焦點onblur(鼠標移走)-->
    <input id="i1" type="text" value="請輸入關鍵字" onfocus="Focus();" onblur="Blur();" />
    <input id="i2" type="text"/>

    <script type="text/javascript">
        function Focus(){    
            //console.log('Focus');
            //獲取標籤，清空
            var  tag = document.getElementById('i1');
            if(tag.value == "請輸入關鍵字"){
                tag.value = "";
            }

        }
        function Blur(){
            //console.log('blur');
            //移除標籤，賦予
            var  tag = document.getElementById('i1');
            var val = tag.value;
            if(val.trim().length == 0){
                tag.value = "請輸入關鍵字";
            }
        }
    </script>
</body>
</html>







模態對話框
中間對話框，隱藏，顯示


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*隱藏，加!important最優先*/
        .hide{
            display: none !important;
        }

        /*遮罩層*/
        .shade{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            /*background-color: black;*/
            /*opacity: 0.6;*/
            background-color: rgba(0,0,0,.6);
            z-index: 1000;
        }
        /*對話框層*/
        .modal{
            height: 200px;
            width: 400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 1001;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;background-color: #dddddd;">
        <input type="button" value="點我" onclick="ShowModal();"/>
    </div>

    <div id="shade" class="shade hide"></div>
    <div id="modal" class="modal hide">
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>
    <script>
//        點擊顯示
        function ShowModal(){
            var t1 = document.getElementById('shade');
            var t2 = document.getElementById('modal');
            t1.classList.remove('hide');
            t2.classList.remove('hide');
        }
//        點擊隱藏
        function HideModal(){
            var t1 = document.getElementById('shade');
            var t2 = document.getElementById('modal');
            t1.classList.add('hide');
            t2.classList.add('hide');
        }
    </script>
</body>
</html>










表格，全選，取消，反選
-----版本1，不能複選 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全選" onclick="CheckAll()"/>
    <input type="button" value="取消" onclick="CancleAll()"/>
    <input type="button" value="反選" onclick="ReverseAll()"/>

    <!--定義表格-->
    <table border="1">
        <!--定義列頭-->
        <thead>
            <tr>
                <th>序號</th>
                <th>用戶名</th>
                <th>密碼</th>
            </tr>
        </thead>
        <!--定義內容-->
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" id="test"/></td>
                <td>1</td>
                <td>11</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="test1"/></td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="test2"/></td>
                <td>3</td>
                <td>33</td>
            </tr>
        </tbody>
    </table>
    <script>
        //全選，遍歷input配置checked等於checked(勾選)
        function CheckAll() {
            //獲取指定內容
            var tb = document.getElementById('tb')
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.setAttribute('checked','checked');
            }
        }
        //取消,去掉checked
        function CancleAll() {
            var tb = document.getElementById('tb')
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.removeAttribute('checked');
            }
        }
        //反選，判斷是否爲真(是否勾選，勾選即取消，反之則勾選)
        function ReverseAll() {
            var tb = document.getElementById('tb')
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                if(ck.checked){
                    ck.checked = false;
                    ck.removeAttribute('checked');
                }else{
                    ck.checked = true;
                    ck.setAttribute('checked','checked');
                }
            }
        }
    </script>
</body>
</html>






-------版本2,完整版本

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="全選"  onclick="CheckAll();"/>
    <input type="button" value="取消" onclick="CancelAll();"/>
    <input type="button" value="反選" onclick="ReverseCheck();"/>

    <table border="1" >
        <thead>

        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
        </tbody>
    </table>
    <script>
        function CheckAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = true;
                }
            }
        }

        function CancelAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = false;
                }
            }
        }

        function ReverseCheck(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){
                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    if(inp.checked){
                        inp.checked = false;
                    }else{
                        inp.checked = true;
                    }
                }
            }
        }

    </script>
</body>
</html>























點贊功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            padding: 50px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="item">
        <a onclick="Favor(this);">贊1</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">贊2</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">贊3</a>
    </div>
    <script>
        function Favor(ths){
            // ;ths=> this=> 當前觸發事件的標籤
            var top = 49;
            var left = 71;
            var op = 1;
            var fontSize = 18;

            var tag = document.createElement('span');
            tag.innerText = '+1';
            tag.style.position = 'absolute';
            tag.style.top = top + "px";
            tag.style.left = left + "px";
            tag.style.opacity = op;
            tag.style.fontSize = fontSize + 'px';
            ths.parentElement.appendChild(tag);

            var interval = setInterval(function(){
                top -= 10;
                left += 10;
                fontSize += 5;
                op -= 0.1;

                tag.style.top = top + "px";
                tag.style.left = left + 'px';
                tag.style.opacity = op;
                tag.style.fontSize = fontSize + 'px';
                if(opt <= 0.2){
                    clearInterval(interval);
                    ths.parentElement.removeChild(tag);
                }
            },50);
        }
    </script>
</body>
</html>


















DOM實現返回頂部


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .back{
            position: fixed;
            right: 20px;
            bottom: 20px;
            color: red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body onscroll="BodyScroll();">
    <div style="height: 2000px;background-color: #dddddd;"></div>
    <div id="back" class="back hide" onclick="BackTop();">返回頂部</div>
    <script>
        function BackTop(){
            document.body.scrollTop = 0;
        }
        function BodyScroll(){
            var s = document.body.scrollTop;
            var t = document.getElementById('back');
            if(s >= 100){
                t.classList.remove('hide');
            }else{
                t.classList.add('hide');
            }
        }
    </script>
</body>
</html>










overflow: auto 滾動條
<div style="overflow:auto; width:250px; height:auto; border:1px solid #000;"></div>




DOM 爲空驗證提交表單，爲空不容許提交，不爲空提交

<!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="username"/>
        <input type="submit" value="提交" onclick="return SubmitForm();"/>
    </form>
    <script>
        function SubmitForm(){
            var user = document.getElementById('username');
            if(user.value.length > 0){
                // 能夠提交
                return true;
            }else{
                // 不可提交，提示錯誤
                alert('用戶名輸入不能爲空');
                return false;
            }
        }
    </script>
</body>
</html>















JQUERY


http://www.php100.com/manual/jquery/





JQUERY 全選，取消，反選

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div id="p1">
        <p>hhh</p>
    </div>

    <input type="button" value="全選" onclick="CheckAll()" />
    <input type="button" value="取消" onclick="CancleAll()"/>
    <input type="button" value="反選" onclick="ReverseAll()"/>

    <table border="1">
        <thead>
            <tr>
                <th>序號</th>
                <th>用戶名</th>
                <th>密碼</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
             <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function CheckAll(){
            $('#tb input[type="checkbox"]').prop('checked',true);
        }
        function CancleAll(){
            $('#tb input[type="checkbox"]').prop('checked',false);
        }
        function ReverseAll(){
            $('#tb input[type="checkbox"]').each(function(i){
                // this  當前標籤
                // $(this)當前標籤的jQuery對象
                if($(this).prop('checked')){
                    $(this).prop('checked', false);
                }else{
                    $(this).prop('checked', true);
                }
            });
        }
    </script>
</body>
</html>









小說網站佈局



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>

    body{
        margin: 0px;
    }
    img {
        border: 0;
    }
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    h1{
        padding: 0;
        margin: 0;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .wrap{
        width: 980px;
        margin: 0 auto;
    }

    .pg-header{
        background-color: #303a40;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
    }
    .pg-header .logo{
        float: left;
        padding:5px 10px 5px 0px;
    }
    .pg-header .logo img{
        vertical-align: middle;
        width: 110px;
        height: 40px;

    }
    .pg-header .nav{
        line-height: 50px;
    }
    .pg-header .nav ul li{
        float: left;
    }
    .pg-header .nav ul li a{
        display: block;
        color: #ccc;
        padding: 0 20px;
        text-decoration: none;
        font-size: 14px;
    }
    .pg-header .nav ul li a:hover{
        color: #fff;
        background-color: #425a66;
    }
    .pg-body{

    }
    .pg-body .catalog{
        position: absolute;
        top:60px;
        width: 200px;
        background-color: #fafafa;
        bottom: 0px;
    }
    .pg-body .catalog.fixed{
        position: fixed;
        top:10px;
    }

    .pg-body .catalog .catalog-item.active{
        color: #fff;
        background-color: #425a66;
    }

    .pg-body .content{
        position: absolute;
        top:60px;
        width: 700px;
        margin-left: 210px;
        background-color: #fafafa;
        overflow: auto;
    }
    .pg-body .content .section{
        height: 500px;
        border: 1px solid red;
    }
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
    <div class="wrap clearfix">
        <div class="logo">
            <a href="#">
                <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
            </a>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a  href="#">首頁</a>
                </li>
                <li>
                    <a  href="#">功能一</a>
                </li>
                <li>
                    <a  href="#">功能二</a>
                </li>
            </ul>
        </div>

    </div>
</div>
<div class="pg-body">
    <div class="wrap">
        <div class="catalog" id="catalog">
            <div class="catalog-item" auto-to="function1"><a>第1張</a></div>
            <div class="catalog-item" auto-to="function2"><a>第2張</a></div>
            <div class="catalog-item" auto-to="function3"><a>第3張</a></div>
        </div>
        <div class="content" id="content">
            <div menu="function1" class="section">
                <h1>第一章</h1>
            </div>
            <div menu="function2" class="section">
                <h1>第二章</h1>
            </div>
            <div menu="function3" class="section">
                <h1>第三章</h1>
            </div>
        </div>
    </div>

</div>
    <script>
        function ScrollEvent(){
            var bodyScrollTop = document.body.scrollTop;
            if(bodyScrollTop>50){
                document.getElementsByClassName('catalog')[0].classList.add('fixed');
            }else{
                document.getElementsByClassName('catalog')[0].classList.remove('fixed');
            }

            var content = document.getElementById('content');
            var sections = content.children;
            for(var i=0;i<sections.length;i++){
                var current_section = sections[i];

                // 當前標籤距離頂部絕對高度
                var scOffTop = current_section.offsetTop + 60;

                // 當前標籤距離頂部，相對高度
                var offTop = scOffTop - bodyScrollTop;

                // 當前標籤高度
                var height = current_section.scrollHeight;

                if(offTop<0 && -offTop < height){
                    // 當前標籤添加active
                    // 其餘移除 active
                    var menus = document.getElementById('catalog').children;
                    var current_menu = menus[i];
                    current_menu.classList.add('active');
                    for(var j=0;j<menus.length;j++){
                        if(menus[j] == current_menu){

                        }else{
                            menus[j].classList.remove('active');
                        }
                    }
                    break;
                }

            }


        }
    </script>
</body>
</html>

















DOM實現隱藏菜單：點擊菜單彈出內容，其它菜單收回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 600px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        <!--逐層選擇器調用,配置全部body標籤選擇器中的內容格式-->
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
    </style>
</head>
<body>

    <div class="menu">
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜單一</div>
            <div class="body">
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
            </div>

        </div>
        <div class="item">

            <div class="title"  onclick="ShowMenu(this);">菜單二</div>
            <div class="body hide">
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title"  onclick="ShowMenu(this);">菜單三</div>
            <div class="body hide">
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
            </div>

        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ShowMenu(ths){
            // console.log(ths); // Dom中的標籤對象
            //$(ths)            // Dom標籤對象轉換成jQuery標籤對象（便利）
            //$(ths)[0]          // jQuery標籤對象轉換成Dom標籤對象

            $(ths).next().removeClass('hide');
            $(ths).parent().siblings().find('.body').addClass('hide');
        }
    </script>
</body>






JQUERY實現隱藏菜單：點擊菜單彈出內容，其它菜單收回


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 600px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
    </style>
</head>
<body>

    <div class="menu">
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜單一</div>
            <div class="body">
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
            </div>

        </div>
        <div class="item">

            <div class="title"  onclick="ShowMenu(this);">菜單二</div>
            <div class="body hide">
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title"  onclick="ShowMenu(this);">菜單三</div>
            <div class="body hide">
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
            </div>

        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ShowMenu(ths){
            // console.log(ths); // Dom中的標籤對象
            //$(ths)            // Dom標籤對象轉換成jQuery標籤對象（便利）
            //$(ths)[0]          // jQuery標籤對象轉換成Dom標籤對象

            $(ths).next().removeClass('hide');
            $(ths).parent().siblings().find('.body').addClass('hide');
        }
    </script>
</body>
</html>









JQUERY實現隱藏菜單：點擊菜單彈出內容，其它菜單收回
當文檔樹加載完畢後，自動執行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 600px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
    </style>
</head>
<body>

    <div class="menu">
        <div class="item">
            <div class="title">菜單一</div>
            <div class="body">
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
            </div>

        </div>
        <div class="item">

            <div class="title" >菜單二</div>
            <div class="body hide">
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title">菜單三</div>
            <div class="body hide">
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
            </div>

        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            // 當文檔樹加載完畢後，自動執行
            $('.item .title').click(function(){
                // this,$(this)
                $(this).next().removeClass('hide');
                $(this).parent().siblings().find('.body').addClass('hide');
            });
        });


        /*
        $('.item .title').bind('focus', function () {
            $(this).next().removeClass('hide');
            $(this).parent().siblings().find('.body').addClass('hide');
        })
        */
    </script>
</body>
</html>








輸入框，爲空跳轉，非空跳轉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" id="username" />
        <input type="submit" value="提交" onclick="return SubmitForm();" />
    </form>
    <script>
        function SubmitForm(){
            var user = document.getElementById('username');
            if(user.value.length > 0 ){
                // 能夠提交
                return true;
            }else{
                // 不可提交，提示錯誤
                alert('用戶名輸入不能爲空');
                return false;
            }
        }
    </script>
</body>
</html>














JQUERY 點擊加減框


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <p>
            <a onclick="Add(this);"> + </a>
            <input type="text" />
        </p>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function Add(ths){
            var p = $(ths).parent().clone();

            p.find('a').text(' - ');
            p.find('a').attr('onclick', 'Remove(this);');

            $(ths).parent().parent().append(p);
        }
        function Remove(ths){
            $(ths).parent().remove();
        }
    </script>
</body>
</html>








點擊按鈕加內容，點擊內容顯示數值窗口對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" onclick="Add();" />
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*
            $('li').click(function () {
                alert($(this).text());
            });
            */
            $("ul").delegate("li","click",function(){
                alert($(this).text());
            });
        });

        function Add(){
            var tag = document.createElement('li');
            tag.innerText = '666';
            $('ul').append(tag);
        }




    </script>
</body>
</html>




























JQUERY 功能學習
    jQuery 庫能夠經過一行簡單的標記被添加到網頁中
    jQuery 是一個 JavaScript 函數庫
    jQuery 庫包含如下特性：
        HTML 元素選取
        HTML 元素操做
        CSS 操做
        HTML 事件函數
        JavaScript 特效和動畫
        HTML DOM 遍歷和修改
        AJAX
        Utilities
    頁面添加 jQuery 庫
        jQuery 庫位於一個 JavaScript 文件中，其中包含了全部的 jQuery 函數。
        能夠經過下面的標記把 jQuery 添加到網頁中：
            <head>
            <script type="text/javascript" src="jquery.js"></script>
            </head>
            請注意，<script> 標籤應該位於頁面的 <head> 部分。
1. 基礎 jQuery 實例

    jQuery 的 hide() 和show 函數，隱藏和顯示 HTML 文檔中全部的 <p> 元素
         
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="jquery-1.12.4.js"></script>


        </head>
        <body>
            <h2> 這是頭部</h2>
            <p>第一行</p>
            <p>第二行</p>

            <input id="btnShow" type="button"  value="顯示" />
            <input id="btnHide" type="button"  value="隱藏" />

            <script type="text/javascript">
                $("#btnShow").bind("click", function(event) { $('p').show(); });
                $("#btnHide").bind("click", function(event) { $('p').hide(); });
            </script>
        </body>
        </html>








    只隱藏p元素，一個按鈕

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="jquery-1.12.4.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("button").click(function () {
                        $('p').hide();
                });
                });
            </script>
        </head>
        <body>
            <h2> 這是頭部</h2>
            <p>第一行</p>
            <p>第二行</p>
            <button type="button">點我</button>
        </body>
        </html>



2.下載 jQuery
    共有兩個版本的 jQuery 可供下載：一份是精簡過的，另外一份是未壓縮的（供調試或閱讀）
        jquery.js       測試使用
        jquery.min.js  正式環境用，精簡
        
        
    引用
        <head>
            <script src="jquery-1.12.4.js"></script>
        </head>


        
3.jQuery 語法
    經過 jQuery，您能夠選取（查詢，query） HTML 元素，並對它們執行「操做」（actions）
    

        
    $(this).hide()   
    隱藏當前的 HTML 元素(使用this,this爲當前html)
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
                <script src="jquery-1.12.4.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("button").click(function () {
                        $(this).hide();
                });
                });
            </script>
        </head>
        <body>
            <button type="button">Click me</button>
        </body>
        </html>
        
        
        
        
        
        
        
    $("#test").hide()
    隱藏 id="test" 的元素
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
                <script src="jquery-1.12.4.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("button").click(function () {
                        $("#test").hide();
                });
                });
            </script>
        </head>
        <body>
            <h2>頭部</h2>
            <p>段一</p>
            <p id="test">段二</p>
            <button type="button">Click me</button>
        </body>
        </html>
            
    
    
    
    
    
    
    $("p").hide()
    隱藏全部 <p> 元素。
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
                <script src="jquery-1.12.4.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("button").click(function () {
                        $("p").hide();
                });
                });
            </script>
        </head>
        <body>
            <p>fdsdafasdfdsaf</p>
             <p>fdsdafasdfdsaf</p>
             <p>fdsdafasdfdsaf</p>
             <p>fdsdafasdfdsaf</p>
             <p>fdsdafasdfdsaf</p>
            <button type="button">Click me</button>
        </body>
        </html>
        
        
        
        
        
    $(".test").hide()
    隱藏全部 class="test" 的元素。
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
                <script src="jquery-1.12.4.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("button").click(function () {
                        $(".test").hide();
                });
                });
            </script>
        </head>
        <body>
            <h2>頭部</h2>
            <p class="test">段一</p>
            <p>段二</p>
            <button type="button">Click me</button>
        </body>
        </html>
    
    
    
    jQuery 語法總結
    爲 HTML 元素的選取編制的，能夠對元素執行某些操做。
        基礎語法是：$(selector).action()
            美圓符號定義 jQuery
            選擇符（selector）「查詢」和「查找」 HTML 元素
            jQuery 的 action() 執行對元素的操做
            示例
            $(this).hide() - 隱藏當前元素
            $("p").hide() - 隱藏全部段落
            $(".test").hide() - 隱藏全部 class="test" 的全部元素
            $("#test").hide() - 隱藏全部 id="test" 的元素
            
        
        
    文檔就緒函數
        在咱們的實例中的全部 jQuery 函數位於一個 document ready 函數中
        $(document).ready(function(){
            --- jQuery functions go here ----
        });
        
        
        這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼，若是有空元素或圖片會加載很慢，因此不徹底加載加快速度
        
        
        
        
        
        
    隱藏部分文本
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
                <script src="jquery-1.12.4.js"></script>
            
            <!--.ex類標籤文本所有支持 點擊 隱藏-->
            <script type="text/javascript">
                $(document).ready(function(){
                  $(".ex .hide").click(function(){
                    $(this).parents(".ex").hide("slow");
                  });
                });
            </script>
            
            <!--.ex類標籤文本統同樣式-->
            <style type="text/css">
                div.ex
                {
                background-color:#e5eecc;
                padding:7px;
                border:solid 1px #c3c3c3;
                }
            </style>
        </head>
        <body>
            <h3>中國辦事處</h3>
            <div class="ex">
                <button class="hide" type="button">隱藏</button>
                <p>聯繫人：張先生<br />
                北三環中路 100 號<br />
                北京</p>
            </div>
            <h3>美國辦事處</h3>
            <div class="ex">
                <button class="hide" type="button">隱藏</button>
                <p>聯繫人：David<br />
                第五大街 200 號<br />
                紐約</p>
            </div>
        </body>
        </html>
        
    
    
    效果 - 淡入淡出
        實現元素的淡入淡出效果
            
            淡入
            jQuery fadeIn()
            
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <script src="jquery-1.12.4.js"></script>

                    <!--DIV圖形是diaplay:none不顯示的，利用選擇器查到id，fadeIn帶入-->
                    <script>
                        $(document).ready(function(){
                          $("button").click(function(){
                            $("#div1").fadeIn();
                            $("#div2").fadeIn("slow");
                            $("#div3").fadeIn(3000);
                          });
                        });
                    </script>
                </head>
                <body>
                    <p>演示帶有不一樣參數的 fadeIn() 方法。</p>
                    <button>點擊這裏，使三個矩形淡入</button>
                    <br><br>
                    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
                    <br>
                    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
                    <br>
                    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
                </body>
                </html>            
                    
            淡出
            jQuery fadeOut()
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <script src="jquery-1.12.4.js"></script>

                    <!--DIV圖形是顯示的，利用選擇器查到id，fadeOut帶出-->
                    <!--fadeOut(3000)的3000爲時間-->
                    <script>
                        $(document).ready(function(){
                          $("button").click(function(){
                                $("#div1").fadeOut();
                                $("#div2").fadeOut("slow");
                                $("#div3").fadeOut(3000);
                          });
                        });
                    </script>
                </head>
                <body>
                    <p>演示帶有不一樣參數的 fadeOut() 方法。</p>
                    <button>點擊這裏，使三個矩形淡出</button>
                    <br><br>
                    <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
                    <br>
                    <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
                    <br>
                    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
                </body>
                </html>
        
        
        
        
            淡入淡出一塊兒實現
            jQuery fadeToggle()
        
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <script src="jquery-1.12.4.js"></script>
                    <!--fadeToggle()實現淡入淡出-->
                    <script>
                        $(document).ready(function(){
                          $("button").click(function(){
                            $("#div1").fadeToggle();
                            $("#div2").fadeToggle("slow");
                            $("#div3").fadeToggle(3000);
                          });
                        });
                    </script>
                </head>
                <body>
                    <p>演示帶有不一樣參數的 fadeToggle() 方法。</p>
                    <button>點擊這裏，使三個矩形淡入淡出</button>
                    <br><br>
                    <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
                    <br>
                    <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
                    <br>
                    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
                </body>
                </html>
                
                
                
    效果 - 滑動
        滑動方法可以使元素上下滑動
        
            jQuery slideDown()
            向下滑動
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <script src="jquery-1.12.4.js"></script>
                    <script type="text/javascript">
                        $(document).ready(function(){
                           $(".flip").click(function(){
                               $(".panel").slideDown("slow");
                           });
                        });
                    </script>
                    <style type="text/css">
                        div.panel,p.flip{
                            margin: 0px;
                            text-align:center;
                            background:#e5eecc;
                            border:solid 1px #c3c3c3;
                        }
                        div.panel
                        {
                            height:120px;
                            display:none;
                        }
                    </style>
                </head>
                <body>
                    <div class="panel">
                        <p>W3School - 領先的 Web 技術教程站點</p>
                        <p>在 W3School，你能夠找到你所須要的全部網站建設教程。</p>
                    </div>
                     <p class="flip">請點擊這裏</p>
                </body>
                </html>
                
            jQuery slideUp()
            向上滑動
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <script src="jquery-1.12.4.js"></script>
                    <script type="text/javascript">
                        $(document).ready(function(){
                           $(".flip").click(function(){
                               $(".panel").slideUp("slow");
                           });
                        });
                    </script>
                    <style type="text/css">
                        div.panel,p.flip{
                            margin: 0px;
                            text-align:center;
                            background:#e5eecc;
                            border:solid 1px #c3c3c3;
                        }
                        div.panel
                        {
                            height:120px;
                        }
                    </style>
                </head>
                <body>
                    <div class="panel">
                        <p>W3School - 領先的 Web 技術教程站點</p>
                        <p>在 W3School，你能夠找到你所須要的全部網站建設教程。</p>
                    </div>
                     <p class="flip">請點擊這裏</p>
                </body>
                </html>
                
                
            
            jQuery slideToggle()
            上下滑動連用
            
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <script src="jquery-1.12.4.js"></script>
                    <script type="text/javascript">
                        $(document).ready(function(){
                        $(".flip").click(function(){
                            $(".panel").slideToggle("slow");
                          });
                        });
                    </script>

                    <style type="text/css">
                        div.panel,p.flip
                        {
                            margin:0px;
                            padding:5px;
                            text-align:center;
                            background:#e5eecc;
                            border:solid 1px #c3c3c3;
                        }
                        div.panel
                        {
                            height:120px;
                            display:none;
                        }
                    </style>
                </head>

                <body>
                    <div class="panel">
                        <p>W3School - 領先的 Web 技術教程站點</p>
                        <p>在 W3School，你能夠找到你所須要的全部網站建設教程。</p>
                    </div>
                    <p class="flip">請點擊這裏</p>
                </body>
                </html>
                                
    

    jQuery 中止動畫
        jQuery stop() 方法用於在動畫或效果完成前對它們進行中止。
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
                <script src="jquery-1.12.4.js"></script>
                <script type="text/javascript">
                    $(document).ready(function(){
                      $("#flip").click(function(){
                        $("#panel").slideDown(5000);
                      });
                      $("#stop").click(function(){
                        $("#panel").stop();
                      });
                    });
                </script>

                <style type="text/css">
                    #panel,#flip
                    {
                        padding:5px;
                        text-align:center;
                        background-color:#e5eecc;
                        border:solid 1px #c3c3c3;
                    }
                    #panel
                    {
                        padding:50px;
                        display:none;
                    }
                </style>
            </head>
            <body>
                <button id="stop">中止滑動</button>
                <div id="flip">點擊這裏，向下滑動面板</div>
                <div id="panel">Hello world!</div>
            </body>
            </html>
            
            
        
    
        jQuery stop() 動畫（帶有參數）
        從左向右移動100px
        
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
                <script src="jquery-1.12.4.js"></script>
                <script type="text/javascript">
                    $(document).ready(function(){
                        // animate爲動畫參數，此left是從左邊開始，最大移動100px
                        $("#start").click(function(){
                            $("div").animate({left:'100px'},5000);
                            $("div").animate({fontSize:'3em'},5000);
                        });
                        //無true的，stop中止當前，排隊的繼續執行
                        $("#stop").click(function(){
                            $("div").stop();
                        });
                        // 單true爲中止全部
                            $("#stop2").click(function(){
                            $("div").stop(true);
                        });
                        // 雙true是所有中止，但要呈現最後狀態
                        $("#stop3").click(function(){
                            $("div").stop(true,true);
                        });
                    });
                </script>
            </head>
            <body>
                <button id="start">開始</button>
                <button id="stop">中止</button>
                <button id="stop2">中止全部</button>
                <button id="stop3">中止但要完成</button>
                <p><b>"開始"</b> 按鈕會啓動動畫。</p>
                <p><b>"中止"</b> 按鈕會中止當前活動的動畫，但容許已排隊的動畫向前執行。</p>
                <p><b>"中止全部"</b> 按鈕中止當前活動的動畫，並清空動畫隊列；所以元素上的全部動畫都會中止。</p>
                <p><b>"中止但要完成"</b> 會當即完成當前活動的動畫，而後停下來。</p>
                <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
            </body>
            </html>
                    
                    
                    
                    
                    
                    
                    
    jQuery - 設置內容和屬性                
                    
        設置內容 - text()、html() 以及 val()
            text() - 設置或返回所選元素的文本內容
            html() - 設置或返回所選元素的內容（包括 HTML 標記）
            val() - 設置或返回表單字段的值
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程