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()相反

巴特西

jq03--基础函数

最新文章

热门文章