HTML Jquery;marquee标签

在《网页制作Dreamweaver(悬浮动态分层导航)》中,运用到了jQuery的技术,轻松实现了菜单的下拉、显示、隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery具体是如何使用的,以下会详细讲述jQuery的基础用法:

1、安装:

http://jquery.com/download/登陆这个jQuery的下载站点,里面有以下几个选项:

一般的开发者选择(1)下载就可以了,文件比较小,也够用,当然需要开发jQuery的可以下载(2)

下载完成后,进入DW,在.html文件的<head>标签中导入,例:

<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js">

</script>
</head>

(HTML5不需要写type="text/javascript")

——————————————————————————————

2、语法和选择器:

   $(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素——选择器
  • jQuery 的 action() 执行对元素的操作——事件

  selector选择器的用法:

语法

描述

$(this)

当前 HTML 元素

$("p")

所有 <p> 元素

$("p.intro")

所有 class="intro" 的 <p> 元素

$(".intro")

所有 class="intro" 的元素

$("#intro")

id="intro" 的元素

$("ul li:first")

每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']")

所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head")

id="intro" 的 <div> 元素中的所有 class="head" 的元素

事件

定义

即当HTML中发生某些事(点击、鼠标移过等)的时候调用的方法

$(selector).action()

触发

事件的触发有两种方法:

1、直接将事件click写在<javascript>中

<head>

<script type = "text/javascript"src="/jquery/jquery.js">

</script>

<script type="text/javascript"> $(document).ready(function()

{

  $("button").click(function(){ $("p").hide();

});

});

</script>

</head>

<body>

<button type="button">点击这里让文字消失</button><p>我会消失</p>

</body>

*各种Event函数的写法和作用:

Event 函数

绑定函数至

$(document).ready(function)

将函数绑定到文档的就绪事件(当文档完成加载时)

$(selector).click(function)

触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)

触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)

触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)

触发或将函数绑定到被选元素的鼠标悬停事件

2、在body标签中通过onclick引用已经写好的方法:

<head>

<script>

function visible1()

{

  $("p").hide();};

</script>

</head>

<body>

<input type="button" onclick = "visible1()" value = "点这里让文字消失"/><p>我会消失。</p>

</body>

常用的jQuery函数

1、隐藏/显示/隐藏显示切换:  .hide()     .show()      .toggle()

2、淡入/淡出/淡入淡出切换/   fadeTo:  .fadeIn()    .fadeOut()    .fadeToggle()    .fadeTo("时间","透明度")

3、滑动:           .slideDown()    .slideUp()    .slideToggle

4、动画效果:         .animation({css样式表的属性值},"slow/fast/自定义时长(毫秒,去掉外面的双引号)")

5、停止动画:         .stop() 适用于所有jQuery效果函数,包括以上列举的几种,停止正在执行的所有动画效果

6、Callback的用法:在动画执行完成后进行下一函数的执行,如下面用下划线标识出来的部分即为Callback:

<script type="text/javascript">

$(document).ready(function()

{

  $("button").click(function()

{

  $("p").hide(1000,function()

{

  alert("The paragraph is now hidden");

});

});

});

</script>

7、Chaining:几种函数的链接,如:

<script>

$(document).ready(function()

{

  $("button").click(function()

{

  $("#p1").css("color","red").slideUp(2000).slideDown(2000);

});

});

</script>

页面的自动滚动效果,可由javascript来实现,

但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制。

使用marquee标记不仅可以移动文字,也可以移动图片,表格等.

语法:<marquee>...</marquee>; 说明:在标记之间添加要进行滚动的内容。

重要属性:

1.滚动方向direction(包括4个值:up、 down、 left和 right)

  语法:<marquee direction="滚动方向">...</marquee>

2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)

  语法:<marquee behavior="滚动方式">...</marquee>

3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)

  语法:<marquee scrollamount="5">...</marquee>

4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)

  语法:<marquee scrolldelay="100">...</marquee>

5.滚动循环loop(默认值是-1,滚动会不断的循环下去)

  语法:<marquee loop="2">...</marquee>

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

代码示例:

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head>

<body>

<div><marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">

指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...</marquee></div></body></html>

上一篇:mvc 中的 [ChildActionOnly] 和 [NonAction]


下一篇:【Flex教程】#009 As/typeof /instanceof /is的作用