jQuery学习笔记2

一、获取并设置CSS类:

  1、addClass( ) 方法 :可以选取多个元素,也可以在该方法中规定多个类。

1 $("#div1").addClass("important blue");
2 $("h1,h2,p").addClass("blue");

  2、removeClass( )方法:addClass( )方法类似

  3、toggleClass( )方法:该方法对被选元素进行添加/删除类的切换操作

  4、css( )方法:可以返回指定的css属性 、设置css属性(可以设置多个)

1 console.log($("p").css("background-color")); // 输出css属性
2 $("p").css("background-color","yellow"); // 设置css属性
3 css({"propertyname":"value","propertyname":"value",...}); //设置多个css属性

二、尺寸(width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()、

  1、width() 返回元素的宽度(不包括内边距、边框或外边距)。

  2、innerWidth()返回元素的宽度(包括内边距)。 padding

  3、outerWidth() 方法返回元素的宽度(包括内边距和边框)。 padding、border

  4、outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。padding、border、margin

  5、高度与宽度类似.

三、遍历

  1、祖先(parent()、parents()、parentsUntil())

    parent() 方法返回被选元素的直接父元素。

    parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

    parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

  2、后代(child()、find())

    child()方法只会向下一级DOM树遍历,返回被选元素所有直接子元素

    find()方法返回被选元素的后代元素,一路向下直到最后一个后代。

    下面的例子返回属于 <div> 后代的所有 <span> 元素:$("div").find("span");

  3、同胞(siblings()、next()、nextAll()、nextUntil()、)

    siblings() 方法返回被选元素的所有同胞元素。

    $("h2").siblings();    //返回<h2>的所有同胞元素

    $("h2").siblings("p"); //返回<h2>的同胞元素的所有<p>元素

    next() 方法返回被选元素的下一个同胞元素,该方法只返回一个元素。

    nextAll() 方法返回被选元素的所有跟随的同胞元素。

    nextUntil() 顾名思义,该方法返回介于两个给定参数之间的所有同胞元素。

  4、过滤(first()、last()、eq()、filter()、not())

     first() 方法返回被选元素的首个元素。下面的例子选取首个 <div> 元素内部的第一个 <p> 元素:

    $("div p").first();

    last() 方法返回被选元素的最后一个元素。下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素:

    $("div p").last();    
    
    eq()方法返回被选元素中带有指定索引号的元素,索引号从0开始。
    $("p").eq(1);  //选取第二个 <p> 元素(索引号 1)
    
    filter()方法过滤掉不符合标准的元素
    ("p").filter(".intro").css("background-color","yellow"); //p元素中class为intro的元素背景色会变黄。
    
    not()
法过滤掉符合标准的元素
    
("p").not(".intro").css("background-color","yellow"); //p元素中class为intro的元素背景色不会变黄。



参考w3school

原文地址:https://www.cnblogs.com/qianlihorse/p/4058539.html