jQuery的学习总结

Posted 2020-11-26 zzhqdkf

【入口函数】：

--- $(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（ { width: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( {width:300,height:400,option:0.4},500   )              

 

【鼠标移入移出】：

---移入：mouseover

---移出：mouseout