在《网页制作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>

HTML Jquery；marquee标签的更多相关文章

  1. 文字滚动效果，jquery和marquee标签

    链接:https://pan.baidu.com/s/1pMwHYH1 密码:r9ys marquee标签是微软创建的,后来大部分浏览器都适用后,微软在IE8把这个标签去掉了.为符合W3C规范,还是使 ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. marquee标签弹幕效果

    播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...

  4. marquee 标签 文字滚动

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

  5. marquee标签滚动效果

    <marquee></marquee>标签,默认从最右侧往左滚动: direction:设置滚动的方向: height:设置标签高度, width:设置标签宽度: behavi ...

  6. jQuery 浮动标签插件，帮助你提升表单用户体验

    浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQue ...

  7. JS魔法堂：通过marquee标签实现信息滚动效果

    一.前言   有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅. ...

  8. HTML<marquee>标签

    <marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容.<marquee>标签的属性主要 ...

  9. HTML ---滚动条样式代码及<marquee>标签的用法;

    html中滚动条属性设置 scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overfl ...

  10. marquee 标签的使用详情

    <marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容.<marquee>标签的属性主要 ...

随机推荐

  1. 我给自己的Sass+Compass，在Windows下写个bat，快速cd到我的sass目录

    在Windows下,我总是要打开Ruby的cmd来进行Sass,其中要写好多cd,次数多了,自己的多敲,的确能记得更牢靠,但是无形中会浪费自己的一点点敲cd命令的时间,所以我想到自己在windows下 ...

  2. 第十一篇：web之Django之Form组件

    Django之Form组件   Django之Form组件 本节内容 基本使用 form中字段和插件 自定义验证规则 动态加载数据到form中 1. 基本使用 django中的Form组件有以下几个功 ...

  3. C#后台验证身份证号码的一个方法

    简单的调用了正则表达式进行简单的验证,记下来留着以后备用 if ((!Regex.IsMatch(txtID.Text, @"^(^\d{15}$|^\d{18}$|^\d{17}(\d|X ...

  4. struts中调用servlet的两种方法——IcC方式和非IoC方式的代码demo

    package com.java1234.action;//所在的包 import java.sql.Connection;//数据库连接的类 import java.util.ArrayList;/ ...

  5. Unity3D 之UGUI 按钮

    新建一个按钮 按钮对应的属性 按钮下面只有一个文本的 游戏对象,是Button对应的显示文字 Interactable -->是否可以交互 Transition -->变换,对应各种关于按 ...

  6. Discuz!nt整合心得

    最近研究了下Discuz!nt的整合,因为是网上找的实例,有个地方的写错了,导致纠结了一整天,这里分享出来. Discuz!nt提供了整合工具DiscuzToolkit,用于调用Discuz!nt A ...

  7. SQL Server调优系列基础篇 - 子查询运算总结

    前言 前面我们的几篇文章介绍了一系列关于运算符的介绍,以及各个运算符的优化方式和技巧.其中涵盖:查看执行计划的方式.几种数据集常用的连接方式.联合运算符方式.并行运算符等一系列的我们常见的运算符.有兴 ...

  8. 八卦某 G 的前端开发方式及流程

      他山之石,可以攻玉. 话说本人从毕业到现在一直在某 B 公司工作,前些年折腾过不少开发方式和工具,但总觉得或许有更好的方案,所以很好奇其它公司内部是如何工作的,我曾经浏览过某 Y 公司内部无所不包 ...

  9. 工作中的问题解决 -- (win2003 asp.net) Session和带页面回传的方法无法正常使用解决方案

    公司BP&IT项目组.从上上个月成立开始开发BP&IT软件.这个月开始测试我悲剧的发现他尽然不支持我电脑上的IE11.半个多月还没解决 我们先来分析下原因首页 登陆页面正常浏览 htt ...

  10. ubuntu intelliJ IDEA 12.1.4 安装

    1 php插件 http://plugins.jetbrains.com/plugin/?id=6610 把插件下载到一个目录下,如果插件不兼容,多试几个版本! 2 打开ide, FILE -> ...