一. jQuery
1.模块 《=》类库 ，jQuery----DOM的一个类库。
2.查找元素
---DOM：
---jQuery:
---选择器：
---筛选：
注： 1. jQuery版本：1.x 兼容性高（推荐使用1.12）;2.x;3.x
jQuery安装：1)jquery.com 官网下载； 2)把.js文件放到HTML同级目录下即可。
2.引用：
在HTML中引用CSS样式时，用link链接到同级目录下的css文件即可；
也可以在HTML中：<style><style>编写样式；（两种方式）
在HTML中引用 .js 文件时，用script 引用同级目录下的 .js 文件；
也可以在HTML中：<script><script>编写代码；（两种方式）
注：<style>一般放在头部，<script>一般放在尾部
3.调用jQuery中的方法有两种方式： jQuery.方法名；
$.方法名。
3.操作元素
3.1获取标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">123</div>
<script scr="jquery-1.12.4.js"></script>
<script>
$("#i1")
// 相当于document.getElementById("i1")
</script>
</body>
</html>
问：DOM中通过document.getElementById("i1")获取的标签与jQuery中用 $("#i1") 获取的标签，两种方式有什么区别？
答：jQuery中其实封装是DOM的方式去获取的标签，$("#i1") [0]获取的内容和document.getElementById("i1")获取的内容是一模一样的（可以通过这个方式互相转换）。由此看来$("#i1")获取的内容要比document.getElementById("i1")获取的内容多.
转换：jQuery对象------->DOM 对象：$("#i1") [0]；
DOM 对象--------->jQuery对象 :d = document.getElementById("i1")
$(d);
问：转换有什么作用？
答：当jQuery中封装的内容没有我们想要的时候，可以把jQuery对象转换为DOM 对象，然后我们再编写我们需要的原生态的代码。
3.2 jQuery选择器
作用：直接找到某个或某类标签
1）id
$("#id")
2) class
<div class='c1'><div>
$(".c1")
3) 标签
<div class="c1">
<a>e</a>
<a>f</a>
</div>
<div class="c2">
<a>r</a>
</div>
$("a"):即可找到所有的a标签。
4）组合选择器
$("a，.c2")；找到所有a标签和c2。
5）层级选择器
$("#i10 a")：id=10标签下的a标签。（空格：子子孙孙）
$("#i10>a")：id=10标签下的儿子a标签。（> :儿子辈）
6）基本选择器
：first
：last
：eq()
7) 属性
<div xiaolaizi="123">
<a>e</a>
<a>f</a>
</div>
<div xiaolaizi="456">
<a>r</a>
</div>
$("[xiaolaizi]") ：具有xiaolaizi属性的所有标签；
$('[xiaolaizi="123"]') : xiaolaizi属性值3为123的标签；
8)表单选择器
<input type="text" />
<input type="file" />
<input type="password" />
$('input[type="text"]')：属性的方法，用表单的方法为： $(："text")
可查看：http://jquery.cuishifeng.cn/ jQuery中文文档
3.3示例1
<!--全选，反选，取消操作实例-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();" />
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb:checkbox').prop('checked',true)
}
function cancelAll() {
$('#tb:checkbox').prop('checked',false)
}
function reverseAll() {
//这里的each会循环每一个checkbox,而不用再去写for循环，这是jquery帮我们写好的。
$(':checkbox').each(function (k) {
//k :当前索引
//console.log(k)
//this,代指当前循环的每一个元素，且是DOM对象。是什么对象可以根据输出的形式去判断，用[ ]括起来的是jquery对象，< >的是DOM对象；
//console.log(this);
//反选，首先判断是否已经被选中
//DOM方法
// if(this.checked){
// this.checked = false;
// }
// else{
// this.checked = true;
// }
//jquery方法
if($(this).prop('checked')){
//prop:一个参数是获取值，针对checked和selected做操作。
$(this).prop('checked', false);
//prop :两个参数是设置值；
}else{
$(this).prop('checked', true);
}
//js中的三元运算方法
//var v = 条件？ 真值：假值
var v = $(this).prop('checked')? false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>
注：DOM中需要写for循环，而jquery中内置循环；
3.4 示例2——Tab菜单
筛选器：(http://jquery.cuishifeng.cn/)$(this).next() 下一级$(this).prev() 上一级$(this).parent() 父级$(this).children()$(this).siblings() 同级
$('#i1).find('#i1') 子子孙孙中查找
添加样式和移除样式：.addClass('hide').removeClass('hide')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color:burlywood;
color: blue;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 400px;width: 200px;border:1px solid black ">
<div class="item">
<div class="header">标题1</div>
<div class="content">内容1</div>
</div>
<div class="item">
<div class="header">标题2</div>
<div class="content hide">内容2</div>
</div>
<div class="item">
<div class="header">标题3</div>
<div class="content hide">内容3</div>
</div>
</div>
<!--//标题太多，一个一个去绑定事件不合适，这里在jQuery中绑定事件-->
<script src="jquery-1.12.4.js"></script>
<script>
$(".header").click(function () {
//匿名函数,当前点击的标签
//console.log(this);
//看一下格式 ，看获取到的是DOM对象还是jQuery对象
//$(this)
//DOm 对象转换为jQuery对象
//筛选器
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide');
//上面两句话可以用一行代码搞定，
//jQuery中支持链式编程
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
})
</script>
</body>
</html>
模态编程框中
3.5 文本操作
$( ).text( ) #获取文本内容；
$( ).text(" ") #设置文本内容；
$( ).html( ) #获取标签内容；
$( ).html(" ") #设置标签内容；
$( ).val(" ")
$( ).val(" ")
3.6 样式操作
addClass
removeClass
toggleClass
3.7 属性（标签）操作
$(..).attr（） ：专门用于做标签上的自定义属性；
： 传一个参数，是获取属性；传两个参数，是添加属性；
$(..)removeAttr( ): 删除属性；
$(..).prop（）：专门用于checkbox,radio ;checkbox用attr（）版本不同时会出现bug;
:传一个参数是获取值，传两个参数是修改或者添加值；
PS: index 获取索引位置。
3.8 CSS 处理
$('t1').css( '样式名' ,'样式值' );
点赞：
----$('t1').append():
----setInterval :定时器；
3.9 位置
$(window).scrolltop() :没有参数，获取值；
$(window).scrolltop(0) :有参数，设置值（移动到设置的位置）；window窗口，为对象，且只有一个。
scrollLeft() :
offset().top :指定标签在html中的坐标 ;
offset().left :
position() : 指定的标签相对父标签的坐标。
3.10 尺寸
height()
innerHeight()
outerHeight()
outerHeight(true)
// 纯高度，边框，外边距，内边距
3.10 阻止事件发生：
return false;
ps: 当页面框架加载完成之后，自动执行(自执行函数）。
$(function)(){
}
来源：https://www.cnblogs.com/bltstop/p/10740467.html