zoukankan      html  css  js  c++  java
  • Jquery选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jquery</title>
    </head>
    <body>
    <script src="/static/jquery.min.js"></script>
    <div>hello</div>
    <p id="p1">ppppp</p>
    <a href="">click</a>
    
    <div class="outer">outer
        <div class="inner">inner
        <p>inner P</p>
        </div>
        <p>son</p>
    </div>
    <p>xia</p>
    <ul>
        <li>111</li>
         <li>222</li>
         <li>333</li>
         <li>444</li>
    </ul>
    <p id="11" sy="pppp">段落1</p>
    <p id="22" sy="pppp">段落2</p>
    <input type="text">
    <input type="checkbox">
    <input type="submit">
    <script>
    
        //基本选择器器
       /* $('div').css('color',"red")
        $('*').css('color', 'red')//所有标签设置样式
        $('#p1').css('color', 'red')//根据id取到标签
        $('.inner').css('color', 'red')//根据class取到标签
       */
    
    
        //层级筛选器
        /* $('.outer p').css('color', 'red')//孙子后代选择器
        $('.outer>p').css('color', 'red')//子代选择器
        $('.outer+p').css('color', 'red')//紧挨着的下面的兄弟标签
        $('.outer~p').css('color', 'red')//也是兄弟标签,但是不是非得挨着,方向是向下找
        */
    
    
        //基本筛选器
        /*
       $('li:first').css('color','red')//对第一个<li>标签操作
       $('li:last').css('color','red')//对最后yi个<li>标签操作
       $('li:eq(1)').css('color','red')//对第一个<li>进行操作
       $('li:eq(3)').css('color','red')//对第三个进行操作
        $('li:even').css('color','red')//奇数行进行操作
       $('li:odd').css('color','red')//偶数行进行操作
         $('li:gt(2)').css('color','red')//大于第二行的进行操作
         $('li:lt(2)').css('color','red')//小于第二行的进行操作
         */
    
    
        //属性选择器
        //$("[sy='pppp']").css('color','red')
       // $("[id='11']").css('color','red')
        //$("[type='text']").css('width','250px')
    
    
    
        //表单选择器
        $(':text').css('width','250px')
    
    
    
    
    
    
    </script>
    </body>
    </html>
    

    基本选择器

        $('div').css('color',"red")
        $('*').css('color', 'red')//所有标签设置样式
        $('#p1').css('color', 'red')//根据id取到标签
        $('.inner').css('color', 'red')//根据class取到标签
       
    

     层级选择器

        $('.outer p').css('color', 'red')//孙子后代选择器
        $('.outer>p').css('color', 'red')//子代选择器
        $('.outer+p').css('color', 'red')//紧挨着的下面的兄弟标签
        $('.outer~p').css('color', 'red')//也是兄弟标签,但是不是非得挨着,方向是向下找
        
    

     基本筛选器

     $('li:first').css('color','red')//对第一个<li>标签操作
       $('li:last').css('color','red')//对最后yi个<li>标签操作
       $('li:eq(1)').css('color','red')//对第一个<li>进行操作
       $('li:eq(3)').css('color','red')//对第三个进行操作
        $('li:even').css('color','red')//奇数行进行操作
       $('li:odd').css('color','red')//偶数行进行操作
         $('li:gt(2)').css('color','red')//大于第二行的进行操作
         $('li:lt(2)').css('color','red')//小于第二行的进行操作
    

     属性选择器

    $("[sy='pppp']").css('color','red')
    $("[id='11']").css('color','red')
    $("[type='text']").css('width','250px')
    

     表单选择器

    $(':text').css('width','250px')
    
  • 相关阅读:
    PHP如何判断一个gif图片是否为动画?
    Linux常用系统管理命令(top、free、kill、df)
    Mysql字符串连接函数 CONCAT()与 CONCAT_WS()
    OSChina.net 的 Tomcat 配置 server.xml 参考
    修改Linux默认启动级别或模式
    更改CentOS 6.3 yum源为国内 阿里云源
    PHP session过期机制和配置
    PHP垃圾回收机制防止内存溢出
    memcache与memcached的区别
    【总结】虚拟机VirtualBox各种使用技巧
  • 原文地址:https://www.cnblogs.com/wangyue0925/p/9176148.html
Copyright © 2011-2022 走看看