一、类的操作
1.添加类： addClass()
$("div").click(function(){
$(this).addClass("current")
})2.删除类：removeClass()
3.切换类: toggleClass()
如果有这个类名，就加上。
如果没有这个类名，就删除。二、获取索引号
三、获取元素
1、标签
$("div")
$("img")
2、类名、id名
$("className")
$("idName")
3、兄弟元素
siblings()
4、子元素
children()
5、父元素
parent()
祖先元素
parents()
6、索引
获取索引号：index（）
选中顺序 eq（）
7、链式编程
$(this).addClass("current").siblings().removeClass("current");
四、Jquery 效果
1、显示隐藏
show()
hide()
$(".tab_con .item").eq(index).show().siblngs().hide()toggle()
2、滑动
slideDown()
slideUp()
slideToggle()
3、淡入淡出
fadeIn()淡入
$("div").fadeIn(1000)fadeOut()淡出
$("div").fadeOut(1000)fadeTogle()：淡入淡出切换
fadeTo()：修改透明度方法，速度和透明度要必须写
4、自定义动画
animate()
$("button").click(function(){
$("div").animate({
left: 500,
top: 300
})
})5、stop
解决的场景：鼠标滑动比较快，出现前面一个动画还没结束，下一个动画就开始了
动画都存在排队的问题。
$(this).children("ul").stop().slideToggle()stop 必须写到动画的前面
五、获取Jquery属性
1、原有的属性
$("a").prop()2、自定义属性或者h5新增属性
$("a").attr()3、数据缓存
4、选择框选中属性 checked
$("input").prop("checked",true)获取选中的选择框
$("input:checked")获取选中的选择框的长度
$("input:checked").length六、获取Jquery文本值
$("div").html()
$("div").text()
$("input").val()//获取表单值七、元素操作
遍历、创建、添加、删除元素等操作
1、遍历
$("div").each(function(i,doEle){
})
2、创建
var box2 = $("我是后来创建的li ");3、添加
var box2 = $("我是后来创建的li ");
//内部添加，生成之后是父子关系
$(".box").append(box2) //在后面添加
$(".box").preppend(box2) //在前面添加
//在外部添加，生成之后是兄弟关系
$(".box").after(box2) //后面添加
$(".box").befor(box2) //前面添加4、删除
八、Jquery尺寸位置操作
1、获取尺寸
2、获取位置
offSet() //相对于文档的距离
position() //相对于父级相对定位元素的距离
scrollTop()
scrollLef()
$("body,html").stop().animate({
scrollTop:0
}) //鼠标滚动事件
$(window).scroll()
//文档滚动
$(document).scrollTop()var boxTop = $(".box").offset().top;
$(window).scroll(function(){
var scrollTop = $(document).scrollTop();
if(scrollTop >= boxTop){
alert('exceed');
}
})九、事件
1、单个事件注册
$("div").click(function(){
})
mouseenter2、事件处理，在同一个元素上绑定多个事件
2、1多个事件不同的操作
$(".box").on({
mouseenter: function(){
$(this).css("background","blue")
},
click: function(){
$(this).css("background","brown")
}
})//多个事件同一个操作
$(".box").on("mouseenter mouseleave",function(){
$(this).toggleClass('box-bg')
})//给原本绑定在子元素的事件委托给父元素，还是在子元素上触发
应用场景：给未来动态创建的元素绑定事件
$("div").on("click","div",function(){
alert(11)
})2、2解绑事件 off()
示例1：
$(".box").on({
click:function(){
alert(1)
}
})
//解绑
$(".box").off() //解除".box"身上的所有事件
$(".box").off("click"); //解除".box"身上的点击事件示例2（事件委托）：
$("div").on("click",".box",function(){
$(this).toggleClass("box-bg")
})
$("div").off() //解除".box"身上的所有事件
$("div").off("click",".box"); //解除".box"身上的点击事件3、事件只触发一次 one()
$(".box").one("click",function(){
alert(1)
})4、自动触发事件
4.1 简写形式
element.click()4.2 trigger方法
element.trigger("eventType")
$(".box").trigger("click")4.3 triggerHandler方法，不会触发事件的默认行为
4.4阻止默认行为
event.preventDefault 或者 return false4.5阻止事件冒泡
event.stopPropagation示例
$(".box").on("click",function(){
console.log(1);
event.stopPropagation(); //不加上这一行，点击“.box”，会打印1和2。加上这一行，就只打印1
})
$(document).on("click",function(){
console.log(2);
})十、拷贝
$.extend(newObj,oldObj) //深拷贝
$.extend(newObj,oldObj) //浅拷贝
十一、多库共存冲突的问题
1、直接用jQuery
2、var otherName = jQuery.noConfict();
otherName(".box").click(function){
alert(1)
})