回顾

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事件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>jquery事件</title>

 </head>

 <body>

     <h1>jquery事件</h1>

     <hr>

     <button id="btn">按钮</button>

     <button id="btn2">解除绑定</button>

     <hr>

     <button id="btn3">下载</button>

     <br>

     <a href="1.html" id="a1">超链接</a>

     <hr>

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

     <script src="../jquery-3.3.1.js"></script>

     <script>

         $(function(){

             $('#btn').on('click',function(){

                 alert('啊，你点我了')

             });

             //btn2对应的元素绑定单击事件，当btn2元素对应的按钮按下

             //会触发btn对应元素对象解除事件绑定。

             $('#btn2').on('click', function(){

                 $('#btn').off();

             });

             //一次单击事件

             $('#btn3').one('click', function(){

                 alert('哈哈哈');

             });

             $('#a1').on('click', function(){

                 alert('啊，我是超链接');

                 //阻止事件冒泡 和 默认动作

                 //不加return false会默认跳到一个新的页面

                 return false;

             });

             //手动 代码触发 事件 $('#btn').trigger('click')

             //$('#btn').click()

             /*$('#btn').trigger('click')

             $('#btn').trigger('click')

             $('#btn').trigger('click')*/

             //鼠标移动和离开都会触发

             $('p').hover(function(){

                 console.log('OK');

             })

         })

     </script>

 </body>

 </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事件对象

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>jquery事件对象</title>

     <style>

         #box {

             width:300px;

             height:200px;

             border:2px solid #ccc;

             margin:100px auto;

         }

     </style>

 </head>

 <body>

     <h1>事件对象</h1>

     <hr>

     <div id="box"></div>

     <script src="../jquery-3.3.1.js"></script>

     <script>

         $(function(){

             //en只是个形参，可以随意设置，用来接收参数

             //鼠标单击显示鼠标左键的值和鼠标的位置

             $('#box').on('click', function(en) {

                 //鼠标的位置

                 console.log(en.clientX, en.clientY);

                 console.log(en.pageX, en.pageY);

                 //鼠标在本元素上的位置

                 console.log(en.offsetX, en.offsetY);

             });

             //按键的值

             $(document).on('keyup', function(en) {

                 console.log(en.which)

             });

             //鼠标键的值

             $('#box').on('mousedown', function(en) {

                 console.log(en.which)

             })

         })

     </script>

 </body>

 </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])

自定义动画

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         #box {

             overflow: hidden;

             width:400px;

             height:200px;

             border:2px solid #ccc;

             padding:20px;

         }

     </style>

 </head>

 <body>

     <h1>自定义动画</h1>

     <hr>

     <button id="btn">隐藏</button>

     <button id="btn1">显示</button>

     <button id="btn2">切换</button>

     <hr>

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

     <script src="../jquery-3.3.1.js"></script>

     <script>

         $(function(){

             $('#btn').click(function(){

                 $('#box').animate({

                     'width':'0px',

                     'padding-left':'0px',

                     'padding-right':'0px'

                 }, 2000, function(){

                     $(this).hide();

                 })

             });

             $('#btn1').click(function(){

                 $('#box').show().animate({

                     'width':'400px',

                     'padding-left':'20px',

                     'padding-right':'20px'

                 }, 2000)

             });

             $('#btn2').click(function(){

                 $('#box').animate({

                     'width':'toggle',

                     'padding-left':'toggle',

                     'padding-right':'toggle'

                 }, 2000)

             })

         })

     </script>

 </body>

 </html>

自定义动画

2.5 动画控制

delay()  延迟
finish() 瞬间完成动画
stop()   停止动画

滚动动画

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>滚动</title>

     <style>

         #box {

             width:800px;

             height:200px;

             border:2px solid orange;

             overflow: hidden;

             transition: .5s;

         }

         .wrapper {

             width:2200px;

         }

         #box p {

             margin:0;

             width:198px;

             height:198px;

             float:left;

             border:1px solid #ccc;

             background: #369;

             color:#fff;

         }

     </style>

 </head>

 <body>

     <div id="box">

         <div class="wrapper">

             <p>lorem1</p>

             <p>lorem2</p>

             <p>lorem3</p>

             <p>lorem4</p>

             <p>lorem5</p>

             <p>lorem6</p>

             <p>lorem7</p>

             <p>lorem8</p>

             <p>lorem9</p>

             <p>lorem10</p>

             <p>lorem11</p>

         </div>

     </div>

     <br>

     <button id="left_btn"> < </button>

     <button id="right_btn"> > </button>

     <script src="../jquery-3.3.1.js"></script>

     <script>

         $(function(){

             $('#left_btn').on('click', function(){

                 //console.log($('#box').scrollLeft())

                 //$('#box').scrollLeft(800);//是把 scrollLeft 设置为800

                 //$('#box').scrollLeft($('#box').scrollLeft() - 800);

                 $('#box').animate({

                     'scrollLeft':$('#box').scrollLeft() - 800

                 }, 500)

             });

             $('#right_btn').on('click', function(){

                 //$('#box').scrollLeft($('#box').scrollLeft() + 800 )

                 $('#box').animate({

                     'scrollLeft':$('#box').scrollLeft() + 800

                 }, 500)

             })

         })

     </script>

 </body>

 </html>

滚动动画

动画控制

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         #box {

             overflow: hidden;

             width:400px;

             height:200px;

             border:2px solid #ccc;

             padding:20px;

         }

     </style>

 </head>

 <body>

     <h1>动画控制</h1>

     <hr>

     <button id="btn">隐藏</button>

     <button id="btn1">显示</button>

     <button id="btn2">切换</button>

     <br>

     <button id="btn3">动画</button>

     <button id="btn4">finish</button>

     <button id="btn5">stop</button>

     <hr>

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

     <script src="../jquery-3.3.1.js"></script>

     <script>

         $(function(){

             $('#btn4').on('click', function() {

                 $('#box').finish();

             })

             $('#btn5').on('click', function() {

                 $('#box').stop();

             })

             $('#btn3').on('click', function(){

                 //如果 box元素 正在执行  return false

                 if ($('#box').is(':animated')) {

                     return false;

                 }

                 //动画队列 delay

                 $('#box').slideUp(3000).delay(2000).show(2000).fadeOut(2000).slideDown(3000)

             })

             $('#btn').click(function(){

                 $('#box').animate({

                     'width':'0px',

                     'padding-left':'0px',

                     'padding-right':'0px'

                 }, 2000, function(){

                     $(this).hide();

                 })

             });

             $('#btn1').click(function(){

                 $('#box').show().animate({

                     'width':'400px',

                     'padding-left':'20px',

                     'padding-right':'20px'

                 }, 2000)

             });

             $('#btn2').click(function(){

                 $('#box').animate({

                     'width':'toggle',

                     'padding-left':'toggle',

                     'padding-right':'toggle'

                 }, 5000)

             })

         })

     </script>

 </body>

 </html>

动画控制


is(':animated') 判断是否在执行动画  返回boolean

jQuery动画

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         #box {

             width: 400px;

             height: 300px;

             padding: 20px;

             border: 2px solid #999;

         }

     </style>

 </head>

 <body>

     <h1>动画效果</h1>

     <hr>

     <button id="hide_btn">隐藏</button>

     <button id="show_btn">显示</button>

     <button id="toggle_btn">切换</button>

     <br>

     <button id="slideDownBtn">slideDown显示</button>

     <button id="slideUpBtn">slideUp隐藏</button>

     <button id="slideToggleBtn">slideToggle切换</button>

     <br>

     <button id="fadeOutBtn">淡出</button>

     <button id="fadeInBtn">淡入</button>

     <button id="fadeToggleBtn">切换</button>

     <button id="fadeToBtn">fadeTo</button>

     <br>

     <br>

     <br>

     <div id="box">

         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.

     </div>

     <script src="../jquery-3.3.1.js"></script>

     <script>

         $(function(){

             //淡入淡出效果

             $('#fadeOutBtn').on('click', function(){

                 //$('#box').fadeOut()

                 $('#box').fadeOut(2000)

             })

             $('#fadeInBtn').on('click', function(){

                 //$('#box').fadeOut()

                 $('#box').fadeIn(5000)

             })

             $('#fadeToggleBtn').on('click', function(){

                 //$('#box').fadeOut()

                 $('#box').fadeToggle(2000)

             });

             $('#fadeToBtn').on('click', function(){

                 /*$('#box').fadeTo(3000, .5, function(){

                     console.log('fadeTo')

                 })*/

                 //alert('ok')

                 $('#box').fadeTo(1000, .5)

             })

             //滑动效果

             $('#slideUpBtn').on('click', function(){

                 //$("#box").slideUp();

                 //$("#box").slideUp('slow');

                 //$("#box").slideUp(3000);

                 $("#box").slideUp(3000, function(){

                 });

             });

             $('#slideDownBtn').on('click', function(){

                 $('#box').slideDown(5000)

             })

             //基本效果

             $('#hide_btn').click(function(){

                 //$('#box').hide();

                 //$('#box').hide('fast');

                 //$('#box').hide('normal');

                 //$('#box').hide('slow');

                 //$('#box').hide(5000);

                 $('#box').hide(2000, function(){

                     console.log('啊，我隐藏了');

                 });

             });

             $('#show_btn').click(function(){

                 $('#box').show(3000)

             });

             $('#toggle_btn').click(function(){

                 $('#box').toggle(3000, function(){

                     console.log('toggle');

                 })

             })

         })

     </script>

 </body>

 </html>

jQuery动画

实例：新闻滚动播放

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>滚动播放</title>

     <style>

         body {

             background:#ccc;

         }

         #box {

             margin:100px auto;

             width: 1000px;

             height: 460px;

             background:#ccc;

             overflow: hidden;

         }

         ul {

             list-style:none;

             padding:0;

             margin:0;

         }

         p {

             margin:0;

         }

         #box li {

             height:100px;

             margin-bottom:20px;

             background: #fff

         }

         #box li img{

             float:left;

             width:100px;

             height: 100px;

         }

         #box li p {

             float:right;

             width:850px;

             line-height: 100px;

             height:100px;

         }

     </style>

 </head>

 <body>

     <div id="box">

         <ul id="newsList">

             <li>

                 <img src="../../dist/images_one/meinv02.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/1.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/2.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/3.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/4.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/11.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/10.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/9.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/8.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

         </ul>

     </div>

     <script src="../jquery-3.3.1.js"></script>

     <script>

         $(function(){

             setInterval(function(){

                 $('#box li').last().hide().prependTo('#newsList').slideDown();

             }, 2000)

         })

     </script>

 </body>

 </html>

新闻滚动播放（动画效果不明显）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>滚动播放</title>

     <style>

         body {

             background:#ccc;

         }

         #box {

             margin:100px auto;

             width: 1000px;

             height: 460px;

             background:#ccc;

             overflow: hidden;

         }

         ul {

             list-style:none;

             padding:0;

             margin:0;

         }

         p {

             margin:0;

         }

         #box li {

             height:100px;

             margin-bottom:20px;

             background: #fff

         }

         #box li img{

             float:left;

             width:100px;

             height: 100px;

         }

         #box li p {

             float:right;

             width:850px;

             line-height: 100px;

             height:100px;

         }

     </style>

 </head>

 <body>

     <div id="box">

         <ul id="newsList">

             <li>

                 <img src="../../dist/images_one/meinv02.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/1.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/2.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/3.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/4.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/11.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/10.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/9.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

             <li>

                 <img src="../../dist/images_one/8.jpg" alt="">

                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>

             </li>

         </ul>

     </div>

     <script src="../jquery-3.3.1.js"></script>

     <script>

         $(function(){

             setInterval(function(){

                 $('#box li').eq(3).fadeTo(500, 0, function(){

                     $('#box li').last().fadeTo(0,1).hide().prependTo('#newsList').slideDown();

                 })

             }, 2000)

         })

     </script>

 </body>

 </html>

新闻滚动播放

2.6 jQuery 插件

jQuery datetimepicker插件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>jquery插件</title>

     <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

     <link rel="stylesheet" href="../jquery.datetimepicker.css">

     <style>

         select {

             width:200px;

         }

     </style>

 </head>

 <body>

     <h1>jquery插件</h1>

     <hr>

     <label for="#">请选择您的籍贯</label>

     <select name="" id="jiguan">

         <option value="1">上海</option>

         <option value="1">北京</option>

         <option value="1">新疆</option>

         <option value="1">台湾</option>

         <option value="1">香港</option>

         <option value="1">澳门</option>

         <option value="1">西藏</option>

         <option value="1">火星</option>

         <option value="1">云南</option>

         <option value="1">福建</option>

         <option value="1">辽宁</option>

         <option value="1">吉林</option>

         <option value="1">黑龙江</option>

         <option value="1">黑龙江</option>

     </select>

     <hr>

     <label for="birthDay">请输入您的生日：</label>

     <input type="text" id="birthDay">

     <script src="../jquery.js"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

     <script src="../jquery.datetimepicker.full.js"></script>

     <script>

         $(function(){

             $('#jiguan').select2();

             //时间日期插件

             $.datetimepicker.setLocale('zh');

             $('#birthDay').datetimepicker({

                  format:"Y-m-d H:i"

             });

         })

     </script>

 </body>

 </html>

jQuery datetimepicker插件

jQuery全屏滚动插件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>全屏滚动</title>

     <link href="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.css" rel="stylesheet">

     <style>

         .slide {

             color: #fff;

             font-size:100px;

             text-align: center;

         }

     </style>

 </head>

 <body>

     <!--HTML部分-->

     <div id="fullpage">

         <div class="section">

             <h2>Page1</h2>

         </div>

         <div class="section">

             <div class="slide">A</div>

             <div class="slide">B</div>

             <div class="slide">C</div>

         </div>

         <div class="section">

             <h2>Page3</h2>

         </div>

         <div class="section">

             <h2>Page4</h2>

         </div>

     </div>

     <script src="../jquery-3.3.1.js"></script>

     <script src="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.js"></script>

     <script>

         $('#fullpage').fullpage({

              navigation: true,

              sectionsColor: ['red', 'green','purple', 'orange']

         });

     </script>

 </body>

 </html>

jQuery全屏滚动插件

表单验证实例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>表单验证</title>

     <style>

         input {

             width: 300px;

             border:1px solid #ccc;

             padding:10px;

             font-size:16px;

         }

         button {

             width: 322px;

             border:1px solid #ccc;

             background:#f5f5f5;

             line-height: 40px;

             cursor: pointer;

             font-size:16px;

         }

         td.success {

             color:green;

         }

         td.error {

             color:red;

         }

     </style>

 </head>

 <body>

     <h1>注册</h1>

     <hr>

     <form action="user.php" id="myForm">

         <table>

             <tr>

                 <td>用户名：</td>

                 <td><input type="text" name="username" id="usernameInput"></td>

                 <td></td>

             </tr>

             <tr>

                 <td>邮箱：</td>

                 <td><input type="text" name="email" id="emailInput"></td>

                 <td></td>

             </tr>

             <tr>

                 <td>密码：</td>

                 <td><input type="password" name="pwd" id="pwdInput"></td>

                 <td></td>

             </tr>

             <tr>

                 <td>确认密码：</td>

                 <td><input type="password" name="repwd" id="repwdInput"></td>

                 <td></td>

             </tr>

             <tr>

                 <td></td>

                 <td>

                     <button>注 册</button>

                 </td>

                 <td></td>

             </tr>

         </table>

     </form>

     <script src="../jquery-3.3.1.js"></script>

     <script>

         //表单验证

         $(function(){

             //用户名验证事件

             $('#usernameInput').on('blur', checkUsername);

             //邮箱验证事件

             $('#emailInput').on('blur', checkEmail);

             //密码验证事件

             $('#pwdInput').on('blur', checkPwd);

             //确认密码 验证

             $('#repwdInput').on('blur', checkRepwd);

             //表单提交事件

             $('#myForm').on('submit', function(){

                 return checkUsername() && checkEmail() && checkPwd() && checkRepwd();

             });

             //验证 用户名

             function checkUsername(){

                 //获取 用户输入的内容

                 var value = $('#usernameInput').val();

                 //验证 用户输入是否合法  4~12位 数字/字母/下划线

                 if (value.search(/^\w{4,12}$/) === -1) {

                     $('#usernameInput').parent().next().text('用户名不合法 必须是4~12位数字、字母、下划线').attr('class', 'error')

                     return false;

                 } else {

                     $('#usernameInput').parent().next().text('用户名可用').attr('class', 'success')

                     return true;

                 }

             }

             //验证邮箱

             // abcc@12.com  sdf-sdf@1243.com   sdfasdf@123.com.cn

             // www.niho.中国

             function checkEmail() {

                 //获取用户的输入

                 var value = $('#emailInput').val();

                 //验证

                 if (value.search(/^[\w-]+@[\w-]+(\..+){1,3}$/) === -1) {

                     $('#emailInput').parent().next().text('邮箱不合法').attr('class', 'error');

                     return false;

                 } else {

                     $('#emailInput').parent().next().text('邮箱可用').attr('class', 'success');

                     return true;

                 }

             }

             //验证密码  6-18位

             function checkPwd(){

                 //获取用户输入

                 var value = $('#pwdInput').val();

                 //验证

                 if (value.length < 6 || value.length > 18) {

                     $('#pwdInput').parent().next().text('密码必须是6到18位').attr('class', 'error');

                     return false;

                 } else {

                     $('#pwdInput').parent().next().text('密码可用').attr('class', 'success');

                     return true;

                 }

             }

             //确认密码

             function checkRepwd() {

                 //获取用户输入和上一次密码

                 var pwd = $('#pwdInput').val();

                 var repwd = $('#repwdInput').val();

                 //验证

                 if (pwd !== repwd) {

                     $('#repwdInput').parent().next().text('两次密码不一致').attr('class', 'error');

                     return false;

                 } else {

                     $('#repwdInput').parent().next().text('两次密码一致').attr('class', 'success');

                     return true;

                 }

             }

         })

     </script>

 </body>

 </html>

表单验证

巴特西

jQuery事件，对象以及插件

回顾

1 基本使用

2 jquery 选择器

3 筛选器

过滤

查找

串联

4 DOM 操作

内部插入

外部插入

包裹

替换

删除

克隆

5 属性

6 样式

笔记

1 jQuery 事件

1.1 事件的绑定和解除绑定

1.2 代码触发事件动作

1.3 委派

1.4 特殊事件

1.5 事件列表

1.6 事件对象

2 jQuery 动画

2.1 基本效果

2.2 滑动效果

2.3 淡入淡出

2.4 自定义动画

2.5 动画控制

2.6 jQuery 插件

最新文章

热门文章