（1）几种方法：
delay() //延迟多长时间执行程序，参数是时间 语法：$('box').delay(1000).animate({'height':100,'width':100}) //延迟1秒执行动画
focus() //可以直接获取光标 语法：$('input').focus()
index() //索引值 语法：$(this).index()
each() //遍历、隐式迭代 语法：$('li').each(function(index,el){书写程序 $(el)代表元素 index代表索引值})
$.noConflict() //多库共存 用这个函数会返回一个对象 通过这个新的对象可以调用jq里面的方法 销毁对象$
语法：var new$ = $.noConflict() //new$是新对象，替换掉了$ 例：选中元素div：new$('div')
toArray() // 转换成纯数组 语法： $(‘div’).toArray()
$.trim() // 清除空格 （这是全局变量的方法） 语法：$.trim(‘$(input).value()’)
事件对象.preventDefault()// 这个方法就是用来阻止默认事件的
（2）属性的操作 attr prop
a) attr() // 操作行内属性 （最少要有一个参数）
语法1：$(‘a’).attr(‘href’) // 传一个参数是获取当前属性值
语法2：$(‘a’).attr(‘href’,’www.baidu.com’) // 传两个参数 就是赋值 会替换掉原来的值
语法3：$(‘a’).attr({‘href’:’#’,’target’:’_blank’,...}) // 可以是对象形式 批量添加 赋值 替换
b) removeAttr() // 删除元素某个属性
语法：$(‘a’).removeAttr(‘href’,’target’); //可以删除一个属性 也可以删除多个属性
c) prop() // 表单属性 （ attr操作不了表单属性 ）
语法1：$(‘input’).prop(‘type’) // 可以传一个参数 获取属性值
语法2：$(‘input[type=checkbox]’).prop(‘checkbox’,true); // 传两个参数 赋值 替换掉原来的值
语法3：$(‘input’).prop({‘type’:’text’,’value’=’密码’}); //可以是对象形式 批量添加 赋值 替换
（3） 节点的操作（ a - f ： 这里的元素都会把之前的元素调换位置 ）
a) append() // 在当前元素的最后面添加某元素 语法：$(‘#b1’).append($(‘#b2’));
b) appendTo() // 当前元素添加到某元素的最后面 语法：$(‘#b2’).appendTo(‘$b1’);
c) prepend() // 在当前元素的最前面添加某元素 语法：$(‘#b1’).prepend($(‘#b2’));
d) prependTo() // 当前元素添加到某元素的最前面 语法：$(‘#b2’).prepend($(‘#b1’));
e) before() // 在当前元素的前面添加某元素 语法：$(‘#b1’).before($(‘#b2’));
f) after() // 在当前元素的后面添加某元素 语法：$(‘#b1’).after($(‘#b2’));
g) insertBefore() // 移动节点 在参照物之前插入 语法：$(移动的元素).insertBefore(‘参照物’)
h) insertAfter() // 移动节点 在参照物之后插入 语法：$(移动的元素).insertAfter(‘参照物’)
i) replaceWith() // 替换节点元素 语法：$(‘要被替换的元素’).replaceWith(‘替换后的节点’)
j) clone() // 复制元素 有两个参数 false true 语法：$(‘div’).clone();
true: 深层复制 可以把元素的事件一起复制过来 false ：只复制元素 以及内容（默认值）
（4）关系方法
a) end() // 回到上一个元素（链式程常用）语法：$(‘box’).children().hide().end().hide()
b) next() // 下一个兄弟元素 语法：$(‘.box’).next();
c) nextAll() // 某元素后面的所有兄弟元素 语法： $(‘li’).nextAll();
d) prev() // 上一个兄弟元素 语法：$(‘.box’).prev();
e) prevAll() // 某元素前面所有的兄弟元素 语法：$(‘li’).prevAll();
f) siblings() // 所有的兄弟元素 语法：$(‘.box’).siblings(); // 传参数 就是精确查找兄弟元素
g) children() // 所有的子元素 语法：$(‘.box’).children(); // 传参数就是精确查找某个子元素
h) parent() // 父元素 语法：$(‘.box’).parent();
i) parents() // 查找祖级元素 语法：$(‘.box’).parents(); // 传参数 就是精确查找祖级元素
j) closest() // 也是查找祖级元素 语法：$(‘.box’).closest(); // 传参数 就是精确查找祖级元素
k) find() // 查找后代元素 语法：$(‘.box’).find(); // 传参是 就是精确查找后代元素
（5）内容操作 html()text() val()区别
a) html() // 不传参数就是获取元素里的内容 识别标签 语法：$(‘.box’).html();
b) text() // 不传参数就是获取元素里的内容 不识别标签 语法：$(‘.box’).text();
c) val()// 不传参数就是获取元素里的内容 只针对输入框有效 语法：$(‘input’).val();
d) 传参数的话都是替换元素里的内容 $(‘.box’).html/text/val(‘我是替换后的内容’)；
（6）清空元素
a) empty() // 只清空元素里的内容 语法：$(‘.box’).empty();
b) remove() // 删除整个元素节点及全部内容 语法：$(‘.box’).remove();
（7）动画方法 动画的使用语法：针对（ a - i ）
1：$(‘.box’).show() 不传参数没有动画
2：$(‘.box’).show(slow（600ms）2.normal（400ms）3.fast（200ms）还可以写数字 1000=1秒)
3：$(‘.box’).show(时间，function(){动画执行完毕后要执行的程序})；
a) show() // 显示（display:block）
b) hide() // 隐藏 （display:none）
c) toggle() // 显示与隐藏切换
d) slideDown() // 向下滑动显示
e) slideUp() // 向上滑动隐藏
f) slideToggle() // 向上向下隐藏切换
g ) fadeIn() // 淡入 显示
h) fadeOut() // 淡出 隐藏
i ) fadeToggle() // 淡出 淡入切换
特殊语法
j ) fadeTo() // 淡淡的达到 语法1：$(‘div’).fadeTo(时间,0-1透明度)；
语法2：$(‘div’).fadeTo(时间,0-1透明度,function(){动画执行完毕后执行的程序})；
k ) animate() // 自定义动画函数 （属性的值 只能是数字）
语法1：$(‘div’).animate({‘属性’:’值’,‘属性’:’值’,...},时间);
语法2：$(‘div’).animate({‘属性’:’值’,‘属性’:’值’,...},时间,function(){动画执行完毕后要执行的程序});
l ) stop() // 停止动画
语法1：$(‘div’).stop() //没有参数只是清除了当前的动画
语法2：$(‘div’).stop(true,true) //有两个参数 都是布尔值（bool）
第一个值是true 就是清除所有动画排队机制 false 只是清除当前执行的动画机制
第二个值是true 直接跳到当前元素指定动画结束的位置 false立即停止动画 定在那里
语法3：$(‘’div).stop().toggle() //直接写在程序里 每次执行程序之前都先要清除之前的程序 传参数是时间
（8）元素的坐标操作 offset()
a) offset() // 这是一个对象 可以用来设置坐标值 语法：$(‘.box’).offset({‘top’:200,‘left’:100})
b) offset().left // 获取元素在整个页面中left的坐标 语法：$(‘.box’).offset().left
c) offset().top // 获取元素在整个页面中top的坐标 语法：$(‘.box’).offset().top
d) offsetX // 检测鼠标单击一下距离盒子左边的距离 语法： event.offsetX
e) offsetY // 检测鼠标单击一下距离盒子上边的距离 语法： event.offsetY
f) position().left
g) position().top
（9） 网页滚动坐标值scroll
a) scrollTop() // 获取网页上边的滚动坐标值 语法：$(document).scrollTop();
b) scrollLeft() // 获取网页左边的滚动坐标值 语法：$(document).scrollTLeft();
c) 有一种特殊的用法 让网页回到顶部 对象是html与body
$(‘button’).click(function(){
$(‘html,body’).animate({‘scrollTop’:0},100);
})
（10） 鼠标坐标值（要利用到鼠标移动事件的事件对象event）
a) event.pageX // 获取鼠标横向坐标的位置
b) event.pageY // 获取鼠标纵向坐标的位置
（11）事件
a) click() // 单击事件
b) focus() // 获取焦点
c) blur() // 失去焦点
d) mouseover() // 鼠标移上
e) mouseout() // 鼠标离开
f) mouseenter() // 鼠标移上
g) mouseleave() // 鼠标离开
h) keyup() // 键盘按键松开事件
i) keydown() // 鼠标按键按下事件
j) scroll() // 网页滚动事件
k) mousemove() // 鼠标移动事件
l) mousedown() // 鼠标按下事件
m) mouseUp() // 鼠标松开事件
（12）键盘监听 keycode获取键盘按键的unicoed编码
获取案例：
$(document).keydown(function(event){
console.log(event.keyCode);
})
（13）获取宽高(参数的三种写法 width(100) / width(‘100’) / width(‘100px’) 都可以 jq优化了)
a) width() // 获取元素宽度 传参数就是设置宽度 语法：$(‘.box’).width(); / $(‘.box’).width(100);
b) heigth() // 获取元素高度 传参数就是设置高度 语法：$(‘.box’).height() / $(‘.box’).height(100)
（14）class的操作
a) addClass() // 添加类名 例： $(‘div’).addClass(‘box’); //给div元素添加类名box
b) removeClass() // 删除类名 例： $(‘div’).removeClass(‘传参数就是指定类名 ’) 不传参 数就删除div元素上所有类名
c) hasClass() // 判断元素有没有类名
d) toggleClass() // 添加删除类名 有类名就删除 没有添加
Css() //样式操作 语法两种：
语法1：css(‘color’,’pink’); //只能操作一种样式
语法2：css({‘color’:’pink’,’font-size’:’15px’...}) //可以操作多种样式
（15）选择器 （重点）
a) 基本选择器
- $(‘div’) // 标签选择器
- $(‘.box’) // 类名选择器
- $(‘#box’) // id选择器
- $(‘li.box’) // 获取标签名为li且类名为box 的元素 （交集选择器）
b) 层级选择器
- $(‘ul li’) // 后代选择器 选中ul里面所有的li （不论子级还是孙子级）
- $(‘ul>li’) // 子代选择器 只选中 ul里面的子级li
- $(‘ul>li ul’) // 子代后代连用 选中ul里面的子级li里面的所有ul
c) 过滤选择器
- $(‘li:first’) // 选中第一个li
- $(‘li:last’) // 选中最后一个li
- $(‘li:even’) // 选中索引号为偶数的li （索引从0开始）
- $(‘li:odd’) // 选中索引号为奇数的li （索引从0开始）
- $(‘li:eq(5)’) // 选中索引号为 5 的li （索引从0开始）
- $(‘li:first-child’) // 选中当前元素的父元素下的第一个子元素 第一子元素还必须是li
- $(‘li:last-child’) // 选中当前元素的父元素下的最后一个子元素 最后一个子元素还必须是li
- $(‘li:gt(编号)’) // 选中大于某个编号的元素
- $(‘li:lt(编号)’) // 选中小于某个编号的元素
- $(‘li:not()’) // 排除某个元素
d) 属性选择器 <input type=”text”>
- $(‘[type = button]’) //获取页面上所有有type属性且属性值为button的元素
- $(‘[type!=button]’) //获取页面上所有有type属性且属性值不为button的元素
- $(‘[type^=bu]’) //获取页面上所有有type属性且属性值以bu开头的的元素
- $(‘[type$=on]’) //获取页面上所有有type属性且属性值以on结束的元素
- $(‘[type*=tt]’) //获取页面上所有有type属性且属性值包含tt的元素
（16）jq的入口函数
a) $(functin(){要写的程序})； // 推荐使用 （可以写多个）
b) $(document).ready(function(){要写的程序});
c) $().ready(fuction(){要写的程序});
l jquery是一个对象 与dom（document）对象可以互相转换
a) jq转换dom对象
$(‘div’) 转为 $(‘div’)[0] 就可以了 这样就可以直接调用原生js的API （ []里写的是索引值 ）
$(‘div’) 转为 $(‘div’).get(0) 也可以（ ()里写的是索引值 ）
例：$(‘div’)[0].innerHTML = ‘我是jq转换来的dom对象’；
b) dom对象转换为jq对象
var div = document.getElementsByTagName(‘div’)[0];
div 转为 jq对象 为 $(‘div’) 这样就可以直接调用jq对象
例： $(div).css(‘color’,’pink’);
（17）事件绑定与 解绑(详情查看优盘 帮定事件系类)
a) click //a元素触发b元素的事件
b) bind() // 帮定事件 不支持给新元素帮定事件 支持帮定多个事件 也支持给自己帮定事件
语法：$(‘div button’).bind(‘click mouseover’function(){程序})
c) delegate() //事件委派 必须通过父元素委派事件给子元素 支持给新的元素委派事件但不能给自己添加事件
语法：$(‘父元素’).delegate(‘子元素’,’事件’,function(){程序})
d) on() // 添加事件 委派事件 给新元素添加事件 都可以 （用的最多）
语法1：$(‘父元素’).on(‘事件’,’子元素’,function(){程序})
语法2：$(‘元素’).on(‘事件’,function(){程序})
e) off()// 解绑事件 语法1 针对普通事件绑定 / 语法二针对 事件委托解绑（也针对新加的元素解绑）
语法1：$(‘#btn’).off(‘click’) // 要解绑的元素.off(‘解绑的事件’)
语法2：$(‘div’).off(‘click’,’#btn’); // 父元素.off(‘解绑的事件’,’解绑的子元素’)
（18） jq的封装插件
$ 这是一个对象 针对它可以封装插件 插件就是扩展$对象的方法
封装jq插件分两种类型
第一种 全局方法 ：主要是用来完成一些功能 跟dom无关
例：$.zijidiyide = function(){
console.log(‘我就是扩展jq的全局方法的插件’)
}
调用：$.zijidiyide();
第二种 局部方法 ：主要是用来操作dom元素的 $.fn固定写法
例： $.fn.lunbo = function(参数){
console.log(‘我就是扩展jq的局部方法的插件’)
};
调用：$(‘div’).lunbo();