Jquery+ajax+bootstrap

本文轉載自查看原文 2018-08-04 21:40 1509

bootstrap參考：https://v3.bootcss.com/components/#btn-dropdowns

內容回顧：

1.先引入jquery的包
2.入口函數
$(document).ready()

$(function(){})
3.jquery的選擇器

$('ul li:eq(1)') 過濾

篩選選擇器$('ul li').silbings()

屬性操作：
img src='./1.png'

js:操作標簽上屬性

1.獲取jsdom對象
var oImg = document.getElementsByTagName('img')[0];
2.獲取屬性
// oImg.src 獲取src的屬性值 oImg.getAttribute('src') oImg['src']

oImg.style.width = '200px'

jquery;
1.獲取jquery對象

$('img').attr('src')
$('img').attr('src','2.png')
jquery:$('ul li').attr()

$('img').css('width','200px')

js對象《==》jquery對象轉化

類操作
addClass()
removeClass()

prop() 單選按鈕 checked

前端雜亂無章

操作DOM 節點

document

標簽節點

樣式節點屬性節點 DOM操作

style getAttribute||setAttribute document.createElement() appendChild()

jquery

css() attr() append()

__prop__
今日內容：
1.jq的dom操作
父子標簽之間的操作：
父.append(子)
子.appendTo(父)

父.prepend(子) 插入到父元素的第一個元素
子.prependTo(父)
兄弟標簽之間的操作
after() before()
insertAfter() insertBefore()
刪除：
remove(); 刪除節點，事件也一起刪除 ***
detach();刪除節點，事件會保留

empty();清空父元素中的內容

js中： appendChild() insertBefore() removeChild()

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="box">
        
    </div>

    <ul>
        <li>1</li>
        <li>2</li>

    </ul>

    <h2 class="p1">嗚嗚嗚嗚</h2>


    <button id="btn">刪除</button>


    <form>
        
    </form>
    <script src="jquery.js"></script>

    <script>
        

        $(function () {
            formDom();

            function formDom(argument) {
                $('form').append(`
                <label>用戶名</label>
                <input type="text">
                <input type="submit">`);
            }




            
            var op = document.createElement('p');

            //js設置內容
            // op.innerText = 'h欸嘿嘿'；

            $(op).text('嘿嘿');


            $('.box').append('<p id="p2">哈哈哈</p>');




            

            // $('.box').append(op);


            // $('.box').append($('.p1'));

            $('<h3>我是三級</h3>').appendTo('.box').css({
                color: 'red'
                
            });


            $('<h4>哈哈哈哈是</h4>').prependTo('.box');

            $('ul').after('<h4>我是一個h4標題</h4>');
            $('ul').before('<h4>我是一個h4標題2</h4>');


            $('<h5>我是一個h5標題</h5>').insertAfter('ul');
            $('<h5>我是一個h5標題2</h5>').insertBefore('ul');
            

            $('h5').replaceWith('<a href="#">hello world</a>')


            $('#btn').click(function(event) {
                alert(2);
                /* Act on the event */


                // var rBtn = $(this).remove();
                // console.log(rBtn);


                // $('ul').remove();

                var $btn = $(this).detach();
                console.log($btn);

                // $('.box').append($btn);

                $('ul').empty();
            });

        });
    </script>

</body>
</html>

Jquery的DOM操作

效果：

點擊刪除按鈕之后：

2.js中事件對象

每個事件都會有event

事件對象的方法：
阻止默認事件：比如a標簽和form標簽會有自己的默認的跳轉行為，我們可以通過e.preventDefault()來阻止當前的默認事件

阻止冒泡：因為冒泡是屬於DOM2級事件流的第三個階段，在這個階段，會對自己的網頁產生一定的影響，所以在對頁面中所有的標簽做事件操作時，event.stopPropagation()來阻止當前標簽的冒泡

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <form>
        
    </form>
    <a href="http://www.baidu.com" title="">百度</a>
    <script src="jquery.js"></script>

    <script>
        
        $(function () {
            formDom();

            function formDom(argument) {
                $('form').append(`
                <label>用戶名</label>
                <input type="text" id='user'>
                <input type="submit">`);
            }

            // 點擊 type='submit'的按鈕 會觸發 form表單的submit事件

            $('form').submit(function(event) {
                // alert(event);

                //  阻止from表單的默認行為
                event.preventDefault();
                // console.log(event)
                /* Act on the event */
                console.log(event);


            });
            

            // 實時監聽input輸入框內的value 通過oninput事件
            $('#user')[0].oninput  = function (event) {
                console.log(event.target.value);
            }

            $('a').click(function(event) {
                /* Act on the event */
                event.preventDefault();

                // 阻止冒泡
                event.stopPropagation()
                // event.target就是點擊的當前的對象（內層的標簽）
                // currentTarget指的是當前的標簽
                // console.log(event.target);
                // console.log(event.currentTarget);


                // console.log(this);
                console.log('單機')
            });

            /*
            $('body').click(function(event) {
                
                alert('a標簽冒泡');
                console.log(event.target);


                // this===event.currentTarget
                console.log(event.type);
                console.log(event.currentTarget);

            });
            $('html').click(function(event) {
            
                alert('a標簽又冒上了')
                // console.log(event.target);
                console.log(event.currentTarget);

            });
            */

            // $(document).click(function(event) {
            //     /* Act on the event */
            //     alert('a標簽冒到最上面了');
            //     // console.log(event.target);
            //     console.log(event.currentTarget);

            // });


            // 

            $('a').dblclick(function(event) {
                /* Act on the event */
                console.log('雙擊了')
            });



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

事件對象

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click',function(){
            console.log('btn處於事件捕獲階段');
        }, true);
        oBtn.addEventListener('click',function(){
            console.log('btn處於事件冒泡階段');
        }, false);

        document.addEventListener('click',function(){
            console.log('document處於事件捕獲階段');
        }, true);
        document.addEventListener('click',function(){
            console.log('document處於事件冒泡階段');
        }, false);

        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件捕獲階段');
        }, true);
        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件冒泡階段');
        }, false);

        document.body.addEventListener('click',function(){
            console.log('body處於事件捕獲階段');
        }, true);
        document.body.addEventListener('click',function(){
            console.log('body處於事件冒泡階段');
        }, false);

    };

    </script>
</head>
<body>
    <a href="javascript:;" id="btn">按鈕</a>
</body>
</html>

事件流

效果：點擊按鈕之后，控制台輸出：

3.jq的ajax
//get請求

請求：請求頭和請求體

響應：響應頭和響應體

input name='username' id='username'
input name='pwd' id='pwd'

input type='button'

get請求的數據會保存到請求體（url上）

var username = $('#username').val();
var pwd = $('#pwd').val();
$.ajax({
url:`http://127.0.0.1:8080/index?username=${username}&pwd=${pwd}`,
type:'get',
success:function(data){

},

});

post請求請求頭和請求體 post請求案例
響應頭和響應體

var username = $('#username').val();
var pwd = $('#pwd').val();
$.ajax({
url:`http://127.0.0.1:8080/index`,
data:{
username:username,
password:pwd
},
type:'get',
success:function(data){

},

});

XMLHtttpRequest()

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title></title>
</head>
<body>
    <p></p>
    <button type="button">獲取天氣</button>
    <script src="jquery.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        
        $(function () {
            //1.做了ajax 發請求  同步 請求后端的數據

            // alert(1);
            // alert(2);



            // 2.網頁面添加一個ul列表

            // "{msg:'ok'}"

            /*
            $('button').click(function(event) {
                $.ajax({
                    url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976',
                    type:'get',
                    dataType:'text',
                    success:function (data) {
                        console.log(data);
                        console.log(typeof data);

                        var jsonData = JSON.parse(data);
                        console.log(jsonData)


                        //做DOM操作
                        // $('p').text(data.HeWeather6[0].now.tmp+'℃')
                    },
                    error:function (err) {
                        console.log(err);
                    }
                });
            });
            */

            axios.get('https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976')
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });

            
        })
    </script>

</body>
</html>

ajax

頁面效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <style>

    @media screen and (min-width: 1170px){
        body{
            background-color: red;
        }
    }

    @media screen and (min-width: 880px) and (max-width: 1170px){
        body{
            background-color: green;
        }
    }
    @media screen and (max-width: 880px){
        body{
            background-color: yellow;
        }
    }
    
        
    </style>
</head>
<body>



</body>
</html>

@media查詢

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <title>移動端布局</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
            html{
                width: 100%;
                height: 100%;
                font-size: 20px;
                /*1rem=20px 1px=0.05rem*/
                overflow: hidden;
            }
            body{
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            .head-box{
                width: 100%;
                height: 4rem;
                background-color: red;
                position: absolute;
                top: 0;
                left: 0;    
            }
            .list{
                margin-top: 4rem;
                font-size:12px;
            }
            
            .list .item{
                float: left;
                width: 5rem;
                height: 5rem;
                border: 1px solid black;
                margin: 0.5rem;
                
            }
            
            
            
        </style>
    </head>
    <body>
        
        <header class="head-box">
            <div class="head-top"></div>
            <div class="head-bottom"></div>
        </header>
        
        <ul class="list clearfix">
            <li class="item">1111111</li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
             <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
             <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        
    </body>
    <script src="./resize.js"></script>
</html>

rem

效果：

4.插件庫介紹

5.bootstrap

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    body { padding-top: 70px; }
      
      .navt{
        /*background-color: red;*/
      }
      .box{
        border: 1px solid red;
      }
    </style>
  </head>
  <body style="height: 2000px;">
    <nav class="navbar navbar-default navbar-fixed-top navt">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <a class="navbar-brand" href="#">老男孩</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active">
                <a href="#">首頁</a>
              </li>
              <li>
                <a href="#">我的博客</a>
              </li>
             
            </ul>
            <form class="navbar-form navbar-right">
              <!-- default||success|| info||warning||danger -->
              <button type="submit" class="btn btn-info">登錄</button>
              <button type="submit" class="btn btn-danger">注冊</button>
            </form>
            
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>



   <div class="container">
     <div class="row">
       <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="box">
          <form>
            <div class="form-group">
              <label for="username">用戶名</label>
              <input type="text" class="form-control" id="username" placeholder="請輸入用戶名">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
           
            <button type="submit" class="btn btn-success btn-lg">提交</button>

            <button type="submit" class="btn btn-primary  btn-sm"><span class="glyphicon glyphicon-option-horizontal"></span></button>
          </form>
        </div>
       </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              <p>
                
                <span class="small">Bootstrap</span> 將全局 font-size 設置為 14px，line-height <span class="lead">設置為 1.428</span>。這些屬性直接賦予 元素和所有段落元素。另外，（段落）元素還被設置了等於 1/2 行高（即 10px）的底部外邊距（margin）。

              </p>
              <p>
                
                Bootstrap 將全局 font-size 設置為 14px，line-height 設置為 1.428。這些屬性直接賦予 元素和所有段落元素。另外，（段落）元素還被設置了等於 1/2 行高（即 10px）的底部外邊距（margin）。

              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 table-responsive">
         <table class="table table-striped table-bordered table-hover table-condensed">
           
           <thead>
             <tr>
               <th>id</th>
               <th>name</th>
               <th>age</th>

             </tr>
           </thead>
           <tbody>
             <tr class="info">
               <td>1</td>
               <td>alex</td>
               <td>20</td>
             </tr>
              <tr class="success">
               <td>2</td>
               <td>alex2</td>
               <td>29</td>
             </tr>
              <tr>
               <td>3</td>
               <td class="danger">alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3alex3</td>
               <td>9</td>
             </tr>
           </tbody>
         </table>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-md-* 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。
       </div>
     </div>
   </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

bootstrap

效果：

小作業：
1.解決單雙擊沖突的問題

var time = null;
//單擊事件
function click(){
//取消上次延時未執行的方法
clearTimeout(time);
//設置延時300ms
time = setTimeout(function(){
//在此寫單擊事件要執行的代碼
},300);
}

//雙擊事件
function dblclick(){
//取消上次延時未執行的方法
clearTimeout(time);
//下面寫雙擊事件要執行的代碼
}

2.百度天氣完成 ajax

3.bootstrap css的全局樣式
演示一遍

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Jquery+Ajax+Bootstrap Paginator實現分頁的拼接 Bootstrap 使用教程與jQuery的Ajax方法 bootstrap modal ajax方式與jquery validate使用失效解決跨域調用Ajax生成Jquery Table和Bootstrap table- jQuery之AJAX jQuery ajax —— Baidu ajax 【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之項目總結 Jquery Ajax jQuery Ajax bootstrap的ajax提交