jQuery 学习（1） jQuery 的 HelloWord

最新推荐文章于 2025-12-04 15:52:21 发布

转载最新推荐文章于 2025-12-04 15:52:21 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kedk/archive/2009/12/03/1616370.html

文章标签：

#xhtml #c# #javascript #ViewUI

本文介绍了一个使用Visual Studio 2005创建的简单网页项目，通过结合jQuery和CSS实现文本样式动态变化的效果。文章展示了如何利用jQuery为特定元素添加样式，并通过CSS进一步定制页面布局。

使用 VS2005 制作了第一个jQuery。如下：

主界面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="js/jquery.js">
    </script>
    <script type ="text/javascript" src="js/empty.js">
        </script>
    <link type="text/css" rel="stylesheet" href="css/css1.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p class="MsoNormal" style="margin: 0in 0in 10pt">
           <h1 class = "poem">
                On the Insert tab, the galleries
                include items that are designed to coordinate with the overall look of your document.
                </h1></p>
        <p class="MsoNormal" style="margin: 0in 0in 10pt">
                                <span style="font-size: 11pt;
                font-family: Calibri">
                You can use these galleries to insert tables, headers, footers, lists, cover pages,
                and other document building blocks. When you create pictures, charts, or diagrams,
                they also coordinate with your current document look.</span></p>
        <p class="MsoNormal" style="margin: 0in 0in 10pt">
            <span style="font-size: 11pt; font-family: Calibri">You can easily change the formatting
                of selected text in the document text by choosing a look for the selected text from
                the Quick Styles gallery on the Home tab. </span></p>
        <p class="MsoNormal" style="margin: 0in 0in 10pt">
                                 <span
                style="font-size: 11pt; font-family: Calibri">You can also format text directly by using
                the other controls on the Home tab. Most controls offer a choice of using the look
                from the current theme or using a format that you specify directly.</span></p>
        <p class="MsoNormal" style="margin: 0in 0in 10pt">
            <span style="font-size: 11pt; font-family: Calibri">To change the overall look of your
                document, choose new Theme elements on the Page Layout tab. </span></p>
        <p class="MsoNormal" style="margin: 0in 0in 10pt">
                                 <span
                style="font-size: 11pt; font-family: Calibri">To change the looks
                available in the Quick Style gallery, use the Change Current Quick Style Set command.
                Both the Themes gallery and the Quick Styles gallery provide reset commands so that
                you can always restore the look of your document to the original contained in your
                current template.</span></p>

    </div>
    </form>
</body>
</html>

empty.js的内容：

// JScript File

$(document).ready(function(){
$('.poem').addClass('emphasized');
});

CSS的内容：

body
{
   font: 62.5% Arial, Verdana, sans-serif;
}

h1
{
   font-size : 2.5em;
   margin-bottom : 0;
}

.poem
{
   margin : 0 2em;
}

.emphasized
{
   font-style : italic;
   border: 1px solid #888;
   padding : 0.5 em;
}