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部分:

<p>我是段落语句！</p>

<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