Python自动化开发学习17-jQuery

jydg · 发表于 2018-8-6 11:09:54

jQuery学习之前
　　jQuery 是 JavaScript 的一个类库，类似 python 中的模块。
　　jQuery在线手册：http://jquery.cuishifeng.cn/
　　官网：http://jquery.com/

版本选择
　　目前jQuery有三个大版本：1.x、 2.x、 3.x。教学推荐使用1.x的最新版本，这个版本兼容IE低版本。
　　去官方页面：http://code.jquery.com/ ，可以获取到最新的版本，我这会用的是 jquery-1.12.4 。

添加jQuery
　　前面说到，jQuery是一个类库，那么在使用之前，就需要将库添加到网页中。用下面的语句把你的jQuery文件添加到网页中：
　　

<script type="text/javascript" src="jquery-1.12.4.min.js"></script>　　

　　这里也可以不使用本地的文件，把src的值替换成互联网上的地址，就是各大网站提供的CDN库，比如下面这个是新浪的：
　　

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>　　

　　使用CDN就不会从你的网站下载这个库文件了，另外，许多用户在访问其他站点时，已经访问过这些大网站，加载过 jQuery 。结果就是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
　　如果觉得用别人的不放心，担心CDN失效，可以用下面的代码，先尝试加载CDN，如果失败再加载本站的库文件：
　　

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>　　
<script>window.jQuery || document.write("<script src='jquery-1.12.4.min.js'><\/script>")</script>
　　

调用jQuery
　　通过 '$' 提示符，或者关键字 jQuery 都可以调用 jQuery。一般都用的是 $ 吧。
　　验证，下面的代码用到了jQuery语句，只有成功添加了jQuery才有显示：
　　

<body>　　
<p>验证 jQuery ...</p>
　　

　　
<script>
　　$("body").append("jQuery添加成功")
　　// jQuery("body").append("jQuery添加成功")
　　
</script>
　　
</body>
　　

jQuery和DOM的关系及互相转换

　　在进行操作之前，都是要先获取到对象，然后操作这个对象。这里先来看一下使用jQuery获取到的对象和通过DOM获取到的对象有什么关系。先打开一个如下的页面，加载了jQuery，并且有一个>　　

<!DOCTYPE html>　　
<html lang="en">
　　
<head>
　　<meta charset="UTF-8">
　　<title>Title</title>
　　<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
　　
</head>
　　
<body>
　　
<p>获取对象</p>
　　
</body>
　　
</html>
　　

　　打开页面后，进入控制台进行操作，获取并查看标签的对象：
　　

> $('#i1')  // jQuery通过id获取对象　　
< [object Object]: {0: Object, context: Object, length: 1, selector: "#i1"}
　　
> document.getElementById('i1')
　　
< <p>获取对象</p>
　　
> $('#i1')[0]  // jQuery对象下标0的内容和DOM对象的一样
　　
< <p>获取对象</p>
　　
> $(document.getElementById('i1'))  // DOM对象也可以转换成jQuery对象
　　
< [object Object]: {0: Object, context: Object, length: 1}
　　

　　总结，jQuery的下标0 和 DOM 获取到的对象是一样的。jQuery对象包含完整的DOM对象。于是我们也知道的两种对象间互相转换的方式：

jQuery对象[0] ：转换成DOM对象
$(DOM对象) ：转换成jQuery对象

　　这样，如果已经有了一个DOM对象，可以转换成jQuery对象后，继续使用jQuery。反之，已经有了一个jQuery对象后，如果只想用原生的语句，也可以转换成DOM对象后，继续使用原生语句。

jQuery-选择器
　　选择器的作用就是通过它可以找到某个或者某些标签。

基本选择器
　　基本的选择器的语法和css里的一样，只要加上引号变成字符串后，放到 $() 的括号中就行了。
　　#id ：通过id匹配
　　element ：通过标签名匹配
　　.class ：通过类名匹配
　　* ：匹配所有元素
　　selector1,selector2,selectorN ：使用多个选择器进行匹配，用逗号隔开，合并匹配到的结果，或的关系。

层级选择器
　　ancestor descendant ：选择器之间用空格分隔，找到前一个选择器下的所有的符合后一个选择器的元素。包括子元素和下面更深层的元素
　　parent > child ：中间是大于号'>'，匹配到父元素后，再匹配它下一级的子元素。这里只匹配一层，这是和上面的区别，上面会匹配所有层级。
　　prev + next ：匹配到前一个选择器之后，在同层以及更深层匹配后一个选择器。
　　prev ~ siblings ：匹配到前一个选择器之后，在他的同层级匹配后一个选择器。匹配兄弟标签。

基本筛选器
　　通过基本选择器和层级选择器，我们就获得了一个也可能是多个符合条件的标签。接下来还可以继续进行筛选：
　　:first ：获取第一个元素
　　:last ：获取最后一个元素
　　:eq(index) ：匹配一个给定索引值的元素
　　上面的是常用的，下面的几个是用的不多的，还是知道一下：
　　:even 和 :odd ：匹配所有索引值为偶数/奇数的元素，从 0 开始计数
　　:gt(index) 和 :lt(index) ：匹配所有大于/小于给定索引值的元素
　　:header ：匹配所有标题元素，就是 h1 到 h6 标签
　　另外还有更多筛选器，是的不多，就不一一列出了。下面的是匹配奇数和偶数的应用，为表格的奇数行和偶数行应用不同的样式，防止看错行：
　　

<!DOCTYPE html>　　
<html lang="en">
　　
<head>
　　<meta charset="UTF-8">
　　<title>Title</title>
　　<style>
　　table thead{
　　background-color: blue;
　　color: white;
　　}
　　table tbody .odd{
　　background-color: gray;
　　}
　　table tbody .even{
　　background-color: white;
　　}
　　</style>
　　
</head>
　　
<body>
　　
<table border="1">
　　<thead>
　　<tr>
　　<th>NAME</th>
　　<th>AGE</th>
　　<th>DEPT.</th>
　　</tr>
　　</thead>
　　<tbody>
　　<tr>
　　<td>Adam</td>
　　<td>22</td>
　　<td>IT</td>
　　</tr>
　　<tr>
　　<td>Bob</td>
　　<td>32</td>
　　<td>IT</td>
　　</tr>
　　<tr>
　　<td>Carmen</td>
　　<td>30</td>
　　<td>Sales</td>
　　</tr>
　　<tr>
　　<td>David</td>
　　<td>40</td>
　　<td>HR</td>
　　</tr>
　　<tr>
　　<td>Edda</td>
　　<td>26</td>
　　<td>HR</td>
　　</tr>
　　</tbody>
　　
</table>
　　
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
　　
<script>
　　$("table tbody tr:odd").addClass('odd');
　　$("table tbody tr:even").addClass('even');
　　
</script>
　　
</body>
　　
</html>
　　

内容和可见性（略）

属性选择器
　　这里提供的方法就是通过属性来查找元素：
　　[attribute] ：匹配含有这个属性的元素，只要属性存在，具体值是多少不关注。
　　更多匹配属性和值的查找方法：
　　[attribute=value] ：匹配给定的属性是某个特定值的元素
　　[attribute!=value] ：匹配所有不含有指定的属性，或者属性不等于特定值的元素。等价于 :not([attribute=value]) ，要匹配含有元素但是值不等的情况，使用 [attribute]:not([attribute=value]) 。
　　[attribute^=value] ：匹配给定的属性是以某些值开始的元素
　　[attribute$=value] ：匹配给定的属性是以某些值结尾的元素
　　[attribute*=value] ：匹配给定的属性是以包含某些值的元素
　　[selector1][selector2][selectorN] ：复合属性选择器，需要同时满足多个条件时使用。与的关系

子元素（略）

表单和表单对象（可忽略）
　　通过基本的选择器也可以查找到对象了，不过jQuery针对表单有一些更简化的语法可以使用。如果遇到表单操作比较多的话，到时候再看看就会了。
　　表单对象里有两个属性需要了解一下：
　　:enabled ：匹配所有可用元素，就是可编辑的元素，比如 ‘<input type="text">’
　　:disabled ：匹配所有不可用元素，和上面相反
　　这里只是和表单相关，并不是只在表单中查找。另外，input标签中，加上disabled之后，也会变成不可编辑：
　　

<body>　　
<input type="text" value="我可以编辑">
　　
<input type="text" value="我不可以编辑" disabled>
　　
</body>
　　

示例：全选、取消、反选
　　之前学习js的时候，通过js方法实现了过相同的功能。这次用jQuery再来做一遍：
　　

<!DOCTYPE html>　　
<html lang="en">
　　
<head>
　　<meta charset="UTF-8">
　　<title>Title</title>
　　
</head>
　　
<body>
　　
<div>
　　<input type="button" value="全选">
　　<input type="button" value="取消">
　　<input type="button" value="反选">
　　
</div>
　　
<div>
　　<table border="1">
　　<thead>
　　<tr>
　　<th>choice</th>
　　<th>name</th>
　　<th>age</th>
　　</tr>
　　</thead>
　　<tbody>
　　<tr>

　　<td><input type="checkbox">　　<td>Adam</td>
　　<td>23</td>
　　</tr>
　　<tr>

　　<td><input type="checkbox">　　<td>Bob</td>
　　<td>24</td>
　　</tr>
　　<tr>

　　<td><input type="checkbox">　　<td>Clark</td>
　　<td>25</td>
　　</tr>
　　</tbody>
　　</table>
　　
</div>
　　
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
　　
<script>
　　$('#btn_chooseAll')[0].onclick = function () {
　　// :checkbox 是匹配所有复选框
　　// 并且这里jQuery也不用我们循环了
　　// prop()方法，可以获取元素的属性，第二个参数是给属性赋值
　　$('#tb :checkbox').prop('checked', true)
　　};
　　$('#btn_cancelAll')[0].onclick = function () {
　　$('#tb :checkbox').prop('checked', false)
　　};
　　$('#btn_reverse')[0].onclick = function () {
　　// each()是jQuery遍历的方法
　　$('#tb :checkbox').each(function () {
　　// 这里把this转换成jQuery对象
　　$(this).prop('checked', !this.checked)
　　})
　　};
　　
</script>
　　
</body>
　　
</html>
　　

　　先提前学习了解一个jQuery属性的知识：
　　prop()属性，这个是专门用来对 checked 和 seleced 做操作的（相对于另一个attr()属性）。基本的用法是，获取值（没设置第二个参数），或者设置值（给第二个参数传值）。
　　$('#tb :checkbox').prop('checked', true) 这句，因为jQuery的方法内置了循环，所以我们直接进行操作，其实是一个批量操作。
　　$(this).prop('checked', !this.checked) 这句，前一个this用到了jQuery的prop，所以把它转成了jQuery对象。后一个this，直接用DOM的方法取值，所以直接用this，即DOM对象。

jQuery-筛选
　　也叫遍历方法或遍历函数。
　　这里的筛选和上面的选择器中的基本筛选器是不同的。所有的选择器的代码都是以字符串的形式写在同一个引号里的，通过选择器，我们可以获取到一个（或一组）jQuery对象。这里是对已有的jQuery对象执行的方法。
　　在jQuery对象的基础上再对元素进行筛选（查找、串联），就需要这里的筛选方法。筛选方法也有参数（可选），这里的参数还是上面学习的选择器。
　　常用的方法如下：

.next() ：获得匹配元素集合中每个元素紧邻的同辈元素。上一个
- .nextAll() ：获得匹配元素集合中每个元素之后的所有同辈元素
- .nextUntil() ：获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.prev() ：获得匹配元素集合中每个元素紧邻的前一个同辈元素。下一个
- .prevAll() ：获得匹配元素集合中每个元素之前的所有同辈元素
- .prevUntil() ：获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
.parent() ：获得当前匹配元素集合中每个元素的父元素。父亲
- .parents() ：获得当前匹配元素集合中每个元素的祖先元素
- .parentsUntil() ：获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。
.children() ：获得匹配元素集合中每个元素的所有子元素。孩子
.siblings() ：获得匹配元素集合中所有元素的同辈元素。兄弟
.find() ：获得当前匹配元素集合中每个元素的后代。子子孙孙

　　其他比较有用的方法：

.eq() ：将匹配元素集合缩减为位于指定索引的新元素。通过索引选择，可以是负数倒着找。
.first() ：将匹配元素集合缩减为集合中的第一个元素。第一个
.last() ：将匹配元素集合缩减为集合中的最后一个元素。最后一个
hasClass(class) ：检查当前的元素是否含有某个特定的类。返回布尔值

示例：左侧管理菜单
　　依然是之前的js，现在通过jQuery重做：
　　

<head>　　<meta charset="UTF-8">
　　<title>Title</title>
　　<style>
　　.hide{
　　display: none;
　　}
　　.item .header{
　　height: 35px;
　　background-color: blue;
　　color: white;
　　line-height: 35px;
　　}
　　</style>
　　
</head>
　　
<body>
　　
<div></div>
　　
<div>
　　<div>
　　<div>菜单1</div>
　　<div>
　　<div>内容1-1</div>
　　<div>内容1-2</div>
　　<div>内容1-3</div>
　　</div>
　　</div>
　　<div>
　　<div>菜单2</div>
　　<div>
　　<div>内容2-1</div>
　　<div>内容2-2</div>
　　<div>内容2-3</div>
　　</div>
　　</div>
　　<div>
　　<div>菜单3</div>
　　<div>
　　<div>内容3-1</div>
　　<div>内容3-2</div>
　　<div>内容3-3</div>
　　</div>
　　</div>
　　
</div>
　　
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
　　
<script>
　　// 绑定事件，函数作为事件方法的参数，这里用一个匿名函数
　　$('.header').mouseover(function () {
　　// 当前标签父标签的所有兄弟标签的子标签中查找'.content'的标签
　　$(this).parent().siblings().children('.content').addClass('hide');
　　// 当前标签的下一个标签，移除'hide'
　　$(this).next().removeClass('hide')
　　// 上面两行可以合并为下面的一行代码，这叫链式编程
　　// $(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide');
　　})
　　
</script>
　　
</body>
　　

　　链式编程：上面的两行代码可以合并为下面的一行代码 $(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide') 。原理是 $(this).next().removeClass('hide') 不只是操作了class属性，它也是也返回值的（可以修改代码把它赋值给一个变量查看变量的值）。这个返回值就是操作的jQuery对象。所以后面是在这个对象的基础上继续进行操作。这个叫做链式编程，jQuery支持链式编程。

jQuery-属性

内容操作
　　下面的三个方法用来操作HTML代码、文本或值。没有参数是获取值，传入参数则是设置值：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

样式操作
　　其实是操作class，一般是通过修改class来改变样式的，有下面3个方法：

addClass() ：向匹配的元素添加指定的类名。
hasClass() ：检查匹配的元素是否拥有指定的类。
toggleClass() ：从匹配的元素中添加或删除一个类。没有就加上，有则删除

　　下面是一个简单的开灯/关灯效果的例子，演示一下 toggleClass() 方法：
　　

<head>　　<meta charset="UTF-8">
　　<title>Title</title>
　　<style>
　　body{
　　background-color: gray;
　　}
　　.c1{
　　height: 48px;
　　width: 120px;
　　line-height: 48px;
　　text-align: center;
　　background-color: white;
　　}
　　.dark{
　　background-color: black;
　　color: white;
　　}
　　</style>
　　
</head>
　　
<body>
　　
<div>开灯/关灯</div>
　　
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
　　
<script>
　　$('.c1').click(function () {
　　$(this).toggleClass('dark')
　　})
　　
</script>
　　
</body>
　　

属性操作
　　传一个参数是获取属性值，传两个参数是设置属性值：

attr() ：设置或返回匹配元素的属性和值。自定义的属性用这个方法
removeAttr() ：从所有匹配的元素中移除指定的属性。
prop() ：设置或返回被选元素的属性和值。单选框和复选框用这个方法，
removeProp() ：移除由 prop() 方法设置的属性。

　　prop() 和 attr() 之间的不同：以复选框为例，attr()返回值是 ‘checked’ （而且1.x和2.x版本都有问题，例子中的值不会改变），而prop()返回值是 true 或 false。测试如下：
　　

<body>　　
<p>
　　<input type="button" value="查看attr()和prop()的值">
　　
</p>
　　
<p>
　　<input type="checkbox" checked="checked">
　　<label for="check1">勾选这个复选框</label>
　　
</body>
　　
</p>
　　
<p>
　　attr('checked')：<span></span>
　　<br>
　　prop('checked'):<span></span>
　　
</p>
　　
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
　　
<script>
　　$('#btn1').click(function () {
　　$('#attr1').text($('#check1').attr('checked'));
　　$('#prop1').text($('#check1').prop('checked'));
　　})
　　
</script>
　　

示例：TAB分页菜单
　　直接上代码：
　　

<head>　　<meta charset="UTF-8">
　　<title>Title</title>
　　<style>
　　.hide{
　　display: none;
　　}
　　.w{
　　width: 700px;
　　margin: 0 auto;
　　}
　　.menu{
　　height: 38px;
　　background-color: gray;
　　}
　　.menu .menu-item{
　　float: left;
　　line-height: 38px;
　　background-color: blue;
　　color: white;
　　padding: 0 10px;
　　cursor: pointer;
　　}
　　.menu .menu-item:hover{
　　background-color: orange;
　　color: black;
　　}
　　.active{
　　text-decoration: underline;
　　}
　　.content{
　　min-height: 100px;
　　background-color: darkseagreen;
　　color: black;
　　}
　　</style>
　　
</head>
　　
<body>
　　
<div>
　　<div>
　　<div target="menu1">菜单一</div>
　　<div target="menu2">菜单二</div>
　　<div target="menu3">菜单三</div>
　　</div>
　　<div>
　　<div target="menu1">内容一</div>
　　<div target="menu2">内容二</div>
　　<div target="menu3">内容三</div>
　　</div>
　　
</div>
　　
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
　　
<script>
　　$('.menu-item').click(function () {
　　// 处理菜单
　　$(this).addClass('active').siblings().removeClass('active');
　　// 处理内容，这里的参数需要字符串，得拼接一下
　　$('.content').children("[target='" + $(this).attr('target') + "']").removeClass('hide')
　　.siblings().addClass('hide');
　　})
　　
</script>
　　
</body>
　　

获取索引-index()
　　.index() ：获得第一个匹配元素相对于其同胞元素的索引位置。
　　写完整是这样的 $(selector).index(element) 。前面的jQuery对象如果是多个元素，则默认获取第一个匹配元素（即第一个元素）的索引。还可以通过为index传入选择器作为参数匹配到符合条件的第一个元素。
　　上面的例子也可以通过用index方法更简单的来实现。不需要设置自定义属性（例子中是target）。首先获取到点击的菜单（即this）的index属性，这也是要显示的内容在content中的索引位置。只需要替换掉上面例子中的最后一句代码，完成的jQuery代码如下：
　　

<script>　　$('.menu-item').click(function () {
　　// 处理菜单
　　$(this).addClass('active').siblings().removeClass('active');
　　// 处理内容
　　$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
　　})
　　
</script>
　　

jQuery-文档处理
　　插入的方法：

append() ：在内部的末尾追加内容
prepend() ：在内部的开头插入内容
before() ：在元素的后面插入内容，外部
after() ：在元素的前面插入内部，外部

　　删除的方法：

remove() ：包括标签一起删除
'empty()' ：只清空内容（中间的标签会删除），保留最外层的标签

　　复制的方法：

clone() ：克隆一个副本

jQuery-CSS
　　这里是通过直接修改元素的style属性，来实现样式的修改：
　　css("propertyname"); ：只传入属性，返回css属性的值
　　css("propertyname","value"); ：依次传入样式的属性和值，设置css属性。
　　css({"propertyname":"value","propertyname":"value",...}); ：传入一个字典作为参数，一次设置多个css属性。

示例：点赞效果
　　点赞之后，会在边上出现 ‘+1’ 的提示。并且提示的文字会逐渐变大、变淡、然后移动。变大通过修改字体（font-size）属性。变淡通过修改透明度（opacity）。移动是在父标签设置 position:> ，然后自己设置 position: absolute; ，然后修改 top 和 left 属性实现上面的效果。这里要有一个定时器，定时修改上面的属性。最后记得要清除定时器和整个新加的标签。代码如下：
　　

<!DOCTYPE html>　　
<html lang="en">
　　
<head>
　　<meta charset="UTF-8">
　　<title>Title</title>
　　<style>
　　.container{
　　border: 1px solid black;
　　line-height: 200px;
　　}
　　.item{

　　position:>　　}
　　</style>
　　
</head>
　　
<body>
　　
<div>
　　<div>
　　<span>赞</span>
　　</div>
　　
</div>
　　
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
　　
<script>
　　$('.item').click(function () {
　　// 新建标签，设置提示的内容
　　var tag = document.createElement('span');
　　$(tag).text('+1'); // .appendTo(this) 最后加上这些代码，效果和下一行一样
　　$(tag).css('color', 'green');
　　// 需要变化的属性值，这里定义到变量里，方便后面修改
　　var fontSize=15, top=0, left=20, opacity=1;
　　// 给标签设置初始的css属性
　　$(tag).css('position', 'absolute').css('top', top+'px').css('left', left+'px');
　　$(tag).css('fontSize', fontSize+'px').css('opacity', opacity);
　　// 将标签添加到页面中
　　$(this).append(tag);
　　// 定时器，定时修改css属性。这里要赋值保存，方便之后清除这个定时器
　　var obj = setInterval(function () {
　　fontSize = fontSize + 5;
　　top = top - 5;
　　left = left +5;
　　opacity = opacity - 0.1;
　　$(tag).css('top', top+'px').css('left', left+'px');
　　$(tag).css('fontSize', fontSize+'px').css('opacity', opacity);
　　// 判断条件理论上可以设置为等于0，但是浮点运算后的结果可能会有一点点的偏差，不是正好等于0
　　// 用小于0 或者小于等于0 的逻辑比较保险
　　if (opacity < 0){
　　// 清除掉定时器
　　clearInterval(obj);
　　// 标签也要清除掉
　　$(tab).remove();
　　}
　　}, 100);
　　})
　　
</script>
　　
</body>
　　
</html>
　　

位置和尺寸
　　滚轮的操作：

$(selector).scrollTop(offset) ：返回或设置匹配元素的滚动条的垂直位置。
$(selector).scrollLeft(offset) ：返回或设置匹配元素的滚动条的水平位置。

　　$(window) 这个对象就是操作浏览器窗口的滚轮。
　　offset 缺省时是获取位置，传入参数时是设置位置，要返回顶部，就设为0。
　　定位的操作：

offset() ：返回第一个匹配元素相对于文档的位置。
position() ：返回第一个匹配元素相对于父元素的位置。

　　返回 top 和 left 两个值。可以再用 .top .left 获取到某个具体的值。
　　尺寸的操作：

height() ：纯高度，就是css的height属性，可以传入参数设置高度。
width() ：宽度，具体同上
innerHeight() ：算上内边距的高度
innerWidth() ：宽度，具体同上
outerHeight() ：算上内边距和边框的高度
outerWidth() ：宽度，具体同上
outerHeight(true) ：算上内边距、边框和外边距的高度
outerWidth(true) ：宽度，具体同上

jQuery-事件绑定
　　常用的几种事件绑定的方式，还可以解除绑定：

$().click() ：触发事件
$().click(function) ：绑定事件
$().bind('click', function) ：另外一种绑定事件的方式。和上面是一类
$().unbind(‘click’) ：解除事件的绑定
$().delegate(childSelector, 'click', function) ：为前面父元素下的子元素绑定事件。这种绑定方式对绑定后才创建的新的子元素一样有效。这个叫委托，事件是委托在父元素上的。
$().undelegate('click') ：解除事件的绑定
$().on('click', function) ：这个是最原生的绑定方式，上面的绑定方式在内部调用的都是这个on。所以这个方法其实还有更多参数选择。
on(events,[selector],[data],fn) ：上面的两种绑定方法（bind 和 delegate）在高版本中都被取缔了，用on都可以替代。
$().off('click') ：解除绑定

阻止事件的发生
　　先来看一下 <a> 标签，点击后页面会跳转。这里可以认为该标签默认就绑定了一个事件。如果给a标签再绑定上一个事件是什么情况呢？实测一下：
　　

<body>　　
<a href="http://blog.51cto.com/steed">走你</a>
　　
<script>
　　function jump(obj) {
　　alert(obj.href);
　　}
　　
</script>
　　
</body>
　　

　　点击后，会先触发我们的事件，然后再执行页面跳转。这里如果给事件一个返回值，就会有不同的效果。如果返回 false 时，将中断操作。要接收到函数的返回值，标签中得写成这样  。代码如下：
　　

<body>　　
<a href="http://blog.51cto.com/steed">走你1</a>
　　
<a href="http://blog.51cto.com/steed">走你2</a>
　　
<script>
　　function jump(obj) {
　　alert(obj.href);
　　return false
　　}
　　document.getElementById('i2').onclick = function () {
　　alert(this.href);
　　return false
　　}
　　
</script>
　　
</body>
　　

　　上面的事件都会返回一个 false ，会中断操作，不会进行之后的页面跳转。如果返回 true ，或者不设置返回值，则会继续操作。上面第二个标签中的事件绑定是在js出完成的，不用做别的额外操作，只要在绑定的函数的结尾多写一句 return 就好了。
　　阻止事件发生的意义：做表单验证的时候，如果验证通过，则返回true，页面跳转。如果验证失败，则返回false，阻止页面继续跳转：
　　

<body>　　
<form action="https://www.baidu.com/s">
　　<input type="text" name="wd" placeholder="请输入要搜索的内容" />
　　<input type="submit" value="搜索" />
　　
</form>
　　
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
　　
<script>
　　$(':submit').click(function () {
　　if ($(this).prev().val().length > 0){
　　return true
　　} else {
　　alert("请输入内容");
　　return false
　　}
　　})
　　
</script>
　　
</body>
　　

示例：表单验证
　　示例来做一个更加复杂的表单验证。这次有3个input框同时需要验证，这就需要再写个循环。如此我们的事件里就嵌套了两层函数，通过return false阻止事件会有问题。这里只有3个输入框全部填入内容才能提交表单，否则会显示错误信息：
　　

<body>　　
<form action="http://blog.51cto.com/steed">
　　<p>
　　<label for="username">用户名：</label>
　　<input name="username" type="text">
　　</p>
　　<p>
　　<label for="password"> 密码：</label>
　　<input name="password" type="password">
　　</p>
　　<p>
　　<label for="verify">验证码：</label>
　　<input name="verify" type="text">
　　</p>
　　<p><input type="submit" value="提交"></p>
　　
</form>
　　
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
　　
<script>
　　$(':submit').click(function () {
　　var flag = true;  // 这个变量用于存储下面的函数执行的错误结果
　　$('.error').remove();  // 先删除之前一次操作添加的标签
　　$('#f1').find("input[type='text'], input[type='password']").each(function () {
　　if($(this).val().length <= 0){
　　flag = false;  // 如果验证出错，就设置为false
　　var tag = document.createElement('span');
　　tag.innerText = '必填';
　　tag.classList.add('error');  // 统一加个class，方便批量删除标签
　　$(tag).css({'color': 'red', 'fontSize': 12});  // 顺便用jQuery的方法设置一下css
　　$(this).after(tag);
　　// 这里return false会阻止each继续遍历，相当于break。
　　// return false;  // 去掉这句的注释是另外一个效果，只提示第一个错误
　　}
　　});
　　// 这里return false才是验证失败。
　　// 但是验证是在内层的函数里完成的，所以需要一个变量把结果传递出来
　　return flag;
　　})
　　
</script>
　　
</body>
　　

　　这里click事件函数内部，还要遍历一遍所有的输入框。内部的遍历函数可以返回false，上面注释掉了。
　　如果是内部的遍历函数返回了false，则中断内层的遍历，阻止遍历之后的输入框。如果去掉注释，效果是只会提示第一个错误信息。
　　要想阻止提交表单，需要在外层的click事件的函数最后返回一个false。但是这里的结果需要内层的函数来验证。基于作用域的原理，先在外层声明一个变量（flag），然后内层的验证结果验证到错误就把变量置为false。这样最后就可以通过把flag作为返回值，返回整个验证过程是否有错误。

jQuery-页面载入事件（ready）
　　就叫ready()方法，或ready()事件，一般用下面的简写。
　　$(function) ：写在这个方法里的函数，当页面框架加载完成后就立即执行。在DOM的结构加载完后就触发，而不是还要等css，js，图片等都加载完成后再触发。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
　　

<script>　　$(function(){
　　// 你的代码
　　})
　　
</script>
　　

　　理解：
　　一、如果把事件绑定写在ready方法里，那么一定是等待框架加载完毕才执行的绑定。没有ready方法的情况，代码是从上到下顺序执行的。如果你的绑定方法写在标签生成之前，此时是获取不到绑定方法后面的DOM中的标签的。不过一般都建议把js写在最后，也不会有这个问题。
　　二、等待被调用的方法，可以不用写在ready事件里。把所有其他的 jQuery 事件和函数置于ready事件中是非常好的做法。是否写在ready()事件里，影响的只是执行的时机。
　　三、不必所有的代码都写在一个ready事件中。可以在同一个页面中无限次地使用ready事件。

jQuery-扩展
　　扩展，就是定义自己的jQuery方法。这里有两种扩展的方法：
　　$.extend({key: function}) ：调用方法，$.key()。
　　$.fn.extend({key: function}) ：调用方法：$().key()。前面的括号里可以写上选择器。
　　

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>　　
<script>
　　$.extend({
　　'sayHi': function () {
　　return 'Hi jQuery'
　　}
　　});
　　$.fn.extend({
　　"hello": function () {
　　return 'Hello World!'
　　}
　　});
　　alert($.sayHi());
　　alert($('body').hello());
　　
</script>
　　

扩展方法的命名空间
　　一般的做法是把扩展的方法写在一个js文件中，然后在使用前引入。就像我们引入jQuery库一样，扩展的方法就是我们自己的库。
　　所有引入的方法和我们自己在页面用定义的方法是共享命名空间的。函数名（或者叫方法名）肯定是不能重复的。但是变量名可以通过自执行函数（闭包），每个扩展方法都是自己独立的命名空间。
　　先写一个自己的扩展库，保存为js文件：
　　

// 文件名：myJQ.js　　
(function () {
　　// 闭包解决的是变量命名空间的问题，name变量只在这个闭包中有效
　　var name = 'jQuery';
　　

　　$.extend({
　　'sayHi': function () {
　　return 'Hi ' + name
　　}
　　});
　　

　　$.fn.extend({
　　"hello": function () {
　　return 'Hello ' + name
　　}
　　});
　　
})();
　　

　　上面的自执行函数，也是可以传参数的。这里没什么参数要传，不过一般会把jQuery传进去：
　　

(function ($) {　　// 这里面是你的扩展方法，在这里面，可以放心的使用$符号
　　
})(jQuery);
　　

　　这样即使外面$符号用作别的定义了，在扩展内部，$就是jQuery。
　　然后在页面中就像调用其它jQuery方法一样调用自定义的扩展函数：
　　

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>　　
<script src="myJQ.js"></script>
　　
<script>
　　alert($.sayHi());
　　alert($().hello());
　　
</script>
　　

js的扩展
　　顺便记一下js的扩展。简单的把函数写到一个单独的js文件中也是可以的。如果考虑到变量命名空间的问题，还是加个闭包：
　　

(function () {　　var name = 'Adam';
　　sayHi = function () {
　　return 'Hi ' + name
　　};
　　
})();
　　

　　因为函数名我们需要在全局可以调用的，所以上例中的函数名是全局变量。但是如果有太多的方法，免不了和全局的名称会有冲突。这就需要把多个方法写到一个类中去，做成一个类库：
　　

// 先定义好全局的类名　　
if (typeof myFunc !== "object"){
　　myFunc = {};
　　
}
　　

　　
(function () {
　　var name = 'Bob';
　　// 往类里添加方法
　　myFunc.hello = function () {
　　return 'Hello ' + name;
　　};
　　myFunc.welcom = function () {
　　return name + ' welcom !'
　　}
　　
})();
　　

作业
　　后台管理平台，编辑表格：

非编辑模式：可对每行进行选择；反选；取消选择
编辑模式：进入编辑模式时如果行被选中，则被选中的那行变为可编辑状态，未选中的不改变
- 退出编辑模式时，所有的行进入非编辑状态
- 处于编辑模式时，行被选中则进入编辑状态，取消选择则进入非编辑状态

　　老师演示的简单表格，状态用的是下拉框：

账号		自动登录	找回密码
密码			立即注册

大疆运维招人啦，

C++ :try 语句块和异常处理

C++的多态

Red Hat RHCE 8 (EX294) Cert Guide

Java/C++ 区别：看完这一篇，就够用！

别再用过时库了！这 13 个顶级 C++ 库才是

c++ size_t 和 int 的区别

[经验分享] Python自动化开发学习17-jQuery

浏览过的版块

扫码加入运维网微信交流群