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>
