一、jQuery操作标签的属性
1. 设置标签的属性
语法：jQuery对象.attr(name,value);
1 <body> 2 <div title="im div" pid="10010"></div> 3 <script src="lib/jquery-1.12.4.js"></script> 4 <script> 5 $('div').attr('pwd','111111'); //设置 6 $('div').attr('pid','10086'); //修改 7 </script> 8 </body>
2. 获取标签的属性
语法：jQuery对象.attr(name);
1 <body> 2 <div title="im div" pid="10010"></div> 3 <script src="lib/jquery-1.12.4.js"></script> 4 <script> 5 $('div').attr('pid','10086'); //修改 6 var v = $('div').attr('pid'); 7 console.log(v); //10086 8 </script> 9 </body>
3. 移除标签的属性
语法：jQuery对象.removeAttr(name);
1 <body> 2 <div title="im div" pid="10010"></div> 3 <script src="lib/jquery-1.12.4.js"></script> 4 <script> 5 $('div').removeAttr('pid'); 6 </script> 7 </body>
4. 放大镜切换案例
自定义标签：把未来需要的属性暂存到标签中
1 <body> 2 <div class="w"> 3 <div class="leftBox"> 4 <div class="top"></div> 5 <ul> 6 <li class="active"> 7 <img src="img/s1.jpg" msrc="m1.jpg" bsrc="b1.jpg"> 8 </li> 9 <li> 10 <img src="img/s2.jpg" msrc="m2.jpg" bsrc="b2.jpg"> 11 </li> 12 <li> 13 <img src="img/s3.jpg" msrc="m3.jpg" bsrc="b3.jpg"> 14 </li> 15 </ul> 16 </div> 17 <div class="rightBox"> 18 <img src="img/b1.jpg" alt=""> 19 </div> 20 </div> 21 <script src="lib/jquery-1.12.4.js"></script> 22 <script> 23 var path = 'img'; 24 $('li').mouseenter(function () { 25 //active类名控制当前小图的红色边框 26 $(this).addClass('active').siblings().removeClass(); 27 //中图 28 var msrc = $(this).find('img').attr('msrc'); 29 $('.top img').attr('src', path + msrc); 30 //大图 31 var msrc = $(this).find('img').attr('bsrc'); 32 $('.rightBox img').attr('src', path + bsrc); 33 }); 34 </script> 35 </body>
5. 操作表单元素属性
1 <body> 2 <input type="checkbox" checked> 3 <script src="lib/jquery-1.12.4.js"></script> 4 <script> 5 var v = $('input').attr('checked'); 6 //打印字符串checked，而不是布尔值。如果input中没有checked，打印undefined 7 console.log(v); 8 </script> 9 </body>
所以不建议使用 attr 操作表单元素的属性。
使用 prop 方法，prop方法可以操作表单元素属性。
语法：$('input').prop('属性名');
针对表单元素：checked selected disabled都是布尔值，应该返回 true 或 false。
1 <body> 2 <input type="checkbox" checked> 3 <script src="lib/jquery-1.12.4.js"></script> 4 <script> 5 var v = $('input').prop('checked'); 6 console.log(v); //选中(有checked))打印true，没选中打印false 7 //使用原生DOM方法也可以操作，但不建议使用 8 // var v = $('input')[0].checked; 9 // console.log(v); //false 10 </script> 11 </body>
6. 点击按钮发送验证码案例
1 <body> 2 <input type="text" value="10010"> 3 <button>发送验证码</button> 4 <script src="lib/jquery-1.12.4.js"></script> 5 <script> 6 $('button').click(function() { 7 $(this).prop('disabled', true); //禁用按钮 8 var time = 60; 9 $('button').text(time + 's后重新发送'); 10 var flag = setInterval(function() { 11 time--; 12 $('button').text(time + 's后重新发送'); 13 if(time == 0) { 14 clearInterval(flag); 15 $('button').text('发送验证码'); 16 $('botton').prop('disabled',false); 17 } 18 },1000); 19 }); 20 </script> 21 </body>
在定时器里面 'button' 不能改成 this，但定时器外部的 this 代表的是按钮。因为在定时器中，this默认指向window。
可以在外部 var that = this; 把this暂存到that中，然后在定时器内部使用$(that)。
二、jQuery操作标签内容
1. 操作标签内部文本
获取的仅仅是文本：（相当于DOM中的innerText）
语法：jQuery对象.text();
设置语法：jQuery对象.text('文本内容');
1 <body> 2 <div>内容</div> 3 <script src="lib/jquery-1.12.4.js"></script> 4 <script> 5 //获取 6 var v = ('div').text(); 7 console.log(v); //返回字符串：div中的内容 8 //设置 9 var s = ('div').text('我是新内容'); 10 //设置完毕后，重新返回点之前的jQuery对象。所以.text()后面还可以继续链式调用其他方法，比如.css() 11 console.log(s); 12 </script> 13 </body>
2. 操作标签内部所有内容
获取文本和内部标签：（相当于DOM中的innerHTML）
语法：jQuery对象.html();
设置标签时标签会被渲染：
语法：jQuery对象.html('文本内容');
1 <body> 2 <div>内容</div> 3 <script src="lib/jquery-1.12.4.js"></script> 4 <script> 5 $('div').html('<h2>内容</h2>').css('color','blue'); //后面可以继续链式调用 6 var v = $('div').html(); 7 console.log(v); //打印<h2>内容</h2> 8 </script> 9 </body>
3. 操作表单元素的内容
获取表单元素的value：（相当于DOM中的value）
语法：jQuery对象.val();
设置表单元素的value：
语法：jQuery对象.val('文本内容');
1 <body> 2 <input type="text"> 3 <script src="lib/jquery-1.12.4.js"></script> 4 <script> 5 $('input').val('张三'); 6 var v = $('input').val().css('color','red'); //报错，返回的不是jQuery对象，不能.css 7 console.log(v); 8 </script> 9 </body>