Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 03月04日作业：jQuery对html、css、自定义属性和常用DOM操作
Blogger Information
Blog 145
fans 7
comment 7
visits 164680
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
03月04日作业：jQuery对html、css、自定义属性和常用DOM操作
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
878 people have browsed it

作业一

一、常用属性操作知识点：
1、属性:

  • getter():获取，setter():设置操作

2、html属性：

  • attr():获取或者设置html元素属性
  • removeAtter():移除html元素属性

3、css属性：

  • css()：获取元素的最终样式
  • addclass():添加类样式，与classList.add()功能类似
  • removeclass():删除类样式，与classList.remove()功能类似
  • toggleclass():自动切换类样式，与classList.toggle()功能类似
  • hasclass():判断是否有指定样式，classList.contains()功能类似

4、表单操作
val():获取或者设置表单元素的值
5、元素的内容

  • text():文本内容，innerText功能类似
  • html():可解析带有html标签的文本内容，innerHTML

6、元素的自定义属性值：

  • data()：获取和设置元素的数据
  • removeData():删除元素中的数据

二、jQuery对DOM操作
1、插入和替换
append()|appendTo():尾部插入元素
prepend()|prependTo():头部插入元素
after()|inserAfter():后面插入元素
befor()|insertBefor():前面插入元素
replaceWith()|replaceAll():替换目标元素内容
2、复制/克隆元素
clone():创建并返回每一个选中元素的副本
3、删除元素
empty():将当前元素的所有子元素清空/删除
remove():将当前元素以及素有的子元素全部删除
4、其他知识点：
toLowerCase();字符串全部转小写；

作业二

1.1、代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <script src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  7.     <title>Document</title>
  8.     <style>
  9.         body {
  10.             display: flex;
  11.             flex-direction: column;
  12.             align-items: center;
  13.             color: #666;
  14.         }
  16.         form {
  17.             width: 400px;
  18.             padding: 20px 10px;
  19.             border: 1px solid #aaa;
  20.             box-sizing: border-box;
  21.             box-shadow: 0 0  5px #888;
  22.             background-color: #eee;
  24.             display: grid;
  25.             grid-template-columns: 80px 200px;
  26.             gap: 10px;
  27.             place-content: center center;
  28.         }
  30.         button {
  31.             grid-column: 2 / 3;
  32.             height: 26px;
  33.         }
  35.         button:hover {
  36.             color: white;
  37.             background-color: #000;
  38.             border:none;
  39.             cursor: pointer;
  40.         }
  41.         .red {
  42.             color: red;
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <h2 class="red">用户登录</h2>
  49.     <form action="handle.php" method="post">
  50.         <label for="email">Email:</label>
  51.         <input type="email" name="email" id="email" autofocus value="lectur@php.cn">
  52.         <label for="password">Password</label>
  53.         <input type="password" name="password" id="password" placeholder="不少于6位">
  54.         <label for="confirm">记住我:</label>
  55.         <div>
  56.             <input type="radio" name="save" id="confirm" value="1" checked><label for="confirm">保存</label>
  57.             <input type="radio" name="save" id="cancel" value="0"><label for="cancel">取消</label>
  58.         </div>
  59.         <button>登录</button>
  61. </body>
  62. <script>
  63.     var form=$('form');
  64.     // 1、attr() 一个参数事获取属性值，两个参数（属性名，新的属性值）
  65.     console.log(form.attr('action'));
  66.     // console.log(form.attr('action','admin.php'))
  67.     // 同时操作多个，可以用对象字面量作为参数
  68.     // form.attr({
  69.     //     'action':'admin.php',
  70.     //     'method':'get'
  71.     // })
  72.     form.attr('method','GET');
  73.     form.attr('method',function(){
  74.         var method=$(this).attr('method').toLowerCase();
  75.         if(method==='get'){
  76.              $(this).attr('action','query.php?id=1');
  77.         }
  78.         return 'POST';
  79.     })
  80.     form.removeAttr('action');
  82.     // 2、关于CSS的操作
  84.     console.log(form.css('width'));
  85.     console.log(form.css('border'));
  86.     console.log(form.css('border-style'));
  87.     console.log(form.css('border-color'));
  89.     $('h2').removeClass('red');
  90.     $('h2').addClass('red');
  92.     $('button').toggleClass('red');//如果有则删除，没有则添加
  93.     // $('button').toggleClass('red');
  94.     if($('button').hasClass('red')){
  95.         console.log('有red类样式');
  96.     }
  97.     $('#email').val('ldy@php.com');//并没有改变html中的值，只是在渲染html页面时替换了
  98.     $('#email').val(function(){
  99.         return this.defaultValue;
  100.     });
  103.     $('h2').text('登陆表单');//添加文本内容，无法识别html标签元素
  104.     $('h2').html('登录<span style="color:green">表单</span>');//可以识别html元素；
  106.     var form=document.forms.item(0);
  107.     console.log(form.getBoundingClientRect());//包含x,y坐标，上下左右（距父级起点的距离）和宽高
  108.     console.log($('form').offset());//只有上，左，离顶部的距离
  110.     $('body').css('height','2000px');
  112.     // $(document).on('scroll',function(){
  113.     //     console.log($(document).scrollTop());
  114.     // });
  116.     form.dataset.src='1';
  117.     console.log($(form).data('src'));
  118.     // $(form).data('src','2');
  119.     $(form).removeData('src');
  120.     // $(form).data('src', 'PHP中文网欢迎你');
  122. </script>
  123. </html>

1.2、运行结果图：

2.1代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  6.     <title>Document</title>
  7.     <style>
  8.         .action{
  9.             color:red;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <script>
  15.         $('body').append('<ol>');
  16.         // $('body').prepend('<ol>');
  17.         // $('<li>').text('华为手机').appendTo('ol:last-child()');
  18.         // $('<li>').text('小米手机').prepednTo();
  19.         $('<li>').text('小米手机').appendTo('ol:first-child()');
  20.         $('<li>').addClass('action').html('<span>智能手机</span').appendTo('ol');
  21.         // 添加元素的同时可以添加样式属性
  22.         $('<li>', {
  23.             'id': 'test',
  24.             'style': 'background-color: yellow'
  25.         }).html('<a href="" alt="">最新男装</a>').appendTo('ol');
  27.         $('ol').append(function(){
  28.             var lis='';
  29.             for(var i=0;i<5;i++){
  30.                 lis+='<li>最新产品'+(i+1)+'</li>';
  31.             }
  32.             return lis;
  33.         });
  34.         $('ol > li:nth-child(3)').before('<li>新元素1</li>');
  35.         $('ol > li:nth-child(3)').after('<li>新元素2</li>');
  36.         $('<li>新元素3</li>').insertBefore('ol > li:first-child()');
  38.         $('ol>:last-of-type()').replaceWith('<h4>替换元素</h4>');
  39.         $('<h4>我才是第一个</h4>').replaceAll('ol > li:first-of-type');
  41.         var ul=$('<ul>').appendTo('body');
  42.         ul.append(function(){
  43.             return $('ol:first-of-type > li:nth-of-type(-n+4)').clone();
  44.         });
  45.         console.log($('ol>li:nth-of-type(-n+2)'));
  47.         // $(ul).empty();
  48.         $(ul).remove();
  49.     </script>
  50. </body>
  51. </html>

2.1运行效果图：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：写得很好, 总结也到位.... 明天开始进行第三阶段laravel学习, 建议作业进度与课程一致
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post