zoukankan      html  css  js  c++  java
  • 初学 jQuery样式-选择器。

        前言:做Web开发的我们,需要对页面进行美化,我们不仅要学会如何设计页面布局页面,还要学会给页面标签添加各种各样样式让用户有极好的体验感。

     一,jquery对样式的操作

            1.设置获取样式css()。

    <html>
     <body>
        <input type="button" value="获取" id="get"/>
        <input type="button" value="设置" id="set"/>
        <div id="div1" style="200px"></div>
        <div id="div2" style="300px"></div>
        <div id="div3" style="400px"></div>
     </body>
    </html>
    //引入jquery jar包
    <script src="jquyer-1.12.4.js"></script>
     <script>
    //函数入口
      $(function(){
     1.获取样式
     $("get").click(function(){
       //获取div1的样式:css()参数设置为要获取值的样式名,
      console.log($("div1").css('width'))
      console.log($("div1").css('heigth'))  
      console.log($("div1").css('border'))
       //在ie浏览器中要获取边框这样的样式值需要给一个准确边框,
      console.log($("div1").css('border-top-width'))
     1.2获取为div的元素们。
      console.log($("div").css('width'))//注意:获取包含了多个domy元素的jquery对象的样式,它将会返回第一个元素对应的样式值
      })
     2.设置样式
     $("set").click(function(){
       //设置样式需要给css()方法样式名和样式值, 这里设置的是行内样式。
     2.1为id为div1的元素设置样式
      $(div1).css('width':'100px")(两种写法1:直接写100不需要单引号,2:100px需要加上单引号)
     2.2设置多样式。
       //是对象属性名可以不带引号如果带'—'需要加上引号
      $('div1').css({
        100,
       'background-color':'red'
    
      })
    
     })
    
    })
    </scrpit> 

    二,选择器。

      1.基本选择器  -- 和css里的选择器一样的。

          id选择器:      $('#id'),

          类选择器:     $('.class'),

          标签选择器: $('标签'),

          并集选择器: $('.id,.div'),

          交集选择器: $('li.div'),

      2.层次选择器。

     3.过滤选择器

       这类选择器都带 ":"

     

     

  • 相关阅读:
    HDU 4611 Balls Rearrangement 数学
    Educational Codeforces Round 11 D. Number of Parallelograms 暴力
    Knockout.Js官网学习(简介)
    Entity Framework 关系约束配置
    Entity Framework Fluent API
    Entity Framework DataAnnotations
    Entity Framework 系统约定配置
    Entity Framework 自动生成CodeFirst代码
    Entity Framework CodeFirst数据迁移
    Entity Framework CodeFirst尝试
  • 原文地址:https://www.cnblogs.com/liuhaoking/p/12176276.html
Copyright © 2011-2022 走看看