1 1.先引入jquery的包
 2         2.入口函數
 3             $(document).ready()
 4             
 5             $(function(){})
 6         3.jquery的選擇器
 7         
 8         $(‘ul li:eq(1)‘) 過濾
 9         
10         篩選選擇器$(‘ul li‘).silbings()
11         
12         屬性操作：
13             img     src=‘./1.png‘
14
 
             
15             js:操作標簽上屬性  
16             
17             1.獲取jsdom對象
18                 var oImg = document.getElementsByTagName(‘img‘)[0];
19             2.獲取屬性
20             // oImg.src  獲取src的屬性值  oImg.getAttribute(‘src‘)  oImg[‘src‘]
21             
22             oImg.style.width = ‘
 
200px‘
23             
24             jquery;
25             1.獲取jquery對象
26             
27             $(‘img‘).attr(‘src‘)
28             $(‘img‘).attr(‘src‘,‘2.png‘)
29             jquery:$(‘ul li‘).attr()
30             
31             $(‘img‘).css(‘width‘,‘200px‘)
32             
33             js對象《==》jquery對象轉化
 
34             
35             類操作
36             addClass()
37             removeClass()
38             
39             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
快速浮動

第14天jquery+bootstrap