zoukankan      html  css  js  c++  java
  • jquery学习(2)--选择器

    jquery-李炎恢学习视频学习笔记。自己手写。

    简单的选择器
        css 写 法: #box{ color:#f00;}    //id选择器
        jquery获取:$('#box').css('color','#f00');//获取DOM对象,并添加行为,id是唯一的,返回单个元素生效

        css 写 法: .box{ color:#f00;}    //class选择器
        jquery获取:$('.box').css('color','#f00');//获取DOM对象,并添加行为,返回多个元素生效


        css 写 法: div{ color:#f00;}    //标签选择器
        jquery获取:$('div').css('color','#f00');//获取DOM对象,并添加行为,返回多个元素生效


    $(function(){
        $('#box').css('color','blue');//添加行为(行为中包括样式)
        $('div').css('color','#f00');
        $('.box').css('color','#f00');


        //alert($('#box').size());
        //alert($('.pox').size());
        alert($('div').size());    //用get 0 1 2获取对应的第几个

        

    //很多情况下有动态DOM生成的问题,会导致执行不存在的id选择器

        if($('#pox').size()>0){
            $('#pox').css('color','red');
        }




        $('div').get(1).css('color','#000');//用get(1)获取第二个div,改变字体颜色为#000。-get原生
        $('div').get(1).css('color','#000');//用eq(1)获取第二个div,改变字体颜色为#000。-
        alert($('div').length);    //属性不用加()

        $('#box > p ').css('color','blue');//jquery兼容ie6
        $('#pox').css('color','blue');
       
    })

    $(function(){
    //原生js:
        if(document.getElementById('pox')){    //判断是否存在--防止动态DOM生成问题导的ID不存在问题
            document.getElementById('pox').style.color='blue';//
        }

    //jquery:--解决了容错的问题
        $('#box').css('color','blue');

    })


    if($('#pox').get(0)){

    }
    if(('#pox')[0]){
    }

    常规选择器:
    $(function(){
        //群组选择去==》相同的样式进行合并
        span,.pox,#box{color:red;}//--->css代码
        span,p,#box{color:blue;}//--->css代码
        $('#div,p,span').css('color','blue');
        $('#box,.pox,span').css('color','red');
        
        //后代选择器
        ul li a{color:red;}//css代码
        $('ul li a').css('color','red');

        //通配符选择器
        *{color:#ccc;}
        $('*').css('color','#ccc');

        /*注意:在全局范围使用*(通配符),会极大地消耗资源,不建议在全局使用*/

        <li>11111</li>
        <li>22222</li>
        <li><em>123333</em></li>

        $('ul li a,ul li em').css('color','blue');
        $('ul li *').css('color','blue');
        alert($('ul li *').size());//通配符选择器一般用在局的环境内

        //在id和class中指定元素前缀
        $('div.box');        //限定是.box元素获取的必须是是div
        $('p#box div.side');    //同上

    //class有一个特殊的模式,就是同一个dom节点可以声明多个class类,对于这种格式,有多个class选择器可以使用,但要注意和class群组选择器的区别。、

    .box,.pox{color:red;}//群组选择器
        .box.pox{color:red;}//双class选择器,ie6会出异常
        $('.box.pox').css('color','red');

    $('div#box p ul li a#link');//写法无错,选择器越复杂,那么字符串解析就越慢-->jquery的选择器从右边往左一层层的解析
    $('#link');//单个id,不需要字符型的解析就可以获取到。--》id一个页面只有一个。这个速度是最快的。
    })

    /*注意:构造选择器时,有一个通用的优化原则:只追求必要的确定性,选择器筛选越复杂,jquery内部的选择器引擎处理字符串的时间就越长*/


  • 相关阅读:
    3. 动态代理Mapper实现类(官方推荐方式)
    2. MyBatis快速入门
    1.Mybaits底层执行过程
    RabbitMQ安装(windows环境)
    消息中间件(一)MQ详解及四大MQ比较
    Nginx location正则表达式
    SpringBoot
    网络协议--HTTPS
    spring--根据执行jar包的参数使用不同的环境配置
    python读取配置文件模块ConfigParser
  • 原文地址:https://www.cnblogs.com/aure/p/4797813.html
Copyright © 2011-2022 走看看