jQuery
一、jQuery
jQuery的基础语法：$(selector).action()
语法规则：$("xxx")
参考：http://jquery.cuishifeng.cn/
二、选择器
1、基本选择器
- ID选择器 $("#id的值")
- 类选择器（class） $(".class的值")
- 标签选择器(html标签) $("标签的名字")
- 所有标签 $("*")
- 组合选择器 $("xx,xxx")
2、层级选择器
- 从一个标签的子子孙孙去找 $("父亲 子子孙孙")
- 从一个标签的儿子里面找 $("父亲>儿子标签")
- 找紧挨着的标签 $("标签+下面紧挨着的那个标签")
- 找后面所有同级的 $(".outer~div")
3、筛选器
- 写在引号里面的
$(" :first")
$(" :not('')")
$(" :even")
$(" :odd")
$(" :eq")
$(" :gt")
$(" :last")
$(" :focus")
内容
$(" :contains")
$(" :empty")
$(" :has('')")
$(" :parent") ***** 区别于$("").parent()
可见性
$(" :hidden)
$(" :visible")
属性
input[name] --> 有name属性的input
input[type='password'] --> 类型是password的input标签
表单
:input
:password
:checkbox
:radio
:submit
:button
:image
:file
表单对象属性
:enable
:disable
:checked
:selected
- 写在信号外面当方法用的
过滤
$("").first()
$("").parent()
$("").eq()
.hasClass()
查找
.children()
.find()
.next()
.nextAll()
.nextUntil()
.parent()
.parents()
.parentsUntil()
.prev()
.prevAll()
.prevUntil()
.siblings()
4、插找筛选器
查找子标签： $("div").children(".test") $("div").find(".test") 向下查找兄弟标签： $(".test").next() $(".test").nextAll()
$(".test").nextUntil() 向上查找兄弟标签： $("div").prev() $("div").prevAll()
$("div").prevUntil() 查找所有兄弟标签： $("div").siblings()
查找父标签： $(".test").parent() $(".test").parents()
$(".test").parentUntil()
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例一</title>
<style>
.c99 {
color: red;
}
.c11 {
height: 100px;
width: 100px;
border-radius: 50%;
border: 1px solid #cccccc;
display: inline-block;
}
.c12 {
background-color: yellow;
}
</style>
</head>
<body>
<div id="i1">哪吒</div>
<div id="i2">
<div id="i0"></div>
<div id="i3">i3</div>
<div id="i4">i4</div>
<div class="c1">.c1</div>
<p>pppppp</p>
<h2>稳住，我们能学会。</h2>
<h2>猥琐发育，别浪。</h2>
<div class="c1">.c1</div>
<div class="c2">.c2</div>
<div>
<div></div>
<div><input type="text" value="222"></div>
<div></div>
</div>
<div id="i7">
<input type="text" value="这是第0个input">
<input class="c1" type="text" value="这是第1个input">
<div>
<p></p>
<input type="text" value="aaa"></div>
<input name="aaa" class="c2" type="text" value="这是第2个input">
<input type="password" value="这是第3个input">
<div id="i8" style="display: none"><p>div下pppppp</p></div>
</div>
<div></div>
<input type="checkbox" value="1" checked>
<input type="checkbox" value="11">
<input type="checkbox" value="111">
<input type="checkbox" value="1111">
<input type="checkbox" value="1111" disabled>
<input type="radio" value="0">
</div>
<div id="i9">
<div>111</div>
<div id="i99">222</div>
<div>333</div>
<div>444</div>
<div id="i555">555</div>
</div>
<div class="c11"></div>
<button id="switch" class="btn btn-default">开关</button>
<script src="jquery-3.2.1.js"></script>
<script>
// id选择器
$("#i1")
// $("#switch")[0].onclick = function () {
// ....
// }
//jQuery绑定事件
$("#switch").on("click", function () {
// 找灯泡
$(".c11").toggleClass("c12");
})
</script>
</body>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery选择器筛选器练习</title>
<!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<!--导航栏开始-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">哪吒</a></li>
<li><a id="i1" href="#">Egon</a></li>
<li><a class="c1" href="#">日天</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Alex</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--导航栏结束-->
<div class="container">
<div class="jumbotron">
<div id="j1" class="container">
<h1 class="c1">学厨师，去新东方。</h1>
<h1 class="c1">学Python，就来老男孩。</h1>
<p id="p1"><a class="btn btn-primary btn-lg" href="#" role="button">查看更多</a></p></div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Egon</td>
<td>杠娘</td>
<td>
<button class="btn btn-warning">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<th>2</th>
<td>Yuan</td>
<td>日天</td>
<td>
<button class="btn btn-warning">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
<tr id="tr3">
<th>3</th>
<td>八级哥</td>
<td>英语</td>
<td>
<button class="btn btn-warning">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<form id="f1">
<div class="form-group">
<label for="exampleInputEmail1">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">上传头像</label>
<input type="file" id="exampleInputFile">
<p class="help-block">只支持img格式。</p>
</div>
<button id="btnSubmit" type="submit" class="btn btn-default">提交</button>
</form>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="checkbox-wrapper">
<div class="panel panel-info">
<div class="panel-heading">jQuery学习指南</div>
<div id="my-checkbox" class="panel-body">
<div class="checkbox">
<label>
<input type="checkbox" value="0">
jQuery一点都不难
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="1" checked>
jQuery一学就会
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="2">
jQuery就要多练
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="3" disabled>
jQuery学不好
</label>
</div>
</div>
</div>
</div>
<hr>
<div class="radio-wrapper">
<div class="panel panel-info">
<div class="panel-heading">我来老男孩之后...</div>
<div class="panel-body">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
我要上课玩手机
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
我要上课好好听
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<h2>练习题：</h2>
<ol id="o1">
<li>找到本页面中id是<code>i1</code>的标签</li>
<li>找到本页面中所有的<code>h2</code>标签</li>
<li>找到本页面中所有的<code>input</code>标签</li>
<li>找到本页面所有样式类中有<code>c1</code>的标签</li>
<li>找到本页面所有样式类中有<code>btn-default</code>的标签</li>
<li>找到本页面所有样式类中有<code>c1</code>的标签和所有<code>h2</code>标签</li>
<li>找到本页面所有样式类中有<code>c1</code>的标签和id是<code>p3</code>的标签</li>
<li>找到本页面所有样式类中有<code>c1</code>的标签和所有样式类中有<code>btn</code>的标签</li>
<p id="p2" class="divider"></p>
<li>找到本页面中<code>form</code>标签中的所有<code>input</code>标签</li>
<li>找到本页面中<code>label</code>标签下的<code>input</code>标签</li>子标签
<li>找到本页面中紧挨着<code>label</code>标签的<code>input</code>标签</li>
<li>找到本页面中id为<code>p2</code>的标签后面所有和它同级的<code>li</code>标签</li>
<p id="p3" class="divider"></p>
<li>找到id值为<code>f1</code>的标签下面的第一个input标签</li>
<li>找到id值为<code>my-checkbox</code>的标签下面最后一个input标签</li>
<li>找到id值为<code>my-checkbox</code>的标签下面没有被选中的那个input标签</li>
<li>找到所有含有<code>input</code>标签的<code>label</code>标签</li>
</ol>
</div>
</div>
</div>
<script src="jquery3_0_0.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
三、属性
1. 属性
如果你的选择器选出了多个对象，那么默认只会返回第一个的属性
attr(name|pro|key,val|fn)
- 一个参数 获取属性的值
- 两个参数 设置属性的值
- 点击加载图片
removeAttr(name)
- 删除属性的值
prop(n|p|k,v|f) 属性的返回值是布尔类型
removeProp(name)
- 删除属性的值
- 例子
全选、反选、取消的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选取消</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<button id="all" class="btn-btn-default">全选</button>
<button id="cancel" class="btn-btn-default">取消</button>
<button id="reverse" class="btn-btn-default">反选</button>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
// 全选
$("#all").on("click", function () {
// 统一的操作
$(":checkbox").prop("checked", true);
})
//取消
$("#cancel").on("click", function () {
$(":checkbox").prop("checked", false);
})
// // 反选
$("#reverse").on("click", function () {
// 取出所有的checkbox
var checkboxEles = $(":checkbox");
// 翔哥的耻辱
// checkboxEles.prop("checked", !(checkboxEles.prop("checked")))
// 要循环checkbox
// 选中的就取消
// 没选中的就选中
checkboxEles.each(function () {
var thisCheckbox = $(this); // 在教室里走的那个人
var isChecked = thisCheckbox.prop("checked"); // 是否选中
// 方法一：判断的方式
if (isChecked){
// 取消选中
thisCheckbox.prop("checked", false);
}else {
// 选中
thisCheckbox.prop("checked", true);
}
// // 方法二：直接取反的方式
// thisCheckbox.prop("checked", !isChecked);
})
})
// $("#reverse").on("click", function () {
// $(":checked").prop("checked", false);
// $(":not(:checked)").prop("checked", true);
// })
</script>
</body>
</html>
- 循环
each
- $.each(数组/对象, function(i, v){})
- $("div").each(function(){})
CSS 类
addClass(class|fn) addClass("has-error")
removeClass([class|fn])
toggleClass(class|fn[,sw]) 切换，有就去掉，没有就加上
灯泡的例子
HTML代码/文本/值
没有参数就是获取对应的值
有参数就是设置对应的值
html([val|fn])
加 html标签
.html("<span>老师，我好饿。</span>")
text([val|fn])
加文本
.text("老师，我好饿。")
val([val|fn|arr])
- input
- 获取的是输入的内容
- checkbox
- 获取的是value值
- select
- 单选 就是获取值
- 多选 得到的是一个数组，设置的时候也要是数组
四、事件绑定
//语法: 标签对象.事件(函数)
eg: $("p").click(function(){})
五、事件委派
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选取消</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<button id="all" class="btn-btn-default">全选</button>
<button id="cancel" class="btn-btn-default">取消</button>
<button id="reverse" class="btn-btn-default">反选</button>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
// 全选
$("#all").on("click", function () {
// 统一的操作
$(":checkbox").prop("checked", true);
})
//取消
$("#cancel").on("click", function () {
$(":checkbox").prop("checked", false);
})
// // 反选
$("#reverse").on("click", function () {
// 取出所有的checkbox
var checkboxEles = $(":checkbox");
// 翔哥的耻辱
// checkboxEles.prop("checked", !(checkboxEles.prop("checked")))
// 要循环checkbox
// 选中的就取消
// 没选中的就选中
checkboxEles.each(function () {
var thisCheckbox = $(this); // 在教室里走的那个人
var isChecked = thisCheckbox.prop("checked"); // 是否选中
// 方法一：判断的方式
if (isChecked){
// 取消选中
thisCheckbox.prop("checked", false);
}else {
// 选中
thisCheckbox.prop("checked", true);
}
// // 方法二：直接取反的方式
// thisCheckbox.prop("checked", !isChecked);
})
})
// $("#reverse").on("click", function () {
// $(":checked").prop("checked", false);
// $(":not(:checked)").prop("checked", true);
// })
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选取消</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<button id="all" class="btn-btn-default">全选</button>
<button id="cancel" class="btn-btn-default">取消</button>
<button id="reverse" class="btn-btn-default">反选</button>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
// 全选
$("#all").on("click", function () {
// 统一的操作
$(":checkbox").prop("checked", true);
})
//取消
$("#cancel").on("click", function () {
$(":checkbox").prop("checked", false);
})
// // 反选
$("#reverse").on("click", function () {
// 取出所有的checkbox
var checkboxEles = $(":checkbox");
// 翔哥的耻辱
// checkboxEles.prop("checked", !(checkboxEles.prop("checked")))
// 要循环checkbox
// 选中的就取消
// 没选中的就选中
checkboxEles.each(function () {
var thisCheckbox = $(this); // 在教室里走的那个人
var isChecked = thisCheckbox.prop("checked"); // 是否选中
// 方法一：判断的方式
if (isChecked){
// 取消选中
thisCheckbox.prop("checked", false);
}else {
// 选中
thisCheckbox.prop("checked", true);
}
// // 方法二：直接取反的方式
// thisCheckbox.prop("checked", !isChecked);
})
})
// $("#reverse").on("click", function () {
// $(":checked").prop("checked", false);
// $(":not(:checked)").prop("checked", true);
// })
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>图片加载</title>
<style>
img{width: 300px;height:300px}
</style>
</head>
<body>
<img src="xxx.png" alt="埃菲尔铁塔" title="埃菲尔铁塔" data-src="0.jpg">
<img src="xxx.png" alt="日落"title="日落" data-src="b.jpg">
<script src="jquery3_0_0.js"></script>
<script>
$("img").on("click",function () {
$(this).attr("src",$(this).attr("data-src"))
})
//---给图片加样式
// $("img").attr({src:"0.jpg",alt:"埃菲尔铁塔",title:"埃菲尔铁塔"})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击加载图片</title>
<style>
img{
height: 600px;
width: 800px;
}
</style>
</head>
<body>
<img src="xxx.png" alt="美女" data-src="Bootstrap_i1.png">
<img src="xxx.png" alt="美女" data-src="Bootstrap_i3.png">
<img src="xxx.png" alt="美女" data-src="Bootstrap_i4.png">
<script src="jquery-3.2.1.js"></script>
<script>
$("img").on("click", function () {
var imgPath = $(this).attr("data-src");
$(this).attr("src", imgPath)
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.container {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-9 col-md-offset-2">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
添加学生信息
</button>
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tbody">
<div class="row">
<tr>
<td class="col-md-3">egon</td>
<td class="col-md-3">33</td>
<td class="col-md-3">男</td>
<td>
<button class="btn btn-success edit">编辑</button>
<button class="btn btn-danger del">删除</button>
</td>
</tr>
</div>
<tr >
<td>alex</td>
<td>33</td>
<td>男</td>
<td>
<button class="btn btn-success edit">编辑</button>
<button class="btn btn-danger del">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="usernaem">姓名</label>
<input type="text" class="form-control item" id="usernaem" placeholder="usernaem">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" class="form-control item" id="age" placeholder="age">
</div>
<div class="form-group">
<label for="gender">性别</label>
<input type="text" class="form-control item" id="gender" placeholder="gender">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary addKeepBtn">Save changes</button>
</div>
</div>
</div>
</div>
<script>
var addKeepBtn=document.getElementsByClassName("addKeepBtn")[0];
var tbody=document.getElementsByClassName("tbody")[0];
var eles_input=document.getElementsByClassName("item");
function parseDom(str){
var ele_table=document.createElement("table");
ele_table.innerHTML=str;
return ele_table.firstElementChild.firstElementChild
}
// 添加学生的保存操作
addKeepBtn.onclick=function () {
var arr=[];
var ele_tr=document.createElement("tr");// <td></td>
for(var i=0;i<eles_input.length;i++){
// console.log(eles_input[i].value);
arr.push(eles_input[i].value);
}
console.log(arr); // ["11", "22", "33"]
s='<tr ><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td>'+arr[2]+'</td> <td class="copy"> <button class="btn btn-success edit">编辑</button> <button class="btn btn-danger del">删除</button> </td> </tr>'
console.log(s);
var tr_dom=parseDom(s);
console.log(tr_dom);
tbody.appendChild(tr_dom);
// 关闭model对话框
$("#myModal").modal("hide");
// $("#myModal").modal("show")
};
// 删除操作
tbody.addEventListener("click",function (e) {
if(e.target.className=="btn btn-danger del"){
console.log(e.target.parentElement.parentElement)
tbody.removeChild(e.target.parentElement.parentElement)
}
});
// 编辑操作
tbody.addEventListener("click",function (e) {
if(e.target.className=="btn btn-success edit"){
// $("#myModal").modal("show")
// 查找所有编辑文本
eles_td=e.target.parentElement.parentElement.children;
console.log(eles_td);
for(var i=0;i<eles_td.length-1;i++){
console.log(eles_td[i]); // td标签
eles_td[i].innerHTML='<input type="text" value='+eles_td[i].innerHTML+'>'
}
e.target.innerHTML="保存";
e.target.className="btn btn-info saveBtn"
}
else if(e.target.className=="btn btn-info saveBtn"){
eles_td=e.target.parentElement.parentElement.children;
for(var i=0;i<eles_td.length-1;i++){
console.log(eles_td[i]); // td标签
eles_td[i].innerHTML=eles_td[i].firstElementChild.value
}
e.target.innerHTML="编辑";
e.target.className="btn btn-success edit"
}
})
</script>
</body>
<html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>懒加载示例</title> </head> <body> <div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="http://pic.pptbz.com/pptpic/201511/2015110586122945.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="http://img1.bitautoimg.com/bitauto/2012/08/10/3aa9e774-574b-4165-b59a-db4f243bdc5a.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="http://dl.bizhi.sogou.com/images/2014/01/09/485496.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="jquery.lazyload.min.js"></script> <script> $("img.lazy").lazyload({ effect: "fadeIn", event: "click" }) </script> </body>
五. CSS
.css()
- .css("color") -> 获取color css值
- .css("color", "#ff0000") -> 设置值
- .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值
- .css(["color", "border"]) -> 获取多个值
<head>
<meta charset="UTF-8">
<title>CSS示例</title>
<style>
#d2 {
height: 100px;
width: 100px;
background-color: red;
position: relative;
left: 200px;
top: 200px;
}
#d3 {
height: 100px;
width: 100px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="d1">111</div>
<div id="d2">
<div>
<div id="d3"></div>
</div>
</div>
<script src="jquery-3.2.1.js"></script>
</body>
.offset
- 获取相对位置
- 比较的对象是 html
.position
- 获取相对已经定位的父标签的位置
- 比较的是最近的那个做过定位的祖先标签
scrollTop([val])
- 返回顶部
scrollLeft([val])
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
.c1 {
height: 100px;
}
.hide {
display: none;
}
#b1 {
position: fixed;
right: 15px;
bottom: 15px;
}
</style>
</head>
<body>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<div class="c1">5</div>
<div class="c1">6</div>
<div class="c1">7</div>
<div class="c1">8</div>
<div class="c1">9</div>
<div class="c1">10</div>
<div class="c1">11</div>
<div class="c1">12</div>
<div class="c1">13</div>
<div class="c1">14</div>
<div class="c1">15</div>
<div class="c1">16</div>
<div class="c1">17</div>
<div class="c1">18</div>
<div class="c1">19</div>
<div class="c1">20</div>
<div class="c1">21</div>
<div class="c1">22</div>
<div class="c1">23</div>
<div class="c1">24</div>
<div class="c1">25</div>
<div class="c1">26</div>
<div class="c1">27</div>
<div class="c1">28</div>
<div class="c1">29</div>
<div class="c1">30</div>
<div class="c1">31</div>
<div class="c1">32</div>
<div class="c1">33</div>
<div class="c1">34</div>
<div class="c1">35</div>
<div class="c1">36</div>
<div class="c1">37</div>
<div class="c1">38</div>
<div class="c1">39</div>
<div class="c1">40</div>
<div class="c1">41</div>
<div class="c1">42</div>
<div class="c1">43</div>
<div class="c1">44</div>
<div class="c1">45</div>
<div class="c1">46</div>
<div class="c1">47</div>
<div class="c1">48</div>
<div class="c1">49</div>
<div class="c1">50</div>
<div class="c1">51</div>
<div class="c1">52</div>
<div class="c1">53</div>
<div class="c1">54</div>
<div class="c1">55</div>
<div class="c1">56</div>
<div class="c1">57</div>
<div class="c1">58</div>
<div class="c1">59</div>
<div class="c1">60</div>
<div class="c1">61</div>
<div class="c1">62</div>
<div class="c1">63</div>
<div class="c1">64</div>
<div class="c1">65</div>
<div class="c1">66</div>
<div class="c1">67</div>
<div class="c1">68</div>
<div class="c1">69</div>
<div class="c1">70</div>
<div class="c1">71</div>
<div class="c1">72</div>
<div class="c1">73</div>
<div class="c1">74</div>
<div class="c1">75</div>
<div class="c1">76</div>
<div class="c1">77</div>
<div class="c1">78</div>
<div class="c1">79</div>
<div class="c1">80</div>
<div class="c1">81</div>
<div class="c1">82</div>
<div class="c1">83</div>
<div class="c1">84</div>
<div class="c1">85</div>
<div class="c1">86</div>
<div class="c1">87</div>
<div class="c1">88</div>
<div class="c1">89</div>
<div class="c1">90</div>
<div class="c1">91</div>
<div class="c1">92</div>
<div class="c1">93</div>
<div class="c1">94</div>
<div class="c1">95</div>
<div class="c1">96</div>
<div class="c1">97</div>
<div class="c1">98</div>
<div class="c1">99</div>
<div class="c1">100</div>
<button id="b1" class="hide">屠龙宝刀，点击就送</button>
<script src="jquery-3.2.1.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b1").removeClass("hide");
}else {
$("#b1").addClass("hide");
}
$("#b1").on("click", function () {
$(window).scrollTop(0);
});
})
</script>
</body>
</html>
尺寸：
height([val|fn])
- 元素的高度
width([val|fn])
innerHeight()
- 带padding的高度
innerWidth()
outerHeight([soptions])
- 在innerHeight的基础上再加border的高度
outerWidth([options])
html lang="en">
<head>
<meta charset="UTF-8">
<title>尺寸</title>
<style>
.c1 {
height: 100px;
width: 80px;
background-color: red;
}
</style>
</head>
<body>
<div id="d1" class="c1"></div>
<script src="jquery-3.2.1.js"></script>
</body>
</html>
3. 文档操作
内部插入（加粗）
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的后面
html lang="en">
<head>
<meta charset="UTF-8">
<title>克隆</title>
</head>
<body>
<button class="c1">一刀999</button>
<script src="jquery-3.2.1.js"></script>
<script>
$(".c1").on("click", function () {
$(this).clone(true).insertAfter($(this));
})
</script>
</body>
</html>
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])
- 剪切 多保存在变量中，方便再次使用
var tmp = $("").detach()
复制
clone([Even[,deepEven]])
- true参数，加上true，事件都克隆
- 一刀999的例子
4. 动画
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<button id="c1">Go</button>
<button id="c2">STOP!</button>
<div class="block"></div>
<script src="jquery-3.2.1.js"> </script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
// 开始动画
$("#c1").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#c2").click(function(){
$(".block").stop();
});
</script>
</body>
</html>
基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
滑动
实际上改变的是元素的高度
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<!--<style>-->
<!--#panel,#flip-->
<!--{-->
<!--padding:5px;-->
<!--text-align:center;-->
<!--background-color:#e5eecc;-->
<!--border:solid 1px #c3c3c3;-->
<!--}-->
<!--#panel-->
<!--{-->
<!--padding:50px;-->
<!--display:none;-->
<!--}-->
<!--</style>-->
<!--</head>-->
<!--</style>-->
</head>
<body>
<!--<button id="stop">停止滑动</button>-->
<!--<div id="flip">点我向下滑动面板</div>-->
<!--<div id="panel">Hello world!</div>-->
<div>123666
<p>12255</p>
<p>12255</p>
<p>12255</p>
</div>
<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
//$(document).ready(function(){
// $("#flip").click(function(){
// $("#panel").slideDown(5000);
// });
// $("#stop").click(function(){
// $("#panel").stop();
// });
//});
</script>
</body>
</html>
淡入淡出
实际上改变的是元素的透明度
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
- 淡出到0.66透明度
fadeToggle([s,[e],[fn]])
- .fadeToggle(3000, function () {
alert("真没用3");
});
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画示例</title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<img src="http://www.iyi8.com/uploadfile/2017/0523/20170523114637271.jpg" alt="">
<button id="b1">召唤</button>
<button id="b2">淡出</button>
<button id="b3">淡入</button>
<button id="b4">淡出到0.66</button>
<button id="b5">淡入淡出</button>
<button id="b6">边框变大</button>
<script src="jquery-3.2.1.js"></script>
<script>
$("#b1").on("click", function () {
// $("img").show();
$("img").toggle();
})
// 淡出
$("#b2").on("click", function () {
$("img").fadeOut("fast");
})
// 淡入
$("#b3").on("click", function () {
// 掌握了增加时间的方法
$("img").fadeIn(3000, function () {
alert("真没用");
});
})
// 淡出到0.66透明度
$("#b4").on("click", function () {
// 掌握了新知识
$("img").fadeTo(3000, 0.66, function () {
alert("真没用2");
});
})
// 淡入淡出
$("#b5").on("click", function () {
$("img").fadeToggle(3000, function () {
alert("真没用3");
});
})
// 动画-图片变小
$("#b6").on("click", function () {
$("img").animate({
width: "100px",
height: "60px",
}, 3000, function () {
// 这是回调函数
alert(123);
});
})
</script>
</body>
</html>
自定义
animate(p,[s],[e],[fn])1.8*
- css属性值都可以设置
- 女朋友变小（漏气）
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
#b1{position: fixed;right: 10px;bottom: 10px; background-color: #080808;
color: white;}
.c1{height: 100px;background-color: silver}
.hide{display:none;}
</style>
</head>
<body>
<div class="c2">
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<div class="c1">5</div>
<div class="c1">6</div>
<div class="c1">7</div>
<div class="c1">8</div>
<div class="c1">9</div>
<div class="c1">10</div>
<div class="c1">11</div>
<div class="c1">12</div>
<div class="c1">13</div>
<div class="c1">14</div>
<div class="c1">15</div>
<div class="c1">16</div>
<div class="c1">17</div>
<div class="c1">18</div>
<div class="c1">19</div>
<div class="c1">20</div>
<div class="c1">21</div>
<div class="c1">22</div>
<div class="c1">23</div>
<div class="c1">24</div>
<div class="c1">25</div>
<div class="c1">26</div>
<div class="c1">27</div>
<div class="c1">28</div>
<div class="c1">29</div>
<div class="c1">30</div>
<div class="c1">31</div>
<div class="c1">32</div>
<div class="c1">33</div>
<div class="c1">34</div>
<div class="c1">35</div>
<div class="c1">36</div>
<div class="c1">37</div>
<div class="c1">38</div>
<div class="c1">39</div>
<div class="c1">40</div>
<div class="c1">41</div>
<div class="c1">42</div>
<div class="c1">43</div>
<div class="c1">44</div>
<div class="c1">45</div>
<div class="c1">46</div>
<div class="c1">47</div>
<div class="c1">48</div>
<div class="c1">49</div>
<div class="c1">50</div>
<div class="c1">51</div>
<div class="c1">52</div>
<div class="c1">53</div>
<div class="c1">54</div>
<div class="c1">55</div>
<div class="c1">56</div>
<div class="c1">57</div>
<div class="c1">58</div>
<div class="c1">59</div>
<div class="c1">60</div>
<div class="c1">61</div>
<div class="c1">62</div>
<div class="c1">63</div>
<div class="c1">64</div>
<div class="c1">65</div>
<div class="c1">66</div>
<div class="c1">67</div>
<div class="c1">68</div>
<div class="c1">69</div>
<div class="c1">70</div>
<div class="c1">71</div>
<div class="c1">72</div>
<div class="c1">73</div>
<div class="c1">74</div>
<div class="c1">75</div>
<div class="c1">76</div>
<div class="c1">77</div>
<div class="c1">78</div>
<div class="c1">79</div>
<div class="c1">80</div>
<div class="c1">81</div>
<div class="c1">82</div>
<div class="c1">83</div>
<div class="c1">84</div>
<div class="c1">85</div>
<div class="c1">86</div>
<div class="c1">87</div>
<div class="c1">88</div>
<div class="c1">89</div>
<div class="c1">90</div>
<div class="c1">91</div>
<div class="c1">92</div>
<div class="c1">93</div>
<div class="c1">94</div>
<div class="c1">95</div>
<div class="c1">96</div>
<div class="c1">97</div>
<div class="c1">98</div>
<div class="c1">99</div>
<div class="c1">100</div>
</div>
<button id="b1" class="hide">返回顶部</button>
<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
$(window).scroll(function () {
if($(window).scrollTop()>100){
$("#b1").removeClass("hide");
}else{
$("#b1").addClass("hide");
}
$("#b1").on("click",function () {
$(window).scrollTop(0);
});
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录校验</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<style>
.c1 {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 c1 col-md-offset-4">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" aria-describedby="helpBlock1">
<span id="helpBlock1" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script>
$("form button").on("click", function () {
// 先清空状态
$("form .form-group").removeClass("has-error");
$("form span").text("");
// each循环
$("form input").each(function () {
// 做判断
if ($(this).val().length === 0){
// 给他的爸爸加has-error
$(this).parent().parent().addClass("has-error");
// 给span写内容
// 找到我这是什么input --> 找到对应的label的文本内容
var name = $(this).parent().prev().text();
$(this).next().text(name + "不能为空");
return false;
}
});
return false;
});
</script>
</body>
</html>
5. 事件处理
之前绑定事件的方式：
1. 在标签里：onclick="clickMe();"; function clickMe() {}
2. ele.onclick = func1; function func1(){.....}
2. ele.onclick = function(){}
3. ele.addEventListener("click", function(){})
jQuery绑定事件的方式：
1. $(ele).on("click", function(){})
$(ele).click(function(){})
$(ele).focus(function(){})
2. $("tbody").delegate(".btn-warning", "click", function(){})
3. $("tbody").on("click",".btn-warning",function(){}) 我们要用的事件委派
六. 常用事件
blur([[data],fn])
focus([[data],fn])
- 获取焦点
- 搜索框例子
change([[data],fn])
- select
click([[data],fn])
- 点击
dblclick([[data],fn])
- 双击
scroll([[data],fn])
- 滚动
submit([[data],fn])
-提交
<head>
<meta charset="UTF-8">
<title>常用事件示例</title>
</head>
<body>
<input type="text" name="search" value="苹果手机" data-show="">
<button>搜索</button>
<select name="" id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<script src="jquery-3.2.1.js"></script>
<script>
$(":input").focus(function () {
var data = $(this).val();
$(this).val("");
$(this).attr("data-show", data);
});
$(":input").blur(function () {
$(this).val($(this).attr("data-show"));
});
$(":input").data("items", ["苹果手机", "苹果电脑", "烟台红富士"]);
// change
$("#s1").change(function () {
console.log($(this).val());
});
</script>
</body>
<head>
<meta charset="UTF-8">
<title>标签上绑定事件</title>
</head>
<body>
<button>点我</button>
</body>
<script>
function func1() {
alert(111);
}
var b = document.getElementsByTagName("button")[0];
// b.onclick = func1;
b.onclick = function () {
func1();
}
</script>
</html>
文档树加载完之后绑定事件（绝大部分情况下）
$(document).ready(function(){
// 绑定事件的代码
....
})
简写：
$(function($){
// 绑定事件的代码
....
});
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://v3.bootcss.com/favicon.ico">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="./Dashboard_files/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./Dashboard_files/dashboard.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]>
<script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="Dashboard_files/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.menu {
margin: 0 -20px;
border-bottom: 1px solid #336699;
}
.head {
padding: 15px;
}
.my-table-tool {
margin-bottom: 15px;
}
.menu .nav-sidebar > li > a {
padding-right: 40px;
padding-left: 40px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://v3.bootcss.com/examples/dashboard/#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="menu">
<div class="head bg-primary">菜单一</div>
<ul class="nav nav-sidebar">
<li class=""><a href="http://v3.bootcss.com/examples/dashboard/#">Overview <span
class="sr-only">(current)</span></a>
</li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Export</a></li>
</ul>
</div>
<div class="menu">
<div class="head bg-primary">菜单二</div>
<ul class="nav nav-sidebar">
<li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">More navigation</a></li>
</ul>
</div>
<div class="menu">
<div class="head bg-primary">菜单三</div>
<ul class="nav nav-sidebar">
<li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
</ul>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="panel panel-primary">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<!-- 表格上面的按钮-->
<div class="row my-table-tool">
<div class="col-md-12">
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">添加</button>
</div>
</div>
<div class="table-responsive table-bordered">
<table id="t1" class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>邮箱</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>egon@oldboyedu.com</td>
<td>杠娘</td>
<td>
<button class="btn btn-warning">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>yuanhao@oldboyedu.com</td>
<td>日天</td>
<td>
<button class="btn btn-warning">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Alex</td>
<td>alex@oldboyedu.com</td>
<td>吹牛</td>
<td>
<button class="btn btn-warning">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<td>4</td>
<td>GDP</td>
<td>GDP@S6.com</td>
<td>戴帽子</td>
<td>
<button class="btn btn-warning">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!--模态框开始 -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">xxxx</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="modal-username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="modal-username" placeholder="用户名">
</div>
</div>
<div class="form-group">
<label for="modal-email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="modal-email" placeholder="邮箱">
</div>
</div>
<div class="form-group">
<label for="modal-habit" class="col-sm-2 control-label">爱好</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="modal-habit" placeholder="爱好">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">提交</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束 -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="Dashboard_files/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="Dashboard_files/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="Dashboard_files/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="Dashboard_files/ie10-viewport-bug-workaround.js"></script>
<script>
$(document).ready(function () {
$(".head").on("click", function () {
// 兄弟标签 紧挨着的ul标签 隐藏 addClass("hide")
$(this).parent().siblings().children("ul").slideUp();
// 把自己 紧挨着的ul标签显示 removeClass("hide")
// $(this).next().removeClass("hide");
$(this).next().slideToggle();
})
// 删除
// $("td>.btn-danger").click(function () {
// $(this).parent().parent().remove();
// })
$("tbody").on("click", "td>.btn-danger", function () {
$(this).parent().parent().remove();
})
// 编辑
$("tbody").on("click", "td>.btn-warning", function () {
// 弹出模态框
$("#myModal").modal("show");
// 给模态框赋值
// 1.取值
var tds = $(this).parent().parent().children();
var username = tds.eq(1).text();
var email = tds.eq(2).text();
var habit = tds.eq(3).text();
// 给模态框赋值
$("#modal-username").val(username);
$("#modal-email").val(email);
$("#modal-habit").val(habit);
// 把tds保存到myModal的data
$("#myModal").data("tds", tds);
});
// 点击模态框上的提交按钮
$(".modal-footer>.btn-primary").click(function () {
// 1. 隐藏模态框
$("#myModal").modal("hide");
// 2. 更新td的值
// 取值
var username = $("#modal-username").val();
var email = $("#modal-email").val();
var habit = $("#modal-habit").val();
// 赋值
var tds = $("#myModal").data("tds");
if (tds === undefined) {
// 这是添加
// 1.取值
// 2. 在表格添加新的一行tr
var trTmp = document.createElement("tr");
// 第一个td是序号
$(trTmp).append("<td>" + ($("tbody tr").size() + 1) + "</td>");
// 第二个td是username
$(trTmp).append("<td>" + username + "</td>");
$(trTmp).append("<td>" + email + "</td>");
$(trTmp).append("<td>" + habit + "</td>");
// 最后加按钮
$(trTmp).append($("tbody tr:first").find("td").last().clone(true));
$("tbody").append(trTmp);
} else {
tds.eq(1).text(username);
tds.eq(2).text(email);
tds.eq(3).text(habit);
// 清空tds
$("#myModal").removeData("tds");
}
});
// 添加按钮绑定的事件
$(".my-table-tool .btn-success").click(function () {
$("#myModal :input").val("");
})
})
</script>
</body>
</html>
