jqueryAPI
入口函数：$(document).ready(function(){ console.log("jquery入口函数") }) ;$(function(){ console.log("jquery入口函数") }) ;
window.οnlοad= function(){ console.log("js入口函数") } js入口函数执行比jquery入口函数执行晚；都会等待文档加载完成，jq不等待图片；
1.x版本：兼容IE678; 2.x版本：不兼容IE678； 3.x版本：不兼容IE678,更加精简；
开发环境 -- (git,svn仓库)--测试环境 --(git,svn仓库) -- 生产环境
jQuery对象不能调用DOM对象的方法；(是一个伪数组；取出来$("li")[0]) var lis = $("li");lis[0].style.backgroundColor = "red"; lis.get(0)..style.backgroundColor = "red";
DOM对象不能调用jQuery对象的方法；(需要把DOM对象转换成jQuery对象$(变量)) var dv = document.getElementById("dv); $(dv).text("hello");
修改样式：css(name,value);
$("li").css("backgroundColor":"pink");
$("li").css({backgroundColor:"red",color:"blue",fontSize:"18px",borderBottom:"1px solid #000"});
隐式迭代：设置操作的时候：会给jq内部的所有对象都设置上相同的值；获取的时候：只会返回第一个元素对应的值。
添加类：addClass； 移除类：removeClass；判断类：hasClass； 切换样式类：toggleClass；
修改属性：attr(name,value);
$("li").attr("backgroundColor":"pink");
$("li").attr({backgroundColor:"red",color:"blue",fontSize:"18px",borderBottom:"1px solid #000"});
对于布尔类型的属性，不要attr方法，应该用prop方法；
$("input").prop("checked",true);
列表全选：
$("#j_cbAll"),click(function(){
$("#j_tb input").prop("checked",$(this).prop("checked"));
});
$("#j_tb input").click(function(){
var allLength = $("#j_tb input").length;
var checkedLength = $("#j_tb input:checked").length;
if(allLength == checkedLength){
$("#j_cbAll").prop("checked", true);
}else{
$("#j_cbAll").prop("checked", false);
}
})
基本动画：显示：show(speed); show([speed],[callback])； 隐藏：hide(speed); hide([speed],[callback])；
滑入：slideUp(speed); slideUp([speed],[callback])； 滑出：slideDown(speed); slideDown([speed],[callback])； 切换：slideToggle(speed); slideToggle([speed],[callback])；
淡入：fadeIn(speed); fadeIn([speed],[callback])； 淡出：fadeOut(speed); fadeOut([speed],[callback])； 切换：fadeToggle(speed); fadeToggle([speed],[callback])；
animate:自定义动画。
$(selector).animate({params},[speed],[easing],[callback]);
params:要执行动画的css属性，带数字（必选）；speed:执行动画时长；easing：执行效果，默认为swing（缓动）可以是linear（匀速）callback：动画执行完后立即执行的回调函数。
stop()方法：停止动画效果。
stop（clearQueue, jumpToEnd);
第一个参数：是否清楚队列；第二个参数：是否跳转到最终效果。
创建添加元素：
append（）；appendTo（）；prepend();prependTo(); before(); after();
清空节点与删除节点：
empty(); remove();
弹幕：
$(function(){
var colors= ["red","green","hotpink","pink",yellow"];
$("btn").click(function(){
var randomColor = parseInt(Math.random()*colors.length);
var randomY = parseInt(Math.random() * 400)
if($("#txt").val().trim().length() ===0){return;}
$("").text($("#text).val()).css("color",colors[randomColor]).css("left","1400px")
.css("top",randomY).animate({left:-500},10000,"linear",function(){$(this).remove();}).appendTo("#boxDom");
$("#text").val("");
})
$("#text").keyup(function(e){
if(e.keyCode == 13 ){ $("#btn").click();
})
})
val方法用于设置和获取表单元素的值，例如input/textarea的值；
$("input").val("思念"); $("input").val();
html方法与text方法：html方法相当于innerHTML(识别标签)，text方法相当于innerText；
获取页面可视区宽高：
$(window).resize(function (){
$(window).width();$(window).height();
});
获取宽度：
innerWidth()=padding+width; outerWidth()=padding+width+border; outerWidth(true) = padding+width+border+margin;
scrollTop与scrollLeft：设置或者获取垂直滚动条的位置；
获取页面被卷曲的高度：$(window).scrollTop(); 获取页面被卷曲的宽度：$(window).scrollLeft();
offset();相对于doc；position()相对于有定位的父元素;
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
简单事件注册：
click(handler) 单击事件 ；mouseenter(handler) 鼠标进入事件 ；mouseleave(handler) 鼠标离开事件
缺点：不能同时注册多个事件
bind方式注册事件：
//第一个参数：事件类型 ；//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){ //事件响应方法 });
缺点：不支持动态事件绑定
delegate注册委托事件：给父元素注册委托事件，最终还是有由子元素来执行。
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
缺点：只能注册委托事件，因此注册时间需要记得方法太多了
on注册事件：
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
on注册简单事件：
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});
on注册委托事件：
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
事件解绑
unbind方式（不用）
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
undelegate方式（不用）
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
off方式（推荐）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
触发事件：
$(selector).click(); //触发 click事件
$(selector).trigger("click");jQuery事件对象：
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
//screenX和screenY 对应屏幕最左上角的值
//clientX和clientY 距离页面左上角的位置（忽视滚动条）
//pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
//event.keyCode 按下的键盘代码
//event.data 存储绑定事件时传递的附加数据
//event.stopPropagation() 阻止事件冒泡行为
//event.preventDefault() 阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
delay设置延时来推迟执行； * {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 900px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.nav li {
width: 100px;
height: 60px;
/*border: 1px solid yellow;*/
float: left;
position: relative;
overflow: hidden;
}
.nav a {
position: absolute;
width: 100%;
height: 100%;
font-size: 24px;
color: blue;
text-align: center;
line-height: 60px;
text-decoration: none;
z-index: 2;
}
.nav span {
position: absolute;
width: 100%;
height: 100%;
background-color: yellow;
top: 60px;
}
链式编程：
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
each方法
jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
$("li").each(function(index,element){
$(element).css("opacity","(index+1)/10");
})
多库共存
jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.
var c = $.noConflict();//释放$的控制权,并且把$的能力给了c
jquery.color.js 可以支持颜色的渐变。animate不支持颜色的渐变。$("div").animate({ backgroundColor:"#ffc0cb"},1000);十六进制
jquery.lazyload.js 懒加载
![]()
$("img.lazy").lazyload();
jquery插件： jquery.prototype === $.fn
$.fn.bgColor = function(color){ this.css("backgroundColor",color); return this; };
$("img.lazy").lazyload();
jquery插件： jquery.prototype === $.fn
$.fn.bgColor = function(color){ this.css("backgroundColor",color); return this; };