Jquery操作DOM - 解析HTML元素

基本操作{DOM}
-html()方法 類似原於DOM中innerHTML
 獲取       html()
 設置(修改) html(html)

  <button>0</button>

  <script src="js/jquery-1.11.3.js"></script>
  <script>
    $('button').click(function(){
        var intValue = parseInt($(this).html());
        intValue++;
        $(this).html(intValue);
    })
  </script>

 

-val() 方法 類似原於DOM中value
 獲取       val()
 設置(修改) val(value值)

  <h3>我的購物車</h3>
  單價：<span id="price">3.5</span>
  數量：
    <button id="btLess">-</button><input name="count" value="1" style="width:30px"><button id="btMore">+</button>
  小計：
    <input name="total" value="3.5" disabled>

  <hr>
  用戶姓名：
  <input name="userName"><br>
  用戶性別：
  <input type="radio" name="userSex" value="male">男
  <input type="radio" name="userSex" value="female" checked>女
  <br>
  所在城市：
  <select name="city">
    <option value="bj">北京市</option>
    <option value="sh">上海市</option>
    <option value="zj">浙江省</option>
  </select><br>
  興趣愛好：
  <input type="checkbox" name="hobby" value="xy">洗衣
  <input type="checkbox" name="hobby" value="zf">做飯
  <input type="checkbox" name="hobby" value="sd">掃地<br>

  <input type="button" value="提交訂單" id="btSubmit">



  <script src="js/jquery-1.11.3.js"></script>
  <script>
  $('#btLess').click(function(){
    var count = $('[name="count"]').val();
    count = parseInt(count);
    count--;
    $('[name="count"]').val(count);
    //計算小計
    var price = $('#price').html();
    $('[name="total"]').val( price*count );
  })
  $('#btMore').click(function(){
    var count = $('[name="count"]').val();
    count = parseInt(count);
    count++;
    $('[name="count"]').val(count);
    //計算小計
    var price = $('#price').html();
    $('[name="total"]').val( price*count );
  })

  $('#btSubmit').click(function(){
    //收集用戶的輸入
    var n = $('[name="userName"]').val();
    var s = $('[name="userSex"]:checked').val();
    //var c = $('option:selected').val();
    var c = $('select[name="city"]').val();
    console.log(n+s+c);

    //注意復選框多個值的獲取
    //var h = $('[name="hobby"]:checked').val();
    var jqObj = $('[name="hobby"]:checked');
    for(var i=0; i<jqObj.length; i++){
      var cb = jqObj[i];
      var h = $(cb).val();
      console.log(h);
    }
  });
  </script>

-attr()方法 類似原於DOM中getAttribute();
                         setAttribute();
 獲取       attr(屬性名)
 設置(修改) attr(屬性名,屬性值)

  <img class="thumbnail" src="img/1.jpg" alt="img/1111.jpg">
  <img class="thumbnail" src="img/2.jpg" alt="img/2222.jpg">
  <img class="thumbnail" src="img/3.jpg" alt="img/3333.jpg">
  <img class="thumbnail" src="img/4.jpg" alt="img/4444.jpg">

  <hr>

  <img class="full-img" src="img/1111.jpg">

  <script src="js/jquery-1.11.3.js"></script>
  <script>
  $('.thumbnail').mouseenter(function(){
        var alt = $(this).attr('alt');
        $('.full-img').attr('src',alt);
  });
  </script>