• jQuery选择器


    引入css:<link rel="stylesheet" href="url" type="text/css">

    引入js:<script src="url"></script>

    基本:

        标签=>$('tagname');id=>$('#idname');class=>$('.classname');综合=>$('#id,.class,tag')

    层叠选择器:

         $('form input'):选择所有form元素中的input元素,包括非直接子节点(儿子,孙子...)

        $('#main > * '):选择id=main下的所有子元素,直接子节点(只能儿子辈,不能孙子辈)

        $('label+input'):同级,inputlabel下方,并且input要紧挨着label

        $('#prev~div'): 同级,只要inputlabel下边就可以

    基本过滤选择器:

        $('tr:first'):选择所有tr元素的第一个

        $('tr:last'):选择所有tr元素的最后一个

        $('input:not(:checked)+span'):过滤掉:checked选择器的所有input元素

        $('tr:even'):选择所有tr元素的第0,2,4...个元素[数组序号]

        $('tr:odd'):选择所有tr元素的第1,3,5...个元素

        $('td:eq(2)'):选择所有td元素中index2的呢个td元素[gt,lt]

        $(':header'):匹配如h1,h2,h3之类的标题元素

        $('div:animated'):匹配所有正在执行动画效果的元素

    内容过滤选择器:

        $("div:contains('John')"):选择所有div中含John文本的元素

        $("td:empty"):选择所有为空(也不包括文本节点)td元素数组

        $("div:has(p)"):选择所有含有p标签的div元素

        $("td:parent"):匹配含有子元素或者文本的元素

    可视化过滤选择器:

        $("div:hidden"):匹配所有不可见元素(display:none OR type:hidden)的元素[visible]

    属性过滤选择器:

        $("div[id]"):根据id选择div元素

        $("input[name='skye']"):根据name选择input元素[!=不等于,^=xxx开头,$=xxx结尾,*=属性包含]

        $("input[id][name$='skye']"):多属性联合选择

    子元素过滤选择器:

        $("ul li:nth-child(2)"):$("ul li:nth-child(odd)"),$("ul li:nth-child(3n+1)")

        $("div span:first-child"):如果spandiv中第一个子元素,将会被匹配[last-child]

        $("div button:only-child"):如果buttondiv中唯一的子元素,将会被匹配

         $("div button:only-of-type"):button可以不是div中唯一的子元素,但却是div中唯一button子元素,也将会被匹配

    表单元素选择器:

        $(":input"):选择所有的表单输入元素,包括input,textarea,select,button

        $(":password"):选择所有password input元素,同理选择input中的text,radio,checkbox,submit,image,reset,button,file,hidden

    表单元素过滤选择器:

        $(":enabled"):选择所有可操作的表单元素[:disabled,:checked]

        $("select option:selected"):选择所有select子元素中被selected的元素

         

    使用范例:

        1each遍历通过选择器获得的dom对象

            $('img').each(function(index,domEle){

                 //this=domEle            

                domEle.src="./media/images/"+index+".jpg";//DOM对象

                $(domEle).attr('width',"120px");//jQuery对象

                //跳出循环

                if($(this).is("#stop")){

                    $('span').text('stop at id='+domEle.id);

                    return false;//相当于普通循环中的break;return true相当于普通循环中continue

                }

            });

        

    newPoint:

       1. $('div #idname') VS $('div#idname'):有空格表示父子关系,没有空格表示并且关系

       2. prop() VS attr()prop可以准确获得系统属性[获取自定义属性时为undefined]attr可以准确获得自定义属性[获取未定义的系统属性如checked时为undefined]

        3. $('li:eq(index)') VS $('li:nth-child(index)')eq下标从0开始,且只能匹配一个元素(如页面有多个uleq不能分别为每个ul匹配元素)nth-child()下标从1开始,含有多组ul时可以分组匹配页面多个li 

    参考书:JQuery中文手册

    参考博文:http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html

     (个人学习笔记随时更新,内容如有问题,敬请斧正)

  • 相关阅读:
    js 将图片连接转换称base64格式
    mysql性能优化-慢查询分析、优化索引和配置
    MySQL集群(三)mysql-proxy搭建负载均衡与读写分离
    MySQL集群(二)之主主复制
    MySQL集群(一)之主从复制
    JavaSE(八)之Map总结
    JDBC(二)之JDBC处理CLOB和BLOB及事务与数据库元数据获取
    JavaSE(八)之Collection总结
    JavaSE集合(八)之Map
    JavaSE(八)之集合练习一
  • 原文地址:https://www.cnblogs.com/skye-blog/p/7604847.html
Copyright © 2020-2023  润新知