• JQuery中选择元素的方法:


    document.getElementById('div1');
    document.getElementsByTagName('div');
    getByClass(document,'box');

    $('#div1').css('background','red');
    $('div').css('background','red');
    $('.box').css('background','red');


    $('li:eq(2)').css('background','black');//所选择的元素集合中下标为2的元素,下标从0开始;
    $('li:odd').css('background','red');//匹配下标为基数的元素
    $('li:even').css('background','red');//下标为偶数的元素

    $('li').filter('.box').css('background','red');//className为box的li元素;

    $('li').filter('[title=hello]').css('background','red');

    1.基本元素选择器

    $(“p”)            //选取<p>元素

    $(“p.info”)      //选取所有class=”info”的<p>元素

    $(“p#demo”)      //选取id=”demo”的第一个<p>元素

     

    分层选择器:使用这种选择器时,需要传入多个值,并用空格或大于号分隔。例如:

    $(“div input”)        //选择div下所有的input

    $(“div > input”)     //选择父元素(div)下的子元素(input)

     

    2、基本条件选择器

    使用这种选择器时,需要在元素的选择符后加上基本条件运算符,这些条件运算符都是jQuery内置的运算符。例如:
    复制代码

    $(“p:first”)      //选择第一个段落

    $(“p:last”)       //选择最后一个段落

    $(“tr:even”)      //选择偶数表格行

    $(“tr:odd”)      //选择奇数表格行

    $(“input:not(:checked)”)   //选择所有未被选中的元素

    $(“tr:eq(1)”)      //选择索引值为1的表格行

    $(“tr:gt(0)”)      //选择索引值大于0的表格行

    $(“tr:lt(2)”)      //选择索引值小于2的表格行

    $(“:header”)      //选择所有标题元素

    $(“:animated”)      //选择所有正在执行动画的元素

     
    3、内容条件选择器

    使用这种选择器时,需要在元素的后面加上内容筛选运算符。例如: $(“div:contains(„John‟)”)   //选择包含‘John’文本的层元素

    $(“td:empty”)      //选择不包含文本或者子元素的表格单元

    $(“div:has(p)”)     //选择包含段落元素的层元素

    $(“td:parent”)      //选择包含文本或者子元素的表格单元

     

    4、可见性条件选择器

    使用这种选择器时,需要在元素后面加上可见性条件。例如:

    $(“tr:hidden”)      //选择所有隐藏的表格行

    $(“tr:visible”)      //选择所有可见的表格行

     

    5、属性选择器

    使用这种选择器时,需要利用元素属性并使用一定条件来进行选择。例如: $(“div[id]”)      //选择具有id属性的层
    复制代码

    $(“input[name=‟newletter‟]”)  //选择具有属性name并且属性值为‘newletter’的表单输入元素

    $(“input[name!=‟newsletter‟]”) //选择具有属性name并且属性值不为‘newletter’的表单输入元素

    $(“input[name^=‟news‟]”)  //选择具有属性name并且属性值以‘news’为起始内容的表单输入内容

    $(“input[name$=‟letter‟]”)  //选择具有属性name并且属性值以‘letter’为结束内容的表单输入元素

    $(“input[name*=‟man‟]”)   //选择具有属性name并且属性值包含‘man’内容的表单输入元素

    $(“input[id][name$=‟man‟]”)  //选择具有属性id和name并且name的值以‘man’为结束内容的表单输入内容

    复制代码

     

    6、子元素选择器

    使用这种选择器时,需要加入子元素的选择条件。例如:
    复制代码

    $(“ul li:nth-child(2)”)    //选择第2个列表项

    $(“ul li:nth-child(even)”)   //选择偶数索引列表项

    $(“ul li:nth-child(odd)”)   //选择奇数索引列表项

    $(“ul li:nth-child(3n)”)   //选择索引值为3的倍数的列表项

    $(“ul li:first-child”)    //选择第一个列表项

    $(“ul li:last-child”)    //选择最后一个列表项

    $(“ul li:only-child”)    //选择列表出现且仅出现一个的列表项

    复制代码

     

    7、表单元素选择器

    使用这种选择器时,需要加入代表不同表单元素类型的标示符。例如:
    复制代码

    $(“:input”)       //选择所有input,textarea,select和button元素

    $(“:text”)       //选择单行文本框

    $(“:password”)     //选择密码框

    $(“:radio”)       //选择单选按钮

    $(“:checkbox”)     //选择复选框

    $(“:submit”)      //选择提交按钮

    $(“:image”)      //选择所有图像域

    $(“:reset”)       //选择重置按钮

    $(“:button”)      //选择普通按钮

    $(“:file”)       //选择文件域

    $(“:hidden”)      //选择隐藏域

    $(“input:enabled”) //选择所有可用元素

    $(“input:disabled”)    //选择所有不可用元素

    $(“input:checked”)  //选择所有被选中的复选框和单选按钮

    $(“select option:selected”)  //选择所有被选中的option


  • 相关阅读:
    Linux下的输入/输出重定向
    strcpy与strncpy的区别
    C++的函数重载
    gtest 学习二
    gtest 学习一
    char* wchar* char wchar转换
    iconv 编译不通过问题
    嵌入式常用库
    驱动编程class_create说明
    libiconv 交叉编译
  • 原文地址:https://www.cnblogs.com/Aaron-dzl/p/5820766.html
Copyright © 2020-2023  润新知