JQ的常用方法1

$()下的常用方法
• has()
• not()
• filter()
• next()
• prev()
• find()
• eq()
• index()
• attr()

$()下的常用方法
• addClass() removeClass()
• width() innerWidth() outerWidth()
• insertBefore() before()
• insertAfter() after()
• appendTo() append()
• prependTo() prepend()
• remove()
• on() off()
• scrollTop()

1、filter 过滤，已经获取到的元素节点中过滤

例：
        $(function(){
           $("div").filter(".box").css("backgroundColor", "red");
        })
            //先获取div，再获取class名为box的元素节点

2、not 和filter是反义词

    例：
        $(function(){
           $("div").not(".box").css("backgroundColor", "red");
        })

3、has 拥有
筛选的是div节点，但是看的子节点中是否有符合条件的。

    例：
        $(function(){
          $("div").has(".box").css("backgroundColor", "red");
        })
           //获取div，筛选出拥有子节点class名为box的元素节点

4、next() 找到同级元素中的上一个节点

    例：
        $(function(){
          $("div").next(".box").css("backgroundColor", "red");
        })

5、prev() 找到同级元素中的下一个节点

    例：
        $(function(){
          $("div").prev(".box").css("backgroundColor", "red");
        })

6、find 查找子节点

    例：
        $(function(){
          $("ul").find("[name=hello]").css("backgroundColor", 'blue')
        })
            //选中ul下的li元素，也可以写成：$("ul li").css("backgroundColor", 'blue');作用相同

7、index()直接找出当前节点在兄弟节点中的下标

    例：
    $(function(){
         $("li:eq(3)").css("backgroundColor", 'orange');
         $("li").eq(3).css("backgroundColor", 'orange');
            //上述两种作用相同
    })

8、css函数

    例：
    $(function(){
         $("div").css("height", 300);  //如果赋值，批量操作

          alert($("div").css("height"));   //如果有多个元素，则默认返回下标为0的元素的值

          //同时设置多个样式
           $("div").css({
                width: "300px",
                height: "300px",
                backgroundColor: "red"
            })
    })

9、attr函数 操作行间的属性

    例：
    $(function(){
            //获取行间样式
            alert($("div").attr("class"));
            $("div").attr("class", "xxx");
                //将class改为xxx

            //设置多个样式
            $("div").attr({
                title: "yyyy",
                class: "yyyyyy",
                xxxx: "zzz"
            })
    })

10、addClass 新增class名

    例：
    $(function(){
        $("div").addClass("box3 box4 box2");
    })
        //则div中class= “box1 box2 box3 box4”

11、removeClass 删除class名

    例：
    $(function(){
        $("div").addClass("box3 box4 box2");
    })
        //则div中class= “box1”

12、width()、innerWhidth()、outerWhidth() height类似于width

    例：
        $(function(){

            alert($("div").width());   //100  width

            alert($("div").innerWidth()); //width + padding

            alert($("div").outerWidth()); //width + padding + border

            alert($("div").outerWidth(true));//width + padding + border + margin
        })

13、insertBefore() before() 插入到前面

    例：
    $(function(){
            //找到span节点，插入到div前面
            $("span").insertBefore($("div"));        //使用insertBefore

            //使div节点前为span节点
            $("div").before($("span")).css("backgroundColor", 'red');        //使用before
    })

    insertBefore与before中作用相同，不同之处在与后面添加css样式时添加的对象不同

14、insertAfter() after() 插入到后面（类似于insertBefore与before）

    例：
    $(function(){
            //找到div节点，插入到span后面
            $("div").insertAfter("span");

            //div在span后
            $("div").after($("span")).css("backgroundColor", 'red'); 
    })

15、appendTo() append() 插入到最后一个子节点的后面（类似于insertBefore与before）

    例：
    $(function(){
           //找到span节点插入到div节点子节点的末尾
           $("span").appendTo($("div"));

            //在div最后一个子节点后面插入span
            $("div").append($("span")).css("backgroundColor", 'red'); 
    })

16、prependTo() prepend() 插入到首个子节点前（类似于insertBefore与before）

    例：
    $(function(){
           //找到span节点插入到div节点子节点的首位
           $("span").prependTo($("div"));

            //在div首个子节点前面插入span
            $("div").prepend($("span")).css("backgroundColor", 'red'); 
    })

17、remove() 删除节点

    例：
    $(function(){
            //删除span
           $("span").remove();
    })

【注】不要为了使用JQ而使用JQ。
on() off()

            on绑定事件
            off取消绑定事件

    例：
    $(function(){
                    当参数为1个时，没有必要使用JQ，使用JS即可
            function yellow(){
                this.style.backgroundColor = 'yellow';
            }

                    //1、传两个参数
            $("li").on("click", yellow);

                   //2、传入两个参数
            var i = 0;
            $("li").on("click mouseover", function(){
                this.innerHTML = i++;
            })

                    //3、给不同的事件，添加不同的函数
            $("li").on({
                click: function(){
                    alert("点击");
                },
                mouseover: function(){
                    this.style.backgroundColor = 'red';
                },
                mouseout: function(){
                    this.style.backgroundColor = 'blue';
                }
            })

                    //4、实现事件委托  第二参数 选择器
            $("ul").on("click", "li,div", function(){
                this.style.backgroundColor = 'red';
            })

                    //取消click事件上所有的函数
            $("li").off("click");

                    //取消所有的事件
            $("li").off();

                    //取消click事件下的yellow函数
            $("li").off("click", yellow);

    })

scrollTop() 滚动距离