Jquery 学习笔记

一、类的操作

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>我是后来创建的li</li>");

3、添加

   var box2 = $("<li>我是后来创建的li</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(){

})
mouseenter

2、事件处理，在同一个元素上绑定多个事件
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 false

4.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)
    })

十二、jQuery插件

jquery插件库
http://www.jq22.com
http://www.htmleaf.com