jQuery的学习总结

【入口函数】:

--- $(function(){   }     )

【$对象和dom对象转换】

---DOM对象转$对象    $(获取过来的DOM对象)

---$对象转DOM对象     $('')[0]   通过索引的方式转换成DOM对象

【jQuery常用的选择器】:

---基础选择器:和CSS一样  id  class 并级 标签 

---层级选择器:$(" ul>li ") 子元素选择器      $(“div span”) 后代选择器 包括孙子

---筛选选择器:

      =$("li:first")   选择第一个元素

      =$(“li:last”) 选择末尾的元素

      =$("li").eq (2)  选择索引为2的元素

      =$(“li:odd”) 选择所有奇数的元素

      =$("li:even") 选择所有偶数的元素

---【筛选父级子级素的方法】=====是方法记得加小括号调用

      =parent     $(‘li’).parent()      得到该元素的父级元素

     =children   $("div").children('p')   选择后代元素,如果不写参数,所有子元素都会选中

     =find         $("div").find("span")     选择后代元素   包括孙子元素

---【筛选兄弟元素的方法】:

---siblings       $("ul li").siblings("li")    选择除了自己以外的其他兄弟元素

---【得到当前元素的索引方法】======$(“li”).index()

---【jQuery的样式操作】:

---CSS方法来修改样式  $("li").css("color","red")      加引号中间逗号隔开

---CSS方法来修改样式 $(‘li’).css( { 300px;height:400px  }   ) 一对象的形式写入多个样式,可不加引号,属性驼峰写法属性值不是数字需要加引号

---【jQuery添加类名,移除类名】:

---addClass                   $(this).addClass("active")      添加类名

---removeClass                   $(this).removeClass("active")      移除类名

---【jQuery的动画效果】:

---jQuery的显示隐藏动画效果

  =显示 show() $("div").show(1000,function(){alert(1)}).      1000表示元素在1秒之内显示,后边的函数会在隐藏之后触发

  =隐藏 hide()  $("div").hide(1000,function(){alert(1)}).      1000表示元素在1秒之内隐藏,后边的函数会在隐藏之后触发

  =显示隐藏切换 toggle()  $("div").toggle(1000,function(){alert(1)}).   

---jQuery 上拉下拉滑动动画效果

  =slideDown()  $("div").slideDown(1000,function(){alert(1)}).   

  =slideUp()

  =slideToggle()     事件切换have相当于mouseover,mouseout     $(div).have(function(){  $(this).children("ui").slideToggle(2000)  })

---【快速滑动停止动画排队效果】:stop()

---stop()方法必须写在动画的前面        $(this).children("ui").stop().slideToggle(2000)  }

---【jQuery淡入淡出动画效果】:

---淡入 fadeIn()             $("div").fadeIn(1000)     淡淡的进入 时间为1秒

--淡出 fadeOut()

---淡入淡出切换 fadeToggle()

---修改透明度 fadeTo()   $("div").fadeTo(1000,0.5)    时间,透明度必须写      

---【jQuery自定义动画效果】:animate(  动画效果对象,动画时间         ,动画完成的回调函数            )

---例子===$("div").animate( {300,height:400,option:0.4},500   )              

【鼠标移入移出】:

---移入:mouseover

---移出:mouseout

原文地址:https://www.cnblogs.com/zzhqdkf/p/12466806.html