在《网页制作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. 20160314 Request 和Response

    一.Response 1.Resonse的继承结构: ServletResponse--HttpServletResponse 2.Response代表响应,于是响应消息中的 状态码.响应头.实体内容 ...

  2. 使用XMl序列化器生成xml文件

    生成XML文件 创建几个虚拟的短信对象,存在list中 备份数据通常都是备份至sd卡 使用StringBuffer拼接字符串 把整个xml文件所有节点append到sb对象里 sb.append(&q ...

  3. tableview刷新某个区域（section）或者某一行（row）

    //一个section刷新 NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:2]; [tableview reloadSections:in ...

  4. 如何在Angular2中使用Forms

    在Angular2中形成两个基本对象是Control和ControlGroup. 控制用户输入 Control 一个控制表示一个输入字段(ngFormControl) 一个控制可以绑定到一个input ...

  5. 在ARM Linux 使用 Valgrind

    Linux valgrind 移植到ARM-Linux  一.Cross-Compile/交叉编译 (1)下载及解压Valgrind-3.11 (2)修改confirure 将armv7*)修改为ar ...

  6. 【BZOJ1042】【DP + 容斥】[HAOI2008]硬币购物

    Description 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4.某人去商店买东西,去了tot次.每次带di枚ci硬币,买si的价值的东西.请问每次有多少种付款方法. Input 第一 ...

  7. Name control

    static: (Page 406) In both C and C++ the keyword static has two basic meanings, which unfortunately ...

  8. 自定义类模板 重载<<遇到的问题

    类内声明 friend ostream& operator<<(ostream& os,const store<T> &item); 类外实现 temp ...

  9. mysql导入导出.sql文件 备份还原数据库

    从数据库导出数据库文件:   进入你的MySQL的安装目录的bin目录或者在C盘的根目录都行,我选的是在bin目录下,下面的例子出第一个外将以在C盘的根目录来讲解   我的mysql安装在了C盘,C: ...

  10. mybatis（）

    ---------------------------------mysql分页---------------------------------- public void selectList(in ...