<tbody id="j99e4"></tbody>

<dd id="j99e4"></dd>

  • <button id="j99e4"><object id="j99e4"></object></button>
      1. <th id="j99e4"></th>
        <button id="j99e4"><acronym id="j99e4"></acronym></button><rp id="j99e4"><object id="j99e4"><input id="j99e4"></input></object></rp>
        當前位置:首頁 > IT技術 > Web編程 > 正文

        jQuery
        2022-08-29 23:53:56

        jQuery

        篩選器

        1.下一個元素
        $("#id").next()  // 篩選出元素的下一個兄弟元素
        $("#id").nextAll()  // 篩選元素后面所有的兄弟
        $("#id").nextUntil("#i2")  // 篩選出元素后面所有兄弟元素直到選擇器元素位置
        
        2.上一個元素
        $("#id").prev()  // 篩選元素的上一個兄弟元素
        $("#id").prevAll()  // 篩選元素前面所有的兄弟
        $("#id").prevUntil("#i2")  // 篩選出元素前面所有兄弟元素直到選擇器元素位置
        
        3.父親元素
        $("#id").parent()  // 篩選出元素的父元素
        $("#id").parents()  // 查找當前元素的所有父輩元素
        $("#id")parentsUntil()  // 查找當前元素的所有父輩元素,直到選擇器元素為止
        
        4.鏈式操作的底層原理
        對象調用方法之后返回一個對象,從而實現鏈式操作的效果
        

        操作標簽

        jQuery操作				js操作				jQuery操作功能
        .css('樣式名','樣式值')	style.樣式名 = '樣式值'
        1.樣式操作
        addClass()				classList.add()			添加指定的css類名
        removeClass()			classList.remove()		移除指定的css類名
        hasClass()				classList.contains()	判斷樣式存不存在
        toggleClass()			classList.toggle()		有css類名就移除,沒有就添加
        
        2.文本操作
        text()					innerText()			取得所有匹配元素的內容
        html()					innerHTML()			取得第一個匹配元素的html內容
        val()					value				取得第一個匹配元素的當前值
        [0].files				files				獲取所有文件
        
        3.屬性操作
        attr() 靜態屬性			 setAttribute()		  返回第一個匹配元素的屬性值
        prop() 動態屬性(checked)					 獲取屬性
        
        4.文檔處理
        append()				append()			添加到指定元素內部的后面
        prepend()								  添加到指定元素內部的前面
        after()									  添加到指定元素外部的后面
        before()								  添加到指定元素外部的前面
        
        remove()								  從DOM中刪除所有匹配的元素
        empty()									 刪除匹配的元素集合中所有的子節點
        

        jQuery綁定事件方法

        js綁定事件與jQuery綁定事件
        
        1.js綁定事件
        標簽對象.on事件名 = function(){事件代碼}
        
        2.jQuery綁定事件
        2.1方法1:
        jQuery對象.事件名(function(){事件代碼})
        $btnEle.click(function(){alter(123)})
        2.2方法2:
        jQuery對象.on('事件名',function(){事件代碼})
        $btnEle.on('click',function(){alter(123)})
        '使用jQuery方法1綁定事件無法觸發時可以切換為方法2'
        
        img

        事件案例

        1.常用事件
        click(function(){...})  // 單擊事件
        hover(function(){...})  // 懸浮事件
        blur(function(){...})  // 鼠標移除input框
        focus(function(){...})  // 鼠標進入input框
        change(function(){...})  // 文本域變化事件
        keyup(function(){...})  // 松開鍵盤事件
        
        2.clone()克隆事件示例
        <body>
            <button id="d1" class="c1">多重影分身之術</button>
            <script>
                let $btnEle = $('#d1');
                $btnEle.click(function (){
                    $('body').append($(this).clone())
                })
            </script>
        </body>
        
        3.hover事件示例
        <body>
            <p>第一個</p>
            <p>第二個</p>
            <p>第三個</p>
            <script>
                // 影響所有p標簽
                $('p').hover(
                    function (){
                        alert('我進來了')
                    },
                    function (){
                        alert('我出來了')
                    }
                )
            </script>
        </body>
        
        4.實時監聽input輸入值變化示例
        <body>
            <input type="text" id="d1">
            <script>
                $('#d1').on('input', function (){
                    console.log(this.value)
                })
            </script>
        </body>
        

        事件相關補充知識

        1.能夠觸發form表單提交數據動作的標簽有兩個
        1.1<input type="submit" value="提交">
        1.2<button>提交</button>
        '給已經有事件的標簽綁定事件,會先執行綁定的事件,再去執行默認的執行'
        
        2.也可以讓標簽之前的事件不執行
        2.1return false
        2.2$(':submit').click(function (e){
                    alert('來了')
                    e.preventDefault()
                })
        
        3.事件冒泡
        '涉及到標簽嵌套并且有相同事件的時候,當你觸發兒子標簽的事件時,它會逐級向上匯報'
        <body>
            <div>div
                <p>div>p
                    <span>div>p>span</span>
                </p>
            </div>
            <script>
                $('div').click(function (){
                    alert('div')
                })
                $('p').click(function (){
                    alert('p')
                })
                $('span').click(function (){
                    alert('span')
                })
            </script>
        </body>
        
        4.阻止事件冒泡
        4.1return false
        4.2$('p').click(function (e){
                alert('p')
                e.stopPropagation()
            })
        
        '''
        創建標簽的兩種方法
        1.js
        document.createElement()
        2.jQuery
        $('<標簽名>')
        '''
        5.事件委托
        事情綁定默認情況下是不會對動態創建的標簽生效的,如果想生效需要事情委托
        $('div').on('click','button',function () {
                    alert('阿姨壓一壓')
                })
        

        jQuery動畫效果

        1.基本
        show([s,[e],[fn]])  // 顯示隱藏的匹配元素
        hide([s,[e],[fn]])  // 
        toggle([s],[e],[fn])  // 
        

        Bootstrap

        下載地址
        https://v3.bootcss.com/getting-started/
        

        本文摘自 :https://www.cnblogs.com/

        亚洲人成图偷偷小说_亚洲图片小说激情综合_国产精品亚洲自在线播放页码_久久综合亚洲色hezyo国产
        <tbody id="j99e4"></tbody>

        <dd id="j99e4"></dd>

      2. <button id="j99e4"><object id="j99e4"></object></button>
          1. <th id="j99e4"></th>
            <button id="j99e4"><acronym id="j99e4"></acronym></button><rp id="j99e4"><object id="j99e4"><input id="j99e4"></input></object></rp>