案例一:聊天窗口
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style type="text/css">
9 .talk_con{
10 width:600px;
11 height:500px;
12 border:1px solid #666;
13 margin:50px auto 0;
14 background:#f9f9f9;
15 }
16 .talk_show{
17 width:580px;
18 height:420px;
19 border:1px solid #666;
20 background:#fff;
21 margin:10px auto 0;
22 overflow:auto;
23 }
24 .talk_input{
25 width:580px;
26 margin:10px auto 0;
27 }
28 .whotalk{
29 width:80px;
30 height:30px;
31 float:left;
32 outline:none;
33 }
34 .talk_word{
35 width:420px;
36 height:26px;
37 padding:0px;
38 float:left;
39 margin-left:10px;
40 outline:none;
41 text-indent:10px;
42 }
43 .talk_sub{
44 width:56px;
45 height:30px;
46 float:left;
47 margin-left:10px;
48 }
49 .atalk{
50 margin:10px;
51 }
52 .atalk span{
53 display:inline-block;
54 background:#0181cc;
55 border-radius:10px;
56 color:#fff;
57 padding:5px 10px;
58 }
59 .btalk{
60 margin:10px;
61 text-align:right;
62 }
63 .btalk span{
64 display:inline-block;
65 background:#ef8201;
66 border-radius:10px;
67 color:#fff;
68 padding:5px 10px;
69 }
70 </style>
71 <script src="js/jquery-1.12.4.min.js"></script>
72 <script type="text/javascript">
73 // 写出对应功能代码
74 $(function(){
75 // 发送按钮单击:1. 获取用户输入的数据 -- value属性值访问 2、看下拉菜单的选项 如果是a -- 获取下拉菜单的vlaue == 0,把用户的数据按照a的模板展示;如果是b --获取下拉菜单的vlaue == 1,把数据按照b的模板展示 -- if
76 $('#talksub').click(function(){
77 var vals = $('#talkwords').val()
78
79 // 如果是空报错提示
80 if(vals =='')
81 {
82 alert('请输入内容')
83 return
84 }
85
86 // alert(vals)
87
88 // 获取下拉菜单的value
89 var str = ''
90
91 var whoVal = $('#who').prop('value')
92 if(whoVal == 0)
93 {
94 // A
95 str = '<div class="atalk"><span>A说:'+vals+'</span></div>'
96 }
97 else
98 {
99 str = '<div class="btalk"><span>B说:'+vals+'</span></div>'
100 }
101 // 放内容 -- 设置words 的内容是 原来的内容$('#words').html() + str
102 $('#words').html( $('#words').html() + str )
103
104 // 设置vlaue属性为空
105 $('#talkwords').val('')
106
107
108 })
109 })
110 </script>
111</head>
112<body>
113 <div class="talk_con">
114 <div class="talk_show" id="words">
115 <div class="atalk"><span>A说:吃饭了吗?</span></div>
116 <div class="btalk"><span>B说:还没呢,你呢?</span></div>
117 </div>
118 <div class="talk_input">
119 <select class="whotalk" id="who">
120 <option value="0">A说:</option>
121 <option value="1">B说:</option>
122 </select>
123 <input type="text" class="talk_word" id="talkwords">
124 <input type="button" value="发送" class="talk_sub" id="talksub">
125 </div>
126 </div>
127</body>
128</html>
案例二:to do list
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>todolist</title>
6 <style type="text/css">
7 .list_con{
8 width:600px;
9 margin:50px auto 0;
10 }
11 .inputtxt{
12 width:550px;
13 height:30px;
14 border:1px solid #ccc;
15 padding:0px;
16 text-indent:10px;
17 }
18 .inputbtn{
19 width:40px;
20 height:32px;
21 padding:0px;
22 border:1px solid #ccc;
23 }
24 .list{
25 margin:0;
26 padding:0;
27 list-style:none;
28 margin-top:20px;
29 }
30 .list li{
31 height:40px;
32 line-height:40px;
33 border-bottom:1px solid #ccc;
34 }
35
36 .list li span{
37 float:left;
38 }
39
40 .list li a{
41 float:right;
42 text-decoration:none;
43 margin:0 10px;
44 }
45 </style>
46 <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
47 <script type="text/javascript">
48 $(function(){
49 // 1、新增li节点 2、删除节点 3、上下箭头移动节点
50 // 1:增加按钮单击:获取用户输入的数据,数据放到li节点里面,追加li节点到页面
51 $('#btn1').click(function(){
52 var vals = $('#txt1').val()
53 if(vals == '')
54 {
55 alert('请输入内容')
56 return
57 }
58 var $li = $('<li><span>'+vals+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
59 $('#list').append( $li );
60 $('#txt1').val('')
61 })
62
63
64 // $('a').click(function(){
65 // alert(1)
66 // })
67 // 父
68 $('#list').delegate('a', 'click', function(){
69 // alert(2)
70 // 如果删除的a -- class == 'del',执行节点remove;如果向上的a,执行向上移动一个位置
71 var classVal = $(this).prop('class')
72 // alert(classVal)
73 if(classVal == 'del')
74 {
75 // 删除这个a的父级
76 $(this).parent().remove()
77 }
78 else if(classVal == 'up')
79 {
80 // 如果是第一个提示
81 if($(this).parent().index() == 0)
82 {
83 alert('已经是第一个了')
84 return
85 }
86 // 向上移动:例如:单击js的up, 选中js这个li, 移动到 cssli 的前面
87 $(this).parent().insertBefore( $(this).parent().prev() )
88 // $(this).parent() -- js li
89 // $(this).parent().prev() -- js这个li的前一个li css
90 }
91 else if(classVal == 'down')
92 {
93 // 如果是最后一个提示 index == 长度(ul的子级)-1
94 if($(this).parent().index() == $('#list').children().length - 1 )
95 {
96 alert('已经是最后一个了')
97 return
98 }
99 // 向下移动:例如,单击html的down,选中html这个li, 移动到 css li的后面
100 $(this).parent().insertAfter( $(this).parent().next() )
101 }
102 })
103
104 })
105
106 </script>
107</head>
108<body>
109
110 <div class="list_con">
111 <h2>To do list</h2>
112 <input type="text" name="" id="txt1" class="inputtxt">
113 <input type="button" name="" value="增加" id="btn1" class="inputbtn">
114
115 <ul id="list" class="list">
116
117 <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
118 <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
119 <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
120
121 </ul>
122
123 </div>
124</body>
125</html>
126</html>
案例三:网站注册页面
由于此处代码实现过于复杂,css和js功能实现代码量较多,公众号文章字数有所限制,所以此处将两个重要的功能实现即可,有了这两个例子,其他的都可以做出来了,至于网页的美化这些到是简单许多。
1$(function(){
2 var flag_user = false
3 var flag_allow = true // 默认是勾选状态
4 // alert(1)
5 // 验证发生在用户输入完成的时候 -- 失去焦点blur
6
7 // 框架:用户名密码。。同意协议都要做验证,当所有验证通过写submit提交
8 // 用户名:blur事件里面验证:获取用户输入的数据;列正则 ; if正则test用户输入的数据:合法true 不合法false -- 报错提示
9 // $('#user_name').blur()
10 // oBox.onclick = function(){}
11
12
13 // 验证用户名
14 var $user_name = $('#user_name')
15 $user_name.blur(function(){
16 fn_check_user()
17 })
18
19 function fn_check_user(){
20 var vals = $user_name.val()
21 var re = /^\w{6,20}$/;
22 if(vals == '')
23 {
24 $user_name.next().show().html('用户名不能为空')
25 flag_user = false
26 return
27 }
28
29 if(re.test(vals))
30 {
31 // 合法 -- 隐藏错误信息
32 $user_name.next().hide()
33 // flag_user = false
34 flag_user = true
35 }
36 else
37 {
38 // 不合法 -- 报错
39 $user_name.next().show().html('用户名是6-20位数字、字母和下划线!')
40 flag_user = false
41 }
42 }
43
44
45 // 验证同意协议的复选框
46 // 单击的时候改变勾选的状态 -- 验证click:if(勾选){合法}else{不合法}
47 var $allow = $('#allow')
48 // alert($allow.prop('checked') == 'checked')
49 // alert($allow.prop('checked'))
50 $allow.click(function(){
51 fn_check_allow()
52 })
53
54 function fn_check_allow(){
55 if($allow.prop('checked'))
56 {
57 // 合法
58 $allow.next().next().hide()
59 flag_allow = true
60 }
61 else
62 {
63 // 不合法 -- 报错
64 $allow.next().next().show().html('请同意协议')
65 flag_allow = false
66 }
67 }
68
69 // 验证注册
70 // 考虑的人:页面一刷新,没有执行失去焦点,正则没有生效 -- 不能注册不能提交
71 // 方法: 页面定义开关,默认不能提交,让开关关闭表示不能提交;正则验证通过打开开关表示可以提交 -- submit事件里面加条件判断:if(开关打开){提交}else{不能提交}
72 // 开关到底是什么? 就是全局变量 -- 几个全局变量?
73 var $register = $('#register')
74 $register.submit(function(){
75 // return true
76 if(flag_user && flag_allow)
77 {
78
79 alert('提交')
80 return true
81 }
82 else
83 {
84 alert('不能提交')
85 return false
86 }
87 })
88
89
90})
案例四:弹窗
要求:单击弹窗外部,弹窗消失;点击x弹窗消失;点击弹窗内部,弹窗不消失。
此处为js文件,由于字数限制,此处只提供重要功能的代码。
1 $(function(){
2 $('#btn01').click(function(){
3 $('#pop').show()
4 return false
5 })
6
7
8 $('#shutoff').click(function(){
9 $('#pop').hide()
10 })
11
12
13 $(document).click(function(){
14 $('#pop').hide()
15 })
16
17 $('.pop_con').click(function(){
18 // 不需要执行显示,也不能隐藏 -- 不能冒泡到document
19 return false
20 })
21 })