jq03--基础函数

我们继续学习jq的一些函数，包括向jq对象添加、删除CSS属性以及遍历DOM树。

1.获取、设置CSS类

addClass()--向被选元素添加1个或多个类属性
    .importance{font-weight:bold;font-size:xx-large;}
    .blue{color:blue;}

    $("button").click(function(){
        $("h1,h2,p").addClass("blue");
        $("div").addClass("importance");
    });

    $("button").click(function(){
        $("div").addClass("importance blue");
    });

removeClass()--从被选元素删除1个或多个类属性
    $("button").click(function(){
        $("h1,h2,p").removeClass("blue");
    });

toggleClass()--对被选元素进行添加、删除类属性的切换操作
    $("button").click(function(){
        $("h1,h2,p").toggleClass("blue");
    });

css()--返回、设置被选元素1个或多个样式属性
    $("p").css("background-color");            --首个匹配的元素的背景色
    $("p").css("background-color","red");    --为所有匹配元素设置背景色
    $("p").css({"background-color":"red","font-size":"150%"});    --设置多个属性值

2.尺寸

    width()        --返回、设置元素的宽度(不包括内边距、边框、外边距)
    height()    --返回、设置元素的高度(不包括内边距、边框、外边距)

    innerWidth()    --返回元素的宽度(包括内边距)
    innerHeight()    --返回元素的高度(包括内边距)

    outerWidth()    --返回元素的宽度(包括内边距、边框)
    outerHeight()    --返回元素的高度(包括内边距、边框)
    outerWidth(true)    --返回元素的宽度(包括内边距、边框、外边距)
    outerHeight(true)    --返回元素的高度(包括内边距、边框、外边距)

    $("#div1").width()    $("#div1").height()    $("#div1").width(500).height(500);

    文档(HTML文档)尺寸：
        $(document).width()        $(document).height()
    窗口(浏览器视口)尺寸：
        $(window).width()        $(window).height()

3.JQ遍历 DOM树

    向上遍历：
    parent()    parents()    parentsUntil()

    $("span").parent().css({"color":"red","border":"2px solid green"});
    --遍历父元素
    $("span").parents().css({"color":"red","border":"2px solid green"});
    --遍历所有祖先元素，一路向上直到文档根元素(<html>)
    $("span").parentsUntil("div").css({"color":"red","border":"2px solid green"});
    --遍历2个给定元素之间的所有祖先元素，不包括给定元素

    向下遍历：
    children()    find()

    $("div").children().css({"color":"green","border":"2px solid red"});
    --返回直接子元素
    $("div").children("p.pclass").css({...});
    --添加参数对子元素进行过滤
    $("div").find("span").css({"color":"green","border":"2px solid red"});
    --返回被选元素的后代元素

    水平遍历(遍历兄弟节点)：
    $("h2").siblings().css({"color":"red","border":"2px solid red"});    --返回所有兄弟节点
    $("h2").siblings("p").css({"color":"red","border":"2px solid red"}); --参数过滤兄弟节点
    $("h2").next().css({"color":"red","border":"2px solid red"});        --返回下一个兄弟节点
    $("h2").nextAll().css({"color":"red","border":"2px solid red"});    --返回所有的next兄弟节点
    $("h2").nextUntil("h6").css({...});                                    --2节点间的所有兄弟节点
    $("h2").prev().css({...});                                            --返回前一个兄弟节点
    prev    prevAll()    prevUntil()与 next()相反

    过滤：
    $("div p").first().css("background-color","red");    --首个div元素内部的第一个<p>
    $("div p").last().css("background-color","red");    --最后div元素内部的最后一个<p>
    $("p").eq(1).css("background-color","red");            --返回被选元素中带有指定索引号的元素，索引从0开始
    $("p").filter(".intro").css("background-color","red");    --过滤
    $("p").not(".intro").css("background-color","red");        --与filter()相反