• jq——选择器


    jquery:核心,内容

    语法:$(select).action();

    console.log:控制台日志,将想要的东西打印出来

    选择器,事件,DOM,动画,基本操作,插件,ajax

    基本选择器

    #id:id选择器:$("#id名")

    element:元素选择器

    class:类选择器

    selector选择器:将每一个选择器匹配到的元素合并后一起返回

    层级选择器

    ancestor descendant:表示选取ancestor里面的所有的descendant元素

    parent>child:选择parent元素为子元素

    +selecter:获取后面一个兄弟

    selecter~:获取后面所有兄弟

    内容选择器

    :contains("text"):匹配含有text内容的元素

    :empty:匹配内容为空的元素

    :has(selecter):选择包含有selecter的选择器

    :parent:选择作为父元素的元素:$("p:parent").css({background:"red"});

    $("div:parent").hide(6000);缓慢隐藏

    $("div:parent").show(6000);缓慢出现

    元素的基本选择器

    1  :first:查找第一个子元素

    <script type="text/javascript">

    $("input").click(function() {

    $("li:first").css({background:"red"});

    // body... }); </script>

    2  :last:最后一个子元素

    $("li:last").css({background:"red"});

    3  :even:找下标为偶数的元素

    4  :odd:奇数元素

    5 :eq(index) :获取指定索引位置元素

    $("li:eq(2)").css({background:"pink"});

    第一个元素为0

    6  :gt(index):查找大于index索引的元素

    7  :lt(index):查找小于index索引的元素

    8  :header:查找所有h标签

    9  :not(“id名”):查找除指定id之外的所有元素

    属性选择器

    1  [attribute]:属性选择为attribute

    $("input").click(function(){

    $("img[src]").css({background:"red"});

    )};

    2 [arrtribute="value"]:查找属性为value的元素

    $("img[src='a.jpg']").css({background:"blue"});

    3   [arrtribute!="value"]:查找属性不为value的元素

    $("img[src!='a.jpg']").css({background:"blue"});

    4  [arrtribute^="value"]:查找以value为开头的属性

    $("img[src^='a']").css({background:"blue"});

    5   [arrtribute$="value"]:查找以value为结尾的属性

    $("img[src$='g']").css({background:"blue"});

    $("img[src$='jpg']").css({background:"blue"});

    6  [arrtribute*="value"]:查找包含value属性的元素

    $("img[src*='a']").css({background:"red"});

    子元素选择器:伪类选择器

    type   child

    1  :first-child:找第一个子元素

    $("li:first-child").css({background:"red"});

    2  :first-of-type:找第一个子元素(和1几乎一模一样)

    $("li:first-of-type").css({background:"red"});、

    3 :last-child:找第一个子元素

    4  :last-of-type:找第一个子元素(和3几乎一模一样)

    5 :nth-child(n):找到第n个子元素

    $("li:nth-child(3)").css({background:"blue"});

    6 :nth-of-type(n):找到第n个子元素

    $("li:nth-of-type(2)").css({background:"red"});

    8 :nth-last-child(n):找到倒数第n个元素

    $("li:nth-last-child(3)").css({background:"blue"});

    9:nth-last-of-type(n):找到倒数第n个元素

    $("li:nth-last-of-type(2)").css({background:"red"});

    10  表单选择器:

    1)  :input:找到input元素

    2) :text:找到text元素

  • 相关阅读:
    SQL 查询优化
    win10鼠标右键菜单在左边,怎么改回右边
    Ansible 命令
    CSV模块
    Python 常用模块
    Ansible 常用模块
    Ansible 动态配置文件
    Cluster Health
    Elasticsearch Python API
    grok常用表达式
  • 原文地址:https://www.cnblogs.com/ellen-mylife/p/10877659.html
Copyright © 2020-2023  润新知