JQuery部分方法总结
一、jq选择网页元素：不需要用循环，所有的操作都是批量操作
二、jq独有的表达式：
$ 是一个function的名字
$ 就是一个构造函数
$() 相当于 调用 new JQuery();
【注】构造函数可以封装大型的JS库。
选择元素：
$("div:first")第一个
$("div:last")最后一个
$("div:even")下标为奇数的
$("div:odd")下标为偶数的
$("div:eq(2)")下标为2的
$("div[name=hello]")通过属性
筛选方式：
$("div:eq(2)") = $("div").eq(2)
$("div").filter('[name=hello]')
$("div.box") = $("div").filter('.box')
方法函数化：
在jq中没有=赋值，只有函数传参
window.onload = function(){
alert(1);
}
alert(2);
//先输出2 再加载页面，等页面全部加载完在输出1
在jq中替代window.onload的方法是
$(function(){
alert(1);
})
alert(2);
jq中的事件绑定
$("div").click(function(){
this.style.backgroundColor = 'red';
})
$("div").mouseover(function(){
this.style.backgroundColor = "red";
})
链式操作
对同一个元素节点进行不同的事件绑定时，可以在一个事件绑定完成后加.拼接新的事件
$("div").css("backgroundColor", 'red').click(function(){
alert(1);
}).mouseover(function(){
this.style.backgroundColor = 'blue';
}).mouseout(function(){
this.style.backgroundColor = 'orange';
})
取值赋值一体化
$("#div1").html("我是设置的内容"); //赋值
alert($("#div1").html()) //取值
css方法专门用来去操作css样式
$("#div1").css("height", "300px") //300px可以写成300 “300” “300px”
JQ和JS的关系
JS和JQ是可以共存，但是不能混用
JS的对象，如果想用JQ的方法，必须用$()调用一下
filter过滤，已经获取到的元素节点中过滤
$("div").filter(".box").css("backgroundColor", "red");
not 和filter是反义词
has拥有 筛选的是div节点，但是筛选条件是div中的子节点
$("div").has(".box").css("backgroundColor", "red");
filter,not,has都是筛选div
next()找到同级元素中的上一个节点
prev()找到同级元素中的下一个节点
(".box").next()
(".box").prev()
find 查找子节点
index()直接找出当前节点在兄弟节点中的下标
必须是ul下的li标签 $("ul").find("li")
$("ul").find("[name=hello]")
$("ul li")
index():
alert($(".box").index());
css函数
attr函数 操作行间的属性
获取行间样式
alert($("div").attr("class"));
设置行间样式：
$("div").attr("class", "xxx");
设置多个样式：
$("div").attr({
title: "yyyy",
class: "yyyyyy",
xxxx: "zzz"
})
addClass
removeClass
【注】处理class的
$("div").addClass("box3 box4 box2");
$("div").removeClass("box2 box3");
<body>
<div class = 'box1 box2'></div>
</body>
width
innerWidth() = width + padding
outerWidth() = width + padding + border
outerWidth(true) = width + padding + border + margin
节点操作
找到span节点，插入到div前面
$("span").insertBefore($("div")); //span
div
找到div节点，插入到span后面 span
div
$("div").insertAfter("span");
找到span节点插入到div节点子节点的末尾
$("span").appendTo($("div")); //div span
找到span节点插入到div节点子节点的首位 //span div
$("span").prependTo($("div"));
删除节点
$("span").remove();
找到span节点，插入到div前面
$("span").insertBefore($("div")).css("backgroundColor", 'red');
div前面是span
$("div").before($("span")).css("backgroundColor", 'red');
//变化颜色不同
<div>
div1
<em>em</em>
</div>
<span>span</span>
on绑定事件
使用on方法添加点击事件
1、传两个参数
$("li").on("click", yellow);
2、传入两个参数
var i = 0;
$("li").on("click mouseover", function(){
this.innerHTML = i++;
})
3、给不同的事件，添加不同的函数
$("li").on({
click: function(){
alert("点击");
},
mouseover: function(){
this.style.backgroundColor = 'red';
},
mouseout: function(){
this.style.backgroundColor = 'blue';
}
})
4、实现事件委托 第二参数 选择器
$("ul").on("click", "li,div", function(){
this.style.backgroundColor = 'red';
})
one( )绑定事件只能触发一次
和on( )区别
$("ul").one("click", "li,div", function(){
this.style.backgroundColor = 'red';
})
一个节点触发一次one事件就不会再触发
off取消
取消click事件上的所有函数
$("li").off("click");
取消所有的事件
$("li").off();
取消某一个事件下的某一个函数
$("li").off("click", yellow);
滚动距离 scrollTop()
$(document).click(function(){
alert($(window).scrollTop());
})
//点击的时候获取滚动过去的距离
jquery中的事件
jq是不需要去兼容的，所有方法都是兼容好的
which
将鼠标和键盘事件结合在一起
1.如果添加的是鼠标事件，返回点击鼠标对应的码，
1 左键 2 滚轮 3 右键
2.keydown 事件 代表的是键码 keyCode
3、keypress事件 代表的是字符码charCode
阻止事件
preventDefault 阻止默认行为
stopPropagation 阻止事件冒泡
return false; //代表既阻止默认行为，又阻止事件冒泡
例如：
$("a").click(function(ev){
return false;
})
距离计算
clientX clientY 原点位置是可视窗口的左上角
pageX pageY 带滚动距离
screenX screenY 根据屏幕
offset( )和position( ),offsetParent( )
offset() 只计算可是元素可视大小距最左边的距离
position() 算元素所有的距离，包括margin，计算距第一个有定位的父级的距离。
offsetParent( )找第一个有定位的父元素，找不到就是html
细节函数
val() 取值赋值一体化
size()获取到的元素节点的个数
$("li").size() = $("li").length
each()jq的遍历，遍历我们获取到的所有元素
$("li").each(function(index,item){
$(item).html(index);
})
//li标签的innerhtml是对应的下标
JQ的动画特效
1.运动：hover函数(移入和移出的动画)
hover(funOver,funout)
$("div").hover(function(){
this.innerHTML = "移入"；
//或者 $(this).html("移入");
},function(){
this.innerHTML = "移出";
//或者$(this).html("移出");
})
移入移出的动画特效
可以传入参数，
第一个参数 毫秒数 动画持续的事件
第二个参数 回调函数 动画执行完毕以后执行的代码
(1)show() 显示
hide() 隐藏
(2)fadeIn() 淡入
fadeOut() 淡出 透明度发生变化 0-1
fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
(3)卷闸
slideDown()
slideUp()
$(function(){
$("#div1").hover(function(){
$("#div2").hide(2000, function(){
$("#div1").html("动画移入完成")
});
}, function(){
$("#div2").show(2000, function(){
$("#div1").html("动画移出完成")
});
})
})
2:.animate( )
stop( )停止动画
delay( )延迟 延迟执行 参数传入毫秒数
animate( )
第一个参数 变化样式属性
第二个参数 动画持续的事件 不传入默认400毫秒
第三个参数 回调函数
提供了两种运动形式：swig 慢快慢(默认) linear(匀速)
stop( )停止动画 （例如滑出时结束滑入的动画并进行滑回的动作）
stop(true)关闭所有动画
stop(true,true)关闭所有动画，当前正在运动的动画直接到目的值
finish( )关闭所有的动画，将所有动画都到达目的值
链式运动：可以在一个animate后边再加一个animate
【js和jq可以共存 但是不能混用】
text() 获取元素节点中，包括子节点中的纯文本 innerText
alert($("div").html())只显示第一个div的内容
alert($("div").text())将所有div的内容都解析输出
get( )可以实现js与jquery的混用
$( ).get(下标).js代码
alert($("div").get(1).innerHTML);
alert($("div")[1].innerHTML);
两种表达方式是一样的
html不解析标签 直接输出
将div的text改成"<h1>h1</h1>"并输出
$("div").text("<h1>h1</h1>");
remove和detach和clone
remove()删除元素节点
返回值：就是删除的节点
detach()删除元素节点，但是可以保留该节点之前的行为
clone( )克隆节点本身，无法克隆节点的行为
clone(true)还能够克隆行为
ready 当文档加载完成后，才去执行
节点操作
parents( )获取当前节点所有的父亲节点，参数是筛选条件(css选择器的字符串)
closest( )获取当前节点的父节点，必须传入参数，获取第一个符合条件的父节点(包括本身)
siblings( )
获取，当前节点的同级兄弟节点，参数筛选条件
nextAll( )获取，当前节点的往下同级兄弟节点，参数筛选条件
prevAll() 获取，当前节点的往上同级兄弟节点，参数筛选条件
parentsUntil() 从当前节点开始，找所有的父节点，直到某个节点为止
nextUntil() 获取，当前节点的往下直到某一个节点为止所有同级兄弟节点，参数筛选条件
prevUntil()
对应的代码
$("#div3").parentsUntil("body").css("backgroundColor", 'red');
包装
wrap() wrapAll() wrapInner() unwrap() 了解
$("span").wrap("<em>");
//整体打包
$("span").wrapAll("<em>");
// 内部包装
$("span").wrapInner("<em>");
//删除
$("span").unwrap("<div>");
删除所有span元素的div父元素：
数据串联
<form action="#">
<input type="text" name = 'a' value = "1">
<input type="text" name = 'b' value = "2">
<input type="text" name = 'c' value = "3">
</form>
serialize()alert($("form").serialize());
输出//a=1&b=2&c=3 (queryString格式)
?a=1&b=2&c=3(search格式)
{a:1,b:2,c:3} (query格式)
serializeArray() 变成对象的格式[{ }{ }{ }]必须用在表单里
不同的节点要有相同的需求，可以用add拼接
$("div").add("em").add("li").css("backgroundColor", 'red');
slice( )选择
$("li").slice(1, 4).css("backgroundColor", 'red');
//[1,4)下标
添加自定义事件bind
(js中bind是改变this指向)
$("button").bind("play", function(){
alert("播放");
})
trigger主动触发某一事件类型上所有的函数
在input失去焦点时触发，且在button点击时也去触发input的事件
事件细节
ev.data方法向被选元素附加数据，或者从被选元素获取数据。
ev.target(兼容后触发对象)
ev.type(输出事件类型)
$(document).mousedown(function(ev){
alert(ev.type)
})
//mousedown
$(document).on("click", {name: "钢铁侠", sex: "男"}, function(ev){
alert(ev.data);
//[object Object]
alert(ev.data.name)
//钢铁侠
})
案例：拖拽且限制出界
1.声明offsetX和offsetY
var offsetX = 0;
var offsetY = 0;
2.给div添加鼠标按下事件
$("div").mousedown(function(ev){
offsetX = ev.clientX - $(this).offset().left;
offsetY = ev.clientY - $(this).offset().top;
3.在添加mousemove事件的时候是在document添加的，所以如果直接用this会指向document，应该加一步
var _this = this;
4.添加mousemove事件
$(document).mousemove(function(ev){
5.限制出界
var l = ev.clientX - offsetX;
var t = ev.clientY - offsetY;
if(l >= $(window).width() - $(_this).innerWidth()){
l = $(window).width() - $(_this).innerWidth();
}
if(l <= 0){
l = 0;
}
if(t >= $(window).height() - $(_this).innerHeight()){
t = $(window).height() - $(_this).innerHeight();
}
if(t <= 0){
t = 0;
}
$(_this).css({
left: l,
top: t
})
})
})//mousemove是添加在mousedown中的
6.添加mouseup松开事件
$(document).mouseup(function(){
$(document).off("mousemove");
//取消移动事件
})