JavaScript笔记+案例（上）：https://developer.aliyun.com/article/1427906
3.2 寻找标签（直接寻找）
- ID选择器
<h1 id="txt">中国联通</h1> <h1>中国联通</h1> <h1>中国联通</h1>
$("#txt")
- 样式选择器
<h1 class="c1">中国联通</h1> <h1 class="c1">中国联通</h1> <h1 class="c2">中国联通</h1>
$(".c1")
- 标签选择器
<h1 class="c1">中国联通</h1> <div class="c1">中国联通</div> <h1 class="c2">中国联通</h1>
$("h1")
- 层级选择器
<h1 class="c1">中国联通</h1> <h1 class="c1"> <div class="c2"> <span></span> <a></a> </div> </h1> <h1 class="c2">中国联通</h1>
$(".c1 .c2 a")
- 多选择器
<h1 class="c1">中国联通</h1> <h1 class="c1"> <div class="c3"> <span></span> <a></a> </div> </h1> <h1 class="c2">中国联通</h1> <ul> <li>xx</li> <li>xx</li> </ul>
$(".c3,.c2,li")
- 属性选择器
<input type="text" name="n1" /> <input type="text" name="n1" /> <input type="text" name="n2" />
$("input[name='n1']")
3.3 间接寻找
- 找到上一个兄弟
<div> <div>北京</div> <div id='c1'>上海</div> <div>深圳</div> <div>广州</div> </div>
$("#c1").prev() //找到上一个兄弟 $("#c1").next() //找到下一个兄弟 $("#c1").next().next() //找到下两极的兄弟 $("#c1").siblings() //所有的系统
- 找父子
<div> <div> <div>北京</div> <div id='c1'>上海 <div>青浦区</div> <div class="p10">宝山区</div> <div>浦东新区</div> </div> <div>深圳</div> <div>广州</div> </div> <div> <div>陕西</div> <div>山西</div> <div>河北</div> <div>河南</div> </div> </div>
$("#c1").parent() // 找父级 $("#c1").parent().parent() // 父级的父级 $("#c1").children() // 所有的子级 $("#c1").children(".p10") // 所有子级中寻找class=p10 $("#c1").find(".p10") // 去所有孙级中寻找class=p10 $("#c1").find("div") // 去所有孙级中寻找div标签
案例：菜单的切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height: 700px; width: 200px; border: 1px solid red; } .header{ padding: 5px; background-color: gold; border: 1px dotted #dddddd; /*更改光标*/ cursor: pointer; } .content a{ display: block; border: 1px dotted #dddddd; } .hide{ display: none; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="header" onclick="clickMe(this);">北京</div> <div class="content hide"> <a>海淀区</a> <a>朝阳区</a> <a>大兴区</a> <a>昌平区</a> </div> </div> <div class="item"> <div class="header" onclick="clickMe(this);">上海</div> <div class="content hide"> <a>宝山区</a> <a>青浦区</a> <a>浦东新区</a> <a>普陀区</a> </div> </div> </div> <script src="static/js/jquery-3.6.3.min.js"></script> <script> function clickMe(self){ var hashide = $(self).next().hasClass("hide") if(hashide){ $(self).next().removeClass("hide") }else{ $(self).next().addClass("hide") } } </script> </body> </html>
知识点：
- removeClass移除class样式，让菜单展开
- addClass添加class样式，让菜单闭合
- cursor: pointer; 更改光标
案例：菜单的切换（改进：点击展开后，其他标签自动闭合）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height: 700px; width: 200px; border: 1px solid red; } .header{ padding: 5px; background-color: gold; border: 1px dotted #dddddd; /*更改光标*/ cursor: pointer; } .content a{ display: block; border: 1px dotted #dddddd; } .hide{ display: none; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="header" onclick="clickMe(this);">北京</div> <div class="content hide"> <a>海淀区</a> <a>朝阳区</a> <a>大兴区</a> <a>昌平区</a> </div> </div> <div class="item"> <div class="header" onclick="clickMe(this);">上海</div> <div class="content hide"> <a>宝山区</a> <a>青浦区</a> <a>浦东新区</a> <a>普陀区</a> </div> </div> </div> <script src="static/js/jquery-3.6.3.min.js"></script> <script> function clickMe(self){ $(self).next().removeClass("hide") $(self).parent().siblings().find(".content").addClass("hide") } </script> </body> </html>
3.4 操作样式
- addClass
- removeClass
- hasClass
3.5 值的操作
<div id='c1'>内容</div>
$("#c1").text() // 获取文本内容 $("#c1").text("abc") // 设置文本内容
<input type='text' id='c2' />
$("#c2").val() // 获取用户输入的值 $("#c2").val("aaa") // 设置值
案例：动态创建数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="txtUser" placeholder="用户名"> <input type="text" id="txtEmail" placeholder="邮箱"> <input type="button" value="提交" onclick="getInfo()" /> <ul id="view"> </ul> <script src="static/js/jquery-3.6.3.min.js"></script> <script> function getInfo(){ var Username = $("#txtUser").val(); var Email = $("#txtEmail").val(); var dataString = Username+ "-" +Email var newLi1 = $("<li>").text(dataString); $("#view").append(dataString); } </script> </body> </html>
3.6 事件
事件绑定：
<input type="button" value="提交" onclick="getInfo()" /> <script> function getInfo(){ } </script>
使用jQuery，事件绑定：
<ul> <li>百度</li> <li>谷歌</li> <li>搜狗</li> </ul> <script> $("li").click(function(){ // 点击li标签时，自动执行这个函数 // $(this) 当前点击的标签 }) </script>
案例：删除元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>百度</li> <li>谷歌</li> <li>搜狗</li> </ul> <script src="static/js/jquery-3.6.3.min.js"></script> <script> $("li").click(function (){ $(this).remove(); }) </script> </body> </html>
当页面框架加载完成之后执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>百度</li> <li>谷歌</li> <li>搜狗</li> </ul> <script src="static/js/jquery-3.6.3.min.js"></script> <script> $(function (){ // 当页面框架加载完成后，自动执行 }) $("li").click(function (){ $(this).remove(); }) </script> </body> </html>
案例：表格操作（删除功能）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px"> <thead> <tr> <td>ID</td> <td>姓名</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>刘备</td> <td> <input type="button" value="删除" class="delete"/> </td> </tr> <tr> <td>2</td> <td>刘备</td> <td> <input type="button" value="删除" class="delete"/> </td> </tr> <tr> <td>3</td> <td>刘备</td> <td> <input type="button" value="删除" class="delete"/> </td> </tr> </tbody> </table> <script src="static/js/jquery-3.6.3.min.js"></script> <script> $(function (){ $(".delete").click(function (){ $(this).parent().parent().remove(); }) }) </script> </body> </html>
4.前端整合
- HTML
- CSS
- JavaScript、jQuery
- BootStrap（动态效果依赖jQuery）
案例：添加数据页面
人员信息录入功能，需要提供用户信息：
用户名、年龄、薪资、部门、入职时间
对于时间的选择，不能输入；选择；（插件）
- 下载插件
https://github.com/uxsolutions/bootstrap-datepicker
- 应用插件
导入css、js即可
- 用法
https://bootstrap-datepicker.readthedocs.io/en/latest/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"> <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css"> <link rel="stylesheet" href="static/plugins/bootstrap-datepicker-master/dist/css/bootstrap-datepicker.css"> </head> <body> <div class="container" style="padding-top: 50px"> <form> <div class="row clearfix"> <div class="col-md-6"> <div class="form-group"> <label>用户名</label> <input type="text" class="form-control" placeholder="用户名"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>年龄</label> <input type="text" class="form-control" placeholder="年龄"> </div> </div> </div> <div class="row clearfix"> <div class="col-md-6"> <div class="form-group"> <label>薪资</label> <input type="text" class="form-control" placeholder="薪资"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>部门</label> <select class="form-control"> <option>IT部门</option> <option>HR部门</option> <option>销售部门</option> </select> </div> </div> </div> <div class="row clearfix"> <div class="col-md-6"> <div class="form-group"> <label>入职时间</label> <input type="text" id="dt" class="form-control" placeholder="入职时间"> </div> </div> </div> <div class="row clearfix"> <div class="col-md-6"> <button type="submit" class="btn btn-primary">提 交</button> </div> </div> </form> </div> <script src="static/js/jquery-3.6.3.min.js"></script> <script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script> <script src="static/plugins/bootstrap-datepicker-master/js/bootstrap-datepicker.js"></script> <script src="static/plugins/bootstrap-datepicker-master/js/locales/bootstrap-datepicker.zh-CN.js"></script> <script> $(function (){ $('#dt').datepicker({ format: 'yyyy-mm-dd', startDate: '0', language: "zh-CN", autoclose: true }); }) </script> </body> </html>
总结：
- 了解HTML标签、标签结构、基于它可以实现简单的页面
- CSS，了解基本样式；在模板的基础上修改
- JavaScript、jQuery，了解基本使用
- 事件绑定/寻找标签/操作标签。
- 导入现成插件。
