事件

事件绑定在JQuery对象上，所以可以一次绑定多个DOM元素，正如前文所述ready()：保证所有DOM元素加载完毕。

JQuery推荐的是使用on()和off()，绑定和解除绑定（对标add/removeEventListener）：

$('h1').on('click', function(){

JQuery的off()方法，可以只传一个参数：事件类型，就接触元素上所有该类型事件绑定：

$('h1').off('click');

但飞哥更喜欢其简写方法：click()/ change()/keypress()……（没有on的前缀）：

$('a').click(function(event){

1. 使用事件的冒泡机制，不支持事件捕获
2. event正常使用

   event.preventDefault();

3. $(this)更好用

   $(this).hide();

事件仍然可以模拟触发：click()/select()……

复习：JQuery起手式，#理解#它的含义，当document准备（ready）好了……

PS：其他简写：$().ready() / $()……

$().ready(function () {    //省略document
$(function () {    //省略ready

one()

有时候我们希望事件仅触发一次，传统的做法是在事件触发后diable按钮之类的，

但JQuery为我们提供了一个更优雅的实现：

$('h1').one('click', function(){

链式书写 

比如有时候我们需要对一个JQuery对象进行一系列的操作，设置样式、绑定事件等，可以：

$('p')
    .css('font-weight', '800')
    .width('200px')
    .mouseover(function () { $(this).addClass('red'); })
    .mouseout(function () { $(this).removeClass('red'); }
    );

注意：

• JQuery并没有创建一种“新”的语法
• 能够链式的原因仅仅是这些JQuery方法返回的依然是一个JQuery对象而已

  let $p = $('p');
  $p === $p.width(500)    //true

• 如果JQuery方法返回的是其他JQuery对象（比如parent()），后面的JQuery方法将作用于新的JQuery对象。

  $p === $p.parent()    //false

表单

引入form表单

选择器

JQuery为form表单元素提供了一些简写方式：

• input type='*'的

  $('input[type="text"]') //简写为：
  $(':text')

  以及：

  $(':submit')   //提交按钮
  $(':radio')    //radio button

• 被选中的：

  $(':radio:checked')
  $('select>option:checked').text()

• 被禁用的：

  $(':disabled')

常用属性/方法

val()

取值/赋值

• 文本：text 和 textarea

  $(':text').val()
  $('textarea').eq(0).val()

• 选择：check 和 radio

  $(':radio').val()    //第一个（不是）选中的radio的value
  $(':checkbox:checked').val()   //被选中的checkbox的value

• 下拉列表：select，选中项的value

  $('select').val()

is()

传递不同的参数，判断是否被：

• 是否同一个jquery对象。比如判断两个元素是否为“兄弟”节点，可以比较他们的父节点：

  //但是，不能用==，
  $('#a').parent()==$('#b').parent()
  //而是用is：
  $('#a').parent().is($('#b').parent())

• 选中：':checked'

  $(':radio').eq(1).is(":checked")

• 禁用：":disabled"

  $(':submit').is(":disabled")
  

attr()和prop()

复习：DOM的“属性”可以用两种方式读写

• attr()：对应的是setAttribute()和getAttribute()
• prop()：对应的是能“.”出来的对象属性

在浏览器将HTML解析成DOM树的过程中，通常（但又不是全部）都会将其attribute封装成property

JQuery中，对form表单设置选中/禁用/只读等时，建议总是使用prop()：

$(':text').attr('disabled', true)     //生效
$(':text').prop('disabled', false)    //生效

$(':radio').eq(1).prop('checked', true)     //生效
$(':radio').eq(0).attr('checked', true)      //不能生效！

表单验证

form表单中JavaScript参与最多的一个功能就像验证，比如：

• 某个文本框不能为空（必须填写）
• 填写的内容必须是email格式
• 甚至两个文本框中输入的内容必须相同，等等

演示：注册页面的验证

注意：前端没有“安全性”可言，服务器端必须再次独立验证！

后端永远不要相信前端。

@想一想@：那为什么还需要前端验证呢？

• 性能优化：不需要“浪费”一次向服务器端的请求
• 更快的响应速度：JavaScript直接在页面执行
• 更好的用户体验：没有页面刷新的闪烁

jquery.validate.js

jquery.validate.js（以下简称validate）是最流行的、基于jquery的客户端验证类库/插件（后文详述）。

PS：ASP.NET项目内置，直接引入，其他复制粘贴或npm

注意顺序，validate必须啊jquery.js后面。

演示：一个最简单的验证效果

• 提交激活
• 阻止了请求提交
• 之后随输入自动变化

验证的实现由

三个部分

组成：

• method：即具体的验证逻辑，validate内置了一些常用的mehtods：
  
  
• message：当验证未能通过时，为用户显示的消息，validate为其methods内置了messages：
  
  
• rule：将method和message作用于某个具体的element（form表单元素），有时候rule name和method name可以混用

validate提供了两种方法设定rule。

这其实就是开发人员需要做的：

声明在HTML标签

在表单元素的html标签上添加属性：

• required指明该input必须有值

  <input type="text" name="username" required />

• minlength指明该input输入值长度最小为4

  <input type="password" name="password" required minlength="4" />

• number为true。注意：这里的true不能省略，建议require的true值也不要省略（省略是为了配合HTML5新语法规则）

  <input type="text" name="username" number="true" required max="100" min="0"  />

• 两个表单值相等，属性值是JQuery选择器：

  密码：<input type="password" name="password" id="password" />
  确认密码：<input type="password" equalTo="#password" />

• ……

validate生效，需要被激活：（演示效果）

$('form').validate();

声明在validate()方法

validate()方法还可以接受一个options参数（对象），其中就可以设定rule：

$('form').validate({
    rules: {
        username: {
            required: true
        }
    }
});

其中，username是被验证element的name，required是validate内置的method名。上述代码还可以简写为：

rules: {
    username: "required"
}

另外，rules中还可以设定多个rule，每个rule中也可以设定多个method，比如：

rules: {
    username: "required",
    password: {
        required: true,
        minlength: 4    //4被认为是参数param
    }
}

且validate()方法中的设置优先级更高。演示：require:false……

自定义message

validate()中的option还可以包含：

• messages：验证失败消息
• errorClass：message的样式

$('form').validate({
    rules: {/*同上*/},
    messages: {
        password: {
            required: "* 不能为空",
            minlength: "* 不能少于4个字符"
        }
    },
    errorClass: "red"
});

另外，可以全局性的将默认的英文message转化成中文。利用JQuery的插件（extend）机制：

$.extend(
    $.validator.messages, { 
        required: "必选字段",
        email: "请输入正确格式的电子邮件",
        minlength: "长度……"
    }
)

推荐做法，将此文件放入messages_cn.js中，在页面中（jquery.validation.js之后）引入：

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

选择性验证

我们经常会有这样的需求：某个表单元素在某种特定条件下才需要验证。比如，学习计划，在用户选择了“学习课程”之后才必填。

<select name="courses">
    <option value="">-----</option>
    <option value="front">前端</option>

有以下两种方案：

1. 利用JQuery不校验disabled/readonly/hide的元素，只有当用户选择了“学习课程”之后才enable“学习计划”

   $('select').change(function(){
       $('textarea').prop('disabled', $(this).val() == "");
   })

2. 利用回调函数：

   rules: {
       'study-plan': {
           required: function(element){
               console.log(element); //element：当前元素
               return $('select').val() != '';
           }

另，要验证隐藏的元素（不ignore）：

$('form').data("validator").settings.ignore = "";

rules()

有时候还需要我们动态的添加/删除一些rule，这就需要调用rules()方法：

• 如果不带参数，返回该元素的所有rules

  console.log($('#userName').rules());

• 第一个参数'add'，第二个参数被添加的rule，可以是字符串，

  $('#userName').rules('add', "required")

  也可以是object

  $('#userName').rules('add', {
      required: true,
      minlength: 4,
      messages:{
          minlength: '* 至少4个字符'

• 第一参数'remove'，第二个参数
  1. 缺省：删除所有的rule

     $('#userName').rules('remove');

  2. 指定某一个或多个（用空格分开的）rule名字，删除该rule

     $('#userName').rules('remove', 'required');
     $('#userName').rules('remove', 'min max');

  注意删除的不能是通过属性声明的rule，要禁用这种rule，可以：

  $('#userName').removeAttr('required');

另外，以上操作都要在$('form').validate()之后才能有效。

自定义method

validation类库自带的验证不够用了，比如：输入的值不能比另一个元素中定义的值大（演示：悬赏帮帮币）

就可以使用$.validator.addMethod(name,method,message)添加自定义的验证方法：

• name：method的名字，不能重复
• message：自定义的错误提示
  

其中，参数method是一个回调函数，又可以包含三个参数：

• value：用户输入/选择的值
• element：被验证的element（JQuery）对象
• param：比如上文minlength对应的4

<input type="text" lessThan="#threshold"  /></label>（最高<span id="threshold">20000</span>

$.validator.addMethod('lessThan',
    function (value, element, param) {
        return +value < parseInt($(param).text()); 
    },
    '* 不能够大于预定值');

remote验证

PS：可以在学习下一章JQuery Ajax之后再继续学习。

演示：用户名不能重复

背后其实是通过Ajax远程（remote）获取验证结果，这就需要使用remote：

rules: {
    username: {
        required: true,
        remote: {
            url: "/hasName.json",  //Ajax请求发送地址
            type: "get",    //因为演示只能使用GET  
            data: {                     
                username: function () {
                    //要传递的数据
                    return $("#username").val();

演示：/hasName.json应返回true/false，表示验证通过/未通过。

注意：默认每一次我们按键，都会触发Ajax请求，如果我们（因为性能原因）不想这样的话，可以设置：

rules: {
    //......
},
onkeyup: false,

源栈学历

在当前系列 Bootstrap和JQuery 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：