Jquery操作DOM - 解析HTML元素

基本操作{DOM}
-html()方法 类似原于DOM中innerHTML
 获取       html()
 设置(修改) html(html)

 1   <button>0</button>
 2
 3   <script src="js/jquery-1.11.3.js"></script>
 4   <script>
 5     $(‘button‘).click(function(){
 6         var intValue = parseInt($(this).html());
 7         intValue++;
 8         $(this).html(intValue);
 9     })
10   </script>

-val() 方法 类似原于DOM中value
 获取       val()
 设置(修改) val(value值)

 1   <h3>我的购物车</h3>
 2   单价：<span id="price">3.5</span>
 3   数量：
 4     <button id="btLess">-</button><input name="count" value="1" style="width:30px"><button id="btMore">+</button>
 5   小计：
 6     <input name="total" value="3.5" disabled>
 7
 8   <hr>
 9   用户姓名：
10   <input name="userName"><br>
11   用户性别：
12   <input type="radio" name="userSex" value="male">男
13   <input type="radio" name="userSex" value="female" checked>女
14   <br>
15   所在城市：
16   <select name="city">
17     <option value="bj">北京市</option>
18     <option value="sh">上海市</option>
19     <option value="zj">浙江省</option>
20   </select><br>
21   兴趣爱好：
22   <input type="checkbox" name="hobby" value="xy">洗衣
23   <input type="checkbox" name="hobby" value="zf">做饭
24   <input type="checkbox" name="hobby" value="sd">扫地<br>
25
26   <input type="button" value="提交订单" id="btSubmit">
27
28
29
30   <script src="js/jquery-1.11.3.js"></script>
31   <script>
32   $(‘#btLess‘).click(function(){
33     var count = $(‘[name="count"]‘).val();
34     count = parseInt(count);
35     count--;
36     $(‘[name="count"]‘).val(count);
37     //计算小计
38     var price = $(‘#price‘).html();
39     $(‘[name="total"]‘).val( price*count );
40   })
41   $(‘#btMore‘).click(function(){
42     var count = $(‘[name="count"]‘).val();
43     count = parseInt(count);
44     count++;
45     $(‘[name="count"]‘).val(count);
46     //计算小计
47     var price = $(‘#price‘).html();
48     $(‘[name="total"]‘).val( price*count );
49   })
50
51   $(‘#btSubmit‘).click(function(){
52     //收集用户的输入
53     var n = $(‘[name="userName"]‘).val();
54     var s = $(‘[name="userSex"]:checked‘).val();
55     //var c = $(‘option:selected‘).val();
56     var c = $(‘select[name="city"]‘).val();
57     console.log(n+s+c);
58
59     //注意复选框多个值的获取
60     //var h = $(‘[name="hobby"]:checked‘).val();
61     var jqObj = $(‘[name="hobby"]:checked‘);
62     for(var i=0; i<jqObj.length; i++){
63       var cb = jqObj[i];
64       var h = $(cb).val();
65       console.log(h);
66     }
67   });
68   </script>

-attr()方法 类似原于DOM中getAttribute();
                         setAttribute();
 获取       attr(属性名)
 设置(修改) attr(属性名,属性值)

 1   <img class="thumbnail" src="img/1.jpg" alt="img/1111.jpg">
 2   <img class="thumbnail" src="img/2.jpg" alt="img/2222.jpg">
 3   <img class="thumbnail" src="img/3.jpg" alt="img/3333.jpg">
 4   <img class="thumbnail" src="img/4.jpg" alt="img/4444.jpg">
 5
 6   <hr>
 7
 8   <img class="full-img" src="img/1111.jpg">
 9
10   <script src="js/jquery-1.11.3.js"></script>
11   <script>
12   $(‘.thumbnail‘).mouseenter(function(){
13         var alt = $(this).attr(‘alt‘);
14         $(‘.full-img‘).attr(‘src‘,alt);
15   });
16   </script>