什么是jquery?
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程
jquery插件里面提供一个全局的对象$和jQuery对象,本质是一个函数,
$(document).ready(function(){ //预加载函数;
//method
})
$(function(){ //预加载语法糖;
//method
})
$("#p1") //获取jQuery对象(选择器字符串);
$("#p1")[0] //转化为DOM对象;
$(DOMObj) //转化为jq对象;
jQuery.noConflict() //noConflict() 让jquery让出$的使用权,给其他脚本库使用$
$.extend({}) //给jquery添加一些属性或者方法;一般使用下面的方法;
$.fn.extend({}) //给jquery原型添加一些属性和方法;
jQuery的DOM操作
获取和设置
text() //获取jq对象中的内容;也可以添加内容;
html() //获取html标签及内容,也可以设置;
val() //获取value值,也可以设置;
attr() //向对象添加,获取属性,也可以自定义属性,;
prop() //添加属性,与attr功能相同;(attr会展示到html中,prop不会展示在html中)
css() //一个参数是获取样式,两个参数是添加样式;(添加多个使用对象);
添加或删除
$("<div></div>") //创建一个jq对象;
appendTo() //向父类尾部添加元素,特殊的可以是字符串,也可以是jq对象和DOM对象;
append() //向子类尾部添加元素,内容;
prepend() //向子类头部添加元素或内容;
insertAfter() //向指定位置添加元素; (参数1:添加的对象;参数二:要添加在谁之后);
after() //在元素之后插入元素或者内容;
before() //在元素之前插入元素或者内容;
replaceWith() //把调用者的元素替换成指定元素,指定元素可以是自定义元素,也可与是jq元素,jq元素替换时,原来的元素就没有了;
replaceAll() //把调用者的元素全部替换成被指定的元素;
remove() //删除一个jq对象;可以有一个参数,(选择器字符串),筛选子类符合条件的元素;(内容,节点,数据,事件,全部移出);
empty() //删除子类元素的内容和全部子节点,(但保存调用者的标签和属性)
detach() //删除所有子元素(数据,事件不会移出,当他们重新被插入时,可以重新加事件和数据);
clone(bloon) //克隆元素,参数是布尔值,为真,克隆全部(数据标签事件),为假,只克隆标签和标签内容;
calss中的操作
addClass() //向目标者添加类名;
removeClass() //删除类名;
toggleClass() //有则删除,无则添加(第一个参数表示要添加或删除的类,既可以用类列表,也可以用函数返回值指定(i 是选择器选中的所有元素中当前对象的索引值,c 是当前对象的类名)。
switch: 布尔值,true 表示只添加,false 表示只删除。);
hasClass() //判断是否包含此类名;
jquery中的事件
(可与绑定多个事件,并且按照书写循序执行代码);
on() //被选元素及子元素上添加一个或多个事件处理程序(也可以使用事件委托)(参数一:事件类型,可以是一个或者多个使用","分开,也可以是数组;参数2:子类添加的事件处理程序,)
(参数三,传递到函数的额外数据,参数四:回调函数);
click() //点击事件;
mouseDown() //鼠标按下事件;
mouseUp() //鼠标松开事件;
mouseenter() //鼠标移入事件;
moouseleave() //鼠标移出事件;(由于大多数与DOM对象中的事件一样,不在一一举例,可以去网上查找,下面就列举一点经常使用的单独不一样的);
error() //当元素遇到错误,执行以下程序;
one() //只执行一次的函数(参数一:事件类型:参数二:回调函数);
trigger() //方法触发被选元素的指定事件类型。举个列子 $("input").trigger("select"); 触发 input 元素的 select 事件
off() //移出绑定事件;
toggle() //执行一个或者多个的点击事件,参数是一个或者多个回调函数;(测试不能使用);
hover() //相当于移入移出事件;
on("drog",function(e){e.dataTransfer}) /jquery中没有这个属性,也就没有files;
jquery中的ajax
$.ajax() //可以规定各种请求,更加灵活,参数是个配置对象;{url,data,type,success,error};dataType //接受数据的类型数据;
$.get() //get请求,更加灵活简单,但是安全型不高,会暴露字段;
$.getJSON() //遇上面相同;
$.post() //发送post请求,配置字段,请求数据;更加安全,请求的数量更加多;
type:'DELETE' //一般用于删除数据使用;也要配置对象 ;
type:'PUT' //一般用于修改数据使用;
配置对象的键:
processData //默认值为true,将参数转为序列化字符串,在使用FormData时将其设置为false;
contentType //提交数据的内容类型 默认是application/x-www-form-urlencoded 查询字段格式 在使用FormData将其设置为flase;
cache //是否缓存;get请求一般设置缓存;
$("form").serialize() //将form表单带有name值转换成查询字段;
$("form"). serializeArray() //序列化数组;
遍历与选择
$.each() //遍历数据,参数二回调函数(index,value);
eq() //在jq对象中,选择单一一个对象;
get() 选择jq中的指定元素,相当与下标;
index() //返回调用者在父元素中的下标;可以填写参数,可以指定元素中那个元素(父类调用);
parent() //获取父类;
parents() //获取向上的所有父类直到跟标签(html)(可以筛洗父类,只返回一个);
parentsUntil() //获取向上的指定之间的父元素;(调用和参数之间的,不包含调用和参数);
children() //所有子类;
find() //所有的子类,一直向下,到所有指定的元素;
next() //下一个兄弟;
prev() //上一个兄弟;
siblings() //返回所有的同胞元素
nextAll() //返回下面的所有兄弟的节点;
prevAll() //返回上面所有的兄弟节点;
nextUntil() //返回下面到指定元素的所有节点(不包含调用和参数节点)
prevUntil() //返回上面到指定元素的所有节点(不包含调用和参数节点)
常用的api
wrapAll() //把所有调用者的标签全部用指定的标签包裹起来;(一个元素就相当于给调用者加一个父类,要是多个元素,也是添加一个父类,父类会添加到第一个元素的位置);
wrapInner() //把所有调用者标签的内容标签用指定标签包裹起来;
end() //回到上一层元素本层的函数不会消失;
偏移量
offset() //调用者据body的位置;
position() //如果父类元素有定位,那么是到父类元素的偏移量,没有则是到body的偏移量;
尺寸
width() //返回宽度(不包含padding,border,margin);
innerwidth() //返回宽度(不包含border和margin);
outerWidth() //元素的宽度(不包含margin);
jQuery 效果
jQdom.hide(speed,linear,callback) //隐藏 speed隐藏的时间,linear隐藏的过度效果; ,callback回调函数;
jQdom.show(speed,linear,callback) //显示(同上);
jQdom.toggle(speed,linear,callback) //来回切换隐藏与显示;
淡入淡出
jQdom.fadeIn(speed,linear,callback) //淡入淡出的显示
jQdom.fadeOut(speed.linear.callback) //淡入淡出的隐藏;
jQdom.fadeToggle( speed,linear,callback) //来回切换隐藏与显示;
jQdom.fadeTo( speed,opcity) //颜色变淡;
滑动
slideDown(speed,linear,callback) //滑动显示;
slideUp(speed,linear,callback) //滑动隐藏;
slideToggle(speed,linear,callback) //来回切换隐藏与显示;
动画
animate({},speed,callback) //创建一个自定义动画; {}存放动画的各种属性(不能改变颜色需要改变颜色需要下载另一个插件);
预定义的值
(也可以使用预订值"show","hide","toggle",配合宽高使用效果最好);
使用队列创建一个连续动画;在callback中继续写动画效果;