前端学习：jQuery基础知识
2018-02-27 20:47
561 查看
笔记
参考资料：http://jquery.cuishifeng.cn/index.html
jQuery
模块 == 类库
版本1.x (推荐1.12) 2.x 3.x
下载地址：http://jquery.com/
基础语法是：$(selector).action()
jQuery 或者 $
转换
jQuery对象[0] => Dom对象
Dom对象 => $(Dom对象)
DOM、BOM、Javascript的类库
1.查找元素
选择器：直接找到某个或者某类标签
1.id $("#id")
2.class $(".class")
3.tag $("tag")
4.组合选择 $("tag, .class, #id")
5.层级
$("#id tag") 子子孙孙
$("#id>tag") 孩子
筛选器
:first
:last
:even
:odd
:eq() 索引
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil()
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil()
$("#id").parent()
$("#id").parents()
$("#id").parentUntil()
$("#id").children()
$("#id").siblings()
$("#id").find()
属性
$("[class]") 具有class属性的所有标签
$("[class='c1']") 属性=c1的标签
实例
多选， 反选， 全选
选择属性
$("#tb:checkbox").prop("checked"); 获取值
$("#tb:checkbox").prop("checked", false); 设置值
jquery方法内置循环
$("#tb:checkbox").xxx
$("#tb:checkbox").each(function(index){
index 当前索引
this dom对象，当前循环的元素
$(this) jquery对象
})
三元运算符
var ret = 条件？ 真值： 假值
2.操作元素
文本操作
$().text() #获取文本内容
$().text("") # 设置文本内容
$().html() #获取内容
$().html("") # 设置内容
$().val() 获取值
$().val("") 设置值
样式操作
addClass()
removeClass()
toggleClass()
属性操作
$().attr() # 专门用于自定义操作
$().removeAttr()
$().prop("checked", true) # 专门用于checkbox, radio
index() 获取索引
eq() 筛选索引
文档处理
append()
prepend()
after()
before()
remove()
empty()
clone()
css处理
$().css("样式", "值")
点赞：
$().append()
$().remove()
setInterval()
opacity 1 --> 0
position
fontSize
top left right
位置：
scrollTop() # 获取滚动条值
scrollLeft()
$(window).scrollTop(0) # 设置值 返回顶部
offset 指定标签在html中的坐标
offset().left
offset().top
position() 指定标签相对父标签（relative）标签的坐标
尺寸
height([val|fn]) 获取标签的纯高度
width([val|fn])
innerHeight()
innerWidth()
outerHeight([options])
outerWidth([options])
事件绑定
Dom三种绑定方式
$().click(function)
$().bind("click", function)
$().unbind("click", function)
$().delegate("a", "click", function)
$().undelegate("a", "click", function)
$().on("click", function)
$().off("click", function)
阻止事件发生
return false
当页面框架加载完毕函数自动执行
为了防止文档在完全加载（就绪）之前运行 jQuery 代码
$(document).ready(function(){});
$(function(){});
$().click(function(){})
jquery扩展
$.extend $.method()
$.fn.extend $().method()
写扩展时，使用自执行函数，避免变量冲突
(function(){
var status = 1;
//
})(jQuery);
作业：
编辑框 input实例
tab菜单-索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab菜单-索引</title>
<style>
.pg-body{
width: 700px;
height:200px;
margin:0 auto;
border:1px solid #9d9d9d;
}
.menu{
height:36px;
line-height: 36px;
background-color: rgba(179, 179, 179, 0.96);
}
.menu .menu-item{
float:left;
border-right: 1px solid red;
padding:0 10px;
cursor: pointer; /*小手*/
}
.menu .active{
background-color: #e4393c;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="pg-body">
<div class="menu">
<div class="menu-item active" >菜单一</div>
<div class="menu-item" >菜单二</div>
<div class="menu-item" >菜单三</div>
</div>
<div class="content">
<div >内容1</div>
<div class="hide" >内容2</div>
<div class="hide" >内容3</div>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$(".menu-item").click(function () {
// 点击菜单颜色变化
$(this).addClass("active").siblings().removeClass("active");
//找到对应内容
var n = $(this).index(); //索引
console.log(n);
$(".content").children().eq(n).removeClass("hide").siblings().addClass("hide");
})
</script>
</html>tab菜单-自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab菜单-自定义属性</title>
<style>
.pg-body{
width: 700px;
height:200px;
margin:0 auto;
border:1px solid #9d9d9d;
}
.menu{
height:36px;
line-height: 36px;
background-color: rgba(179, 179, 179, 0.96);
}
.menu .menu-item{
float:left;
border-right: 1px solid red;
padding:0 10px;
cursor: pointer; /*小手*/
}
.menu .active{
background-color: #e4393c;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="pg-body">
<div class="menu">
<div class="menu-item active" menu-id="1">菜单一</div>
<div class="menu-item" menu-id="2">菜单二</div>
<div class="menu-item" menu-id="3">菜单三</div>
</div>
<div class="content">
<div content-id="1">内容1</div>
<div class="hide" content-id="2">内容2</div>
<div class="hide" content-id="3">内容3</div>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$(".menu-item").click(function () {
// 点击菜单颜色变化
$(this).addClass("active").siblings().removeClass("active");
//找到对应内容
var menuId = $(this).attr("menu-id");
var filter = "[content-id='"+ menuId+"']";
$(".content").children(filter).removeClass("hide").siblings().addClass("hide");
})
</script>
</html>事件优先级
一般而言，自定义事件优先级高于标签自带事件input chechbox 例外
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件优先级</title>
</head>
<body>
<div><a onclick="return showMe()" href="http://www.baidu.com">baidu</a></div>
<div><a id="i1" href="http://www.baidu.com">baidu</a></div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
function showMe(){
alert("123");
return false; //阻止链接跳转
}
$("#i1").click(function(){
alert("456");
return false; //阻止链接跳转
});
</script>
</html>事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<style>
div{
width: 100px;
height:36px;
line-height: 36px;
text-align:center;
background-color: #0d3ea2;
color: white;
cursor:pointer;
border-bottom:1px solid red;
}
</style>
</head>
<body>
<div id="i1">一个标签1</div>
<div id="i2">一个标签2</div>
<div id="i3">一个标签3</div>
<div id="i4">一个标签4</div>
<div id="i5">一个标签5</div>
<div id="i6">一个标签6</div>
<div id="i7">一个标签7</div>
<script src="jquery-3.3.1.js"></script>
<script>
//方式一
$("#i1").click(function () {
alert("i1");
});
//方式二
function myAlert(){
alert($(this).attr("id"));
}
$("#i2").bind("click", myAlert);
$("#i3").bind("click", myAlert);
$("#i3").unbind("click", myAlert);
//方式三
$("#i4").delegate("a", "click", myAlert);
// 方式四
$("#i6").on("click", myAlert);
$("#i7").on("click", myAlert);
$("#i7").off("click", myAlert);
</script>
</body>
</html>位置尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>位置尺寸</title>
<style>
body{
height:1000px;
}
.gotoTop{
position: fixed;
right:0;
bottom: 0;
width: 100px;
height: 36px;
line-height: 36px;
background-color: #9d9d9d;
color:white;
text-align: center;
cursor: pointer;
}
.box{
width: 400px;
height: 300px;
background-color: #2459a2;
border:1px solid red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="gotoTop">返回顶部</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
// 滚动条，回到顶部
$(".gotoTop").click(function () {
$(window).scrollTop(0);
});
//偏移量
var off = $(".gotoTop").offset();
console.log(off);
console.log(off.top);
console.log(off.left);
//坐标
var pos = $(".gotoTop").position();
console.log(pos);
//尺寸
console.log("height：" + $(".box").height());
console.log("width：" + $(".box").width());
console.log("innerHeight：" + $(".box").innerHeight());
console.log("innerWidth：" + $(".box").innerWidth());
console.log("outerHeight：" + $(".box").outerHeight());
console.log("outerWidth：" + $(".box").outerWidth());
// height：300
// width：400
// innerHeight：300
// innerWidth：400
// outerHeight：302
// outerWidth：402
</script>
</html>全选取消反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选取消反选</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverseAll()">
<input type="button" value="取消" onclick="cancelAll()">
<table border="1px">
<thead>
<tr>
<th>选择</th>
<th>ip</th>
<th>port</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>0.0.0.1</td>
<td>3306</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>0.0.0.1</td>
<td>3306</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>0.0.0.1</td>
<td>3306</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>0.0.0.1</td>
<td>3306</td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
function checkAll(){
$(":checkbox").prop("checked", true);
}
function reverseAll() {
// 通过Dom对象方式
// $(":checkbox").each(function() {
// if(this.checked){
// this.checked=false;
// } else{
// this.checked=true;
// }
// })
// 通过jquery对象方式
// $(":checkbox").each(function () {
// if($(this).prop("checked")){
// $(this).prop("checked", false);
// } else{
// $(this).prop("checked", true);
// }
// })
// 通过三元运算
$(":checkbox").each(function () {
var ret = $(this).prop("checked")? false: true;
$(this).prop("checked", ret);
})
}
function cancelAll() {
$(":checkbox").prop("checked", false);
}
</script>
</body>
</html>侧边菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侧边菜单</title>
<style>
.menu{
width:200px;
}
.header{
height: 40px;
background-color: #0d3ea2;
color:white;
line-height: 40px;
text-align: center;
font-weight: bold;
}
.content div{
height: 36px;
line-height: 36px;
text-align: center;
background-color: #dddddd;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="header">菜单2</div>
<div class="content">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="header">菜单1</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="header">菜单3</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="header">菜单4</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// 思路：
// 为每个标题栏绑定事件
// 当前点击的标签$(this)
// 获取下一个标签，展开
// 获取父级标签
// 获取所有兄弟标签
// 添加和移除样式
// 筛选器
// $(this).next() 下一个
// $(this).prev() 上一个
// $(this).parent() 父
// $(this).children() 孩子
// $(this).siblings() 兄弟
// $(this).find() 子子孙孙
// 添加删除类
// $(this).addClass()
// $(this).removeClass()
// 绑定事件
// 链式编程
$(".header").click(function () {
$(this).next().removeClass("hide");
$(this).parent().siblings().find(".content").addClass("hide");
})
</script>
</body>
</html>委托绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>委托绑定事件</title>
</head>
<body>
<div><input type="text"></div>
<div><input type="button" value="添加"></div>
<ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
<li>标签5</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
//添加列表元素
$(":button").click(function () {
var v = $(":text").val();
var tag = document.createElement("li");
tag.innerText = v;
$("ul").append(tag);
});
//后面主动添加的元素也有点击事件
$("ul").delegate("li", "click", function () {
alert($(this).text());
});
}
)
</script>
</body>
</html>开关操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开关操作</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input id="toggle" type="button" value="开关">
<a class="c1">文字</a>
<script src="jquery-3.3.1.js"></script>
<script>
$("#toggle").click(function () {
$(".c1").toggleClass("hide");
// 相当于：
// if($(".c1").hasClass("hide")){
// $(".c1").removeClass("hide");
// } else{
// $(".c1").addClass("hide");
// }
})
</script>
</body>
</html>扩展jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展jquery</title>
</head>
<body>
<script src="jquery-3.3.1.js"></script>
<script>
//扩展方法：
$.extend({
"myFunc": function () {
alert("my function")
}
});
// $.myFunc();
//扩展方法二：
$.fn.extend({
"myFoo": function () {
alert("my foo")
}
});
$().myFoo();
</script>
</body>
</html>模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style>
.hide{
display:none;
}
/*遮罩层*/
.shadow{
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background-color: #333333;
opacity: 0.6;
z-index: 9;
}
/*模态框*/
.mode{
position: fixed;
width:500px;
height:400px;
top:50%;
left:50%;
margin-top: -200px;
margin-left:-250px;
z-index: 10;
background-color:#ffffff;
}
</style>
</head>
<body>
<input type="button" onclick="showMode()" value="显示">
<table border="1px">
<thead>
<tr><th>序号</th><th>ip</th><th>port</th><th>操作</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>0.0.0.1</td><td>3301</td>
<td><a class="edit">编辑</a> | 删除</td></tr>
<tr><td>2</td><td>0.0.0.2</td><td>3302</td>
<td><a class="edit">编辑</a> | 删除</td></tr>
<tr><td>3</td><td>0.0.0.3</td><td>3303</td>
<td><a class="edit">编辑</a> | 删除</td></tr>
<tr><td>4</td><td>0.0.0.4</td><td>3304</td>
<td><a class="edit">编辑</a> | 删除</td></tr>
<tr><td>5</td><td>0.0.0.5</td><td>3305</td>
<td><a class="edit">编辑</a> | 删除</td></tr>
<tr><td>6</td><td>0.0.0.6</td><td>3306</td>
<td><a class="edit">编辑</a> | 删除</td></tr>
</tbody>
</table>
<div class="shadow hide">
<div class="mode">
<input type="button" onclick="hideMode()" value="取消">
<input type="text" name="hostname">
<input type="text" name="port">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
function showMode() {
$(".shadow").removeClass("hide");
}
function hideMode() {
$(".shadow").addClass("hide");
$(".mode input[type='text']").val("");
}
$(".edit").click(function () {
showMode();
// 获取本行的内容
var tds = $(this).parent().prevAll();
var hostname = $(tds[1]).text();
var port = $(tds[0]).text();
$(".mode input[name='hostname']").val(hostname);
$(".mode input[name='port']").val(port);
})
</script>
</body>
</html>模态框-属性使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style>
.hide{
display:none;
}
/*遮罩层*/
.shadow{
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background-color: #333333;
opacity: 0.6;
z-index: 9;
}
/*模态框*/
.mode{
position: fixed;
width:400px;
height:300px;
top:50%;
left:50%;
margin-top: -200px;
margin-left:-200px;
z-index: 10;
background-color:#ffffff;
text-align: center;
}
</style>
</head>
<body>
<input type="button" onclick="showMode()" value="显示">
<table border="1px" id="tb">
<thead>
<tr><th>序号</th><th>ip</th><th>port</th><th>密码</th><th>操作</th></tr>
</thead>
<tbody>
<tr class="first-tr"><td >1</td>
<td target="hostname">0.0.0.1</td>
<td target="port">3301</td>
<td target="password">123451</td>
<td><a class="edit">编辑</a> | <a class="del" >删除</a></td>
</tr>
<tr><td>2</td>
<td target="hostname">0.0.0.2</td>
<td target="port">3302</td>
<td target="password">123452</td>
<td><a class="edit">编辑</a> | <a class="del" >删除</a></td></tr>
<tr><td>3</td>
<td target="hostname">0.0.0.3</td>
<td target="port">3303</td>
<td target="password">123453</td>
<td><a class="edit">编辑</a> | <a class="del" >删除</a></td>
</tr>
<tr><td>4</td>
<td target="hostname">0.0.0.4</td>
<td target="port">3304</td>
<td target="password">123454</td>
<td><a class="edit">编辑</a> | <a class="del" >删除</a></td>
</tr>
<tr><td>5</td>
<td target="hostname">0.0.0.5</td>
<td target="port">3305</td>
<td target="password">123455</td>
<td><a class="edit">编辑</a> | <a class="del" >删除</a></td>
</tr>
<tr><td>6</td>
<td target="hostname">0.0.0.6</td>
<td target="port">3306</td>
<td target="password">123456</td>
<td><a class="edit">编辑</a> | <a class="del" >删除</a></td>
</tr>
</tbody>
</table>
<div class="shadow hide">
<div class="mode">
<p>主机名：<input type="text" name="hostname"></p>
<p>端口号：<input type="text" name="port"></p>
<p> 密 码：<input type="text" name="password"></p>
<input type="button" onclick="hideMode()" value="取消">
<input type="button" onclick="confirm()" value="确定添加">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
function showMode() {
$(".shadow").removeClass("hide");
}
function hideMode() {
$(".shadow").addClass("hide");
$(".mode input[type='text']").val("");
}
function confirm() {
//创建行
var tr = document.createElement("tr");
//行号
var td = document.createElement("td");
td.innerText= "x";
$(tr).append(td);
$(".mode input[type='text']").each(function () {
var td = document.createElement("td");
td.innerText= $(this).val();
$(tr).append(td);
console.log(td);
});
$("#tb").append(tr);
hideMode();
}
$(".del").click(function () {
$(this).parent().parent().remove();
});
$(".edit").click(function () {
showMode();
// 获取本行的内容
var tds = $(this).parent().prevAll();
tds.each(function(){
// 获取属性值
var target = $(this).attr("target");
// 获取内容
var text = $(this).text();
$(".mode input[name="+ target +"]").val(text);
})
})
</script>
</body>
</html>添加删除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加删除元素</title>
</head>
<body>
<input type="text" name="inputBox">
<input type="button" name="add" value="增加">
<input type="button" name="remove" value="删除">
<input type="button" name="empty" value="清除">
<input type="button" name="clone" value="复制">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$("input[name='add']").click(function () {
var value = $("input[name='inputBox']").val();
var html = "<li>" + value +"</li>";
$("ul").append(html);
});
$("input[name='remove']").click(function () {
var index = $("input[name='inputBox']").val();
$("ul").children().eq(index).remove();
});
$("input[name='empty']").click(function () {
var index = $("input[name='inputBox']").val();
$("ul").children().eq(index).empty();
});
$("input[name='clone']").click(function () {
var index = $("input[name='inputBox']").val();
var tag = $("ul").children().eq(index).clone();
$("ul").append(tag);
})
</script>
</body>
</html>点赞效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点赞效果</title>
<style>
.container{
width:700px;
margin: 0 auto;
border: 1px solid #9d9d9d;
}
.item{
position: relative;
height: 100px;
width:30px;
margin-left: 20px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"><span>赞</span></div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$(".item").click(function () {
addFavor(this);
console.log(this);
});
function addFavor(self) {
//Dom对象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
var tag = document.createElement("span");
// 设置css属性
$(tag).text("+1");
$(tag).css("color", "green");
$(tag).css("position", "absolute");
$(tag).css("fontSize", fontSize + "px");
$(tag).css("right", right + "px");
$(tag).css("top", top + "px");
$(tag).css("opacity", opacity); //透明度
$(self).append(tag);
//动态效果
var obj = setInterval(function () {
fontSize = fontSize + 10;
top = top -10;
right = right - 10;
opacity = opacity - 0.1;
$(tag).css("fontSize", fontSize + "px");
$(tag).css("right", right + "px");
$(tag).css("top", top + "px");
$(tag).css("opacity", opacity);
// 移除标签
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
}
}, 50);
}
</script>
</html>编辑框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编辑框</title>
</head>
<body>
<input class="edit" type="button" value="编辑">
<input class="confirm" type="button" value="确认">
<table border="1px" id="tb">
<thead>
<tr>
<th>序号</th>
<th>ip</th>
<th>port</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>10.0.0.1</td>
<td>3301</td>
</tr>
<tr>
<td>2</td>
<td>10.0.0.2</td>
<td>3302</td>
</tr>
<tr>
<td>3</td>
<td>10.0.0.3</td>
<td>3303</td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 编辑模式
$(".edit").click(function(){
$(this).attr("disabled", true); //编辑不可用
$("#tb").find("td").each(function(){
var v = $(this).text();
$(this).text(""); //清空文本
var input = document.createElement("input");
$(input).attr("type", "text").val(v);
$(this).append(input);
})
})
// 保存
$(".confirm").click(function(){
$(".edit").removeAttr("disabled"); //编辑可用
console.log($(".edit")[0]);
$("#tb").find("td").each(function(){
var v = $(this).children().val()
$(this).children().remove();
$(this).text(v);
})
})
})
</script>
</body>
</html>表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
.error{
color:red;
}
form div{
line-height: 36px;
}
</style>
</head>
<body>
<form action="http://www.baidu.com" method="get" id="f1">
<div><input type="text" name="username"></div>
<div><input type="password" name="password"></div>
<div><input type="text" name="email"></div>
<div><input type="text" name="phoneNumber"></div>
<div><input type="submit" value="提交"></div>
</form>
<script src="jquery-3.3.1.js"></script>
<script>
$(":submit").click(function(){
$(".error").remove(); //清空验证
var flag = true; //作为全局标记
console.log(this);
$("#f1").find("input[type='text'],input[type='password']").each(function () {
var v = $(this).val();
console.log(v);
if(v.length <= 0){
flag = false;
//添加错误提示
var tag = document.createElement("span");
tag.innerText = "必填";
tag.className = "error";
$(this).after(tag);
}
});
return flag;
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端学习笔记--jQuery--基础知识--事件篇
- 前端学习笔记--jQuery--基础知识--样式篇
- 前端学习笔记--jQuery--基础知识--动画篇
- 前端学习笔记--jQuery--基础知识--DOM篇
- 前端基础快速学习- JQuery
- 前端知识学习（1） 基础概念和相关知识
- 前端学习——css基础知识与html模板
- 前端学习之CSS基础知识（2）
- 零基础学习web前端开发需要学习的前端知识
- jQuery学习笔记 - 基础知识扫盲入门篇
- jQuery 学习一(基础知识)
- 前端学习之路css3(02)-基础知识
- 前端学习之路css3(03)-基础知识
- 学习jquery-Jquery基础知识
- jquery学习手记（9）事件基础知识
- Web前端学习①Web基础知识
- iOS转前端之HTML基础知识学习
- 知识学习——jQuery基础学习
- jQuery入门基础知识学习指南
- jQuery学习总结之基础知识----持续更新中