SailorM - 博客园

2020年5月10日

摘要：代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="UTF-8"> 4 <title>动态生成表格</title> 5 6 <head> 7 <style> 8 /* 9 案例分析：1.里面的学生数据是动态的，需要js动态生成，数据采取阅读全文

posted @ 2020-05-10 11:11 SailorM 阅读(355) 评论(0) 推荐(0) 编辑

2020年5月9日

删除留言案例

摘要：案例分析： 1.当我们把文本域里面的值赋值给 li 时，多添加一个删除的链接； 2.需要把所有的链接获取过来，当我们点击当前链接的时候，删除当前链接所在的 li ； 3.阻止链接跳转需要添加 javascript:void(0); 或者 javascript:; 。效果：代码： 1 <scrip 阅读全文

posted @ 2020-05-09 20:39 SailorM 阅读(236) 评论(0) 推荐(0) 编辑

2020年3月15日

简单版发布留言案例

摘要：案例分析： 1.点击按钮之后就动态创建一个 li； 2.创建 li 的同时，把文本域里面的值通过 innerHTML 赋值给 li； 3.如果想要新的留言后面显示就用 appendChild ，如果想要在前面显示就用 insertBefore 。效果：代码： 1 <!DOCTYPE html> 阅读全文

posted @ 2020-03-15 21:09 SailorM 阅读(357) 评论(0) 推荐(0) 编辑

2020年3月13日

下拉菜单

摘要：案例分析： 1.导航栏里面的 li 都要有鼠标经过的效果，所以需要循环注册鼠标事件； 2.核心原理：当鼠标经过 li 里面的第二个孩子 ul 显示，当鼠标离开，则 ul 隐藏；效果展示：代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <me 阅读全文

posted @ 2020-03-13 15:52 SailorM 阅读(209) 评论(0) 推荐(0) 编辑

2020年3月12日

tab栏切换布局

摘要：案例分析 1.Tab栏切换有两个大的模块； 2.上面是模块选项卡，点击某一个，当前的底色为红色，其余不变（排他思想），用修改雷鸣的方式； 3.下面的模块内容，会跟随上面的选项卡变化，所以下面的模块变化需要写到点击事件里面； 4.规律：下面的模块显示内容和上面的选项卡意义对应相匹配； 5.核心思路：给阅读全文

posted @ 2020-03-12 15:27 SailorM 阅读(646) 评论(0) 推荐(0) 编辑

2020年2月12日

表单全选取消全选

摘要：案例分析： 1.全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可； 2.下面复选框需要全部选中，上面的全选才可以选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选框就不选中。效果图：代码：阅读全文

posted @ 2020-02-12 15:40 SailorM 阅读(897) 评论(0) 推荐(1) 编辑

2020年2月11日

表格隔行变色效果

摘要：案例分析: 1.用到鼠标经过onmouseover，鼠标离开onmouseout； 2.核心思路：鼠标经过tr行，当前行变换背景颜色，鼠标离开去掉当前背景颜色； 3.注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行。 HTML表格：表格由<table>标签定义。阅读全文

posted @ 2020-02-11 20:08 SailorM 阅读(448) 评论(0) 推荐(1) 编辑

排他思想之百度换肤

摘要： ——如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法： 1.所有的元素全部清除样式（干掉其他人）； 2.给当前元素设置样式（留下我自己）。注意：顺序不能颠倒，首先干掉其他人，再设置自己。百度换肤案例分析： 1.这个案例练习的是给一组元素注册事件； 2.给5张图片利用阅读全文

posted @ 2020-02-11 13:07 SailorM 阅读(315) 评论(0) 推荐(0) 编辑

2020年1月6日

操作元素之开关灯

摘要：分析：点击按钮，设置浏览器窗口背景的颜色变化。效果：代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>开关灯案例</title> 6 <style> 7 *{ 8 margin 阅读全文

posted @ 2020-01-06 22:40 SailorM 阅读(228) 评论(0) 推荐(0) 编辑

操作元素之密码框验证信息+操作元素的总结

摘要：案例分析： ①首先判断的事件是表单失去焦点； ②如果输入正确则提示正确的信息颜色为绿色小图标变化； ③如果输入不是6到16位，则提示错误信息为红色小图标变化； ④因为里面变化样式较多，我们采取className修改样式。效果：代码： 1 <!DOCTYPE html> 2 <html lang= 阅读全文

posted @ 2020-01-06 16:16 SailorM 阅读(286) 评论(0) 推荐(0) 编辑