• jQuery笔记---选择器(二)


    1.选择器练习:

     1)查找UL中的元素的内容
    格式:$(“ul li:XX”).text()   XX:代表方法

    比如:获取到第一元素,然后获取当中的值

    $(“ul li:first”).text() 

    获取最后一个元素,然后获取当中的值

    $(“ul li:last”).text() 
    查找索引号是奇数的标签,索引号从1开始
    $("ul li:odd").size();
    查找表格的索引号为偶数行个数,索引号从0开始
    $("table tr:even").size();
    查找表格中第3行的内容,从索引号0开始
    $("table tr:eq(2)");
    查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
    假如说有三条记录,为1和2的数据,可以理解为大于0的标签
    $("table tr:ge(0).size()");
    查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
    可以理解为小于2的标签
    $("table tr:lt(2)")
    给页面内所有标题<h1><h2><h3>加上红色背景色,且文字加绿色
    $(":header").css('bgcolor','bule');
    text() 和 html()方法的区别:
     text()方法可以是XMl、HTML还可以是jsp,但是HTML()不可以将xml的属性值取出来。所以text()这个方法也是推荐是一种方法
    Html()强调的是标签中的内容,即使标签中的指中的子标签,也会显示出来
    Text()强调的是文本,只将值取出来
    <body>
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>
        <table border="1">
          <tr><td>line1[0]</td></tr>
          <tr><td>line2[1]</td></tr>
          <tr><td>line3[2]</td></tr>
          <tr><td>line4[3]</td></tr>
          <tr><td>line5[4]</td></tr>
          <tr><td>line6[5]</td></tr>
        </table>    
        <h1>h1</h1>
        <h2>h2</h2> 
        <h3>h3</h3>    
        <p>p</p>    
        <script type="text/javascript">
            //1)查找UL中第一个元素的内容
               $(“ul li:first”).text() 获取到第一个元素,然后获取他们里面的值
            //2)查找UL中最后个元素的内容
               $(“ul li:last()”).text()    最后一个
            //3)查找表格的索引号为1、3、5...奇数行个数,索引号从0开始
               $(“table tr:odd”).size()  获取为奇数的值     
            //4)查找表格的索引号为2、4、6...偶数行个数,索引号从0开始
               $(“table tr:even”).size()  获取为偶数的值               
            //5)查找表格中第二行的内容,从索引号0开始,这是一种祖先 后代 的变化形式
               $(“table tr:eq(1)”)
            //6)查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
               $(“table tr:gt(0).size()”)找出下标里面的值为0的。就是下标大于0的有几个
            //7)查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
               $(“table tr:lt(2)”)  小于2
        </script>
      </body>

    2.练习2

    1)查找所有包含文本"kw"div元素的个数查找一下,因为是数据,所以注意大小写

    $(“div”).size()  获取到所有的div标签
    $(“div:contains(‘kw’)”).size()  查找一下

    /2)查找所有p元素为空的元素个数

    $("p:empty").size()     empty为空的。

    3)给所有包含p元素的div元素添加一个myClass样式

    查找div中含有p标签的,然后在后面加上自己的样式

    $("div.has(p)").addclass("myClass");

    4)查找所有含有子元素或者文本的p元素个数,p为父元素

    注意:p里面的数据是自己本身带有的,不是手动输入的。

    $("p:parent").size();

    练习

    <body>
        <div><p>kw Resig</p></div>
        <div><p>George Martin</p></div>
        <div>Malcom kw Sinclair</div>
        <div>J. Ohn</div>
        <div></div>
        <p>kw啦啦啦</p>
        <p></p>
        <script type="text/javascript">
            //1)查找所有包含文本"kw"的div元素的个数
                $(“div”).size()
                $(“div:contains(‘kw’)”).size()值是有大小写区分的。
              //2)查找所有p元素为空的元素个数
                $(“p:empty”).size()  empty为空的
              //3)给所有包含p元素的div元素添加一个myClass样式
                $(“div:has(p)”).addClass(“myclass”) 
              //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
                $(“p:parent”).size()</script>
      </body>
  • 相关阅读:
    [Voice communications] 声音的滤波
    [Voice communications] 声道的转换
    [Voice communications] 音量的控制
    [Voice communications] 看得到的音频流
    [Voice communications] 让音乐响起来
    HDFS之FileStatus
    HDFS中JAVA API的使用
    hadoop集群环境的搭建
    【ARM-Linux开发】【CUDA开发】【深度学习与神经网络】Jetson Tx2安装相关之三
    【ARM-Linux开发】【CUDA开发】【深度学习与神经网络】Jetson Tx2安装相关之三
  • 原文地址:https://www.cnblogs.com/kw28188151/p/8299410.html
Copyright © 2020-2023  润新知