Day25 js應(yīng)用 & jQuery & Ajax

1 事件的冒泡和捕獲

.事件冒泡：作用于子標(biāo)簽的事件會傳遞給父標(biāo)簽打月；如果希望作用于子標(biāo)簽的事件不傳遞給父標(biāo)簽柬采，需要在子標(biāo)簽中對事件進行捕獲
事件捕獲: 事件對象.stopPropagation()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <div id="div1"  style="background-color: yellow; width: 400px; height: 400px; margin-left: auto; margin-right: auto; ">
            <div id="div2" style="background-color: yellowgreen; width: 200px; height: 200px; margin-left: auto; margin-right: auto; ">
                <div id="div3" style="background-color: deepskyblue; width: 100px; height: 100px; margin-left: auto; margin-right: auto;">
                    
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            document.getElementById('div1').onclick = function(){
                alert('div1被點擊')
            }
            
            document.getElementById('div2').onclick = function(evt){
                alert('div2被點擊')
                
                evt.stopPropagation()
            }
            
            document.getElementById('div3').onclick = function(evt){
                alert('div3被點擊')
                
                //阻止當(dāng)前事件被傳遞給父標(biāo)簽
                evt.stopPropagation()
            }
            
        </script>
        
    </body>
</html>

實現(xiàn)城市下拉菜單

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <select name="province" id="province">
            
        </select>
        <select name="city" id="city">
            
        </select>
        
        
        <script type="text/javascript">
            
            //獲取節(jié)點
            provinceNode = document.getElementById('province')
            cityNode = document.getElementById('city')
            
            //城市數(shù)據(jù)
            cityMessage = {
                '四川省': ['成都市', '綿陽市','德陽市','自貢', '巴中', '宜賓', '眉山', '樂山'],
                '重慶': ['南岸區(qū)', '沙坪壩', '璧山', '秀山', '合川', '豐都', '萬州', '開州'],
                '廣東省': ['廣州市','深圳', '佛山', '汕頭', '珠海']
            }
            
            //==========顯示省=========
            for(province in cityMessage){
                //創(chuàng)建每個省對應(yīng)的節(jié)點
                provinceOptNode = document.createElement('option')
                provinceOptNode.innerText = province
                provinceNode.appendChild(provinceOptNode)
            }
            
            //======顯示市=============
            function refreshCity(){
                //清空
                cityNode.innerHTML = ''
                //根據(jù)省獲取市的信息
                citys = cityMessage[provinceNode.value]
                //顯示市信息
                for(x=0;x<citys.length;x++){
                    city = citys[x]
                    cityOptNode = document.createElement('option')
                    cityOptNode.innerText = city
                    cityNode.appendChild(cityOptNode)
                }
            }
            refreshCity()
            
            
            //===========刷新市============
            provinceNode.onchange = refreshCity     
        </script>
        
    </body>
</html>

動態(tài)添加背景

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                height: 400px;          
            }
        </style>
    </head>
    <body>
        <div id="box"></div>    
        <script type="text/javascript">
            backgroundDatas = [
                {img:'bg1.png', color:'rgb(207,26,26)'},
                {img:'bg2.png', color: 'rgb(79,150,214)'}
            ]
            
            
            //準(zhǔn)備節(jié)點
            boxNode = document.getElementById('box')
            
            //準(zhǔn)備數(shù)據(jù)
            x = parseInt(Math.random()*backgroundDatas.length)
            currentBgData = backgroundDatas[x]
            
            //設(shè)置背景
            boxNode.style = 'background: url(img/'+currentBgData.img+') no-repeat 200px center '+ currentBgData.color       
        </script>
    <body>
</html>

安妞切換效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            button{
                border: 0;
                width: 150px;
                height: 70px;
                
                font-size: 25px;
            }
            button:focus{
                outline: 0;
            }
        </style>
    </head>
    <body>
        <button class="loginBtn">掃碼登錄</button>
        <button class="loginBtn">賬號登錄</button>
        <button class="loginBtn">微信登錄</button>
        <button class="loginBtn">QQ登錄</button>
        <!--<div id="box1">
            
        </div>-->
        <div id="box2" style="width: 300px; height: 400px; background-color: lightblue;">
            
        </div>
        
        <script type="text/javascript">
            
            btnNodes = document.getElementsByClassName('loginBtn')
            
            //存當(dāng)前被選中的節(jié)點
            selectBtnNode = null
            for(x=0;x<btnNodes.length;x++){
                btnNode = btnNodes[x]
                
                if(x == 0){
                    btnNode.style.color = 'red'
                    selectBtnNode = btnNode
                }
                //添加屬性
                btnNode.x = x
                //綁定點擊事件
                btnNode.onclick = function(){
                    if(selectBtnNode == this){
                        return
                    }
                    selectBtnNode.style.color = 'black'
                    this.style.color = 'red'
                    //更新當(dāng)前選中節(jié)點的值
                    selectBtnNode = this
                    
                    box2Node =document.getElementById('box2')
                    switch(this.x){
                        case 0:
                            box2Node.innerHTML = ''
                            box2Node.style.backgroundColor = 'red'
                            break
                        case 1:
                            box2Node.innerHTML = ''
                            box2Node.style.backgroundColor = 'white'
                            box2Node.appendChild(document.createElement('input'))
                            break
                        case 2:
                            box2Node.innerHTML = '' 
                            box2Node.style.backgroundColor = 'goldenrod'
                            box2Node.appendChild(document.createElement("button"))
                            break
                        case 3:
                        box2Node.innerHTML = ''     
                    }
                }
            }
                
        </script>
    </body>
</html>

practice : 網(wǎng)頁安妞切換

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box1{
                text-align: center;
            }
            .button{
                width: 50px;
                height: 40px;
                border: 0;
                color: white;
                background-color: rgba(0,0,0,0);
                cursor: pointer;
            }
            .button:focus{
                outline: 0;
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <div id="box1" style="background-color: rgb(200,200,200);height: 40px;">
            <button class="button" id="www">網(wǎng)頁</button>
            <button class="button">視頻</button>
            <button class="button">圖片</button>
            <button class="button">科技</button>
            <button class="button">新聞</button>
            <button class="button">動漫</button>
            <button class="button">音樂</button>
        </div>
        
        
        <script type="text/javascript">
            name = "張山"
            age = 19
            message = `我叫${name},今年${age}歲了`
            console.log(message)
            butNodes = document.getElementsByClassName("button")
            seltNode = butNodes[0]
            butNodes[0].style.color = "red"
            for (x=0;x<butNodes.length;x++){
                butNode = butNodes[x]
                butNode.x = x
                butNode.onclick = clickAction
            }
            function clickAction(){
                if (seltNode == this){
                    return
                }
                    
            this.style.color = "red"
            seltNode.style.color = "white"
            seltNode = this
            }
            
        </script>
    </body>
</html>

2 jQuery 基礎(chǔ)

2.1 jQuery簡介

jQuery本質(zhì)就是js痒钝，它是為了能夠更方便的使用js而封裝的一個庫
如果想要使用jQuery必須先導(dǎo)入jQuery的js文件
js可以將任何內(nèi)容轉(zhuǎn)換js對象丝里，例如:document、節(jié)點喷户、事件對象
jQuery提供的方法只支持jQuery對象
在jQuery中 $代表jQuery,$ () -> 創(chuàng)建jQuery對象的語法
document -> js對象禽拔； $(document) -> jQuery對象

2.2 ready方法 - 等待網(wǎng)頁中內(nèi)容加載完成

和onload功能一樣
語法：
$(document).ready(function(){ 頁面加載完成后才會執(zhí)行的代碼}) 簡寫:$ (function(){
頁面加載完成后才會執(zhí)行的代碼})

2.3 節(jié)點操作

2.3.1 獲取節(jié)點

語法: $(選擇器)
說明: 選擇器 - 和CSS中的選擇器一樣

2.3.2 選擇器

普通選擇器: 和css一樣的
其他特殊情況
- 選擇器1>選擇器2 - 選中選擇器中的選擇器2對應(yīng)的直系子標(biāo)簽
- 選擇器1+選擇器2 - 選中緊跟著選擇器1的選擇器2(選擇器1和選擇器2對應(yīng)的標(biāo)簽必須是兄弟關(guān)系)
- 選擇器~選擇器2 - 選中離選擇器1最近的選擇器2(選擇器1和選擇器2對應(yīng)的標(biāo)簽必須是兄弟關(guān)系)
- 選擇器:first - 第一個選擇器
- 選擇器:last - 最后一個選擇器
- 選擇器>*:first-child - 選中選擇器中第一個子標(biāo)簽 first不是子標(biāo)簽
- 選擇器 *:first-child - 選中選擇器中第一個子標(biāo)簽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--1.導(dǎo)入jQuery-->
        <!--導(dǎo)入本地jQuery文件-->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <!--企業(yè)開發(fā)-->
        <!--<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
        
    </head>
    <body>
        
        <script type="text/javascript">

//          $(document).ready(function(){
//              
//              pNode = document.getElementById('p1')
//              console.log(pNode)
//          })
            $(function(){
                pNode = document.getElementById('p1')
                console.log(pNode)
            })
            
        </script>
        
        <p id="p1">我是段落1</p>
        <div id="div1">
            <p class="cp1">我是段落2</p>
            <div id="div2">
                <a href="">我是超鏈接</a>
                <p>我是段落3</p>
                <p>我是段落4</p>
                <span id="">
                    <p>我是段落5</p>
                </span>
                <p>我是段落6</p>
            </div>
        </div>
        <p class="cp1">我是段落2</p>
        
        
        <script type="text/javascript">
            //3.DOM操作
            //1)獲取節(jié)點
            var pNode = $('#p1')
            console.log(pNode)
            pNode.text('新的段落1')
            
            pNodes = $('.cp1')
            console.log(pNodes)
            pNodes.text('新的段落2')
            for(x=0;x<pNodes.length;x++){
                //遍歷取出來的是js對象
                const p = pNodes[x]
//              $(p).text(x)
            }
        
            pNode = $('div p')
            console.log('===:',pNode)
            
            //其它選擇器
            pNode = $('div>p')
            console.log('===:',pNode)
            
            pNode = $('#p1 + div')
            console.log('===:',pNode)
            
            pNode = $('#p1~p')
            console.log('===:',pNode)
            
            pNode = $('p:first')
            console.log('===:',pNode)
            
            pNode = $('#div2>p:first')
            console.log('===:',pNode)
            
            pNode = $('#div2>p:last')
            console.log('===:',pNode)
            
            var xNode = $('#div2>*:first-child')
            console.log('===:',xNode)   
        </script>   
    </body>
</html>

2.3.3 創(chuàng)建節(jié)點

語法:
$(HTML代碼) - 返回標(biāo)簽對應(yīng)的jQuery對象例如:$ ("<p id='p1'>我是一個段落</p>")

2.3.4 添加節(jié)點

jq節(jié)點1.append(jq節(jié)點2) - 在節(jié)點1中的最后添加節(jié)點2
節(jié)點1.prepend(節(jié)點2) - 在節(jié)點1的最前面插入節(jié)點2
節(jié)點1.before(節(jié)點2) - 在節(jié)點1的前面插入節(jié)點2
節(jié)點1.after(節(jié)點2) - 在節(jié)點1的后面插入節(jié)點2

2.3.5 刪除標(biāo)簽

jq對象.remove() - 刪除指定節(jié)點
jq對象.empty() - 清空指定節(jié)點

2.4 屬性操作

2.4.1 標(biāo)簽內(nèi)容屬性: innerHTML恨诱、innerText胜茧、value

html方法(相當(dāng)于innerHTML)
- 節(jié)點.html() - 獲取節(jié)點內(nèi)容
- 節(jié)點.html(值) - 給節(jié)點內(nèi)容賦值
text()方法(相當(dāng)于innerText)
val()方法(相當(dāng)于value)

2.4.2 普通屬性

節(jié)點.attr(屬性名) - 獲取指定節(jié)點指定屬性的值
節(jié)點.attr(屬性名,值) - 修改指定節(jié)點直接屬性的值
class屬性
- 節(jié)點.addClass(值) - 添加class屬性值
- 節(jié)點.removeClass(值) - 移除指定的class值

2.4.3 樣式屬性

獲取樣式屬性的值節(jié)點.css(樣式屬性名)
修改樣式屬性的值節(jié)點.css(樣式屬性名,值)
節(jié)點.css(對象) - 同時設(shè)置多種樣式

2.4.4 事件綁定

方法一：直接綁定
- 節(jié)點.on(事件名,函數(shù)) - (和js中的addEventLinsenner功能一樣)
- 注意: this是js對象粘优，evt是jQuery對象
- evt是事件對象不是節(jié)點對象，所以獲取屬性的時候以對象獲取屬性的方式來獲取console.log(evt.clientX, evt.clientY)
方式二:
- 節(jié)點.on(事件名,選擇器,函數(shù)) - 給指定節(jié)點綁定指定事件呻顽，并且讓節(jié)點中選擇器對應(yīng)的子標(biāo)簽對事件做出反應(yīng)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

        <style type="text/css">
            .c1{
                color: red;
            }
            .c2{
                background-color: yellow;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        
        <!--=========1.節(jié)點操作===========-->
        <div id="box1" style="background-color: yellowgreen;">
            <p id="p1">我是段落</p>
        </div>
        
        <!--========2.屬性操作==========-->
        <div id="box2">
            <h1 class="c1" id="h1">我是標(biāo)題0</h1>
            <div id="div1">
                <h1 class="c1">我是標(biāo)題1</h1>
            </div>
            <div id="div2"></div>
            <input class="c1" type="text" name="" id="" value="" />
        </div>
        
        <!--========3.事件綁定=========-->
        <button>暫停</button>
        <div id="box3">
            <input type="button" name="" id="" value="按鈕1" />
            <input type="button" name="" id="" value="按鈕2" />
        </div>
        
        <script type="text/javascript">
            //1.創(chuàng)建節(jié)點(標(biāo)簽)
        
            aNode = $("<a )
            
            //2.添加節(jié)點
            //1)jq節(jié)點1.append(jq節(jié)點2)  - 在節(jié)點1中的最后添加節(jié)點2
            $('#box1').append(aNode)
            $('#box1').append($('<img src="img/luffy.jpg"/>'))
            
            //2)節(jié)點1.prepend(節(jié)點2)  - 在節(jié)點1的最前面插入節(jié)點2
            $('#box1').prepend($('<h1>我是標(biāo)題1</h1>'))
            
            //3)節(jié)點1.before(節(jié)點2)  - 在節(jié)點1的前面插入節(jié)點2
            $('#p1').before($('<p>我是段落0</p>'))
            
            //4)節(jié)點1.after(節(jié)點2)  - 在節(jié)點1的后面插入節(jié)點2
            $('#p1').after($('<p>我是段落2</p>'))
            
            
            //3.刪除標(biāo)簽
            //1)jq對象.remove()  - 刪除指定節(jié)點
            $('#box1 p').remove()
            
            //2)jq對象.empty() - 清空指定節(jié)點
            $('#box1').empty()
            //$('#box1 *').remove()    #  '#box1 *' 選中id是box1中所有的后代
            
            
            //2.=============屬性操作===============
            //1)標(biāo)簽內(nèi)容屬性: innerHTML雹顺、innerText、value
            //a.html方法(相當(dāng)于innerHTML)
            //節(jié)點.html() - 獲取節(jié)點內(nèi)容   
            //節(jié)點.html(值) - 給節(jié)點內(nèi)容賦值
            //b.text()方法(相當(dāng)于innerText) 
            console.log($('#box2 #div1').html())
            $('#box2 #div1').html('<a )
            
            //c.val()方法(相當(dāng)于value)
            $('#box2 input').val('小明')
            
            //2)普通屬性
            //節(jié)點.attr(屬性名)  -  獲取指定節(jié)點指定屬性的值
            //節(jié)點.attr(屬性名,值)  -  修改指定節(jié)點直接屬性的值
            console.log($('#box2 input').attr('type'))
            $('#box2 input').attr('type', 'password')
            
            //3)class屬性
            //節(jié)點.addClass(值)  -  添加class屬性值
            $('#h1').addClass('c2')
            //節(jié)點.removeClass(值)  - 移除指定的class值
            $('#h1').removeClass('c1')  
            
            
            //3.==========樣式屬性=============
            //1)獲取樣式屬性的值
            //節(jié)點.css(樣式屬性名)
            console.log($('#h1').css('color'))
            //2)修改樣式屬性的值
            //節(jié)點.css(樣式屬性名,值)
            $('#h1').css('color', 'deeppink')
            $('#h1').css('font-size', '30px')
            
            //節(jié)點.css(對象) - 同時設(shè)置多種樣式
            $('#h1').css({
                    'width':'300px',
                    'color':'blue',
                    'text-decoration': 'underline'
            })
                console.log($('#h1'))
                
                
                //4.============事件綁定============
                //方法一：直接綁定
                //節(jié)點.on(事件名,函數(shù)) - (和js中的addEventLinsenner功能一樣)
                //注意: this是js對象廊遍，evt是jQuery對象
                $('button').on('click', function(evt){
                    console.log(this)
                    console.log(evt)
                    //1）this是js對象
                    //====js代碼
//                  if(this.innerText == '暫停'){
//                      this.innerText = '播放'
//                  }else{
//                      this.innerText = '暫停'
//                  }
                
                //====jQuery代碼
                if($(this).text() == '暫停'){
                    $(this).text('播放')
                }else{
                    $(this).text('暫停')
                }
                
                // 2)evt是事件對象不是節(jié)點對象无拗，所以獲取屬性的時候以對象獲取屬性的方式來獲取
                console.log(evt.clientX, evt.clientY)
                    
                    
                })
                
                //方式二:
                //節(jié)點.on(事件名,選擇器,函數(shù)) - 給指定節(jié)點綁定指定事件，
            //                            并且讓節(jié)點中選擇器對應(yīng)的子標(biāo)簽對事件做出反應(yīng)
            
            //錯誤示范:新添加的標(biāo)簽沒有綁定上對應(yīng)的事件
            /*
            $('#box3 input').on('click', function(){
                    console.log(this)
                    alert(this.value+'被點擊')
            })
            
            $('#box3').append($('<input type="button" value="按鈕3"/>'))
            */
           //#box3 選擇器
           $('#box3').on('click','input', function(){
                console.log(this)
                    alert(this.value+'被點擊')
           })
           $('#box3').append($('<input type="button" value="按鈕3"/>'))
                
                
        </script>
        
        
    </body>
</html>

2 Ajax請求

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            //1.什么是Ajax
            //Ajax就是異步j(luò)s昧碉，專門用來提供異步網(wǎng)絡(luò)請求操作
            /*
             $.ajax({
                type:請求方式(get/post),
                url:請求地址,
                data:請求參數(shù),
                async:是否異步,
                dataType:返回的數(shù)據(jù)類型
                success:請求成功后調(diào)用的函數(shù),函數(shù)的參數(shù)就是請求結(jié)果
             })
             */
            /*
            $.ajax({
                type:"get",
                url:"https://www.apiopen.top/satinApi",
                data:{type:1,page:1},
                async:true,
                dataType:'json',
                success:function(result){
                    console.log(typeof(result))
                    console.log(result)
                }
            });*/
            $.ajax({
                type:"get",
                url:"http://rap2api.taobao.org/app/mock/177073/getShoppingCartList",
                async:true,
                dataType:'json',
                success:function(result){
                    console.log(typeof(result))
                    console.log(result)
                }
            }); 
        </script>
    </body>
</html>

practice：周公解夢

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        
        
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            #box1{
                height: 250px;
                /*background-color: lightblue;*/
                
                border-bottom: 1px solid rgb(150,150,150);
                
                position: relative;
            }
            
            /*盒子*/
            #box1 div{
                position: absolute;
                bottom: 5px;
                
                width: 100%;
                text-align: center;
            }
            
            /*輸入框*/
            #box1 input{
                border: 0;
                border-bottom: 1px dotted rgb(200,200,200);
                
                width: 300px;
                height: 60px;
                
                font-size: 25px;
                text-align: center;
                
                vertical-align: bottom;
            }
            #box1 input:focus{
                outline: 0;
            }
            
            /*按鈕*/
            #box1 button{
                width: 100px;
                height: 40px;
                
                background-color: orangered;
                color: white;
                
                font-size: 20px;
                
                vertical-align: bottom;
            }
            
            
            #box2 p{
                /*background-color: yellow;*/
                width: 400px;
                
                margin-left: auto;
                margin-right: auto;
                
            }
            
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="">
                <input type="" name="" id="" value="" />
                <button>查詢</button>
            </div>
        </div>
        <div id="box2">
            <p></p>
        </div>
        
        
        <script type="text/javascript">
            //===查詢事件
            $('#box1 button').on('click', function(evt){
                //1.獲取輸入框中的內(nèi)容
                const value = $('#box1 input').val()
                //2.網(wǎng)絡(luò)請求
                $.ajax({
                    type:"get",
                    url:"http://api.tianapi.com/txapi/dream/",
                    data:{
                        key:'772a81a51ae5c780251b1f98ea431b84',
                        word:value
                    },
                    async:true,
                    success:function(result){
                        let message = result['newslist'][0]['result']
                        //console.log('===:',message)
                        $('#box2 p').html(message)
                    }
                });
                
            })
        </script>
    </body>
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市揽惹，隨后出現(xiàn)的幾起案子被饿，更是在濱河造成了極大的恐慌，老刑警劉巖搪搏，帶你破解...
沈念sama閱讀 211,123評論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件狭握，死亡現(xiàn)場離奇詭異，居然都是意外死亡疯溺，警方通過查閱死者的電腦和手機论颅，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,031評論 2贊 384
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來囱嫩，“玉大人恃疯，你說我怎么就攤上這事∧校” “怎么了今妄？”我有些...
開封第一講書人閱讀 156,723評論 0贊 345
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長鸳碧。經(jīng)常有香客問我盾鳞，道長，這世上最難降的妖魔是什么瞻离？我笑而不...
開封第一講書人閱讀 56,357評論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任腾仅，我火速辦了婚禮，結(jié)果婚禮上套利，老公的妹妹穿的比我還像新娘推励。我一直安慰自己鹤耍，他們只是感情好，可當(dāng)我...
茶點故事閱讀 65,412評論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布吹艇。她就那樣靜靜地躺著惰蜜，像睡著了一般。火紅的嫁衣襯著肌膚如雪受神。梳的紋絲不亂的頭發(fā)上抛猖，一...
開封第一講書人閱讀 49,760評論 1贊 289
城市分裂傳說
那天，我揣著相機與錄音鼻听，去河邊找鬼财著。笑死，一個胖子當(dāng)著我的面吹牛撑碴，可吹牛的內(nèi)容都是我干的撑教。我是一名探鬼主播，決...
沈念sama閱讀 38,904評論 3贊 405
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼醉拓，長吁一口氣：“原來是場噩夢啊……” “哼伟姐！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起亿卤，我...
開封第一講書人閱讀 37,672評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤愤兵，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后排吴，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體秆乳，經(jīng)...
沈念sama閱讀 44,118評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,456評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年钻哩，在試婚紗的時候發(fā)現(xiàn)自己被綠了屹堰。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,599評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡街氢，死狀恐怖扯键，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情珊肃，我是刑警寧澤忧陪，帶...
沈念sama閱讀 34,264評論 4贊 328
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站近范，受9級特大地震影響嘶摊，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜评矩，卻給世界環(huán)境...
茶點故事閱讀 39,857評論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一叶堆、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧斥杜，春花似錦虱颗、人聲如沸沥匈。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,731評論 0贊 21
一樁弒父案忘渔，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽高帖。三九已至，卻和暖如春畦粮，著一層夾襖步出監(jiān)牢的瞬間散址，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,956評論 1贊 264
情欲美人皮
我被黑心中介騙來泰國打工宣赔，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留预麸，地道東北人。一個月前我還...
沈念sama閱讀 46,286評論 2贊 360
代替公主和親
正文我出身青樓儒将，卻偏偏與公主長得像吏祸，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子钩蚊，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,465評論 2贊 348

Day25 js應(yīng)用 & jQuery & Ajax

1 事件的冒泡和捕獲

2 jQuery 基礎(chǔ)

2.1 jQuery簡介

2.2 ready方法 - 等待網(wǎng)頁中內(nèi)容加載完成

2.3 節(jié)點操作

2.3.1 獲取節(jié)點

2.3.2 選擇器

2.3.3 創(chuàng)建節(jié)點

2.3.4 添加節(jié)點

2.3.5 刪除標(biāo)簽

2.4 屬性操作

2.4.1 標(biāo)簽內(nèi)容屬性: innerHTML恨诱、innerText胜茧、value

2.4.2 普通屬性

2.4.3 樣式屬性

2.4.4 事件綁定

2 Ajax請求

推薦閱讀更多精彩內(nèi)容