1. 程式人生 > >python學習筆記(85) jQuery樣式和屬性操作

python學習筆記(85) jQuery樣式和屬性操作

 

選單作業:

  <script>

    $(".menu-title").click(function () {

      $(this).next().toggleclass("hide");

      $(this).next().siblings(".menu-items").addclass("hide")

    })

  </script>

 

樣式操作:

  支援批量操作

  .addClass()

  .removeClass()

  .hasClass()

  .toggleClass()

 

修改樣式:

  原生DOM:  .style.color = "red"

  $("#d1").css("color","green")

  $("#d1").css("color":"green","font-size":"24px")

  修改多個樣式時,傳入鍵值對

  

位置相關:

  offset()  // 獲取元素在當前視窗的偏移或設定偏移 $("#d1").offset(left:100,top:100)

  position()  // 相對父元素的偏移或設定偏移

  scrollTop()  // 相對滾動條頂部的偏移

  scrollLeft()

    滾動條:

    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
          $("#b2").removeClass("hide");
        }else {
          $("#b2").addClass("hide");
        }
      });
      $("#b2").on("click", function () {
        $(window).scrollTop(0);

 

尺寸:

  .height()  // 整個標籤的高

  .width()

  .innerHeight()  // 內容和padding

  .innerWidth()

  .outerHeight()  // 內容和padding和border

  .outerWidth()

 

文件操作:

 

文件值:

  $("#d1").html()  // 等於原生DOM$("#d1")[0].innerHTML

  $("#d1").html("<a herf='http://www.sogo.com'>sogo</a>")

文字值:

  .text()

  .text(val)

取值:

  .val()

  .val(val)

  .val([val1,val2])  // 設定checkbox

    取checkbox裡選中的多個值:

      var checkedEles = $(":checkbox:checked");

      for (var i =0;i<checkedEles.length;i++){

        console.log($($checkedEles[i]),val())

  select標籤里加multiple是多選,可以直接用.val()取到