回顾

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. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  2. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  3. 知识笔记：jQuery 事件对象属性小结

    使用事件自然少不了事件对象.因为不同浏览器之间事件对象的获取,以及事件对象的属性都有差异,导致我们很难跨浏览器使用事件对象.jQuery中统一了事件对象,当绑定事件处理函数时,会将jQuery格式化后 ...

  4. jquery 事件对象属性小结

    使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQue ...

  5. 基于jQuery的对象切换插件：soChange 1.5 (点击下载)

    http://www.jsfoot.com/jquery/demo/2011-09-20/192.html 所有参数: $(obj).soChange({     thumbObj:null, //导 ...

  6. jQuery事件对象event的属性和方法

    事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...

  7. jQuery事件对象的属性

    注:摘自<锋利的jQuery(第二版)> JQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. 1. ...

  8. jQuery 事件对象的属性

    jQuery 在遵循 W3C 规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. (1) event.type 该方法的作用是可以获取到 ...

  9. jquery 事件对象笔记

    jQuery元素操作 设置或获取元素固有属性   获取               prop(属性名)    修改               prop(属性名,值) 获取自定义属性          ...

  10. jQuery事件对象

    1.event.currentTarget 事件的监听者2.event.target 事件的目标3.event.delegateTarget 绑定了当前正在调用jQuery事件处理器的(当前事件的委托 ...

随机推荐

  1. 「LuoguP1430」 序列取数（区间dp

    题目描述 给定一个长为n的整数序列(n<=1000),由A和B轮流取数(A先取).每个人可从序列的左端或右端取若干个数(至少一个),但不能两端都取.所有数都被取走后,两人分别统计所取数的和作为各 ...

  2. [HNOI 2010] 弹飞绵羊

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2002 [算法] LCT动态维护森林连通性 时间复杂度 : O(NlogN ^ 2) ...

  3. poj3613Cow Relays——k边最短路(矩阵快速幂)

    题目:http://poj.org/problem?id=3613 题意就是求从起点到终点的一条恰好经过k条边的最短路: floyd+矩阵快速幂,矩阵中的第i行第j列表示从i到j的最短路,矩阵本身代表 ...

  4. storyBoard学习教程二（页面跳转）

    本篇是接着上一篇 storyBoard 学习教程一 的补充,有过storyBoard 编程经验的伙伴还是不要阅读本篇博客了,我自己认为,太基础太简单了,为了方便别人学习使用,我还是详细的做了这篇教程. ...

  5. Flutter实战视频-移动电商-28.列表页_商品列表后台接口调试

    28.列表页_商品列表后台接口调试 主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceU ...

  6. 两种好用的清除浮动的小技巧（clearfix hack）

    方法一:使用内容生成的方式清除浮动 这种方法不能解决margin在垂直边界上的叠加问题,如果不涉及margin的边界叠加问题使用这种方法清除浮动就行了 . /* :after 选择器向选定的元素之后插 ...

  7. 花花的森林（倍增，LCA

    花花的森林,嗯,这是一篇正经的题解. 模拟考的时候没有看出来要怎么求啊,暴力地树形DP.换根.合并.求直径.居然也险险地拿到了80分,不过我们要正经地想正解. 容易想到我们可以让时光倒流,让空间扭转, ...

  8. IDEA 快捷键MacOS

    Alt + Enter 导入包,自动修正 Command + N 查找类 Command + Shift + N查找文件 Command + Alt + L格式化代码 Command + Alt + ...

  9. pwnhub 相对路径覆盖

    这个pwnhub小m师傅的题,做的时候完全没有思路. 首先是注册然后可以看到一个加载css的地方,是相对路径加载(当然我并没有觉得有什么问题). 服务端和浏览器解析URL是有区别的,就是%2f 服务器 ...

  10. Codeforces Round #497 (Div. 2) C. Reorder the Array

    Bryce1010模板 http://codeforces.com/contest/1008/problems #include <bits/stdc++.h> using namespa ...