jquery总结（来自于一个讲师的总结）
选择器
基本选择器：id class 标签 eq()查找具体的列表中的元素：$(‘ul li:eq(n)’).eq(n)
层 ：div p,div>p
查找：find 选中元素中再查找子元素，parent查找直接父元素，parents向上查找好几层父 元素
筛选：next()选中当前元素后面的元素条件是：紧跟在当前元素后面
nextAll()选中当前元素后面的所有元素，不管有没有其他元素间隔
Prev和prevAll选中当前元素前面符合条件的元素，使用原理和next相同，
Siblings()在同一父元素下面的同级子元素，括号中不写的话，就是所有同级元素，写上 选择条件，就是符合条件的同级元素
dom元素操作
内部插入元素：
append: 将后面元素作为最后一个子元素插入到前面元素中
$(‘.div1’).append($(‘.img’))
$(‘.div1’).append(‘<img src=”img/1.jpg”/>’)
上面两者的区别：前者是将页面已存在的元素，插入到符合条件的元素中，特点： 只有一个给元素，不会无限制插入，后者是每次触发事件后都插入该标签，无限多 个
appendTo: $(‘.img’).appendTo($(‘.div1’))将前者插入到后者中，作为最后一个子元素
Prepend 将后面元素作为第一个子元素插入到前面元素中，语法格式和append相同
prependTo 语法格式同上
外部插入：
After:在当前选中元素的后面插入同级元素
$(‘.div1’).after($(‘.img’))
insetAfter $(‘.div1’).insetAfter($(‘.img’))，将$(‘.div1’)插入到$(‘.img’)的后面
Before :在当前选中元素的前面插入同级元素
insertBefore $(‘.div1’).insetBefore($(‘.img’))，将$(‘.div1’)插入到$(‘.img’)的前面
事件
绑定事件：on和bind,格式：$(‘div’).on(‘click’,function(){}),此时on的使用方法和功能与bind相同，不能给脚本中后插入的元素绑定事件，解除绑定的方方分别对应off和unbind
如果on的格式为$(‘div’).on(‘click’,’.img’,function(){})，此时on的功能和live、delegate一样，可以给脚本中后插入的元素委托事件。
事件委托：live和delegate解除方式分别对应die 、undelegate
$(‘div’).live(‘click’,’.img’,function(){})
$(‘div’).delegate(’.img’,‘click’,function(){})
注意：解除事件时，括号中不写事件就将绑定元素上所有的绑定事件都解除
常用事件举例：Blur:经常用于表单中的验证，focus,聚焦事件：举例 if($(‘:text’).val==’’){$(this).focus()}
鼠标事件mouseXXXXX，键盘事件keyXXXX，滚动scroll 改变窗口大小resize, 表单提交事件：$(‘form’).submit()
异步请求：Ajax
$.ajax({
Type:’get/post’,
Url:’template/index.php’,
Success:function(data){
Data就是我们请求过来的数据，可以对它进行操作
}
})
封装好的两种方式：get和post
$.get(‘url?name=jack’,function(data){
Data就是我们请求过来的数据，可以对它进行操作
})
$.post(‘url’,{name:’jack’,age:22},function(data){
Data就是我们请求过来的数据，可以对它进行操作
})
动画效果
1.Show()和hide()这两个改变元素的display,显示就是block，隐藏就是none
2.slide:卷帘门，slideUp和slideDown改变的是元素的height值
3.fade：淡入淡出fadeOut和fadeIn 改变元素的opacity=1,淡出时opacity=0;
4.animate:自定义动画：格式：$(‘div’).animate({除了颜色之外的其他样式},1000,function(){})
事件的参数event
event.preventDefault 阻止默认事件
event.stopPropagation();阻止冒泡事件
Event.pageX和event.pageY获取鼠标在当前事件下的坐标，从可视窗口到鼠标的位置
通常可以用来做窗口移动，图片移动效果
Jquery核心部分
所有的操作都基于选中元素的基础上，
1.就是用选择器选中目标元素，
2.确定触发条件：比如鼠标经过、单击、聚焦等等
3.明确想要在该条件下干什么，就是执行语句
Css()和attr()分别针对样式和属性：
举例：
Html部分:
<div class="div1" >
<p>我是段落语句！</p>
<img src=’img/i.jpg’ alt=’one’ title=’img’/>
<div>
Css部分：
.div1{
Color:green;
Line-height:30px;
Cursor:move;
}
Jquery部分：当鼠标单击图片时，将该图片换为2.jpg,并且将鼠标样式改为手的形状
$(‘img’).click(function(){
$(this).attr(‘src’,’img/2.jpg’).css(‘cursor’,’pointer’)
})
脚本中如果有跨事件调用的变量，记住是定义的全局变量，局部变量的作用域有限，只在当前事件范围下使用
获取元素的对应值：
1.css() 获取颜色的值：$(‘div’).css(‘color’); 设置边框：$(‘div img’).css(‘border’,’1px soild red’);
2.Attr() 获取类名:$(‘div’).attr(‘class’) $(‘div’).attr(‘class’,’div2’)
3.Html() 获取选中元素标签之间的所有内容
4.Text() 获取选中标签之间的所有文本，包括子元素中的文本
5.Val() 获取表单的value值，<textarea>标签也是用val()获取
获取元素距离可视界面的距离：
Var x = $(‘div’).offset().left; 包括定位值和外补白的值
Var y = $(‘div’).offset().top;
获取元素的宽高
Var x = $(‘div’).height();
Var x =$(‘div’).width();
outerHeight和innerHeight的区别：前者包括边框，后者不包括边框
scrollTop元素滚动高度：前提条件子元素内容超出父元素的大小，并且父元素被设置了具体宽高，且overflow:scroll
关于定位：
相对父元素定位：relative
绝对定位：相对于上一个设置定位的父元素而言，如果父元素都没有设置定位，该元素 就相对于body进行定位，记住：给绝对定位时，一定要给父元素添加相对定位
绝对定位是脱离文档流：不影响页面其他元素的布局
Float也脱离文档流
脱离文档流的元素设置margin值无效
代码习惯
1)定位要写在最上方，影响元素性质的样式，2.设置宽高3.设置元素内部的样式
2)文件命名，尽量英文定义。
3)类名尽量通俗易懂，言简意赅，前后格式要统一,驼峰形式是imgWrap, 或其他img-wrap
4)不要直接img布局，最好将img放在div中，这样布局稳定符合大众习惯
5)看到有规律一系列的元素，一般是序列表ul
