在《网页制作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. 【转】Android 应用测试总结

    前提所有的功能分支已完成 启动:1. 启动入口:桌面正常启动,最近运行启动,所有程序列表中启动,锁屏快捷启动2. 其他入口:从其他程序开启应用,从外部以文件形式打开应用(如果有)3. 退回:从其他程序 ...

  2. union的用法

    union的用法 union用来连接两个查询语句,把两个查询语句的查询结果合并起来,两个查询语句的查询字段个数必须一样,否则会出错,查询的字段可以不一样,类型也可以不一样,但是这样查询的意义不大,如果 ...

  3. JDBC对sql server的操作

    1.过程: 1>注册驱动器类:Class.forName()       2>连接数据库:             String url = "jdbc:sqlserver:// ...

  4. （一）问候Hibernate4

    第一节:Hibernate 简介 官网:http://hibernate.org/ Hibernate 是一个开放源代码的对象关系映射框架,它对JDBC 进行了非常轻量级的对象封装,使得Java程序员 ...

  5. ios 从微信返回自己的app

    有这样一个需求.从我们自己的app分享内容到微信.点击分享内容返回到我们自己的app.(新浪微博的内容分享到微信就是这样的) 前面一直百度,谷歌都没用.可能我用的方法跟他们不一样吧.而且他们的方法都比 ...

  6. mysql笔记之主从切换

    一. 正常切换 1)从服务器检查SHOW PROCESSLIST语句的输出,直到你看到Has read all relaylogwaiting for the slave I/O thread to ...

  7. java新手笔记16 面积

    1.图形类 package com.yfs.javase; public class Shape { //计算面积方法 public double getArea() { System.out.pri ...

  8. javascript在html中使用 第10节

    javascript在html中使用 index.html: <html> <head> <title>javascript</title> <s ...

  9. python+sqlite3

    一个小例子, # -*- coding:utf-8 -*- ''' Created on 2015年10月8日 (1.1)Python 2.7 Tutorial Pt 12 SQLite - http ...

  10. Oracle的安装

    本人所使用的数据库平台为Oracle 11g 1.下载Oracle Oracle官网即可下载Oracle平台.不过网上资源丰富,大家也可在百度云网盘找到合适的版本. 附上本人网盘里存储的各个Oracl ...