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