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>
HTML Jquery；marquee标签的更多相关文章
- 文字滚动效果，jquery和marquee标签
链接:https://pan.baidu.com/s/1pMwHYH1 密码:r9ys marquee标签是微软创建的,后来大部分浏览器都适用后,微软在IE8把这个标签去掉了.为符合W3C规范,还是使 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- marquee标签弹幕效果
播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...
- marquee 标签 文字滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- marquee标签滚动效果
<marquee></marquee>标签,默认从最右侧往左滚动: direction:设置滚动的方向: height:设置标签高度, width:设置标签宽度: behavi ...
- jQuery 浮动标签插件，帮助你提升表单用户体验
浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQue ...
- JS魔法堂：通过marquee标签实现信息滚动效果
一.前言 有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅. ...
- HTML<marquee>标签
<marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容.<marquee>标签的属性主要 ...
- HTML ---滚动条样式代码及<marquee>标签的用法;
html中滚动条属性设置 scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overfl ...
- marquee 标签的使用详情
<marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容.<marquee>标签的属性主要 ...
随机推荐
- WPF 皮肤之MathApps.Metro UI库
在WPF中要想使用Metro风格是很简单的,可以自己画嘛.. 但是为了节省时间,哈,今天给大家推荐一款国外Metro风格的控件库. 本文只起到抛砖引玉的作用,有兴趣还是推荐大家上官网,Thanks,官 ...
- nyoj832 合并游戏（状态压缩DP）
题意 : n个石子, 给你一个n*n矩阵, A[i][j]表示第i个和第j个合并蹦出的金币值, 合并完石子 j 消失.求合并所有石子后,所得的最大金币数. 分析 : 1. 题中给的数据范围 ...
- cordova 创建ios项目
cordova create fmscmsios1023 com.weilian.fmscms fmscms cd fmscms cd fmscmsios1023/ cordova platforms ...
- ios专题 - 委托模式实现
在ios中,委托模式非常常见,那委托模式是什么? 委托模式是把一个对象把请求给另一个对象处理. 下面见例子: #import <UIKit/UIKit.h> @protocol LQIPe ...
- window redis 安装配置
1 下载 https://github.com/MSOpenTech/redis/releases 当前最新版本为 redis-2.8.21 下载的为zip包,下载连接为:https://gith ...
- webService学习记录
服务端配置1.新建web项目,导入xFire的jar包2.创建服务接口.实现类3.创建src->META-INF->service->service.xml 将实现类.接口配置到里面 ...
- Cogs 1008. 贪婪大陆(树状数组)
贪婪大陆 难度等级 ★★ 时间限制 1000 ms (1 s) 内存限制 128 MB 测试数据 10 简单对比 输入文件:greedisland.in 输出文件:greedisland.out 简单 ...
- Linux Master/Baremetal Remote 配置下的裸机调试
为了实现在ZC702开发板上的两颗Cortex-A9处理器上实现Linux Master/Baremetal Remote 配置,并对Remote端的裸机程序进行调试,需要注意的几点如下: 一.建立p ...
- [java bug记录] java.util.zip.ZipException: invalid code lengths set
1. 描述:将代码迁移到maven工程,其中用ZipInputStream读取/src/main/resources下的zip文件时报错:“java.util.zip.ZipException: in ...
- Mac苹果电脑加密视频播放器使用教程
1. 下载文件 https://pan.baidu.com/s/1slhFYuL 2. 操作流程 温馨提示 播放时,请务必保证播放设备联网(原因:用户名权限验证需要网络,播放后10秒即可关闭 ...