开发过程中JQuery问题汇总

目录
1. $(’…’).click()和$(document).on(‘click’,’…’,function(){})的区别
2. jQuery 插件_jquery.validate.js
3. jquery 属性选择器

1. $(’…’).click()和$(document).on(‘click’,’…’,function(){})的区别

• .click只能为页面现有的元素绑定点击事件，如果是动态生成的新的元素，是没有事件的
• 而$(document).on(“click”,“指定的元素”,function(){});方法则是将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，那就触发此事件

	$('#login-btn').click(function(){
		console.log(5);
	});
	$(document).on('click','#login-btn',function(event){
		console.log(6);
	});

2.jQuery 插件_jquery.validate.js

中文 API

名称	返回类型	描述
validate(options)	Validator	验证所选的 FORM。
valid()	Boolean	检查是否验证通过。
rules()	Options	返回元素的验证规则。
rules(“add”,rules)	Options	增加验证规则。
……	……	……

Validator

• validate 方法返回一个 Validator 对象。Validator 对象有很多方法可以用来引发校验程序或者改变 form
  的内容，下面列出几个常用的方法。

名称	返回类型	描述
form()	Boolean	验证 form 返回成功还是失败。
element(element)	Boolean	验证单个元素是成功还是失败。
resetForm()	undefined	把前面验证的 FORM 恢复到验证前原来的状态。
showErrors(errors)	undefined	ruletttt 显示特定的错误信息。
Validator 函数
setDefaults(defaults)	undefined	改变默认的设置。

      插件下载地址：http://www.softwhy.com/demo/jQuery/js/jquery.validate.js
      菜鸟教程 http://www.runoob.com/jquery/jquery-plugin-validate.html
      详细解读 https://www.cnblogs.com/linjiqin/p/3431835.html
                      https://blog.youkuaiyun.com/wangxiaoan1234/article/details/77466720
                      https://so.youkuaiyun.com/so/search/s.do?p=1&q=jquery validate&t=blog&domain=&u=wangwjtt&o=&s=&l=&f=false&rbg=1

栗子

		<form action="#" class="loginform" id="loginform" loginform>
			用户名<input type="text" name="username"/><br>
			密码<input type="text" name="password"/><br>
			<button login-btn>登录</button>
			<p error-place></p>
		</form>

$(function(){
	$(document).on('click','[login-btn]',function(event){
		var form = $('[loginform]');
		if(!form.valid()){
			console.log('表单校验不通过');
			return false;
		}
		console.log('表单校验通过');
	});
});

$(function(){
	$('[loginform]').validate({
		rules: {
			// name属性:{校验器:值,校验器:值}
			username: {
				required:true,// required在此含义是必填
			},
			// name属性:"校验器"
			password: {
				required:true,
				minlength: 8
			}
		},
		messages: {
			username:{
				required:'用户名必填',
			},
			password:{
				required:'密码必填',
				minlength: jQuery.validator.format("用户名至少需填写{0}个字符")
			}
		},
		//设置提示文字位置
		errorPlacement:function(error,element){
			error.appendTo($('[error-place]'));
		}
	});
});

3. jquery 属性选择器

• 通过标签的属性找到组件

<button login-btn>登录</button>

$(document).on('click','[login-btn]',function(event){

});