• jquery 元素选择器


    id选择器

         JQuery 能使用CSS选择器来操作网页中的标签元素。如果想要通过一个id号去查找另一个元素就可以使用下面格式的选择
         $('#my_id')  其中my_id表示根据id选择器获取页面中的指定的标签元素,且返回一个唯一的元素。
    

    element元素选择器

         $("element")就是元素名称
              <body>
                   <div>1</div>
                   <div>2</div>
              </body>
         获取所有div元素的选择器:(修改所有div元素字体的样式)
         <script type="text/javascript"> 
            $('div').css("font-weight","bold") ;
          </script>
    

    .class选择器

         $(".class") 其中.class参数表示元素的css类别(类选择器)名称。
         <div class="red">my red </div>
        <script type="text/javascript"> 
           var $className = $(".red").attr("class")
        </script>
    
    $(“*”) 获取全部的元素
    选择器中的参数就一个“*”, 既没有“#” 号,也没有 “.”号。  由于该选择器的特殊性,它常与其他元素组合使用,表示获取其他元素中的全部子元素。
    

    sele1 sele2 seleN 选择器

    调用的格式如下:
         $("sele1,sele2,seleN") 参数sele1 sele2到seleN为有效选择器,每个选择器之间用","号隔开,它们可以是前天提到的各种类型的选择器
         如 $('#id')  
    

    常用的几种选择器

    元素元素
    选择器 描述
    $('*') 选取所有的元素
    $(this) 选取当前的HTML元素
    $('p.intro') 选取class为intro的

    元素

    $('p:first') 选取第一个

    元素

    $('ul li:first') 选取第一个
      元素的第一个
    • 元素
    $('ul li:first-child') 选取每个ul元素的第一个
  • 元素
  • $('[href]') 选取带有herf属性的元素
    $(':button') 选取所有type=button的元素和
    $('tr:even') 选取偶数位置的
    $('tr:odd') 选取奇数位置的

    获取UL下li的个数

    <ul class="dep_5">
    <li></li>
    <li></li>
    </ul>
    获取ul下li的个数:
    $('.dep_5 li').length;
    

    层叠选择器

    $("form input") 选择所有form元素中的input元素
    $("#main >*") 选择id值为main的所有的子元素
    $("label+input") 选择所有的label元素的下一个input元素节点,
    经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
    $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
    

    input的选择器

    $("input[name='ssgao']") 选择所name为ssgao的input元素
    $("input[name!='ssgao']") 选择所name不是ssgao的input元素
    ​
    $("input[name^='news']")  选择所有name属性以‘news’开头的input属性
    $("input[name$='news']") 选择所有name属性以'news'结尾的input属性
    $("input[name*='news']") 选择所有name属性包含'news'的input属性
    

    jquery 操作class

    jquery 拥有若干进行css操作的方法
    addClass() 向被选元素添加一个或多个类
    removeClass() 从被选元素删除一个或多个类
    toggleClass() 对被选元素进行添加/删除类的切换
    css() 设置或返回样式属性
    jquery对css的操作
    jquery返回css属性
     $('p').css('propertyname');
    jquery设置css属性
    $('p').css('propertyname','value');
    jquery 设置多个css属性
    $('p').css('propertyname':'value','propertyname':'value');
    

    jquery 设置背景色

    $(selector).css('backgroundImage',"url(bg.jpg)");
    var s = "images/"+row+".jpg"; //row表示变量信息
    $('body').css('background-image',"url("+s+")");
    
  • 相关阅读:
    中位数相关
    带权并查集
    组合数相关、多重集组合数
    LIS最长上升子序列
    提高你css技能的css开发技巧
    如何让搜索引擎抓取AJAX内容?
    Javascript异步编程的4种方法
    前端自动化构建工具gulp
    前端自动化构建工具
    git使用
  • 原文地址:https://www.cnblogs.com/ssgao/p/8868708.html
Copyright © 2020-2023  润新知