初学 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.过滤选择器

   这类选择器都带 ":"

 

 

原文地址:https://www.cnblogs.com/liuhaoking/p/12176276.html