第14天jquery+bootstrap

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() 

1.jq的dom操作

js可以链式编程

父子标签之间的操作：
父.append(子)
子.appendTo(父)

父.prepend(子) 插入到父元素的第一个元素
子.prependTo(父)
兄弟标签之间的操作
after() before()
insertAfter() insertBefore()
删除：
remove(); 删除节点，事件也一起删除 ***
detach();删除节点，事件会保留

$(selector).empty(); 清空选中元素中的所有后代节点 ----使用场景:登录注册时清空

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

2.jq中的事件对象
    点击type='submit'的按钮，会触发form表单的submit事件
    阻止form表单/a标签的默认行为   event.preventDefault()
    
    a标签中的href连接；form中的action

    target:点击的当前的对象（内层的标签）---常用
    currentTarget：指的是当前的标签  this===event.currentTarget
    
    事件流 document文档 事件捕获；处于目标；事件冒泡
    阻止冒泡：event.stopPropagation()

每个事件都会有event
            
        
            事件对象的方法：
            阻止默认事件：比如a标签和form标签会有自己的默认的跳转行为，我们可以通过e.preventDefault()来阻止当前的默认事件
            
            阻止冒泡： 因为冒泡是属于DOM2级事件流的第三个阶段，在这个阶段，会对自己的网页产生一定的影响，所以在对页面中所有的标签做事件操作时，event.stopPropagation()来阻止当前标签的冒泡

1.解决单双击冲突问题：
双击事件，300ms阻止单击

var time = null;
            //单击事件
            function click(){
                //取消上次延时未执行的方法
                clearTimeout(time);
                //设置延时300ms
                time = setTimeout(function(){
                    //在此写单击事件要执行的代码
                },300);
            }
             
            //双击事件
            function dblclick(){
                //取消上次延时未执行的方法
                clearTimeout(time);
                //下面写双击事件要执行的代码
            }

2.获取form中的input的value：
实时监听。。
js有oninput方法 $('.box')[0] event.target.value

jquery是js封装的

3.jq的ajax-----面试常问
    AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）
    简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
    异步-不等待
    有请求必有相应
    
    $ajax()
    
    和风天气（接口API、）
    url、type，先在浏览器中看一下
   ------2------- 取值，，天气获取图片
    。。。
    get请求的数据会保存到请求体（url上）
    
    post。。查看在network--all，选择左侧名字，点击headers查看
    原理：xml。。
    
axios：可以登录网址查看，可以拦截请求和响应
---3------阅读文档！！！：https://www.kancloud.cn/yunye/axios/234845

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">
        

    
4.插件库介绍
iframe
jq插件找到后直接使用



5.bootstrap：移动端响应式03

响应式@media
移动端单位介绍：rem  例子 font-size 响应式（随着屏幕的缩放，界面不变）

bootstrap：（写好了响应式）
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

使用以下给出的这份超级简单的 HTML 模版，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

基本模板  
上方组件里    导航条   固定导航栏
修改时自己添加一个类
 栅格系统设置显示个数： .col-xx-3
 --4----作业2：boots复制粘贴修改：写导航栏；写盒子--响应式的，盒子内容为小的知识点（粘贴）
 

侧别栏--可以点击显示

bootstrap官网 所有功能演示（复制粘贴一下 从css开始，组件里的内容）
不止用于p中，可作用于所有标签
写类别看结果
记住状态类class
内容长时使用--响应式表格 table-responsive

表单---校验，框红has-error
快速浮动