基本属性attr

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <input type="button" id="btu" value="点击">
  12.     <br>
  13.     <img src="on.jpg" alt="img">
  14. <script>
  15.     $('#btu').click(function(){
  16.         //获取元素属性
  17.         var s= $('#img').attr('src');
  18.         alert(s);
  20.         //设置属性
  21.         $('#img').attr('src','w.jpg');
  23.         //一次设置多个,需要传对象
  24.         $('#img').attr('src','w.jpg','alt','没有');
  26.         //使用函数返回值,作为属性值
  27.         $('#img').attr('height',function(){
  28.             return 2*30;
  29.         });
  31.         //删除属性
  32.         $('#img').removeAttr('src','');
  33.     });
  34. </script>
  35. </body>
  36. </html>

总结:

  1. Attr（name）：获取属性值；
  2. Attr（key，value）：设置属性值
  3. Attr（obj）：一个设置多个属性值，obj中键就是属性名字值就是属性值；
  4. Attr（key，function）：将函数的返回值作为属性值
  5. removeAttr（name）：删除指定元素；

class属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9.     <style>
  10.         table{
  11.             width: 500px;
  12.             height: 180px;
  13.             border-collapse:collapse ;
  14.             background-color: #e0e0e0;
  15.         }
  16.         td{
  17.             border: 1px solid black;
  18.         }
  19.         .l{
  20.             background-color: #fff;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <table>
  26.         <tr>
  27.             <td>编号</td>
  28.             <td>姓名</td>
  29.             <td>性别</td>
  30.         </tr>
  31.         <tr>
  32.             <td>1</td>
  33.             <td>马云</td>
  34.             <td>男</td>
  35.         </tr>
  36.         <tr>
  37.             <td>2</td>
  38.             <td>马化腾</td>
  39.             <td>男</td>
  40.         </tr>
  41.     </table>
  42.     <script>
  43.         $('tr').mouseover(function(){
  44.             //$(this).addClass('l');
  45.             //如果有则删除，如果没有则添加
  46.             $(this).toggleClass('l'); 
  47.             //判断有没有class属性
  48.             var t= $(this).hasClass('l');
  49.             console.log(t);
  52.         });
  53.         // $('tr').mouseleave(function(){
  54.         //     $(this).removeClass('l');
  55.         // });
  57.     </script>
  58. </body>
  59. </html>

Addclass（clss）：添加 class属性
Renoveclass（clasp）：删除除 class
Toggleclass（class）：有则删除没有则添加
Hasclass（class）：判断有没有，返回布尔值；

css样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <div style="width:300px;height: 300px; border: 1px solid red;">
  12.         itcast
  13.     </div>
  14.     <script>
  15.         //获取css样式
  16.         var w = $('div').css('width');
  17.         alert(w);
  19.         $('div').css('backgroud','yellow');
  21.         $('div').css({
  22.             width:100,
  23.             height:100,
  24.             backgroud:'pink' 
  25.         });
  27.     </script>
  28. </body>
  29. </html>

css（name）：获取CSS 样式值
css（key，value）：设置css样式
css（obj）：一次设置多个CSS样式属性值

offset位置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <div style="width:300px;height: 300px; border: 1px solid red;">
  12.         itcast
  13.     </div>
  14.     <script>
  15.         //获取位置
  16.         var p= $('div').offset();
  17.         alert(p.left);
  18.         alert(p.top);
  20.         //设置位置. 值为对象
  21.         $('div').offset({
  22.             left:50,
  23.             top:100
  24.         });
  25.     </script>
  26. </body>
  27. </html>

Offset（）：获取位置，返回值为对象，对象下的left属性及top获取横纵坐标值
Offset（obj）：设置位置值，为绝对定位

宽高设置

image.png

文本表单值

  1.   <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <input type="button" id="i" value="文本"><br>
  12.     <input type="text" id="t">
  13.     <div id="d">
  14.         <div>
  15.             <p>icast</p>
  16.         </div>
  17.     </div>
  18.     <script>
  19.         $('#i').click(function(){
  20.             alert($('#t').val());//获取文本框中的值
  21.             $('#t').val('hehehhe');//修改文本框中的值
  23.             alert($('#d').html());//获取内容
  24.             $('#d').html('<i>1222131</i>');//替换内容
  26.             alet($('#d').text());//获取文本值
  28.             $('#d').text('123141');//如果加上标签可以执行,但是标签解析
  29.         });
  30.     </script>
  31. </body>
  32. </html>

知识点：
Val（）：获取表单值
Val（value）：设置表单值
Html（）：获取内容
Html（value）：替换内容，解析标签
Text（）：获取文本值
Text（value）：替换内容，但是不解析标签