jQuery事件，对象以及插件
2024-05-20 13:26:28
回顾
1 基本使用
2 jquery 选择器
3 筛选器
过滤
查找
串联
4 DOM 操作
内部插入
append()appendTo()prepend()prependTo()
外部插入
after()insertAfter()before()insertBefore()
包裹
wrap()wrapAll()wrappInner()unwrap()
替换
replaceWith()replaceAll()
删除
empty()remove()
克隆
clone()
5 属性
# 属性attr()prop()removeAttr()removeProp()# CLASS类addClass()removeClass()toggleClass()hasClass()# 值/文本html() text()val()
6 样式
# csscss()# 位置offset()position()scrollLeft()scrollTop()# 尺寸width() / height()innerWidth() / innserHeight()outerWidth() / outerHeight()
笔记
1 jQuery 事件
1.1 事件的绑定和解除绑定
on(事件名, fn)off() 解除事件绑定one(事件名, fn) 仅仅绑定一次
1.2 代码触发事件动作
trigger(事件名) jQuery事件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jquery事件</title>
6 </head>
7 <body>
8 <h1>jquery事件</h1>
9 <hr>
10
11 <button id="btn">按钮</button>
12 <button id="btn2">解除绑定</button>
13 <hr>
14
15 <button id="btn3">下载</button>
16
17 <br>
18
19 <a href="1.html" id="a1">超链接</a>
20
21 <hr>
22
23 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dolores eos quasi laborum earum libero est doloremque, tempora error at tempore nostrum! Fugit saepe ipsam deserunt commodi asperiores, unde.</p>
24
25
26 <script src="../jquery-3.3.1.js"></script>
27 <script>
28 $(function(){
29
30 $('#btn').on('click',function(){
31 alert('啊，你点我了')
32 });
33
34 //btn2对应的元素绑定单击事件，当btn2元素对应的按钮按下
35 //会触发btn对应元素对象解除事件绑定。
36 $('#btn2').on('click', function(){
37 $('#btn').off();
38 });
39
40 //一次单击事件
41 $('#btn3').one('click', function(){
42 alert('哈哈哈');
43 });
44
45
46 $('#a1').on('click', function(){
47 alert('啊，我是超链接');
48
49 //阻止事件冒泡 和 默认动作
50 //不加return false会默认跳到一个新的页面
51 return false;
52 });
53
54
55 //手动 代码触发 事件 $('#btn').trigger('click')
56 //$('#btn').click()
57 /*$('#btn').trigger('click')
58 $('#btn').trigger('click')
59 $('#btn').trigger('click')*/
60
61 //鼠标移动和离开都会触发
62 $('p').hover(function(){
63 console.log('OK');
64 })
65 })
66 </script>
67 </body>
68 </html>jQuery事件
1.3 委派
$('.list li').on('click', fn)$('.list').on('click', 'li', fn)
1.4 特殊事件
ready() 事件 类似于onload hover() 事件 mouseenter 和 mouseleave 相结合的事件
1.5 事件列表
同之前的 jS 事件
1.6 事件对象
属性offsetX, offsetY 鼠标在本元素上的位置pageX, pageY 鼠标在页面上的位置坐标clientX, clientY 鼠标在视口上的位置which 按键的值(ASCII)或鼠标按键的值 （1，2,3）target#方法stopPropagation() preventDefault()
jQuery事件对象
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jquery事件对象</title>
6 <style>
7 #box {
8 width:300px;
9 height:200px;
10 border:2px solid #ccc;
11 margin:100px auto;
12 }
13 </style>
14 </head>
15 <body>
16 <h1>事件对象</h1>
17 <hr>
18
19 <div id="box"></div>
20
21 <script src="../jquery-3.3.1.js"></script>
22 <script>
23 $(function(){
24 //en只是个形参，可以随意设置，用来接收参数
25 //鼠标单击显示鼠标左键的值和鼠标的位置
26 $('#box').on('click', function(en) {
27 //鼠标的位置
28 console.log(en.clientX, en.clientY);
29 console.log(en.pageX, en.pageY);
30 //鼠标在本元素上的位置
31 console.log(en.offsetX, en.offsetY);
32 });
33 //按键的值
34 $(document).on('keyup', function(en) {
35 console.log(en.which)
36 });
37 //鼠标键的值
38 $('#box').on('mousedown', function(en) {
39 console.log(en.which)
40 })
41
42 })
43 </script>
44 </body>
45 </html>jQuery事件对象
2 jQuery 动画
2.1 基本效果
hide([speed] [,fn]) 隐藏show([speed] [,fn]) 显示toggle([speed] [,fn]) 切换宽高(width/height padding) 透明度 变化
2.2 滑动效果
slideUp([speed] [,fn]) 隐藏slideDown([speed] [,fn]) 显示slideToggle([speed] [,fn]) 切换高度(height padding) 变化
2.3 淡入淡出
fadeOut([speed] [,fn]) 隐藏fadeIn([speed] [,fn]) 显示fadeToggle([speed] [,fn]) 切换fadeTo([speed,] opacity [,fn])只有 opacity 的变化
2.4 自定义动画
animate(对象，speed, [fn])
自定义动画
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 #box {
8 overflow: hidden;
9 width:400px;
10 height:200px;
11 border:2px solid #ccc;
12 padding:20px;
13 }
14 </style>
15 </head>
16 <body>
17 <h1>自定义动画</h1>
18 <hr>
19 <button id="btn">隐藏</button>
20 <button id="btn1">显示</button>
21 <button id="btn2">切换</button>
22
23 <hr>
24 <div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas et necessitatibus cumque accusamus iure eius expedita, dolore, nobis ut maiores dignissimos consectetur saepe repudiandae, libero molestias deserunt veritatis facere vitae.</div>
25
26 <script src="../jquery-3.3.1.js"></script>
27 <script>
28 $(function(){
29 $('#btn').click(function(){
30 $('#box').animate({
31 'width':'0px',
32 'padding-left':'0px',
33 'padding-right':'0px'
34 }, 2000, function(){
35 $(this).hide();
36 })
37 });
38
39
40 $('#btn1').click(function(){
41 $('#box').show().animate({
42 'width':'400px',
43 'padding-left':'20px',
44 'padding-right':'20px'
45 }, 2000)
46 });
47
48
49 $('#btn2').click(function(){
50 $('#box').animate({
51 'width':'toggle',
52 'padding-left':'toggle',
53 'padding-right':'toggle'
54 }, 2000)
55 })
56 })
57 </script>
58 </body>
59 </html>自定义动画
2.5 动画控制
delay() 延迟finish() 瞬间完成动画stop() 停止动画 滚动动画
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>滚动</title>
6 <style>
7 #box {
8 width:800px;
9 height:200px;
10 border:2px solid orange;
11 overflow: hidden;
12 transition: .5s;
13 }
14 .wrapper {
15 width:2200px;
16 }
17 #box p {
18 margin:0;
19 width:198px;
20 height:198px;
21 float:left;
22 border:1px solid #ccc;
23 background: #369;
24 color:#fff;
25 }
26
27 </style>
28 </head>
29 <body>
30 <div id="box">
31 <div class="wrapper">
32 <p>lorem1</p>
33 <p>lorem2</p>
34 <p>lorem3</p>
35 <p>lorem4</p>
36 <p>lorem5</p>
37 <p>lorem6</p>
38 <p>lorem7</p>
39 <p>lorem8</p>
40 <p>lorem9</p>
41 <p>lorem10</p>
42 <p>lorem11</p>
43 </div>
44 </div>
45
46
47
48 <br>
49
50 <button id="left_btn"> < </button>
51 <button id="right_btn"> > </button>
52
53
54 <script src="../jquery-3.3.1.js"></script>
55 <script>
56 $(function(){
57
58 $('#left_btn').on('click', function(){
59 //console.log($('#box').scrollLeft())
60 //$('#box').scrollLeft(800);//是把 scrollLeft 设置为800
61
62 //$('#box').scrollLeft($('#box').scrollLeft() - 800);
63 $('#box').animate({
64 'scrollLeft':$('#box').scrollLeft() - 800
65 }, 500)
66
67 });
68
69 $('#right_btn').on('click', function(){
70 //$('#box').scrollLeft($('#box').scrollLeft() + 800 )
71
72 $('#box').animate({
73 'scrollLeft':$('#box').scrollLeft() + 800
74 }, 500)
75 })
76 })
77 </script>
78 </body>
79 </html>滚动动画
动画控制
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 #box {
8 overflow: hidden;
9 width:400px;
10 height:200px;
11 border:2px solid #ccc;
12 padding:20px;
13 }
14 </style>
15 </head>
16 <body>
17 <h1>动画控制</h1>
18 <hr>
19 <button id="btn">隐藏</button>
20 <button id="btn1">显示</button>
21 <button id="btn2">切换</button>
22
23 <br>
24 <button id="btn3">动画</button>
25 <button id="btn4">finish</button>
26 <button id="btn5">stop</button>
27
28 <hr>
29 <div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas et necessitatibus cumque accusamus iure eius expedita, dolore, nobis ut maiores dignissimos consectetur saepe repudiandae, libero molestias deserunt veritatis facere vitae.</div>
30
31 <script src="../jquery-3.3.1.js"></script>
32 <script>
33
34
35 $(function(){
36
37 $('#btn4').on('click', function() {
38 $('#box').finish();
39 })
40
41 $('#btn5').on('click', function() {
42 $('#box').stop();
43 })
44
45 $('#btn3').on('click', function(){
46 //如果 box元素 正在执行 return false
47 if ($('#box').is(':animated')) {
48 return false;
49 }
50
51 //动画队列 delay
52 $('#box').slideUp(3000).delay(2000).show(2000).fadeOut(2000).slideDown(3000)
53 })
54
55 $('#btn').click(function(){
56 $('#box').animate({
57 'width':'0px',
58 'padding-left':'0px',
59 'padding-right':'0px'
60 }, 2000, function(){
61 $(this).hide();
62 })
63 });
64
65
66 $('#btn1').click(function(){
67 $('#box').show().animate({
68 'width':'400px',
69 'padding-left':'20px',
70 'padding-right':'20px'
71 }, 2000)
72 });
73
74
75 $('#btn2').click(function(){
76 $('#box').animate({
77 'width':'toggle',
78 'padding-left':'toggle',
79 'padding-right':'toggle'
80 }, 5000)
81 })
82 })
83 </script>
84 </body>
85 </html>动画控制
is(':animated') 判断是否在执行动画 返回boolean
jQuery动画
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 #box {
8 width: 400px;
9 height: 300px;
10 padding: 20px;
11 border: 2px solid #999;
12 }
13 </style>
14 </head>
15 <body>
16 <h1>动画效果</h1>
17 <hr>
18
19 <button id="hide_btn">隐藏</button>
20 <button id="show_btn">显示</button>
21 <button id="toggle_btn">切换</button>
22 <br>
23
24 <button id="slideDownBtn">slideDown显示</button>
25 <button id="slideUpBtn">slideUp隐藏</button>
26 <button id="slideToggleBtn">slideToggle切换</button>
27
28 <br>
29 <button id="fadeOutBtn">淡出</button>
30 <button id="fadeInBtn">淡入</button>
31 <button id="fadeToggleBtn">切换</button>
32 <button id="fadeToBtn">fadeTo</button>
33
34 <br>
35 <br>
36 <br>
37
38 <div id="box">
39 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore laudantium eum eos cumque voluptatem dicta ad beatae ratione voluptate, repudiandae quis provident nam debitis laborum, eveniet. Odit quam ducimus, labore.
40 </div>
41
42
43 <script src="../jquery-3.3.1.js"></script>
44 <script>
45 $(function(){
46
47 //淡入淡出效果
48 $('#fadeOutBtn').on('click', function(){
49
50 //$('#box').fadeOut()
51 $('#box').fadeOut(2000)
52 })
53 $('#fadeInBtn').on('click', function(){
54
55 //$('#box').fadeOut()
56 $('#box').fadeIn(5000)
57 })
58 $('#fadeToggleBtn').on('click', function(){
59
60 //$('#box').fadeOut()
61 $('#box').fadeToggle(2000)
62 });
63 $('#fadeToBtn').on('click', function(){
64 /*$('#box').fadeTo(3000, .5, function(){
65 console.log('fadeTo')
66 })*/
67 //alert('ok')
68 $('#box').fadeTo(1000, .5)
69 })
70
71
72 //滑动效果
73 $('#slideUpBtn').on('click', function(){
74 //$("#box").slideUp();
75 //$("#box").slideUp('slow');
76 //$("#box").slideUp(3000);
77 $("#box").slideUp(3000, function(){
78
79 });
80 });
81
82 $('#slideDownBtn').on('click', function(){
83 $('#box').slideDown(5000)
84 })
85
86
87 //基本效果
88 $('#hide_btn').click(function(){
89 //$('#box').hide();
90 //$('#box').hide('fast');
91 //$('#box').hide('normal');
92 //$('#box').hide('slow');
93 //$('#box').hide(5000);
94 $('#box').hide(2000, function(){
95 console.log('啊，我隐藏了');
96 });
97 });
98
99 $('#show_btn').click(function(){
100 $('#box').show(3000)
101 });
102 $('#toggle_btn').click(function(){
103 $('#box').toggle(3000, function(){
104 console.log('toggle');
105 })
106 })
107 })
108 </script>
109 </body>
110 </html>jQuery动画
实例：新闻滚动播放
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>滚动播放</title>
6 <style>
7 body {
8 background:#ccc;
9 }
10 #box {
11 margin:100px auto;
12 width: 1000px;
13 height: 460px;
14 background:#ccc;
15 overflow: hidden;
16 }
17
18 ul {
19 list-style:none;
20 padding:0;
21 margin:0;
22 }
23 p {
24 margin:0;
25 }
26 #box li {
27 height:100px;
28 margin-bottom:20px;
29 background: #fff
30 }
31 #box li img{
32 float:left;
33 width:100px;
34 height: 100px;
35 }
36 #box li p {
37 float:right;
38 width:850px;
39 line-height: 100px;
40 height:100px;
41 }
42 </style>
43 </head>
44 <body>
45 <div id="box">
46 <ul id="newsList">
47 <li>
48 <img src="../../dist/images_one/meinv02.jpg" alt="">
49 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
50 </li>
51
52 <li>
53 <img src="../../dist/images_one/1.jpg" alt="">
54 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
55 </li>
56
57 <li>
58 <img src="../../dist/images_one/2.jpg" alt="">
59 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
60 </li>
61
62 <li>
63 <img src="../../dist/images_one/3.jpg" alt="">
64 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
65 </li>
66
67 <li>
68 <img src="../../dist/images_one/4.jpg" alt="">
69 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
70 </li>
71
72 <li>
73 <img src="../../dist/images_one/11.jpg" alt="">
74 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
75 </li>
76
77 <li>
78 <img src="../../dist/images_one/10.jpg" alt="">
79 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
80 </li>
81
82 <li>
83 <img src="../../dist/images_one/9.jpg" alt="">
84 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
85 </li>
86
87 <li>
88 <img src="../../dist/images_one/8.jpg" alt="">
89 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
90 </li>
91 </ul>
92 </div>
93
94
95 <script src="../jquery-3.3.1.js"></script>
96 <script>
97 $(function(){
98 setInterval(function(){
99 $('#box li').last().hide().prependTo('#newsList').slideDown();
100 }, 2000)
101 })
102 </script>
103 </body>
104 </html>新闻滚动播放（动画效果不明显）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>滚动播放</title>
6 <style>
7 body {
8 background:#ccc;
9 }
10 #box {
11 margin:100px auto;
12 width: 1000px;
13 height: 460px;
14 background:#ccc;
15 overflow: hidden;
16 }
17
18 ul {
19 list-style:none;
20 padding:0;
21 margin:0;
22 }
23 p {
24 margin:0;
25 }
26 #box li {
27 height:100px;
28 margin-bottom:20px;
29 background: #fff
30 }
31 #box li img{
32 float:left;
33 width:100px;
34 height: 100px;
35 }
36 #box li p {
37 float:right;
38 width:850px;
39 line-height: 100px;
40 height:100px;
41 }
42 </style>
43 </head>
44 <body>
45 <div id="box">
46 <ul id="newsList">
47 <li>
48 <img src="../../dist/images_one/meinv02.jpg" alt="">
49 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
50 </li>
51
52 <li>
53 <img src="../../dist/images_one/1.jpg" alt="">
54 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
55 </li>
56
57 <li>
58 <img src="../../dist/images_one/2.jpg" alt="">
59 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
60 </li>
61
62 <li>
63 <img src="../../dist/images_one/3.jpg" alt="">
64 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
65 </li>
66
67 <li>
68 <img src="../../dist/images_one/4.jpg" alt="">
69 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
70 </li>
71
72 <li>
73 <img src="../../dist/images_one/11.jpg" alt="">
74 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
75 </li>
76
77 <li>
78 <img src="../../dist/images_one/10.jpg" alt="">
79 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
80 </li>
81
82 <li>
83 <img src="../../dist/images_one/9.jpg" alt="">
84 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
85 </li>
86
87 <li>
88 <img src="../../dist/images_one/8.jpg" alt="">
89 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
90 </li>
91 </ul>
92 </div>
93
94
95 <script src="../jquery-3.3.1.js"></script>
96 <script>
97 $(function(){
98 setInterval(function(){
99 $('#box li').eq(3).fadeTo(500, 0, function(){
100 $('#box li').last().fadeTo(0,1).hide().prependTo('#newsList').slideDown();
101 })
102 }, 2000)
103 })
104 </script>
105 </body>
106 </html>新闻滚动播放
2.6 jQuery 插件
jQuery datetimepicker插件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jquery插件</title>
6 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
7 <link rel="stylesheet" href="../jquery.datetimepicker.css">
8 <style>
9 select {
10 width:200px;
11 }
12 </style>
13 </head>
14 <body>
15 <h1>jquery插件</h1>
16 <hr>
17
18 <label for="#">请选择您的籍贯</label>
19 <select name="" id="jiguan">
20 <option value="1">上海</option>
21 <option value="1">北京</option>
22 <option value="1">新疆</option>
23 <option value="1">台湾</option>
24 <option value="1">香港</option>
25 <option value="1">澳门</option>
26 <option value="1">西藏</option>
27 <option value="1">火星</option>
28 <option value="1">云南</option>
29 <option value="1">福建</option>
30 <option value="1">辽宁</option>
31 <option value="1">吉林</option>
32 <option value="1">黑龙江</option>
33 <option value="1">黑龙江</option>
34 </select>
35
36 <hr>
37
38 <label for="birthDay">请输入您的生日：</label>
39 <input type="text" id="birthDay">
40
41 <script src="../jquery.js"></script>
42 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
43 <script src="../jquery.datetimepicker.full.js"></script>
44 <script>
45 $(function(){
46 $('#jiguan').select2();
47
48 //时间日期插件
49 $.datetimepicker.setLocale('zh');
50 $('#birthDay').datetimepicker({
51 format:"Y-m-d H:i"
52 });
53 })
54 </script>
55 </body>
56 </html>jQuery datetimepicker插件
jQuery全屏滚动插件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>全屏滚动</title>
6 <link href="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.css" rel="stylesheet">
7 <style>
8 .slide {
9 color: #fff;
10 font-size:100px;
11 text-align: center;
12 }
13 </style>
14 </head>
15 <body>
16 <!--HTML部分-->
17 <div id="fullpage">
18 <div class="section">
19 <h2>Page1</h2>
20 </div>
21 <div class="section">
22 <div class="slide">A</div>
23 <div class="slide">B</div>
24 <div class="slide">C</div>
25 </div>
26 <div class="section">
27 <h2>Page3</h2>
28 </div>
29 <div class="section">
30 <h2>Page4</h2>
31 </div>
32 </div>
33
34
35 <script src="../jquery-3.3.1.js"></script>
36 <script src="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.js"></script>
37 <script>
38 $('#fullpage').fullpage({
39 navigation: true,
40 sectionsColor: ['red', 'green','purple', 'orange']
41 });
42 </script>
43 </body>
44 </html>jQuery全屏滚动插件
表单验证实例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>表单验证</title>
6 <style>
7 input {
8 width: 300px;
9 border:1px solid #ccc;
10 padding:10px;
11 font-size:16px;
12 }
13 button {
14 width: 322px;
15 border:1px solid #ccc;
16 background:#f5f5f5;
17 line-height: 40px;
18 cursor: pointer;
19 font-size:16px;
20 }
21 td.success {
22 color:green;
23 }
24 td.error {
25 color:red;
26 }
27 </style>
28 </head>
29 <body>
30 <h1>注册</h1>
31 <hr>
32
33 <form action="user.php" id="myForm">
34 <table>
35 <tr>
36 <td>用户名：</td>
37 <td><input type="text" name="username" id="usernameInput"></td>
38 <td></td>
39 </tr>
40 <tr>
41 <td>邮箱：</td>
42 <td><input type="text" name="email" id="emailInput"></td>
43 <td></td>
44 </tr>
45 <tr>
46 <td>密码：</td>
47 <td><input type="password" name="pwd" id="pwdInput"></td>
48 <td></td>
49 </tr>
50 <tr>
51 <td>确认密码：</td>
52 <td><input type="password" name="repwd" id="repwdInput"></td>
53 <td></td>
54 </tr>
55 <tr>
56 <td></td>
57 <td>
58 <button>注 册</button>
59 </td>
60 <td></td>
61 </tr>
62 </table>
63 </form>
64
65
66 <script src="../jquery-3.3.1.js"></script>
67 <script>
68 //表单验证
69 $(function(){
70 //用户名验证事件
71 $('#usernameInput').on('blur', checkUsername);
72 //邮箱验证事件
73 $('#emailInput').on('blur', checkEmail);
74 //密码验证事件
75 $('#pwdInput').on('blur', checkPwd);
76 //确认密码 验证
77 $('#repwdInput').on('blur', checkRepwd);
78
79 //表单提交事件
80 $('#myForm').on('submit', function(){
81 return checkUsername() && checkEmail() && checkPwd() && checkRepwd();
82 });
83
84
85 //验证 用户名
86 function checkUsername(){
87 //获取 用户输入的内容
88 var value = $('#usernameInput').val();
89 //验证 用户输入是否合法 4~12位 数字/字母/下划线
90 if (value.search(/^\w{4,12}$/) === -1) {
91 $('#usernameInput').parent().next().text('用户名不合法 必须是4~12位数字、字母、下划线').attr('class', 'error')
92 return false;
93 } else {
94 $('#usernameInput').parent().next().text('用户名可用').attr('class', 'success')
95 return true;
96 }
97 }
98
99
100 //验证邮箱
101 // abcc@12.com sdf-sdf@1243.com sdfasdf@123.com.cn
102 // www.niho.中国
103 function checkEmail() {
104 //获取用户的输入
105 var value = $('#emailInput').val();
106 //验证
107 if (value.search(/^[\w-]+@[\w-]+(\..+){1,3}$/) === -1) {
108 $('#emailInput').parent().next().text('邮箱不合法').attr('class', 'error');
109 return false;
110 } else {
111 $('#emailInput').parent().next().text('邮箱可用').attr('class', 'success');
112 return true;
113 }
114 }
115
116
117 //验证密码 6-18位
118 function checkPwd(){
119 //获取用户输入
120 var value = $('#pwdInput').val();
121 //验证
122 if (value.length < 6 || value.length > 18) {
123 $('#pwdInput').parent().next().text('密码必须是6到18位').attr('class', 'error');
124 return false;
125 } else {
126 $('#pwdInput').parent().next().text('密码可用').attr('class', 'success');
127 return true;
128 }
129 }
130
131
132 //确认密码
133 function checkRepwd() {
134 //获取用户输入和上一次密码
135 var pwd = $('#pwdInput').val();
136 var repwd = $('#repwdInput').val();
137
138 //验证
139 if (pwd !== repwd) {
140 $('#repwdInput').parent().next().text('两次密码不一致').attr('class', 'error');
141 return false;
142 } else {
143 $('#repwdInput').parent().next().text('两次密码一致').attr('class', 'success');
144 return true;
145 }
146 }
147
148 })
149 </script>
150 </body>
151 </html>表单验证
转载于:https://www.cnblogs.com/Roc-Atlantis/p/9494965.html
jQuery事件，对象以及插件相关推荐
- jquery 事件对象属性小结
jquery 事件对象属性小结 使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑 ...
- jQuery事件注册、jQuery事件对象、事件处理
jQuery事件注册 1.单个注册事件 element.事件(function(){函数执行程序}) 例如:鼠标点击div变化背景颜色 $("div").click(functio ...
- jQuery事件对象
都说程序员最不缺的就是对象,今天我们来一探究竟如何 ?? 一.jQuery 事件对象 二.jQuery 拷贝对象 三.jQuery 多库共存 四.今日总结 一.jQuery 事件对象 jQuery 对 ...
- 基于jQuery的对象切换插件：soChange 1.5 (点击下载)
http://www.jsfoot.com/jquery/demo/2011-09-20/192.html 所有参数: $(obj).soChange({ thumbObj:null, //导 ...
- jQuery 事件对象的属性
jQuery 在遵循 W3C 规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. (1) event.type 该方法的作用是可以获取到 ...
- jQuery事件对象event的属性和方法
事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...
- jQuery→事件、jQuery事件对象属性方法、多事件、自定义事件
click() mousedown()mouseup() mousemove() mouseout() hover() focusin() blur()focus() change() select( ...
- wpf checkbox选中触发事件_Web前端开发(16)——JQuery事件绑定与插件
事件绑定 jquery标准的绑定方式 jq对象.事件方法(回调函数); 比如给name绑定点击事件: $("#name").click(function () { alert(&q ...
- jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件 能够说出 on 绑定事件的优势 能够说出 jQuery 事件委派的优点以及方式 能够说出绑定事件与解绑事件 能够说出 jQuery ...
最新文章
- Android App层 单独使用SystemProperties
- 微软程序员利用测试账户套现千万美元，或面临 20 年监禁
- Digital River拉来Netconcepts站台 亚太营销服务升级
- html设置模块宽度为200像素,css 宽度(CSS width)
- SQL中的join总结
- 温州大学c语言作业布置的网站,2016年温州大学物理与电子信息工程学院综合卷之C语言程序设计复试笔试仿真模拟题...
- Android开机优化之调整Launcher的加载时间
- Windows小技巧 -- Win+R提高Windows使用效率
- python的pyaudio教程入门_Python音频操作工具PyAudio上手教程详解
- 顶级域名、一级域名、二级域名、子页面
- 酒精需要存放在防爆柜中吗？
- Windows之cmd命令检查网络
- Python API+Postman+jmeter
- 简易命令行界面的C/S聊天室
- Prometheus 监控案例详解
- 为何现在手机都是type-c接口，这四个优点知道吗？看完你就知道了
- [LOJ]#6515. 「雅礼集训 2018 Day10」贪玩蓝月
- SSD1306-7针脚OLED的使用心得
- 闭关之 C++ Template 笔记（一）：PartⅠ基本概念（一）
- linux开发技术栈
热门文章
- 服装店怎样免费引流？服装店免费又实用的引流技巧
- HTML/HTML5
- 9.8.1 1.打印head标签的内容。2.打印body标签的内容。3.打印id为Hi的标签对象
- 如何区分嵌入式系统和嵌入式操作系统
- 最流行的布局方案 Flex 弹性盒布局详解
- 【C】echo命令的实现
- 中国蚁剑安装使用教程
- 【CheatEngine】关于BCR的内存分析
- 计算机预测自己未来的相貌,AI算法预测未来相貌，准确率高达90%以上
- VScode mkl-service package failed to import, therefore Intel(R) MKL initialization ensuring it