Jquery+ajax+bootstrap

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的全局样式
演示一遍

猜你喜欢