jquery使用

jquery的使用：

1. jquery注册事件：$("#btn").click(function (){ $(this).css(“backgroundColor”，“red”)})

2.jquery转换dom对象：$("bthObj").get(0)或$("btnObj")[0]

3.dom对象转jquery：$(btnObj)

4.dom获取：document.getElementById("btn")...

5.jquery获取：$("#btn")

6.js设置样式：this.style.backgroundColor="red"

7.jquery中的方法：.val()方法获取value值。.text()获取文本值。 .html()获取div中显示的元素内容。

一般的在方法中写入内容就是给元素设置内容，什么也不写是获取内容。

8.鼠标经过离开事件：$("#uu>li").mouseover(function (){ $(this).css("backgroundColor","red")})

                                   $("#uu>li").mouseout(function (){ $(this).css("backgroundColor","")})

9.获取所有的子元素children：$(this).children("ul").show();

10.索引选择器：eq(3)判断索引与3相等的。 lt(3)判断索引小于3的。 gt(3)判断索引大于3的。

11.获取当前的索引值：var index=$(this).index

   以下一般处理tab栏切换问题一类的如下：

    判断相等的：$("#center>li:eq('+index+')").siblings("li").hide();

                         $("#center>li:eq('+index+')").show();

12. .find()方法针对当前元素找里面的一些其他元素。

 处理下拉菜单显示隐藏问题：

       $(this).children("ul").find("li").show();

       $(this).siblings("li").find("ul").find("li").hide();

13.  .addClass("类样式名")

      .removeClass("移除类样式名")

     hasClass()是否有类样式

    toggleClass() 切换

14. tab键产品切换

     $(".tab>li').mouseover(function (){

                 $(this).siblings("li").removeClass("active")

               $(this).addClass("active");

              var index=$(this).index();

              $(".products>div:eq('+index+')").siblings("div").removeClass("selected");

             $(".products>div:eq('+index+')").siblings("div').addClass("selected");

})

15. mouseenter 鼠标进入

      mouseleave 鼠标离开

      next() 当前元素的下一个元素

     nextAll() 当前元素的后边所有元素

     prev() 当前元素的前边的一个兄弟元素

    prevAll() 当前元素的前边所有元素

    last() 最后一个

   slideUp() 滑入

  slideDown() 滑出

  slideToggle() 切换

  fadeIn() 淡入

fadeOut() 淡出

  fadeToggle() 切换

fadeTo() 淡入到

16. 动画

   $("div").animate({"width":"300px","height":"200px"},1000,function (){

    $("#dv').animate({...},2000,function (){})     

})

 17. 元素追加

  append() 把超链接追加到

 .stop() 停止当前动画

 .prepend() 插入到前面

after() 把当前元素添加到当前元素的后面

before() 把元素添加到当前元素的前面

18.清空元素

 $("#dv").html()

 $("#dv").empty()

 $("#dv").remove()

19. 克隆方法 clone()

20. 自定义属性

  创建设置：var aObj=$("<a></a>")

  aObj.attr("href',"...")

 aObj.attr("title',"百度")

 获取: aObj.attr("href');

21. .prop()可以真正获取元素是否选中

      $("#ck").prop("checked",true)

22.设置元素宽高

  parseInt($("#dv').css("width")*2)

获取 var width=$("#dv").width()

设置 $("#dv").width(width)       

设置偏移 $("div').offset({"left":"200px","top":"100px"})

获取$("div").offset().left();

23.滚动距离问题

$(window).scroll(function (){

   $(document).scrollTop()>$(".top").height();

  滚动要设置position:fixed;（脱离文档流）

})