• Jquary


    选择器:
         1:id    :$('#id')  
         eg:$('#p1').css('color','red');//代替了#p1{color:red;} 
         2:calss :$('.p1')
         eg:$('.p1').css('color','red');//代替了.p1{color:red;} 
         3:标签选择器(不推荐*选择器)
         eg:$('p').css('color','red');//代替了.p1{color:red;} 
        4:多重选择器
         eg: <span>123</span>
              <div>12312</div>
               <script>
              $(function(){
                  $('p,div').css('color','red');
              });
             </script>
        5:层次选择器
            E   F  e元素所欲的后代元素       
               E>F  e元素的子元素
             E+next  e元素后紧邻的标签为next的兄弟元素,等于next()
              E~siblings  e元素后的所有的标签为siblings的兄弟元素,等于nextAll()
              eg:给div标签后紧邻的p标签添加颜色
                 $('div+p').css('color','red');
                 $('div').next().css('color','red');
                给div标签后所有的p标签添加颜色
                $('div~p').css('color','red');
               $('div').nextAll().css('color','red');
         6:过滤选择器:(用法:只举一例,其他参考手册)
            :first
            $('p:first').css();       
             注意:标签内嵌套标签时单引号和双引号错开使用,若计算偶数则下标从0算起
         7:属性选择器
             A:<p title="js">safs</p>
              选取title为js的p标签添加红色,注意title可以为原有标签,也可以为自己自定义的标签
             $('p[title=js]').css('color','red');
            或者$('p[title]').css('color','red');
            B:选取含有title和myuu属性的p元素,注意title可以为原有标签,也可以为自己自定义的标签
             $('p[title=js][myuu]').css('color','red');
             C:子元素:div的子标签p的第一个标签
            $('div p:first-child').css('color','red');
         8:表单元素及表单元素属性选择器 
              $(':input[type=checkbox]').val();   
            $(':input:disabled').val();   
             $(':input[disabled=disabled]').val(); 
             $('select:selected').val(); 
           9:dom筛选        
               $('p:eq(0)').css();    //给指定下标为0的p标签添加颜色     
               $('p').filter('#second').css(); //奇偶数添加    
               $('p').click(function(){//单击p标签给当前添加颜色
             if($(this).is('.first')){
               $(this).css('backgound','red');
             }
              });
             $('p').not(':last').css();//给p标签添颜色,除了最后一个
              $('p').not('#secone').css();//给p标签添颜色,除了id为second的p标签
              $('input').map(function(){ //将一组元素转换为数组(一般不用,因为有一个序列化的方法比这个更好用)
              return $(this).val();
              }).get().join(',');//,即将三组文本框中的值用逗号隔开并转为字符串
              slice():$('p').slice(1,5).css();//    选中下标为1,2,3,4的元素,包含1,不包含5。也可传入负数
           10:dom遍历查找:(注:返回一组元素的都可以加参数,返回一个的不能加参数)
              $('#p1').parent().css(); //通过子节点p1找到父节点wrap
             $('#p1').parents('.outer').css();//选取祖先元素,通常加参数,表示范围为class为outer的标签为止
              $('p1').offsetParent().css();//offsetParent()返回父元素中第一个其position设为relative或者absolute的元素,仅对可见元素有效
              $('#p2').siblings('div').css();//选择p2所有的兄弟元素(可加参数)
            $('span').parent().css('color','red').end().css('color','blue')//先设置红色再设置成蓝色,颜色可重叠。链式操作,end()函数
             $('input').each(function(){//用的不多,因为效率低,后面有工具函数可以代替它
             alert($(this).val());
          });
        11:dom操作:
            a:创建节点:分为内部插入和外部插入。
            内部插入:插入后是子元素
            外部插入:插入后是兄弟元素
            $('body').append('<div>div标签</div>');//给页面添加了一个div标签
            或者也可以这样写:
            var str='<div>div标签</div>';
           $('body').append(str);
           $('p').append('<div>div标签</div>');//向p标签的尾部插入div标签,div是p的所有子标签中排序在最后一个
            $('<div>div标签</div>').appendTo('p');//结果和上一句一样
  • 相关阅读:
    ecshop php商城系统数据库结构及表的介绍分析
    laravel clone后需要做的操作
    十几万条数据的表中,基于帝国cms 。自己亲身体验三种批量更新数据的方法,每一种的速度是什么样的
    PHP 实现过滤参数字符的方法
    Antd Modal 可拖拽移动
    golang /js index 转换excel字母表头
    React 父组件调用子组件的方法
    React ant table 用 XLSX 导出excel文件
    css3 做出顶边倾斜的 梯形 div
    Windows10 office 点击链接提示您的组策略阻止我们为您完成此操作。设置ChromeHTML也无效.
  • 原文地址:https://www.cnblogs.com/longhaijun/p/6050963.html
Copyright © 2020-2023  润新知