jQuery事件，对象以及插件

回顾

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 样式

# css
css()
​
# 位置
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>
表单验证

 

 

 

 

 

 

posted @ 2018-08-17 19:15  Roc_Atlantis  阅读(254)  评论(0)  编辑  收藏  举报