jquery-6 jquery属性选择器
一、总结
一句话总结：jquery操作就是选择器加jquery对象的各种方法。
1、大量操作样式用什么方式？
大批量样式通过加类和减类完成
2、jquery中大量属性值设置用什么方式？
推荐json
$().css({})
3、如何将一个input文本的值赋给另一个input文本？
找到两个input，然后用val()方法
31 val=$('input').eq(0).val();
32
33 $('input').eq(1).val(val);
4、如何将一个标签里面的其它标签都赋值给另外标签？
用html()方法
31 $('button').click(function(){
32 val=$('.d1').html();
33 $('.d2').html(val);
34 });
5、如何给元素增加一个类？
addClass()方法
27 $('img').mouseenter(function(){
28 $(this).addClass('img');
29 });
二、jquery属性选择器
1、相关知识
属性:
1.属性
attr();
attr({});
2.CSS类
addClass();
removeClass();
toggleClass();
3.HTML代码
html();
html(val);
4.文本
text();
text(val);
5.值
val();
val(val);
2、代码
val表单元素获取和赋值
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 .d1,.d2{ 12 height:300px; 13 background: #ccc; 14 } 15 </style> 16 <script src="jquery.js"></script> 17 </head> 18 <body> 19 <p> 20 <input type="text"> 21 </p> 22 <p> 23 <button>>></button> 24 </p> 25 <p> 26 <input type="text"> 27 </p> 28 </body> 29 <script> 30 $('button').click(function(){ 31 val=$('input').eq(0).val(); 32 33 $('input').eq(1).val(val); 34 }); 35 </script> 36 </html>
html取值和赋值
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 .d1,.d2{ 12 height:300px; 13 background: #ccc; 14 } 15 </style> 16 <script src="jquery.js"></script> 17 </head> 18 <body> 19 <div class='d1'> 20 <img src="a.png"> 21 <img src="a.png"> 22 <img src="a.png"> 23 <img src="a.png"> 24 </div> 25 <button>>></button> 26 <div class="d2"> 27 28 </div> 29 </body> 30 <script> 31 $('button').click(function(){ 32 val=$('.d1').html(); 33 $('.d2').html(val); 34 }); 35 </script> 36 </html>
toggleClass切换类
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 .div1{ 11 background: #ccc; 12 cursor: pointer; 13 } 14 15 .img{ 16 background:#ccc; 17 border-radius:256px; 18 transform:scale(1.2,1.2); 19 } 20 </style> 21 <script src="jquery.js"></script> 22 </head> 23 <body> 24 <img src="a.png"> 25 </body> 26 <script> 27 $('img').mouseenter(function(){ 28 $(this).toggleClass('img'); 29 }); 30 31 $('img').mouseleave(function(){ 32 $(this).toggleClass('img'); 33 }); 34 </script> 35 </html>
attr获取属性值
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 .div1{ 11 background: #ccc; 12 cursor: pointer; 13 } 14 </style> 15 <script src="jquery.js"></script> 16 </head> 17 <body> 18 <img src="a.png"> 19 </body> 20 <script> 21 $('img').click(function(){ 22 alert($(this).attr('src')); 23 }); 24 </script> 25 </html>