js擴(kuò)展（jQuery）

1. jQuery基礎(chǔ)擴(kuò)展

<!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é)點(diǎn)操作===========-->
        <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é)點(diǎn)(標(biāo)簽)
            /*
             1)語法:
             $(HTML代碼)  - 返回標(biāo)簽對應(yīng)的jQuery對象
             例如: $("<p id='p1'>我是一個段落</p>")
            */
            aNode = $("<a )
            
            
            //2.添加節(jié)點(diǎn)
            //1)jq節(jié)點(diǎn)1.append(jq節(jié)點(diǎn)2)  - 在節(jié)點(diǎn)1中的最后添加節(jié)點(diǎn)2
            $('#box1').append(aNode)
            $('#box1').append($('<img src="img/luffy.jpg"/>'))
            
            //2)節(jié)點(diǎn)1.prepend(節(jié)點(diǎn)2)  - 在節(jié)點(diǎn)1的最前面插入節(jié)點(diǎn)2
            $('#box1').prepend($('<h1>我是標(biāo)題1</h1>'))
            
            //3)節(jié)點(diǎn)1.before(節(jié)點(diǎn)2)  - 在節(jié)點(diǎn)1的前面插入節(jié)點(diǎn)2
            $('#p1').before($('<p>我是段落0</p>'))
            
            //4)節(jié)點(diǎn)1.after(節(jié)點(diǎn)2)  - 在節(jié)點(diǎn)1的后面插入節(jié)點(diǎn)2
            $('#p1').after($('<p>我是段落2</p>'))
            
            
            //3.刪除標(biāo)簽
            //1)jq對象.remove()  - 刪除指定節(jié)點(diǎn)
            $('#box1 p').remove()
            
            //2)jq對象.empty() - 清空指定節(jié)點(diǎn)
            $('#box1').empty()
            //$('#box1 *').remove()    #  '#box1 *' 選中id是box1中所有的后代
            
            
            //2.=============屬性操作===============
            //1)標(biāo)簽內(nèi)容屬性: innerHTML、innerText、value
            //a.html方法(相當(dāng)于innerHTML)
            //節(jié)點(diǎn).html() - 獲取節(jié)點(diǎn)內(nèi)容   
            //節(jié)點(diǎn).html(值) - 給節(jié)點(diǎn)內(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é)點(diǎn).attr(屬性名)  -  獲取指定節(jié)點(diǎn)指定屬性的值
            //節(jié)點(diǎn).attr(屬性名,值)  -  修改指定節(jié)點(diǎn)直接屬性的值
            console.log($('#box2 input').attr('type'))
            $('#box2 input').attr('type', 'password')
            
            //3)class屬性
            //節(jié)點(diǎn).addClass(值)  -  添加class屬性值
            $('#h1').addClass('c2')
            //節(jié)點(diǎn).removeClass(值)  - 移除指定的class值
            $('#h1').removeClass('c1')  
            
            
            //3.==========樣式屬性=============
            //1)獲取樣式屬性的值
            //節(jié)點(diǎn).css(樣式屬性名)
            console.log($('#h1').css('color'))
            //2)修改樣式屬性的值
            //節(jié)點(diǎn).css(樣式屬性名,值)
            $('#h1').css('color', 'deeppink')
            $('#h1').css('font-size', '30px')
            
            //節(jié)點(diǎn).css(對象) - 同時設(shè)置多種樣式
            $('#h1').css({
                    'width':'300px',
                    'color':'blue',
                    'text-decoration': 'underline'
            })
                console.log($('#h1'))
                
                
                //4.============事件綁定============
                //方法一：直接綁定
                //節(jié)點(diǎn).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é)點(diǎn)對象，所以獲取屬性的時候以對象獲取屬性的方式來獲取
                console.log(evt.clientX, evt.clientY)
                    
                    
                })
                
                //方式二:
                //節(jié)點(diǎn).on(事件名,選擇器,函數(shù)) - 給指定節(jié)點(diǎn)綁定指定事件，
            //                            并且讓節(jié)點(diǎn)中選擇器對應(yīng)的子標(biāo)簽對事件做出反應(yīng)
            
            //錯誤示范:新添加的標(biāo)簽沒有綁定上對應(yīng)的事件
            /*
            $('#box3 input').on('click', function(){
                    console.log(this)
                    alert(this.value+'被點(diǎn)擊')
            })
            
            $('#box3').append($('<input type="button" value="按鈕3"/>'))
            */
           //#box3 選擇器
           $('#box3').on('click','input', function(){
                console.log(this)
                    alert(this.value+'被點(diǎn)擊')
           })
           $('#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>

3. 周公解夢

<!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)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容