JQuery常用资料总结

															JQuery常用资料总结

1.JQuery特点:
 轻量级
 强大的选择器
 出色的DOM封装
 可靠的事件处理机制
 完善的Ajax
 出色的浏览器兼容性
 丰富的插件支持
 完善的文档
 支持链式操作

2.JQuery的入口函数
$(document).ready(function(){});
$(function(){});

3.JQuery和DOM的转换
DOM转换为JQuery: $(‘DOM对象’)
JQuery转换为DOM: $(‘对象’)[index] $(‘对象’).get(index)

4.JQuery选择器
1)、、和 (表单元素选择器)
:text 选取所有单行文本框
:password 选取所有密码框
:radio 选取所有单选按钮
:checkbox 选取所有复选框
:submit 选取所有提交按钮
:image 选取所有图像按钮
:reset 选取所有重置按钮
:button 选取所有按钮
:file 选取所有上传域

2)常用的表单对象属性过过滤选择器
:disabled 选取所有不可用元素
:enabled 选取所有可用元素
:checeked 选取所有被选中的元素（单选框和复选框）
:selected 选取所有被选中的选项元素(下拉列表)

3)Jquery筛选选择器
:first 第一个
:last 最后一个
:eq(index) 第index个
:odd 索引号为基数的元素
:even 索引号为偶数的元素

5.JQuery筛选方法
parents() 指定父级
parent() 父级
find() 后代选择器
siblings() 兄弟节点(不包括自己)
nextAll() 查找当前元素之后的所有同辈元素
pervtAll() 查找当前元素之前的所有同辈元素
hasClass(class) 查找当前元素是否含有某个指定的类,如果有返回true;
eq(index) 第index个元素

6. 给元素添加类选择器
   1)addClass(“选择器1 选择器2”) 添加多个类选择器

2)removeClass() 删除元素上所有的类选择器

3)removeClass(“类选择器名”) 删除元素上指定的选择器

4)hasClass(“类选择器名”) 使用类选择器返回true，否则返回false

5)toggleClass(“类选择器名”) 根据元素是否使用这个类选择器来进行自动切换

7.JQuery效果
show( spend,easing,fn) 显示
hide( spend,easing,fn) 隐藏
toggle(spend,easing,fn) 切换

slideDown( spend,easing,fn) 下拉
slideUp( spend,easing,fn) 上拉
slideToggle(spend,easing,fn) 滑动切换

fadeIn(spend,easing,fn) 淡入
fadeOut(spend,easing,fn) 淡出
fadeToggle(spend,easing,fn) 淡入淡如
fadeTo(spend,opacity,easing,fn) 修改透明度(这里的spend,opacity必须填写)

animate(对象,spend,easing,fn) 自定义动画

spend:时间
fn:回调函数
easing:方式(快慢等)
opacity:透明度

8.JQuery的属性操作
1)设置获取元素的固有属性:
prop(‘属性名’) 获取
prop(‘属性名’,’属性值’) 设置
2)设置获取元素的自定义属性:
attr(‘属性名’) 获取
attr(‘属性名’,’属性值’) 设置

9.JQuery内容文本值
1)html() 普通元素内容,括号内给值就是设置,不给就是获取,相当于原声innerHTML();
2)text() 普通元素内容,括号内给值就是设置,不给就是获取,相当于原声innerText();
3)val() 表单内的值, 括号内给值就是设置,不给就是获取,相当于原声value();

10.遍历元素

1. $(“元素”).each(function(i, domEle) {}); 遍历DOM元素
2. $.each(object,function(i, domEle) {}); 遍历对象.数组
   DomEle是dom元素,如果要使用Jquery方法,要先转化为JQuery

11.创建.添加.删除元素
1)创建元素:
Var li=$(‘’);
2)添加元素:
append() 内部添加,放在内容的最后面
prepend() 内部添加,放在内容的最前面

after() 外部添加,放在目标元素的后面
before() 外部添加,放在目标元素的前面
3)删除元素
remove() 删除元素本身
empty() 删除该元素的子节点
html(‘’) 删除该元素的子节点

11.JQuery的css操作
1)css()方法 作用就是给标签设置行内样式，给标签设置style属性值
$(“p”).css(“color”,“red”);
$(“p”).css({“color”:“red”,“fontSize”:“32px”,“backgroundColor”:"#888888"});
2)width()/height() 设置.获取元素的高和宽;
innerWidth()/innerHeight() 同上,包含padding值;
outerWidth()/outerHeight() 同上,包含padding+border值;
outerWidth(true)/outerHeight(true) 同上,包含padding+border+margin值;

12.Jquery位置
offset().top/offset().left 获取设置距离文档的位置
position().top/position().left 获取距离带有定位父级的位置
scrollTop()/scrollLeft() 获取设置被卷去的距离

13事件的绑定

1)on(“事件类型1 事件类型2”,[{“键”:“值”}],“处理函数”);

第一个参数，事件类型可以多个

第二个参数,传给处理函数的数据

第三个参数,响应处理函数

2)off()–解除元素的绑定事件

不带参数，解除元素上所有的事件

带事件名，多个用空格隔开，解除元素上指定的事件

带两个参数的，解除具有指定处理函数的事件

14常用的合成事件
1)hover(函数1，函数2)
当鼠标移入的时候执行函数1，移出的时候执行函数2
2)toggle()–切换（隐藏的时候显示，显示的时候隐藏）

15自动触发方式

1. element.事件() 会触发元素的默认行为

2. elememt.trigger(‘事件’) 会触发元素的默认行为

3. element.triggerHanler(‘事件’) 不会触发元素的默认行为

4. 事件对象
   1)event.type属性–获取事件类型

2)event.preventDefault();–阻止元素的默认行为

3)event.stopPropagation();–阻止冒泡型事件

4)event.target—获取事件源,返回的是DOM对象

5)event.pageX和event.pageY 获得鼠标的X,Y坐标

6)return false，既阻止元素的默认行为，又阻止冒泡型事件

7)event.which,获得鼠标键 1，左，2中 3右

8)event.keycode

17.多库共存
解决方案:
1)$=jquery
2)var XX =jquery.noConflick();