jQuery简单操作实例——使用jQuery变换网页效果

【前言】

• jQuery是一个JavaScript函数库
• jQuery是一个简洁的JavaScript框架
• jQuery是一个是写少的代码，做多的事情的javascript

【正文】

Html代码如下：

<div>
   <div class="line" id="left"><img src="book.gif"></div>
    <div class="line">
    <h2>你是人间四月天</h2>
        <p>笑响亮了四面风</p>
        <p>轻灵在春的光艳中交舞看变</p>
        <p>你是一月早天的云烟</p>
        <p>软黄昏吹着风的</p>
        <p>...</p>
        <a href="#">查看全部</a>
    </div>
</div>
<div id="content">
    <p>你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞”系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出，引起读者尖叫连连。一经上市，便引发各大报纸、媒体的一致报道。</p>
    <p>有人崇拜她，把她当做女神、偶像；也有人放出话来，“喜欢他的女人，品行有问题；喜欢她的男人，脑子有问题。”</p>
    <p>她是缺乏幽娴品德的女人，她喜好与人辩论，她用诗句表达她的哀愁，她精通文理，学贯中西。她对文学和艺术，具有本能的、直接的感悟。生长富贵，命运坎坷，修养让她把热情藏在里面，热情却是她生活的支柱。</p>
    <p>她，就是那个万千宠爱于一身的一代才女--林徽因</p>
</div>

css代码如下：

#content{display: none;text-indent: 2px;line-height: 39px}
#left{background: url("book.gif");width: 140px;height: 214px}
.line{display: inline-block;}
p{line-height: 15px}

 jQuery代码如下：

<script src="easyui/jquery.min.js"></script>
<script>
    $(function () {
        $("a").click(function () {
             $("#content").show();        //文字显示
        });
        $("h2").click(function () {
            $(this).css({color:"blue",fontSize:"22px"});  //点击标题变蓝
            $(".line p").css("color","green");    //寻找line以下p段落的文字，文字变绿
        })
     })
</script>

浏览器显示如下：

 【结尾】

小菜今天分享的jQuery的简单操作实例学会了吗？那就动手试试吧！