jQuery
jQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。推荐一个学习Jquery网站：http://jquery.cuishifeng.cn/
Jquery 分为三个版本：1.0x 2.0x 3.0x(推荐使用1.0x，因为兼容性更好。)jQuery包又分为：压缩版和普通版（学习建议用普通版可以看源码，上线中要用压缩版）
jquery和DOM之间可以互相转换：
jQuery对象[0] ==> DOM对象
DOM对象 ==> $(DOM对象)
(如果jQuery对象封装的功能不够强大，可以利用他们之间的互相转换，来用DOM扩写jquery对象)
查找元素，DOM有10个左右语句，jQuery中有以下：
选择器
选择器，直接找到某个或者某类标签
1, id
$('#id')
2, class
$(".class")
3, 标签
$("a")
4, 组合
$("#i1,.c1,a") 找到id为1，class为c1，标签为a
5, 层级
$("i1 a") 找id为1下面的所有a标签，子子孙孙
$("i1">"a") 找id为1下a标签（第一层），儿子
6, 基本筛选器
:first 获取匹配的第一个元素
:not
:last
7, :eq(index) 根据索引来找
:gt(index)
:lt(index)
$('a:eq(2)') 找a标签的索引为2的元素
8, ["属性"]
$("alex") 具有alex属性的标签
$('[alex="123"]') alex='123'的标签
表单选择器：其实学完上述，完全不用学对表单的查找。表单只不过在上述的简写
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$('input[type="text"]') 通过属性选择器找
$(':text') 通过表单选择器找（可以看出是上述的简写）
表单属性跟上述类似
实例：全选，反选，取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" id="tb">
<input type="button" value="全选" onclick="selectAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>10.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>10.1.1.2</td>
<td>8080</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>10.1.1.3</td>
<td>8000</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function selectAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancelAll() {
$('#tb :checkbox').prop('checked',false);
}
// 第一种方式：原始的DOM方式
// function reverseAll() {
// var tb = $('#tb :checkbox');
// for(var i=0;i<tb.length;i++){
// if(tb[i].checked){
// tb[i].checked = false;
// }
// else{
// tb[i].checked = true;
// }
// }
// }
// 第二种方式：也是利用DOM方式
// function reverseAll() {
// $('#tb :checkbox').each(function () {
// //this代指当前循环的每一个元素，如果函数中有参数k，k则表示下标
// //反选
// //console.log(this) 此时的this对象为DOM对象
// //console.log($(this))，
// if (this.checked) {
// this.checked = false;
// } else {
// this.checked = true;
// }
// })
// }
//第三种方式：利用jQuery方式
// function reverseAll() {
// $('#tb :checkbox').each(function () {
// if($(this).prop('checked')){
// $(this).prop('checked',false);
// }else{
// $(this).prop('checked',true);
// }
// })
// }
//第四种方式：三元运算
function reverseAll() {
$('#tb :checkbox').each(function () {
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>
总结：
1, $(this).prop('checked') 获取值
2, $(this).prop('checked',false) 设置值
3, $('#tb :checkbox').each() Jquery方法内置循环
$('#tb :checkbox').each(function (k) {
//k则表示当前索引
//this,DOM,当前循环的元素 $(this)
}
4, 三元运算
var v = 条件？真值：假值
筛选器：（常用）
$('i1').next() 下一个标签
$('i1').prev() 上一个标签
$('i1').parent() 父标签
$('i1').children() 孩子标签
$('i1').siblings() 兄弟标签
$('i1').find('.content') 在子子孙孙中找class为content的标签
$('li').eq(1) 根据索引进行筛选，注意和选择器的区别 $('li:eq(1)')(效果是一样的) 区别：一个是字符串，一个是变量
$('#i1').nextUntil('i5') 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
$('#i1').nextAll() 从i1向下所有的
$('#i1').prevAll() 从i1向上所有的
$('#i1').prevUntil('i5') 从i1向上直到i5
$('i1').parents() 从父标签一直找到祖宗
$('i1').parentsUntil('.c1') 从父标签一直找到'c1'为止
示例2：筛选器以及Tab菜单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item .header{
height: 38px;
background-color: #2568aa;
color: white;
line-height: 35px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div class="item">
<div id="i1" class="header">菜单一</div>
<div class="content hide">
<div>内容一</div>
<div>内容一</div>
<div>内容一</div>
</div>
</div>
<div class="item">
<div class="header">菜单二</div>
<div class="content hide">
<div>内容二</div>
<div>内容二</div>
<div>内容二</div>
</div>
</div>
<div class="item">
<div class="header">菜单三</div>
<div class="content hide">
<div>内容三</div>
<div>内容三</div>
<div>内容三</div>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
// 1,第一种方式jQuery（DOM的方式也能实现，只不过实现起来比较复杂，前面写过）
//$('.header').click(function () {
// $(this).next().removeClass('hide')
// $(this).parent().siblings().find('.content').addClass('hide')
// })
// 2,第二种方式jQuery（链式编程）
$('.header').click(function () {
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
总结：
1, jQuery绑定事件
$('.header').click(function () {
xxxx
}
2, 添加样式和移除样式
$('.i1').addClass('.hide')
$('.i1').removeClass('.hide')
3, 筛选器实在选择器的基础之上再进行选择（下面为常用的筛选器）
$(this).next() 下一个标签
$(this).prev() 上一个标签
$(this).parent() 父标签
$(this).children() 孩子标签
$(this).siblings() 兄弟标签
$(this).find('.content') 在子子孙孙中找class为content的标签，同一级标签不能用find
4, jQuery支持链式编程
文本操作
$(..).text() #获取文本内容
$(..).text("<a>1</a>") #设置文本内容
$(..).html() #
$(..).html("<a>1</a>") #
$(..).val() #获取value值
$(..).val(..) #设置value值
示例：模态编辑框2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal{
position: fixed;
top:50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
border: 1px black solid;
height: 400px;
width: 500px;
background: #ddd;
z-index: 10;
}
#i1{
border: 1px black solid;
}
.shadow{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: black;
opacity: 0.6;
z-index: 9;
}
.hide{
display: none;
}
</style>
</head>
<body>
<a id="i1">添加</a>
<table border="1">
<tr>
<td>10.1.1.1</td>
<td>80</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td>10.1.1.2</td>
<td>8080</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td>10.1.1.3</td>
<td>8000</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text">
<input name="port" type="text">
</div>
<div>
<input id="i2" type="button" value="确定">
<input id="i3" type="button" value="取消">
</div>
</div>
<div class="shadow hide">
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$("#i1").click(function () {
$(".modal, .shadow").removeClass('hide');
$('.modal input[type="text"]').val("");
});
$("#i3").click(function () {
// $(this).parent().addClass('hide').next().addClass('hide')
$(".modal, .shadow").addClass('hide')
});
$(".edit").click(function () {
$(".modal, .shadow").removeClass('hide');
var tds = $(this).parent().prevAll();
//循环获取tds中的内容
//复制给input标签中的value
var port = $(tds[0]).text();
var host = $(tds[1]).text();
$('.modal input[name="hostname"]').val(host);
$('.modal input[name="port"]').val(port);
})
</script>
</body>
</html>
样式操作
addClass() removeClass() toggleClass #如果存在（不存在）就删除（添加）一个类。
示例：样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input id="i1" type="button" value="开关">
<div class="c1 hide">hello world</div>
<script src="jquery-1.12.4.js"></script>
<script>
//第一种方式：
// $("#i1").click(function () {
// if($(".c1").hasClass("hide")){
// $(".c1").removeClass('hide');
// }else{
// $(".c1").addClass('hide');
// }
// });
//第二种方式：
$("#i1").click(function () {
$(".c1").toggleClass('hide')
})
</script>
</body>
</html>
属性操作
#专门做自定义的属性的
$(..).attr() #获取属性值
$(..).attr('n','v') #设置属性值
$(..).removeAttr('n') #移除属性值
<input type="checkbox" id="i1" checked="checked"/> #DOM方式选中
$('#i1').attr('checked','checked')
#Jquery选中操作，第一次可以，然后取消(removeAttr),如果再次选中会出问题，发现选中不了，jQuery1和jQuery2版本都有此
问题(bug)，即Query3版本中才得到解决，在版本1中，可以用prop来专门解决这个问题。
#专门用于checkbox(复选),radio(单选)
$(..).prop()
$(..).prop('checked') #获取值
$('#i1').prop('checked',true) #设置值
$('#i1').prop('checked',false)
示例：通过属性实现模态编辑框（需要在上述模态编辑框2的基础上增加td属性，属性值和下面输入框中值建立关联）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal{
position: fixed;
top:50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
border: 1px black solid;
height: 400px;
width: 500px;
background: #ddd;
z-index: 10;
}
#i1{
border: 1px black solid;
}
.shadow{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: black;
opacity: 0.6;
z-index: 9;
}
.hide{
display: none;
}
</style>
</head>
<body>
<a id="i1">添加</a>
<table border="1">
<tr>
<td target="hostname">10.1.1.1</td>
<td target="port">80</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td target="hostname">10.1.1.2</td>
<td target="port">8080</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td target="hostname">10.1.1.3</td>
<td target="port">8000</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text">
<input name="port" type="text">
</div>
<div>
<input id="i2" type="button" value="确定">
<input id="i3" type="button" value="取消">
</div>
</div>
<div class="shadow hide">
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$("#i1").click(function () {
$(".modal, .shadow").removeClass('hide');
$('.modal input[type="text"]').val("");
});
$("#i3").click(function () {
// $(this).parent().addClass('hide').next().addClass('hide')
$(".modal, .shadow").addClass('hide')
});
$(".edit").click(function () {
$(".modal, .shadow").removeClass('hide');
var tds = $(this).parent().prevAll();
tds.each(function () {
//获取target属性
var n = $(this).attr('target');
//获取td中的内容
var text = $(this).text();
var a1 = '.modal input[name="';
var a2 = '"]';
var tmp = a1 + n + a2;
$(tmp).val(text)
});
})
</script>
</body>
</html>
总结：这个跟上一个相比的好处，就是以后无论td增加多少列，比如除了hostname，port之外再增加IP列就无需再做任何的操作。
示例：TAB切换菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
line-height: 38px;
background: #eeeeee;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
/*鼠标聚焦显示小手*/
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div style="width: 700px;margin: 0 auto">
<div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div b="2" class="hide">内容二</div>
<div b="3" class="hide">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function () {
$(this).addClass('active').siblings().removeClass('active');
//第一种方式：通过自定义属性的方式
// var tmp = $(this).attr('a');
// $('.content div[b="' + tmp + '"]').removeClass('hide').siblings().addClass('hide');
//第二种方式：通过索引的方式(这时就可以把自定义的属性‘a’和‘b’去掉)
var ind = $(this).index();
$('.content').children().eq(ind).removeClass('hide').siblings().addClass('hide')
})
</script>
</body>
</html>
总结：
1，小知识点，鼠标聚焦显示小手,cursor: pointer
2， jQuery对象操作可以使用index进行索引操作
3，第二种方式依然可以用字符串拼接的方式去实现。
$(".content").children(":eq(" + ind + ")").removeClass('hide').siblings().addClass('hide')
文档操作
$("ul").append(temp) 内部后面插入
$("ul").prepend(temp) 内部前面插入
appendTo 相当于把在‘temp’内部后面插入'ul'，像append前后元素顺序调过来
prependTo 类似
$("ul").after(temp) 外部后面插入
$("ul").before(temp) 外部前面插入
var index = $('#t1').val();
$('ul li').eq(index).remove() 删除
$('ul li').eq(index).empty() 只删除内容（如果是项目，项目符号保留）
clone 克隆
示例：内容操作(添加，删除，复制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<input id="a2" type="button" value="删除">
<input id="a3" type="button" value="复制">
<ul id="ul">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>" ;
// $("ul").append(temp)
$("ul").prepend(temp);
// $("ul").after(temp)
// $("ul").before(temp)
});
$("#a2").click(function () {
var index = $('#t1').val();
$('ul li').eq(index).remove();
// $('ul li').eq(index).empty();
});
$("#a3").click(function () {
var index = $('#t1').val();
var v = $('ul li').eq(index).clone();
$("#ul").append(v);
});
</script>
</body>
</html>
模态对话框（编辑，删除）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal{
position: fixed;
top:50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
border: 1px black solid;
height: 400px;
width: 500px;
background: #ddd;
z-index: 10;
}
#i1{
border: 1px black solid;
}
.shadow{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: black;
opacity: 0.6;
z-index: 9;
}
.hide{
display: none;
}
</style>
</head>
<body>
<a id="i1">添加</a>
<table border="1" id="tb">
<tr>
<td target="hostname">10.1.1.1</td>
<td target="port">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">10.1.1.2</td>
<td target="port">8080</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">10.1.1.3</td>
<td target="port">8000</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text">
<input name="port" type="text">
</div>
<div>
<input id="i2" type="button" value="确定">
<input id="i3" type="button" value="取消">
</div>
</div>
<div class="shadow hide">
</div>
<script src="../task/jquery-1.12.4.js"></script>
<script>
$("#i1").click(function () {
$(".modal, .shadow").removeClass('hide');
$('.modal input[type="text"]').val("");
});
$("#i3").click(function () {
// $(this).parent().addClass('hide').next().addClass('hide')
$(".modal, .shadow").addClass('hide')
});
$(".edit").click(function () {
$(".modal, .shadow").removeClass('hide');
var tds = $(this).parent().prevAll();
tds.each(function () {
//获取target属性
var n = $(this).attr('target');
//获取td中的内容
var text = $(this).text();
var a1 = '.modal input[name="';
var a2 = '"]';
var tmp = a1 + n + a2;
$(tmp).val(text)
});
});
$('.del').click(function () {
$(this).parent().parent().remove()
});
$('#i2').click(function () {
var tr = document.createElement('tr');
$(".modal input[type='text']").each(function () {
var td = document.createElement('td');
//获取当前标签的"name"属性
var name = $(this).attr("name");
//设置生成的'target'属性, $(td)把DOM对象转换成jQuery对象
$(td).attr('target', name);
//把输入的内容赋值给生成的td内容中去
td.innerHTML = $(this).val();
$(tr).append(td);
});
var td1 = document.createElement('td');
$(td1).append('<a class="edit">编辑</a> | <a class="del">删除</a>');
$(tr).append(td1);
//最后要把tr添加到table标签中
$('#tb').append(tr);
})
</script>
</body>
</html>
CSS操作
（和class相比粒度比较细）
$("t1").css("样式名称", "样式值")
抽屉点赞：
- $("t1").append()
- setInterval()
- opacity(透明度)
- position
- 字体
示例：动态点赞功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(".item").click(function () {
AddFavor(this);
});
function AddFavor(self) {
var tag = document.createElement('span');
var fontSize = 12;
var bottom = 0;
var left = 0;
var opacity = 1;
//DOM对象
$(tag).text("+1");
$(tag).css("color", "green");
// $(tag).css("backgroundColor", "red");
$(tag).css("bottom", bottom);
$(tag).css("fontSize", fontSize);
$(tag).css("left", left);
$(tag).css("position", "absolute");
$(tag).css("opacity", opacity);
$(self).append(tag);
var obj = setInterval(function () {
fontSize = fontSize + 10;
bottom = bottom + 2;
left = left + 2;
opacity = opacity - 0.2;
$(tag).css("bottom", bottom + "px");
$(tag).css("fontSize", fontSize + "px");
$(tag).css("left", left + "px");
$(tag).css("opaci ty", opacity);
// console.log(opacity);
// 当透明度小于1时清除定时器
if(opacity < 0){
clearInterval(obj);
//并把tag标签框去掉
$(tag).remove()
}
}, 100);
}
</script>
</body>
</html>
位置
scrollTop() # 获取匹配元素相对滚动条顶部的偏移
scrollTop([val]) # 设置
scrollleft([val]) # 同上
scrollTop(0) # 返回顶部
offset # 指定标签在HTML中的坐标
$('.content').offset()
$('.content').offset().top
$('.content').offset().left
position # 指定标签相对父标签(relative)的标签的坐标
$("#i1").height() # 获取标签的高度 + ？
$("#i1").innerHeight() # 只获取边框+纯高度 + ？
$("#i1").outHeight() # 获取边框 + 纯高度 + ？
$("#i1").outHeight(true)# 获取边框 + 纯高度 + ?
# 纯高度，边框，外边距，内边距
jQuery事件绑定的方式
DOM：三种绑定方式
jQuery：
1,第一种(常用)：
$(".c1").click()
$(".c1")...
2，第二种(常用)：
$(".c1").bind("click", function(){}) #绑定
$(".c1").onbind("click", function(){}) #去掉绑定，和上面配合使用
3，第三种：（重要）
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。称为“委托”
$('.c1').delegate('a', 'click', function(){}) # .c1下的a标签绑定事件
$('.c1').undelegate('a', 'click', function(){}) # 解除绑定事件
4，第四种：
$(".c1").on("click",function(){})
$(".c1").off("click",function(){})
示例：如何让新添加的标签立即生效，执行相应的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<ul id="ul">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>" ;
$("#ul").append(temp);
});
// $("ul li").click(function () {
// var v = $(this).text();
// alert(v)
// })
$("ul").delegate("li","click",function () {
var v = $(this).text();
alert(v)
})
</script>
</body>
</html>
jQuery事件绑定阻止事件发生，a标签默认有一个click事件
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return Clickon();" id="i1" href="http://www.qq.com">QQ</a>
</body>
<script>
// 第一种：DOM方式
function Clickon() {
alert(123);
return true
}
</script>
<!--第二种方式jQuery-->
<!--<script src="jquery-1.12.4.js"></script>-->
<!--<script>-->
<!--$("#i1").click(function () {-->
<!--alert(456)-->
<!--return false-->
<!--})-->
<!--</script>-->
</html>
总结：
a标签默认有一个click事件，如果再添加一个。默认优先执行添加的然后会继续执行href中的事件。
如何让其不再执行默认的事件，有两种方式？
1, DOM 需要定义事件前加入'return',然后在事件的函数中加入'return false',如果是true则会继续执行。
2， jQuery方式，直接在定义函数时加入'return false'就不会继续执行默认的事件了。
示例：表单验证（重要）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="i1" action="10，模态对话框（编辑，删除）.html" method="post">
<div><input type="text" name="用户名："/></div>
<div><input type="password" name="密 码："/></div>
<div><input type="text" name="邮 箱："/></div>
<div><input type="text" name="手机号："/></div>
<div><input type="text" name="验证码："/></div>
<input type="submit" value="提交"/>
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(":submit").click(function () {
//在提交之前清空所有的错误提示
$(".error").remove();
var flag = true;
$("#i1").find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if(v.length<=0){
flag = false;
var tag = document.createElement('span');
tag.innerHTML = "必填";
tag.className = "error";
$(tag).css("color","red");
$(this).after(tag);
//return只是退出当前的循环
//return false;
}
});
//如果上述循环内有任意一处为空，那么flag=False，即表单无法提交
return flag
})
</script>
</body>
</html>
补充
一般js写在最后，如果js的前面刚好有图片需要加载，默认当页面所有的元素加载完毕后，才会执行js，但是$(function(){xxxxxx})当页面框架加载完毕后，自动执行'xxxxxx'的内容。所以上述示例最后的代码要放在这段代码里面。
jQuery扩展的两种方式
- $.extend 调用：$.方法 - $.fn.extend 调用：$(..).方法 两者的区别：定义的方式不同，调用的方式也不同
示例：jQuery的扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
// 第一种方式：
// $.extend({"alex": function () {
// return 'ok'
// }});
// var v = $.alex();
// alert(v)
//
// 第二种方式：
$.fn.extend({'eric':function () {
return 'no'
}});
var v = $("#i1").eric()
alert(v)
</script>
</body>
</html>
总结：
1，注意以后自己定义jQuery扩展的时候或者要引入第三方jQuery扩展的时候，单独写个.js文件，然后引入
<script src='要引入.js'></script>,如果遇到重名的第三方模块，需要借助自执行函数
(function(){
var status = 1;
// 封装变量(优先执行自己的变量，从而避免变量冲突的问题)
})(jQuery)
拥抱不确定，未来可期！喜欢该文章请不吝点赞推荐，如有疑问欢迎留言，我们一起探讨。
浙公网安备 33010602011771号