jQuery框架选择器

/* 基本选择器 /
/ ID选择器 #id /
/ class选择器 .class /
/ 标签选择器 标签名 /
/ 并集选择器 #id,.class,标签名 /
/ 通配符 * */

/* 层级选择器 /
/ $(".box")获取样式为box的标签 /
/ $(".box div") 获取class为box的标签(所有子孙节点)中的div标签 */
// $(".box div").css(“background”, “red”);

    /*  获取指定标签子节点中所有对应的标签 */
    // $(".box > div").css("background", "red");

    /*  获取指定标签后面的第一个兄弟节点 */
    // $("#testID + div").css("background", "#195");

    /*  获取指定标签后面的所有的兄弟节点 */
    $("#testID ~ div").css("background", "#195");

/* 父子选择器 */
/*获取父标签相关的方法 /
/ [1] parent() 获取父标签 /
// $("#testID").parent().css(“border”, “2px solid #000”);
/ [2] parents() 获取所有的祖先节点 */
// $("#testID").parents().css(“border”, “2px solid #000”);
// $("#testID").parents(“div”).css(“border”, “2px solid #000”);

    /* [3]parentsUntil() 获取 所有的祖先节点(直到某个节点为止) 不包含*/
    // $("#testID").parentsUntil("html").css("border", "2px solid #000");


    /*获取子节点相关的方法 */
    /* [1] children() 获取当前标签所有的子标签*/
    // $(".box").children("span").css("color", "red");

    /* [2] siblings() 获取当前标签所有的兄弟标签 */
    // $("#testID").siblings().css("color", "red");

    /* [3] next() 获取当前标签下一个兄弟节点 */
    // $("#testID").next().css("color", "red");

    /* [4] prev() 获取当前标签上一个兄弟节点 */
    // $("#testID").prev().css("color", "red");

    // $("testID").nextAll(); //获取当前标签后面所有兄弟节点
    // $("testID").nextUntil();//获取当前标签后面所有兄弟节点(直到...为止)
    // $("testID").prevAll();

/* 筛选选择器 /
/ 001-获取第一个li标签 */
// $(“li”).eq(0).css(“background”, “red”);
// $(“li:eq(0)”).css(“background”, “red”);
// $(“li:first”).css(“background”, “#195”);

    /* 002-获取最后一个li标签 */
    // $("li:last").css("background", "#195");

    /* 003-获取指定索引的li标签 */
    // $("li:eq(3)").css("background", "#195");

    /* 004-获取索引为奇数的所有li标签 */
    /* 004-获取索引为偶数的所有li标签 */
    // $("li:odd").css("background", "#195");
    // $("li:even").css("background", "#f08");

    /* 005-获取索引小于3的索引li标签 */
    /* 005-获取索引大于5的索引li标签 */
    // $("li:lt(3)").css("background", "#195");
    // $("li:gt(5)").css("background", "#195");

    /* 006-获取所有的li标签除了索引为3的标签之外 */
    $("li:not(:eq(3))").css("background", "#195");


    /* first 第一个 */
    /* last  最后一个 */
    /* eq    等于 */
    /* not   除了 */
    /* lt    小于 */
    /* gt    大于 */

/* 属性选择器 /
/ 001-根据属性名来选择标签，要选择拥有href属性的a标签 */
// $(“a[href]”).css(“background”, “red”);

    /* 002-根据属性值来选择标签 */
    /* [1] 链接地址等于https://www.baidu.com */
    // $("a[href='https://www.baidu.com']").css("background", "red");

    /* [2] 链接地址不等于https://www.baidu.com */
    // $("a[href!='https://www.baidu.com']").css("background", "red");

    /* [3] 链接地址以https开头 */
    // $("a[href^='https']").css("background", "red");

    /* [4] 链接地址以.cn结尾 */
    // $("a[href$='.cn']").css("background", "red");

    /* [5] 属性值包含特定值 */
    // $("a[href*='baidu']").css("background", "red");
    $("a[href*='baidu'][title='标题']").css("background", "red");