Jquery操作DOM

基本操作{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="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>