<p id="g32nn"></p>
    1. <acronym id="g32nn"><strong id="g32nn"></strong></acronym>
      <pre id="g32nn"></pre>

      <table id="g32nn"><option id="g32nn"></option></table>
          當前位置:首頁 > 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/

          97久久久久人妻精品专区_国产成人精品视频导航_国产色诱视频在线播放网站_97午夜理论电影影院
          <p id="g32nn"></p>
          1. <acronym id="g32nn"><strong id="g32nn"></strong></acronym>
            <pre id="g32nn"></pre>

            <table id="g32nn"><option id="g32nn"></option></table>