JQuery
文档：http://jquery.cuishifeng.cn/
1.x；2.x；3.x； 推荐1.12，兼容性更高
分为js和js.min , min是压缩版的，上线时使用min
模块（类库）
DOM/BOM/JavaScript的类库
在头文件加入：
<scritp src="jquery-1.12.4.js></script>
但是一般放在尾部。
调用jQuery：
1、jQuery.方法名
2、$.方法名
一、查询元素
相互转换：
jquery对象[0] =>Dom对象
$('#i1')[0] = document.getElmentById('i1')
Dom对象 => $(Dom对象)
选择器-直接找到某个或者某类标签
1、id
$('#id')
2、class
$('.c1')
3、标签
$('a') -找到所有a标签
4、组合
$('a,.c2.#i1')
5、层级
$('#i10 a') -id = i10 下 所有的a标签，子子孙孙
$('#i10>a') -只找儿子
6、属性
$('[属性名]')
$('[属性名="属性内容"]')
$('input[type="text"]') = $(':text')
筛选
$('a:first')
$('a:eq(0)') -索引 （从0开始)
三元运算
var v = 条件? 真值：假值
$(this).next() 下一个
$(this).prev() 上一个
$(this).parent() 父
$(this).children() 孩子
$(this).sibling() 兄弟
$(this).find(‘#i1’) 子子孙孙里查找
$(‘#i1’).addClass(‘hide’) 添加class
$(‘#i1’).removeClass(‘hide’) 删除
支持链式编程
绑定事件
$(,content).click(function(){})
二、操作元素
1.文本操作
$(..).text() #获取文本内容
$(..).text("...") #设置文本内容
2.属性操作
$(..).val() #获取value值
$(..).val("...") #设置value值
#对自定义属性的操作
$(..).attr('type') #获取type属性的值
$(..).attr('type'，'password') #设置type属性的值
$(..).removeAttr('type') #删除type属性
#专门用于checkbox，radio操作
<input type='checkbox' id='i1' checked='checked' />
$(..).prop('checked',true) #选中，false 不选中
3.样式操作
$(..).addClass()
$(..).removeClass()
$(..).hasClass()
$(..).toggleClass() #有则去除，没有则添加
单个样式
$(..).css('样式名','样式值')
-点赞
-$(..).append()
-setInterval
-透明度
-position
-字体大小，位置
位置：
$(windows).scrollTop() 获取滚轮位置
$(windows).scrollTop(88) 设置滚轮位置
scrollLeft() 左右滚轮
offset() 获取指定标签的位置
position() 获取指定标签相对于父标签（relative）标签的坐标
$('i1').height() # 获取标签的纯高度
$('i1').innerHeight() # 获取标签的边框+纯高度
$('i1').outerHeight() # 获取标签的
$('i1').outerHeight(ture) # 获取标签的
#纯高度，边框，外边距，内边距
绑定事件：
Dom：三种绑定方式
jquery：$('.c1').click(function(){})
$('.c1').bind('click',function(){}) //unbind
*******
$('.c1').delegate('a','click',function(){}) //undelegate
-委托，当点击时绑定
$('.c1').on('click',function()) //off
阻止后面事件的发生，（表单提交）
<a onclick = 'return clickOn()' href='http://www.baidu.com'>
function clickOn(){
alert(123);
return false;
}
# 当页面框架加载完毕之后自动执行。
$(function(){
$()....
...
})
jQuery扩展
$('#i1').css() 选择器的方式
$.ajax() 自带的方法
$.extend({ //扩展一个abc方法
'abc'：function(){
return 'sb'}
})
调用： $.abc()
$.fn.extend.({ //扩展一个abc方法
'abc'：function(){
return 'sb'}
})
调用： $('#i1').abc()
用自执行函数解决封装函数的全局变量冲突的问题
(function(){
var staturs = 1 ;
//封装变量
})(jQuery)
----->实例：
1、多选，反选，全选
-选择器
-
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked',ture); 设置值
-
jQuery方法内置循环：$('#tb:checkbox').方法
-
$('#tb:checkbox')each(function(k){
//k 当前索引
//this， Dom，当前循环对象
})
2、菜单切换
样式中 ，加入一个cursor:pointer ：出现小手
3、点赞
var tag = document.createElement('span') 创建span
fontSize = '15'
$(tag).text(‘+1’)
$(tag).css('color','green')
$(tag).css('fontSize',fontSize+'px')
$().apend(tag)
var obj = setInterval(function(){
fontSize = fontSize+5
top = top -5
right = right -5
opacity =opacity - 0.2;
$(tag).css('fontSize',fontSize+'px')
...
$(tag).css('opacity',opacity)
if(opacity < 0){
clearInterval(obj);
$(tag).remover() }
},100)
4、表单提交