jQuery 学习笔记 CSS, Styling, & Dimensions

jQuery可以处理CSS的属性,包括两种方法

一是通过.CSS()方法来获取和设置属性，这和其他的方法一样，需要注意的是设置属性时的两种形式

  1. fontSize
  2. font-size 

　　一般在js代码中采用第一种形式

二是通过向元素添加一个具体的CSS类，这样就不需要在js代码中写css了，主要通过以下方法：

  • addClass()
  • removeClass()
  • toggleClass()
  • hasClass()

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Demo</title>
    <style type="text/css">
    h1
    {
        background-color: red;
        font-size: 50px;
    }
    .div1
    {
        background-color: blue;
        width: 100px;
        height: 50px;
    }
    .div2
    {
        background-color: yellow;
        width: 80px;
        height: 40px;
    }
    </style>
</head>
<body>
    <h1>Hello World!</h1>
    <div>
        <span>jQuery</span>
    </div>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        console.log($("h1").css("backgroundColor"));
        $("h1").css("fontSize","100px");
        $("h1").css({
            fontSize:"80px",
            backgroundColor:"yellow"
        });

        var $div1 = $("div");
        $div1.addClass('div1');
        setTimeout(function(){
            $div1.removeClass('div1')
        },2000);
        setTimeout(function(){
            $div1.addClass('div2')
        },2000);
        
    </script>
</body>
</html>

最后就是处理形状大小的方法，经常使用的有：

  • height()
  • width()
  • position()
posted @ 2013-11-29 20:34  菜菜小三  阅读(188)  评论(0)  编辑  收藏  举报