一 jQuery是什么？
［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
二 什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法:
jquery对象和DOM对象
1、jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。
var $cr = $("#cr"); //jQuery对象var cr = $cr[0] //DOM对象alert(cr.checked) //检测这个checkbox是否选中了 2、通过get(index)方法得到相应的DOM对象。
var $cr = $("#cr");var cr = $cr.get(0);alert(cr.checked); 对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了，方式为$(DOM对象)。
var cr = document.getElementByID("cr"); //DOM对象var $cr = $(cr); Title 好好学习天天向上
三 选择器和筛选器
1.基本选择器：
- ID选择器 $("#id的值")- 类选择器（class） $(".class的值")- 标签选择器(html标签) $("标签的名字")- 所有标签 $("*")- 组合选择器 $("xx,xxx") 2.层级选择器
- 从一个标签的子子孙孙去找 $("父亲 子子孙孙") - 从一个标签的儿子里面找 $("父亲>儿子标签") - 找紧挨着的标签 $("标签+下面紧挨着的那个标签") - 找后面所有同级的 $("标签~寻找同级的标签名") $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div") 3基本筛选器
:first $("p:first") 第一个 元素:last $("p:last") 最后一个
元素:even $("tr:even") 所有偶数 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。:odd $("tr:odd") 所有奇数 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 值从 0 开始）:gt(no) $("ul li:gt(3)") 列举 index 大于 3 的元素:lt(no) $("ul li:lt(3)") 列举 index 小于 3 的元素:not(selector) $("input:not(:empty)") 所有不为空的输入元素 :header $(":header") 所有标题元素 ,
...:animated $(":animated") 所有动画元素:focus $(":focus") 当前具有焦点的元素
4内容筛选器
:contains(text) $(":contains('Hello')") 所有包含文本 "Hello" 的元素:has(selector) $("div:has(p)") 所有包含有 元素在其内的
元素:empty $(":empty") 所有空元素:parent $(":parent") 匹配含有子元素或者文本的元素 5 可见性
:hidden $("p:hidden") 所有隐藏的 元素:visible $("table:visible") 所有可见的表格
6属性
[attribute] $("[href]") 所有带有 href 属性的元素[attribute=value] $("[href='default.htm']") 所有带有 href 属性且值等于 "default.htm" 的元素[attribute!=value] $("[href!='default.htm']") 所有带有 href 属性且值不等于 "default.htm" 的元素[attribute$=value] $("[href$='.jpg']") 所有带有 href 属性且值以 ".jpg" 结尾的元素[attribute|=value] $("[title|='Tomorrow']") 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串[attribute^=value] $("[title^='Tom']") 所有带有 title 属性且值以 "Tom" 开头的元素[attribute~=value] $("[title~='hello']") 所有带有 title 属性且值包含单词 "hello" 的元素[attribute*=value] $("[title*='hello']") 所有带有 title 属性且值包含字符串 "hello" 的元素[name=value][name2=value2] $( "input[id][name$='man']" ) 带有 id 属性，并且 name 属性以 man 结尾的输入框 7 表单
:input $(":input") 所有 input 元素:text $(":text") 所有带有 type="text" 的 input 元素:password $(":password") 所有带有 type="password" 的 input 元素:radio $(":radio") 所有带有 type="radio" 的 input 元素:checkbox $(":checkbox") 所有带有 type="checkbox" 的 input 元素:submit $(":submit") 所有带有 type="submit" 的 input 元素:reset $(":reset") 所有带有 type="reset" 的 input 元素:button $(":button") 所有带有 type="button" 的 input 元素:image $(":image") 所有带有 type="image" 的 input 元素:file $(":file") 所有带有 type="file" 的 input 元素 8表单对象属性
:enabled $(":enabled") 所有启用的元素:disabled $(":disabled") 所有禁用的元素:selected $(":selected") 所有选定的下拉列表元素:checked $(":checked") 所有选中的复选框选项 jQuery的动画效果
show
概念:显示隐藏的匹配元素 语法：show(speed,callback) 参数：
- speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
- callback:在动画完成时执行的函数，每个元素执行一次
hide
hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。
可以通过show（）和hide（）方法，来动态控制元素的显示隐藏
toggle
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
slideDown
概念：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数
用法和参数跟上面类似
slideUp
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
用法和参数跟上面类似
slideToggle
概念:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
跟toggle用法类似
fadeIn
概念：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化
fadeOut
概念：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo
概念：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeToggle
概念：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
实现淡入淡出的效果就是使用此方法
animate
概念：用于创建自定义动画的函数
语法：animate(params,[speed],[fn])
参数：
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
stop
概念：停止所有在指定元素上正在运行的动画
语法：stop([clearQueue],[jumpToEnd])
参数：
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等
delay
概念：用来做延迟的操作
语法：delay(1000)，一秒之后做后面的操作
四 筛选
4.1 过滤
eq() 返回带有被选元素的指定索引号的元素first() 返回被选元素的第一个元素last() 返回被选元素的最后一个元素has() 返回拥有一个或多个元素在其内的所有元素hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true。 slice() 把匹配元素集合缩减为指定范围的子集 not() 从匹配元素的集合中删除与指定表达式匹配的元素
4.2 查find() 返回被选元素的后代元素
children() 返回被选元素的所有直接子元素closest() 返回被选元素的第一个祖先元素contents() 返回被选元素的所有直接子元素（包含文本和注释节点）next() 返回被选元素的后一个同级元素
nextAll() 返回被选元素之后的所有同级元素nextUntil() 返回介于两个给定参数之间的每个元素之后的所有同级元素parent() 返回被选元素的直接父元素parents() 返回被选元素的所有祖先元素parentsUntil() 返回介于两个给定参数之间的所有祖先元素prev() 返回被选元素的前一个同级元素prevAll() 返回被选元素之前的所有同级元素prevUntil() 返回介于两个给定参数之间的每个元素之前的所有同级元素slibings() 返回被选元素的所有同级元素
五 属性操作
5.1 属性
1.attr( name | pro | key,val |fn )读取或修改元素的属性值（行内）。
参数：
1.name：属性的名称。（用于读取值）2.properties：作为属性的名称的对象。（用于修改多个属性）3.key，value：属性名和属性值.(用于修改多个属性）4.fn：回调函数。function（index，attr）{}。index为元素队列中的索引值，attr为元素原来的属性值。
$("img").attr("src");$("img").attr({ src: "test.jpg", alt: "Test Image" });$("img").attr("src","test.jpg");$("img").attr("title", function() { return this.src }); 2.removeAttr( name )
移除属性。
参数：name。属性名称。
1 $("img").removeAttr("src"); 3.prop（n | p | k，v | f ）
读取或修改属性。该方法与attr方法类似，但该方法针对布尔类型的属性。
$("input[type='checkbox']").prop("checked");$("input[type='checkbox']").prop({ disabled: true});$("input[type='checkbox']").prop("checked", function( i, val ) { return !val;}); 4.removeProp（name）
移除属性。该方法所移除的属性不推荐默认属性。
1 var $para = $("p");2 $para.prop("luggageCode", 1234);3 $para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");4 $para.removeProp("luggageCode");5 $para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
点击图片加载 Title
Title
全选取消反选
# First Name Last Name Username Mark Otto @mdo Jacob Thornton @fat Larry the Bird
5.2 css 类
addClass(class) — 为每个匹配的元素添加指定的类名。
参数 : class — 一个或多个要添加到元素中的CSS类名，请用空格分开(String)示例 一 :为匹配的元素加上 'selected' 类HTML 代码:<p>Hello</p>jQuery 代码:$("p").addClass("selected");结果:[ <p class="selected">Hello</p> ]示例 二 :为匹配的元素加上 selected highlight 类HTML 代码:<p>Hello</p>jQuery 代码:$("p").addClass("selected highlight");结果:[ <p class="selected highlight">Hello</p> ]addClass(function(index, class)) — 为每个匹配的元素添加指定的类名。参数 : function(index, class) — 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。(Function)示例 : 给li加上不同的classHTML 代码:<ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>jQuery 代码:$('ul li:last').addClass(function() { return 'item-' + $(this).index();});removeClass([class]) — 从所有匹配的元素中删除全部或者指定的类。参数 : class (可选) — 一个或多个要删除的CSS类名，请用空格分开(String)示例 : 从匹配的元素中删除 'selected' 类HTML 代码:<p class="selected first">Hello</p>jQuery 代码:$("p").removeClass("selected");结果:[ <p class="first">Hello</p> ]删除匹配元素的所有类
HTML 代码:<p class="selected first">Hello</p>jQuery 代码:$("p").removeClass();结果:[ <p>Hello</p> ]removeClass(function(index, class)) — 从所有匹配的元素中删除全部或者指定的类。
参数 : function(index, class) — 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。(Function)示例:删除最后一个元素上与前面重复的classjQuery 代码:$('li:last').removeClass(function() { return $(this).prev().attr('class');});toggleClass(class) — 如果存在（不存在）就删除（添加）一个类。
参数 : class — CSS类名(String)示例 :为匹配的元素切换 'selected' 类HTML 代码:<p>Hello</p><p class="selected">Hello Again</p>jQuery 代码:$("p").toggleClass("selected");结果:[ <p class="selected">Hello</p>, <p>Hello Again</p> ]toggleClass(class, switch) — 如果开关switch参数为true则加上对应的class，否则就删除。
参数 :class — 要切换的CSS类名(String)switch — 用于决定元素是否包含class的布尔值(Boolean)示例 :每点击三下加上一次 'highlight' 类HTML 代码:<strong>jQuery 代码:</strong>jQuery 代码: var count = 0; $("p").click(function(){ $(this).toggleClass("highlight", count++ % 3 == 0); });toggleClass(function(index, class), [switch])— 如果开关switch参数为true则加上对应的class，否则就删除。
参数 :function(index, class)— 返回class名的一个函数，接受两个参数，index为元素在集合中的索引位置，class为原先元素的class值(Function)switch — (可选)用于决定元素是否包含class的布尔值(Boolean)示例 :根据父元素来设置class属性jQuery 代码:$('div.foo').toggleClass(function() { if ($(this).parent().is('.bar') { return 'happy'; } else { return 'sad'; }});5.3 html 文本操作
html([val|fn])
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
没有参数就是获取对应的值 有参数就是设置对应的值
无参数 描述:返回p元素的内容。jQuery 代码:$('p').html();参数val 描述:设置所有 p 元素的内容jQuery 代码:$("p").html("Hello world!");回调函数描述:使用函数来设置所有匹配元素的内容。jQuery 代码:$("p").html(function(n){ return "这个 p 元素的 index 是：" + n; }); text([val|fn])
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
无参数 描述:返回p元素的文本内容。jQuery 代码:$('p').text();参数val 描述:设置所有 p 元素的文本内容jQuery 代码:$("p").text("Hello world!");回调函数 描述:使用函数来设置所有匹配元素的文本内容。jQuery 代码:$("p").text(function(n){ return "这个 p 元素的 index 是：" + n; }); val([val|fn|arr]
- input
- 获取的是输入的内容- checkbox- 获取的是value值- select- 单选 就是获取值- 多选 得到的是一个数组，设置的时候也要是数组
获得匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
参数valStringV1.0要设置的值。function(index, value)FunctionV1.4此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。arrayArrayV1.0用于 check/select 的值
无参数 描述:获取文本框中的值jQuery 代码:$("input").val();参数val 描述:设定文本框的值jQuery 代码:$("input").val("hello world!");回调函数 描述:设定文本框的值jQuery 代码:$('input:text.items').val(function() { return this.value + ' ' + this.className;});参数array 描述:设定一个select和一个多选的select的值HTML 代码: check1 check2 radio1 radio2jQuery 代码:$("#single").val("Single2");$("#multiple").val(["Multiple2", "Multiple3"]);$("input").val(["check2", "radio1"]); 六 css 操作
6.1 css
.css() - .css("color") -> 获取color css值 - .css("color", "#ff0000") -> 设置值 - .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值 - .css(["color", "border"]) -> 获取多个值 6.2 位置
.offset - 获取相对位置 - 比较的对象是 htm(既离屏幕的距离 top left) .position - 获取相对已经定位的父标签的位置 - 比较的是最近的那个做过定位的祖先标签
绝对位置相对位置 Title /**$(".dv").offset(){top: 108, left: 508}$(".dv1").offset(){top: 108, left: 508}$(".dv2").offset(){top: 208, left: 608}$("dv").position()undefined$(".dv").position(){top: 108, left: 508}$(".dv1").position(){top: 0, left: 0}$(".dv2").position(){top: 100, left: 100}*/
6.3 scroll
scrollTop([val]) - 返回顶部 scrollLeft([val])
Title 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
Title
6.4 尺寸
height([val|fn]) - 元素的高度 width([val|fn]) innerHeight() - 带padding的高度 innerWidth() outerHeight([soptions]) - 在innerHeight的基础上再加border的高度 outerWidth([options])
尺寸 Title /*$(".dv").width()300$(".dv").height()300$(".dv").innerHeight()340$(".dv").innerWidth()340$(".dv").outerWidth()344$(".dv").outerHeight()344*/
七 文档操作
内部插入（加粗） append(content|fn) --> 往后加 appendTo(content) A.append(B) -> 把B添加到A中元素的后面 A.appendTo(B) -> 把A添加到B中元素的后面 prepend(content|fn) --> 往前加 prependTo(content) A.prepend(B) -> 把B添加到A中元素的前面 A.prependTo(B) -> 把A添加到B中元素的前面 外部插入（加粗） after(content|fn) --> 往后加 insertAfter(content) A.after(B) --> 把B添加到A的后面 A.insertAfter(B) --> 把A添加到B的后面 before(content|fn) --> 往前加 insertBefore(content) A.before(B) --> 把B添加到A的前面 A.insertBefore(B) --> 把A添加到B的前面 包裹 wrap(html|ele|fn) A.wrap(B) --> B包A unwrap() - 不要加参数 wrapAll(html|ele) wrapInner(html|ele|fn) 替换 replaceWith(content|fn) A.replaceWith(B) --> B替换A replaceAll(selector) A.replaceAll(B) --> A替换B 删除 empty() - 清空 内部清空 remove([expr]) - 删除 整体都删除，事件也会删除 detach([expr]) - 剪切 多保存在变量中，方便再次使用，事件会保留 复制 clone([Even[,deepEven]])
克隆 Title
八 动画
基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) - 淡出到0.66透明度 fadeToggle([s,[e],[fn]]) - .fadeToggle(3000, function () { alert("真没用3"); }); 自定义
animate(p,[s],[e],[fn])1.8*- css属性值都可以设置slide
Title
Title
Title
九 事件处理
bind() 向匹配元素附加一个或更多事件处理器blur() 触发、或将函数绑定到指定元素的 blur 事件change() 触发、或将函数绑定到指定元素的 change 事件click() 触发、或将函数绑定到指定元素的 click 事件dblclick() 触发、或将函数绑定到指定元素的 double click 事件delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器die() 移除所有通过 live() 函数添加的事件处理程序。error() 触发、或将函数绑定到指定元素的 error 事件event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。event.pageX 相对于文档左边缘的鼠标位置。event.pageY 相对于文档上边缘的鼠标位置。event.preventDefault() 阻止事件的默认动作。event.result 包含由被指定事件触发的事件处理器返回的最后一个值。event.target 触发该事件的 DOM 元素。event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。event.type 描述事件的类型。event.which 指示按了哪个键或按钮。focus() 触发、或将函数绑定到指定元素的 focus 事件keydown() 触发、或将函数绑定到指定元素的 key down 事件keypress() 触发、或将函数绑定到指定元素的 key press 事件keyup() 触发、或将函数绑定到指定元素的 key up 事件live() 为当前或未来的匹配元素添加一个或多个事件处理器load() 触发、或将函数绑定到指定元素的 load 事件mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。ready() 文档就绪事件（当 HTML 文档就绪可用时）resize() 触发、或将函数绑定到指定元素的 resize 事件scroll() 触发、或将函数绑定到指定元素的 scroll 事件select() 触发、或将函数绑定到指定元素的 select 事件submit() 触发、或将函数绑定到指定元素的 submit 事件toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。trigger() 所有匹配元素的指定事件triggerHandler() 第一个被匹配元素的指定事件unbind() 从匹配元素移除一个被添加的事件处理器undelegate() 从匹配元素移除一个被添加的事件处理器，现在或将来unload() 触发、或将函数绑定到指定元素的 unload 事件
Title
blur([[data],fn]) focus([[data],fn]) - 获取焦点 - 搜索框例子 change([[data],fn]) - select click([[data],fn]) - 点击 dblclick([[data],fn]) - 双击 scroll([[data],fn]) - 滚动 submit([[data],fn]) -提交 补充： 文档树加载完之后绑定事件（绝大部分情况下） $(document).ready(function(){ // 绑定事件的代码 .... }) 简写： $(function($){ // 绑定事件的代码 .... }); 十 事件委托(事件委派)
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。 - 1
- 2
- 3
Dashboard Template for Bootstrap Panel heading without title
# 用户名 邮箱 爱好 操作 1 Egon egon@oldboyedu.com 杠娘 2 Yuan yuanhao@oldboyedu.com 日天 3 Alex alex@oldboyedu.com 吹牛 4 GDP GDP@S6.com 戴帽子
十一 jQuery扩展
1.jQuery.extend(object)
扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。
在jQuery命名空间上增加两个函数:
登录校验
/** * Created by Administrator on 2017/10/17. */(function (jq) { jq.extend({ "myValidate": function (form) { var formObj = jq(form); formObj.find(":submit").on("click", function () { // 先清空状态 formObj.find(".form-group").removeClass("has-error"); formObj.find("span").text(""); // each循环 formObj.find("input").each(function () { // 做判断 if (jq(this).val().length === 0) { // 给他的爸爸加has-error jq(this).parent().parent().addClass("has-error"); // 给span写内容 // 找到我这是什么input --> 找到对应的label的文本内容 var name = jq(this).parent().prev().text(); jq(this).next().text(name + "不能为空"); return false; } }); return alse; }); } })})(jQuery);
2.jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
增加两个插件方法：
登录校验
/** * Created by Administrator on 2017/10/17. */(function (jq) { jq.fn.extend({ "myValidate": function (arg) { // this --> .前面的那个jQuery对象 var formObj = this; formObj.find(":submit").on("click", function () { // this --> 提交的submit按钮 // 先清空状态 formObj.find(".form-group").removeClass("has-error"); formObj.find("span").text(""); // each循环 var flag = true; formObj.find("input[required='true']").each(function () { // this --> input框 // 做判断 if (jq(this).val().length === 0) { // 给他的爸爸加has-error jq(this).parent().parent().addClass("has-error"); // 给span写内容 // 找到我这是什么input --> 找到对应的label的文本内容 var name = jq(this).parent().prev().text(); jq(this).next().text(name + "不能为空"); flag = false; return false; } var inputID = jq(this).attr("id"); var minLength = arg[inputID]["min-length"]; if (minLength !== undefined) { if (jq(this).val().length < minLength) { console.log("长度太短"); // 给他的爸爸加has-error jq(this).parent().parent().addClass("has-error"); // 给span写内容 // 找到我这是什么input --> 找到对应的label的文本内容 var name = jq(this).parent().prev().text(); jq(this).next().text(name + "长度太短"); flag = false; return false; } } }); return flag; }) } })})(jQuery);