JQuery总结

1.JQuery
  1)JQuery他是对javascript对像/函数的一种封装 就是前端的框架
  2)写得少,做得多
  3)有强大的选择器的支持(语法与css选择器几乎一样)

2.jquery环境搭建
  1) <script type="text/javascript" src="你的jquery.js的相对路劲"></script>
  2)#(function(){//测试是否加载成功})
  3)$等同于JQuery   $(选择器/对象/函数).JQuery方法() // val() html() text() 

3.jquery与dom对象的转换/封装
  $(原生dom对象).jquery的方法

4.jquery的选择器
  1).基本选择器
    1.id选择器 $("#id")
    2.类选择器 $(".类名")
    3.标签选择器 $("标签")
    4.通用选择器 $("*")  //注意:这个*号代表所有的节点
    5.并集选择器 $("#id,.类名,标签") 一次性匹配多个对应的节点
    6.交集选择器 $("#id.类名") 必须满足所有的条件才会被匹配
  2).层次选择器
    1.后代选择器        $("div p") //意思就是选择所有div标签所有后代的p标签(子/孙.....)
    2.子选择器        $("div>p") //意思就是选择所有div标签直接后代的p标签(子)
    3.相邻元素选择器    $("#div+div") //意思就是选择#div的下一个兄弟元素 (一个)
    4.同辈元素选择器    $("#div~div")//意思就是选择#div后面的所有兄弟元素
  3).属性选择器(用的很少)
    属性包含    $("[href]")        拥有href属性的标签
    属性值包含    $("[href*='#']")    属性值包含#属性的标签
    属性开头包含    $("[href^='3']")    属性值开头包含3属性的标签
    属性包含    $("[href$='a']")    属性值结尾包含a属性的标签
    属性包含    $("[href='href']")    属性值等于href属性的标签
    属性包含    $("[href!='href']")    属性值不等于href属性的标签
  4).基本过滤选择器
    :first        $("div:first")    //选择所有div标签中第一个div
    :last        $("div:last")    //选择所有div标签中的最后一个div
    :not("#div1")    $("div:not('#div1')") //选择id值不是div1的所有其他div标签
    :even        $("div:even") //选择所有div标签中偶数的div标签index从0开始
    :odd        $("div:odd") //选择所有div标签中奇数的div标签index从0开始
    :eq(index)    $("div:eq(2)")//选择所有div标签中下标为2的div index从0开始
    :gt(index)    $("div:gt(1)")//选择所有div中下标大于1的div index从0开始
    :lt(index)    $("div:lt(1)")//选择所有div中下标小于1的div index从0开始
    :header        $(":header")    //选择所有h1-h6标签元素
    
  5).可见性过滤选择器
    :visible    $(":visible") //选择页面上所有的可见的元素
    :hidden        $(":hidden")  //选择页面上所有不可见的元素

5.隐式迭代和链式操作
    1)隐式迭代
    $("div").css("color","red") //jquery会自动遍历返回的div节点数组 依次添加上css样式,不需要自己遍历
    2)链式操作
    $("#div1").css("color","red").find("p").hide().end().hide()

6.JQuery的事件
   1.鼠标事件
    配套使用 鼠标移入选中的节点触发 但是移入他的子节点不会再次触发
    1)mouseenter 移入
        $(选择器).mouseenter(function(){逻辑代码})
    2)mouseleave 移出
        $(选择器)mouseleave(function(){逻辑代码})
    配套使用 鼠标移入选中的节点触发 但是移入他的子节点会再次触发
    3)mouseover 移入
        $(选择器)mouseover(function(){逻辑代码})
    4)mouseout  移出
        $(选择器)mouseout(function(){逻辑代码})
   2.键盘事件
    配套使用
    keyup    键盘按下事件
    $(选择器).keyup(function(event){event.keyCode //判断用户按下了哪个键})
    keydown    键盘弹起事件
    $(选择器).keydown(function(event){})
   3.复合事件
    鼠标的复合事件
        $(选择器).hover(function(){//等同于mouseenter},function(){//等同于mouseleave})
    隐藏显示,添加删除class
        $(选择器).toggleClass("class1 class2") 自动在两个class中切换
            //实现了 addClass以及 removeClass
   4.样式的操作
    1)单个样式的操作
    $(选择器).css("样式","样式的值")
    2)多个样式的操作
    $(选择器).css({"样式1":"样式值1","样式2":"样式值2"})

6.节点的操作
    1)节点的创建
        $li = "<li>li1</li>"
    2)插入节点
        1.插入创建好的节点
            $("ul").append($li)
        2.直接在插入的时候创建
            $("ul").append("<li>li1</li>")
    3)插入方法
        append(content)         插到后面
        appendTo(content)    插到后面
        prepend(content)    插到前面
        prependTo(content)    插到前面
        after(content)            插入到自己后面
        insertAfter(content)       插入到自己后面
        before(content)          插入到自己前面
        insertBefore(content)     插入到自己前面
    4)节点的遍历
        $(data).each(function(index,object){//逻辑代码})
        $.each(data,function(index,object){//逻辑代码})

7.计时器
     //计时器
     //表示每隔1000毫秒执行一次function里面的内容
     setInterval(function(){},1000)
     //表示1000毫秒之后执行一次function里面的内容
     setTimeout(function(){},1000)