初学 jQuery样式-选择器。

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

 一，jquery对样式的操作。

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

<html>
 <body>
    <input type="button" value="获取" id="get"/>
    <input type="button" value="设置" id="set"/>
    <div id="div1" style="width:200px"></div>
    <div id="div2" style="width:300px"></div>
    <div id="div3" style="width: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({
    width:100,
   'background-color':'red'

  })

 })

})
</scrpit>　

二，选择器。

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

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

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

      标签选择器： $('标签')，

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

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

  2.层次选择器。

 3.过滤选择器

   这类选择器都带 ":"

 

 

 

 

　

posted @ 2020-01-15 17:27  LHking  阅读(373)  评论(0)    收藏  举报