65.9K
CodeProject 正在变化。 阅读更多。
Home

jQuery 入门

Shakeel Iqbal
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.81/5 (80投票s)

2011 年 8 月 28 日

CPOL

5分钟阅读

viewsIcon

290251

downloadIcon

10791

本文将通过示例帮助您理解JQuery。

引言

jQuery是一个JavaScript库，它提供了广泛的功能，例如事件处理、动画、HTML文档遍历以及用于Web开发的AJAX交互。jQuery简化了JavaScript编程。

$(document).ready 方法

在HTML文档加载完毕并且DOM已准备就绪时，文档就绪事件就会执行，即使所有图形尚未加载。

$(document).ready(function() {
    alert("document is ready");
});

选择符

jQuery提供了一种简单的方法来选择单个或一组元素。您可以通过类型（div，span，p）、ID、CSS类和属性等来访问元素。我在这里解释了基本的选择器。您可以在附加的项目中找到其他一些带有示例的选择器。

jQuery 示例代码 描述
$('element') $('blockquote').css('color','red'); 它会选择具有给定标签名的所有元素。在此示例中，它将返回文档中的所有<blockquote>元素。
$('#id') $('#item1').css('color','red'); 它会选择具有给定ID的单个元素。如果多个元素被分配了相同的ID，则将返回第一个匹配结果。
$('.class') $('.myCss').css('color','red'); 它会选择具有给定类的所有元素。

滑动效果

jQuery提供了三种方法以滑动的方式显示或隐藏元素。

  1. SlideDown(speed, callback)：此方法会逐渐增加元素的高度，从隐藏变为可见。
  2. SlideUp(speed, callback)：此方法会逐渐减小元素的高度，从可见变为隐藏。
  3. SlideToggle(speed, callback)：此方法会在选定元素上切换SlideUp()和SlideDown()。

所有这三种方法都具有“Speed”和“callback”参数。“Speed”参数可以具有以下值：

  • 慢
  • normal
  • 快速
  • 毫秒，例如100、500、1000等。

callback参数是一个函数名，该函数将在函数完成后执行。

滑动示例

根据您的网站设计，决定可折叠区域和将处理Slide行为的元素。在此示例中，我使用DIV创建了一个Box，并选择ID为“contentArea”的DIV进行滑动。

<div class="box" style="width: 400px">
    <div class="title">
        Collapse Box (<a id="lnkCollapse" 
                  href="#" style="color: White; font-size: 12px;
            text-decoration: none;">Click Here</a>)
    </div>
    <div id="contentArea" class="content">
        <div align="right"><a id="lnkClose" 
                 href="#" style="font-size: 10px;">
	Close</a></div>
           
        Your text will be here

    </div>
</div>

注册HTML元素的点击事件，并为“contentArea”调用SlideToggle和SlidUp方法。有关此示例的更多详细信息，请参阅附加的项目。

$(document).ready(function () {

    $("#lnkCollapse").click(function () {
        $("#contentArea").slideToggle("slow");
    });

    $("#lnkClose").click(function () {
        $("#contentArea").slideUp(200);
    });
});

淡入淡出效果

jQuery还提供了四种方法，可以使用淡入淡出效果逐渐改变选定元素的透明度。

  • fadeTo(speed, opacity, callback)：此方法将选定元素的透明度更改为指定的透明度。
  • fadeIn(speed, callback)：此方法会逐渐增加元素的高度，从隐藏变为可见。
  • fadeOut(speed, callback)：此方法会逐渐减小元素的高度，从可见变为隐藏。
  • fadeToggle(speed, callback)：此方法会在FadeIn()和FadeOut()之间切换选定元素。

在此示例中，我将在鼠标悬停时设置图像的透明度。将图像添加到DIV中，并将ID“fadeExp1”分配给div。

<div id="fadeExp1">
    <img src="Images/b1.jpg" width="100px" height="100px" />
    <img src="Images/b2.jpg" width="100px" height="100px" />
    <img src="Images/b3.jpg" width="100px" height="100px" />
</div>

在ready()函数中，使用$(“#fadeExp1 img”).fadeTo(0, 0.3);语句设置所有图像的默认透明度。然后，为每个图像注册Hover事件，并在其中提供两个函数，一个用于鼠标移入，一个用于鼠标移出，并在那里设置元素的透明度。请参阅下面的示例代码。

$(document).ready(function () {

    $("#fadeExp1 img").fadeTo(0, 0.3);

    $("#fadeExp1 img").hover(function () {
        $(this).fadeTo("slow", 1.0);
        },
        function () {$(this).fadeTo("slow", 0.3);
        }
    );
});

动画效果

jQuery还提供了一种简便的方法来为元素添加动画。animate方法的语法是.animate( properties, [duration], [easing], [complete])。

  • properties：动画期间变化的CSS属性映射。
  • duration：确定动画持续时间的字符串或数字。
  • easing：用于过渡的缓动函数的名称。
  • complete：动画完成后调用的函数。

一个非常酷且简单的网站图标列表示例，只需在图像上注册悬停事件。鼠标移入时，设置top=-15；鼠标移出时，再次设置top=0。

$("#divSocial a img").hover(
    function () {
                    $(this).animate({ top: "-15" });
    }, 
    function () {
                    $(this).animate({ top: "0" });
    }
);

不要忘记设置图像的相对位置。

#divSocial a img
{
    position: relative;
    border: none;
}

创建选项卡控件

您可以使用jQuery轻松创建复杂的选项卡控件。让我们开始学习如何快速创建选项卡控件。创建选项卡标题或选项卡，方法是为每个元素分配ID，就像我分配“tab1”、“tab2”和“tab3”一样。通过分配CSS类“selectTabHeader”将第一个元素设置为选中状态。

现在创建选项卡内容区域。我为每个选项卡内容创建了单独的div。将内容div的ID分配为“tab-data”，就像我在给定示例中分配的一样，并为具有与父选项卡按钮相同ID的div分配虚拟CSS类。我分配了CSS类“tab1”、“tab2”和“tab3”。

<div id="tabArea">
    <div id="tabHeader">
        <a id="tab1" class="tab selectTabHeader">Tab 1 </a>
        <a id="tab2" class="tab">Tab 2</a>
        <a id="tab3" class="tab">Tab 3 </a>
    </div>
    <div id="tabData">
        <div id="tab-data" class="tab1 selectedTab">
            tab 1 data
        </div>
        <div id="tab-data" class="tab2">
                tab 2 data
        </div>
        <div id="tab-data" class="tab3">
            tab 3 data
        </div>
    </div>
</div>

默认情况下，通过CSS隐藏所有选项卡内容区域，并且仅显示选中的选项卡内容。

#tab-data
{
    display: none;
}
        
#tab-data.selectedTab
{
    display: block;
    color: black;
    background: white;
    height: 400px;
    padding: 5px;
}

注册所有标题按钮的点击事件。在点击元素时，从上次选中的元素中删除“selectTabHeader”CSS类，然后使用命令将选中的CSS类分配给被点击的元素。

$('.selectTabHeader').removeClass('selectTabHeader');
$(this).addClass('selectTabHeader');

对内容区域使用相同的技术。从上次选中的选项卡中删除CSS类“selectedTab”，并将此类分配给选定元素的内容区域。

只需获取被点击元素的ID。假设用户点击了“tab2”。使用命令从上次选中的内容中删除“selectedTab”类。

var v = this.id;
$('.selectedTab').removeClass('selectedTab');


$('.' + v).addClass('selectedTab');

现在您需要显示选定元素的内容区域。只需找到具有与选定元素ID相同的CSS类的HTML元素。假设是“tab2”，将“selectedTab”CSS类分配给该元素。

$(document).ready(function () {

    $('#tabHeader a').click(function () {

            // Set header
            $('.selectTabHeader').removeClass('selectTabHeader');
            $(this).addClass('selectTabHeader');

            // Show Actual area
            var v = this.id;

            $('.selectedTab').removeClass('selectedTab');

            $('.' + v).addClass('selectedTab');
    });
});

创建轮播

阅读完前面的主题后，您现在已经掌握了创建高级UI控件的足够知识。在此示例中，我将解释如何创建一个轮播，该轮播将以滑动方式更改图像。用户还可以使用导航按钮更改图像，也可以直接使用数字选项转到图像。编写如下HTML：

<div class="advanceCarousel">
    <div class="carouselWindow">
        <div class="imageReel">
            <div class="image">
                <a href="#" target="_blank" >
                    <img src="images/b1.jpg" />
                </a>
                <div class="description">
                    Here is a description of first image
                </div>
            </div>
            <div class="image">
                <a href="#" target="_blank" >
                    <img src="images/b2.jpg" />
                </a>
                <div class="description">
                    Description of second image
                </div>
            </div>
            <div class="image">
                <a href="#" target="_blank" >
                    <img src="images/b3.jpg" />
                </a>
                <div class="description">
                    I am going to write 3rd image.
                </div>
            </div>
        </div>
    </div>
    <div class="paggingBar">
        <div style="float: left;">
            <a class="aNav" href="javascript:RotatePrevious();"><<</a>
        </div>
        <div style="float: right;">
            <a class="aNav" href="javascript:RotateNext();">>></a>
        </div>
        <div class="paging">
            <a href="#" rel="1">1</a>
            <a href="#" rel="2">2</a>
            <a href="#" rel="3">3</a>
        </div>
    </div>
</div>

在ready函数中，为第一个元素分配活动CSS类。之后，确定整个卷轴的宽度。获取窗口的宽度，然后获取图像的总数。将宽度乘以大小，您将获得卷轴的总宽度。然后将此宽度分配给imageReel CSS类。

$(".paging a:first").addClass("active");

//Get size of images, number of images, Determine the size of the image reel.
var imageWidth = $(".carouselWindow").width();
var imageSum = $(".imageReel .image img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".imageReel").css({ 'width': imageReelWidth });

图像旋转方法也有非常简单的逻辑。您只需要确定图像卷轴的左侧位置。因此，获取活动图像的索引。将其乘以图像宽度以确定滑动距离。然后为left CSS属性添加动画。

rotate = function () {
    var triggerID = $active.attr("rel") - 1; 		//Get number of times to slide

    var image_reelPosition = triggerID * imageWidth; 	//Determines the distance 
						//the image reel needs to slide

    $(".paging a").removeClass('active'); 		//Remove all active class
    $active.addClass('active');

    //Slider Animation
    $(".imageReel").animate({
        left: -image_reelPosition
    }, 500);
};

startRotation()是一个启动旋转的方法。它会在一段时间后选择下一个活动元素，并调用rotate()来显示此活动图像。

function startRotation() {

    play = setInterval(function () {

        $active = $('.paging a.active').next();

        if ($active.length == 0) {
            $active = $('.paging a:first'); //go back to first
        }

        rotate();  //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds 
}

注册页码的点击事件，当用户点击时，将其选为活动元素，并立即滑动到该图像。

$(".paging a").click(function () {
    $active = $(this); //Activate the clicked paging

    //Reset Timer
    RotateImmediate();

   return false; //Prevent browser jump to link anchor
});

滑动下一张和上一张的功能也非常简单。获取当前元素，然后找到您要导航到的下一个或上一个元素，然后调用RoatateImmediate()方法。

function RotateNext() {
    var next = $('.paging a.active').next();
    if (next.length > 0) {
        $active = next;
        RotateImmediate();
    }
}

function RotatePrevious() {
    var next = $('.paging a.active').prev();
    if (next.length > 0) {
        $active = next;
        RotateImmediate();
    }
}

历史

  • 2011年8月28日：初次发布。
© . All rights reserved.